メディアクエリでレイアウト2

とりあえずヘッダ部分をつけました。

http://mcre.ojaru.jp/test/

まぁ、のっぺりしてんなぁという印象でしかないですがｗ

フラットデザインがはやりみたいなことも言われてますが実際のところどうなんでしょうね。Win8登場時はダサいの声が圧倒的だったと思いますが。

とは言え、へっぽこクオリティしか提供できないでしょうから自分の実力的には相応かもしれません。仕事のほうではわかり易さよりも一昔前のかっこいいとかの雰囲気を要求されることが多いのでこういうシンプルなものをやりたくもなるのです。

しかし、PCでブラウザ800pxほどのウインドウサイズにしたときはロゴでかすぎとも思いますがｗ

ウインドウ幅による画像のサイズ可変はメディアクエリ関係なくイメージ要素のwidth指定を実際の画素数ではなく”％指定”することで可変してくれます。heightのほうは数値を入れません。

今回のロゴはwidth100%で指定していますが親要素の入れ物であるid=logoの幅指定がPCサイトでは30%指定なので、その30%の中でめいいっぱい広げて表示ということになります。

ブラウザサイズが800px以下になるとid=logoの指定も幅100%になるためロゴ画像はブラウザ幅の端から端まで表示してくれるようになります。

でも旧nexus7で確認したけど縦位置でも自動でPCサイトの状態で縮小して表示するんですよねぇ。実機による800px以下時の表示イメージが確認できないので果たしてどうなっているのやら。。。

メディアクエリでレイアウト

とりあえず、リニューアルに向けてざっくりしたレイアウトを決めました。

http://mcre.ojaru.jp/test/

メディアクエリを始めて使ってみたわけですが、商用サイトにするわけでもないのでPC用は幅970pxの2列、もう一方は解像度800pxを割ると1列レイアウトにしました。PCのブラウザで幅を広げたり狭めたりすれば確認できます。モニタが古い解像度800だと当然無理ですがｗ

1列使用になると「sid」の部分が消えるわけですが、今もそうですがテキストだけじゃ殺風景という理由で広告貼ってるようなもんなので1列になったら別にいらないですよね。

こういう解像度にあわせてレイアウトが変更することに興味がある人はメディアクエリで検索かければ私の説明なんかよりはるかに有意義なのが見つかるので探してみてください。

次回はロゴ作成でも着手しますかね～。

レスポンシブＷＥＢデザイン参考まとめ

どうにも久しぶりで別段リピーターで観てる人なんていないでしょうが、どうにもフリーランスになってから仕事とプライベートの境があいまいでダラけ率上がっており、漫画の描き方はおろか本職であるホムペ作りの情報収集もおろそかになってきてて、我ながらあまりにも酷いと思ったので漫画考察のリニューアルを通して、それぞれの作業時間を取り戻そうという動きと相成りました。

まぁ、突発依頼が多いのでどこまで作業時間作れるか不明ではありますが、とりあえず始めてみます。

まずリニューアルの前提としては、最早何もしていない漫画考察に未だ1日100アクセスほど頂いているので、元々は自分の絵の上達の予習・復習の場としてやっていたものですが現状自分が絵に割ける時間は後回しにしなければいけない立場になったのでユーザーにとって絵･漫画の上達に役立つ記事をまとめるところにしてみようか検討中です。

自分自身としてはひっそりあったホムペ考察方面での血肉としていけたら良いなと思ってます。なので当分はホームページ作成にも興味のある人なら多少読める内容にはなるのかも？

で、最初のお題としてリニューアルデザインはレスポンシブＷＥＢデザインを検討しているわけですが、アクセス解析を見る分にはユーザーのブラウザ環境がＩＥが一番ですが2位、3位にサファリとアンドロイドブラウザが入ってきてるのでやはりスマフォ・タブレットでの閲覧者が多いと推測されるためＰＣ・携帯機器両方で最適化されることを前提としたレスポンシブＷＥＢデザインを調べていこうとなったわけです。

とりあえずさくっと検索かけて出てきたところです。

概要から主な作成方法まで説明
http://ascii.jp/elem/000/000/700/700611/ http://webdesignerwork.jp/web/responsivewebdesign/

レスポンシブＷＥＢデザインで気にいったサイトのリンク
http://responsive-jp.com/

レスポンシブＷＥＢデザインに対する留意事項
http://web-tan.forum.impressrd.jp/e/2013/10/18/16248

