サイト作るよ05-画像切り出し

年末年始で「おい…おどれあの記事の続きはどないしたんや…」と何人かの方から言っていただいたので、久々に続き書きます。

※セリフ表現は事実と異なる場合があります


前回デザインが一応できました。
今度は画像を1つひとつ切り出して素材を作るよ。

あとこの記事、下書きだけはかなり前に書いていたので画像が古いですすみません。今はもうWin10使ってます。

フォルダを作る

サイトフォルダ

まずはサイトの画像やデータを格納していくフォルダを作ります。
作業フォルダでもマイドキュメントでも、お好きなところに新規フォルダを置きます。フォルダ名はサイト名にします。

このサイトフォルダ名は日本語で大丈夫なんですが、ここ以下は全部半角英数のフォルダ名・データ名を使います。

imgフォルダ

ではこのとなりのリクたんフォルダの中に「img」フォルダを作成します。画像関係は全部このimgフォルダに入れていく形になります。

各ページ用フォルダ

更にimgフォルダの中にもフォルダを作ります。
フォルダの分け方はお好みなんですが、トップページに置く画像用に「top」、その他のページなどでも使うサイト共通の画像用に「common」フォルダを作ってみます。

あとは今すぐ使いませんが、ギャラリーページにはリクたんの写真をたくさん載せるだろうということで「gallery」、リンクページにはよそのサイトさんのバナーがたくさん貼られるのだろうということで「link」フォルダを作りました。(下層ページまで作る予定はないのですが一応)

デザイン画から切り分ける

レイヤーに名付けしてアセット

この作業は画像スライスと呼ばれたりします。
Photoshopの場合として書きますが、それぞれのレイヤーの名前を例えば「title.png」とか「pict01.jpg」といった具合に改名します。

↓こんな感じ。

このレイヤーとこのレイヤー合わせて1つのアイコンなんだ!でも後で直すかもしれないから結合したくない!という場合は該当のレイヤーたちをグループ化(レイヤー複数選択した状態でctrl+G)して、グループ化されたレイヤーフォルダの名前を〇〇.pngなどにします。

画像名と拡張子の名付けが終わったらファイル>書き出し>画像アセット。すると一括でtitle.pngやpict01.jpg等さっき名前を付けた画像が書いた通りの拡張子で書き出されます。あとスライスツールというのもあって、任意の範囲ごとに画像を切り出せたりもします。

できるだけスマホのデザイン画から

前回も少し書いたように、PCデザイン画よりもスマホデザイン画の画像の方がサイズは大きくなっているはずです。
なので、どうせなら大きい画像を切り出しておくとPCデザインにも同じものを実装時に縮めて使い回せるのでできるだけスライスはスマホデザインからやっちゃいましょう。

個別に切り出したりする場合には単純にPCでの見た目サイズより2倍で切り出してください。例えば本当はブラウザ上で横20pxのアイコンにしたい時、実作業としては横40pxのサイズで切り出します。

その他省略するところ

あと、背景画像なんかはPCやスマホの画面用にトリミングする前の元画像をそのままフォルダに入れたらいいです。
例えばギャラリーページに載せる予定の新作イラストをトップページの背景にしたい場合もあるでしょう、そういう時はgalleryフォルダにイラストそのものが一枚入っていればトップ用にもう一枚トリミングした画像を用意する必要はありません。

「ギャラリーページとは別に背景画像だけ色を薄くしたい」とか「加算効果で青を乗せたい」とかいうことも、画像加工しなくてもCSSでできます。

この、画面いっぱいに置く背景画像サイズなんかはMacのレティナディスプレイ(解像度高いやつ)のことを考えると多分横幅5120pxくらい必要になるのですが、windowsのワイドモニタは1920pxが多いのでそのくらいあれば十分です。私はそこまでこだわらないので1900もないです。

png画像が重かったら

透過png、無駄に容量くったりしますよね。そういう時はここ開いて画像をドラッグ。軽くなります。DLしたら軽くなった印として「-min」が画像名に付くのではずしましょう。

Optimizilla

これは普通にイラストサイト作るくらいなら使わないと思うので軽く流しますが、私はゲーム制作の関係でpng画像を大量に圧縮します。すると全部minが付いて1つずつ名前変えるのめんどくさ〜い…ってなるんですよね。

そんな時にはバッチ処理というものを行います。いわゆるマクロみたいなもので、一括で名前修正なんかができるのです。もし何か作業してて困ったら「バッチファイル 作り方」とかで検索すると丁寧に教えてくれます。

画像をフォルダに分別する

画像が切り出せたら、先程作った各フォルダに分けていきます。

commonフォルダ

これはcommonフォルダ。全ページ共通要素であるヘッダー&フッターに使う画像と背景パターンを入れました。いっぬの写真サイトにPixivアイコンなんて必要ないんだけど、まぁ見本ということで…。

topフォルダ

これはtopフォルダ。トップページにしか載せないキャラクターブロックやリンクブロックの背景画像、ギャラリーのサムネイル画像などを入れています。

サムネイルは丸型でしたが、オンマウスで四角に変形させたいので正方形で切り出してます。これを後で丸くくり抜くイメージです、Twitterのアイコンみたいな。

サイトのバナー

サイトバナーはあんまり深い階層に置くとバナーURLがその分長くなっちゃうんですよね。このサイトにリンク貼ってくれる人にバナーURLを提示してあげる部分があるので、それを考えるとこんな奥のフォルダに入れなくてもいいです。imgフォルダ直下とか。私は一番上の階層に置いてます、ちなみにこの一番上の階層をroot(ルート)ディレクトリといいます。

サイトバナーのサイズは200×40pxです。これは2倍サイズにはしません。
拡張子はgifでなくても、pngでもなんでもいいのですが一度作ったら大抵同じ名前と拡張子のバナーを差し替え差し替え使っていくことになります。
私は時々バナーをGIFアニメにして遊ぶので、昔からずっとgifです…。

galleryフォルダ

galleryフォルダです。サムネイルをクリックした時にポップアップする大きな画像を入れました。

関係ありませんがリクさんは私を見つけると「さんぽ!!おやつ!!!なでなで!!!!」とテンションが爆上がりするので、私が撮った写真のほとんどはgallery02みたいなブレッブレの狂犬写真になります。かわいいね

切り出さない部分

長丸のボタンとか、「Story」「Character」などの左に付いているベタ塗りアイコンは切り出し不要です。

ボタンの丸みはCSSで作れるし、アイコンは今回これを使います。
Font Awesome

上記はちょっとソースを書くだけでいろんなアイコンをフォント文字の感覚で使える超便利なサービスです。色やサイズも自由自在。アニメーションも用意されてます、すごい!GARDでもいろんなページで使っています。

いや、アイコンはうちの子の顔イラストがよいのだ。という方はそれも忘れず画像書き出ししてください。

次回はhtmlを書くよ

画像の準備もできました。足りなかったら随時追加していけばいいや。
次回はいよいよhtmlでトップページの骨組みを作ってみますよ。