これらを参考に次回以降実際の作成工程奈緒を掲載していく予定です。・・・・予定ですｗ

手の塗り

ホムペに載せた両手を広げるでもっとまともに手のひらを塗れないかと思ったのでとりあえず自分の手から色とって現在粗塗り中です。

実写にかぶせてる分には激しい違和感はそれほどないですが粗塗りとは言え背景を白にすると。。。

スゲーー汚いｗｗｗ
でも色自体はスポイトツールでとってるので大きな間違いではないのは確かです。日陰気味なところで撮ったのを差し引いても実際の人間の色を単色で抽出すると茶色いのが多いんですよね。

さて、ここから精度を上げていけるか投げ出してしまうかどうなりますか。。。にしても俺の指は短いなぁ。。。

漫画考察　- 漫画の描き方を考える -

鎖の作り方

今回描き方じゃなくてphotoshopのほうです。短時間で作れるのを考えればそんな悪くないできっぽかったので一応載せておこうかなと。

まぁ、あまりにでかいとやっぱりたいしたことはないのですがある程度の大きさであればそこそこみれると思います。

まずは角丸長方形ツールで鎖の輪郭に見えるまでの角丸半径の数値を設定しグレー系の色で塗りつぶす→塗りつぶした範囲を選択範囲に読み込み、程よいわっかになるぐらいにまで選択範囲を縮小して塗りつぶしを消去→レイヤースタイルでペベルとエンボス付けて陰影を光沢輪郭に。角度やハイライト・シャドウの不透明度はお好みで。

次に新規レイヤー追加し、フィルタ/描画/雲模様1で塗りつぶす。さらにフィルタ/スケッチ/クロムを適用。それにフィルタ/ぼかし/移動（90度）で線状になるぐらいまでぼかす。レイヤーの描画モードをビビットライトに。で先に作ったわっかの選択範囲を読み込み反転させて同じ形状にする。

もう一度新規レイヤー追加しフィルタ/描画/雲模様1で塗りつぶす。フィルタ/ノイズ/ノイズを加える。フィルタ/ぼかし/移動（90度）で線状になるぐらいまでぼかす。後はさっきと同じように選択範囲を読み込み反転し同じ形状に。描画モードはお好みで色々動かしてみるとよいです。私は焼きこみリニア。

で、これら3つをレイヤーセットに入れて結合。そのレイヤーを複製し移動ツールで横に縮め平たいほうを作る。当然ながら鎖部分も細くなるので数枚レイヤーを複製し横にスライドを繰り返し厚みを作る。

後は交差するように位置調整をし真正面の鎖の選択範囲を読み込み横向きの鎖の奥側となる部分を消しゴムで消すだけ。これの繰り返しでピンと張った鎖であれば簡単に出来ます。

漫画考察　- 漫画の描き方を考える -

ペンギン

こんばんは、ネーム作りはいまいちはかどらず15ページまでしかいってません。仕事でも文言考えてたりしてるからネーム的にも今、文言に気を使うシーンだったりするので、いまいちやる気がおきんのです。

水曜はホムペ関係の技術向上の作業って計画を立てているのですが、ちらっとペンギン見かけて、ウィキから画像引っぱってトレースでもしてみるかってことでやっておりました。
当然まだ途中段階で、リアルさに挑戦って思いだったんですが、あんまよくなりそうもないかなぁ。。。まぁ、四苦八苦することも経験だから進めてはみますけど。、出来上がったらaiファイル共々、ホムペの素材にでもおいてみます～。

漫画考察　- 漫画の描き方を考える -

ネタメモ

すんまへん、完全に自分用のメモです、マンガとも関係ありません。その説明も書こうとしたんですが書き終わり寸前でブラウザが落ちて文章吹っ飛んだのでその気力もないんですｗ

メモ1：メタリック感強調案

元画像

複製後描画モード覆い焼きリニア

範囲選択で色域指定。白地の部分を選択後反転。新規レイヤーにグラデツールで右下から左上へ黒目の色で塗り。レイヤースタイルでペベルとエンボス。

歩く素材

年内ホムペコンテンツ、テキスト・視覚物10個ずつの目標とりあえず完了しました。最後にあげたのは素材用として歩いてるものです。まぁ、若干ぎこちないのです。。。トレースするために自分が歩いてるのをビデオで撮ってもらったんですがトレースのためにプリントスクリーンしやすいようにわざとゆっくり歩いていたのも要因のひとつっぽいです。よく考えたらコマ送りできるよな、われながらアホちゃんです(苦笑)

ホムペのほうにはFLAファイル（ヴァージョンMX）とアニメーションGIF用にZIP圧縮したPNG画像14枚が上がっています。ちなみに中央揃えだけでは微妙に前に進んでる感じが変なので何枚かの画像で前後の微調整がいります。

素材そのものを商品として扱う以外はご自由にお使いいただけますので、物好きな方はご使用ください。（著作権は放棄してません）

とりあえず、ホムペコンテンツ量の目標達成いたしましたので、来年以降は何とか質をあげられるようにしていきたいと思います。来年の目標は改めて漫画の投稿を出来ればと思うのですが、一応、収入の糧であるホムペ作りがどうも職場では上手くなれる気配を感じられないのでそっち方面の逡巡・妄言もしていければと思います。そして、ホムペのリニューアル。

進め方的にはマンガのネームとか描いていって気になることとかあれば逐一、立ち止まりブログやホムペで思考の整理とかしていきながらホームページ作成に関する技術の向上とかも計れれば万全だとは思うのですが、どうなりますかね。。。。

ま、早急な進歩など出来ないことはもはやわかりきっていることなので、1年の間でも一歩前進できてれば良いと思っています。皆様にとってもよい一年となりますように・・・ではでは。

漫画考察　- 漫画の描き方を考える -

後姿トレース

仕事が落ち着いて暇だなと思ったのも一日だけでした。また色々とやるようで。。。んなわけで、ちとその仕事の素材で後姿が欲しいなって言うことで簡単にトレースしたやつです。職場に持って行けば済む話でもありますが、ホムペのほうにもゆくゆくは素材とか作るつもりでもいましたのでとりあえず上げてみました。
職場では首ら辺までしか使わないのでもう良いのですがここではもうちょっと書き込んでいってみます。この段階では背中側リュック背負ってるのとかわかんなくて「何？」って感じですしねテーマ解析のほうはどうしたんだって話ですが(苦笑)･･･こんなんだから漫画作りも進まないんだろうなぁ。。。

ちなみにこの段階で使う人居ないとは思いますがサイズは894X1122と馬鹿でかいのであくまでも加工用としての素材です。PNG形式なのでIEだと透過部分は青っぽくなるのかな？フョトショップだのイラレだのでひらけばきちんと透過してるとは思いますが。

なんにせよ、もっと作りこんでからの話ですな。。。

漫画考察　-漫画の書き方を考える-

視角物作成工程2

さて前回の続きですが、あげたswfファイルにサイズ指定ないものだから
ブラウザ100%で表示されて、ちとびびりましたｗ
しかも粗がより目立つ目立つ。。。。
とりあえずホムペのほうには資格物･テキストともに
10個ほどできたら、本格的にクオリティ上げることやらな
妄言、行動していきたいとは思うのです。

一応今回は雛の動きをただ置いただけです。
さて次はこれをどう卵の中に入ってる感じにして
卵動かすのかとかいろいろ思ってます。
次のときは直接ホムペのほうへあげてます、多分。
ちなみにファイルは上書きされるらしいので前回のも同じになってるようです。
「sun.swf」をダウンロード

しかし、そんな中途半端な我がホムペですがやっぱり
更新すると検索表示上位に来るんですねｗ
今日現在yahooの検索にまで「漫画考察」で検索かけるとトップページに
表示されてました。。。無垢な状態で訪れちゃった人には申し訳ない限りです。
ごめんようぅ・・・いろいろ試したいんだよぅう。。。
でも、これより驚いたのはgoogleで「漫画　描き方」で検索かけたら
3ページ目に居やがりましたよｗ
これ一般的に検索かけて見る人もありえるよなぁ。。。
早く見栄えに耐えうるものにしなければ。。。。
まぁ、正直引っかかりやすいかも、というある程度のエロ心を出しつつ
作った構成ではあるのですがこんなにも早く反映するとはびっくりの一言です。
ちなみにトップ表示は似たような感じのサイト作っていた方なので追いつきたいなぁ。。。

なんにせよ、上位表示させたいのならホムペだけでなくSEOに強いといわれてる
ブログも併用するのはやはり効果的なようです。
何かやりたい人は試してみると良いかもですよん。

漫画考察　-漫画の書き方を考える-