Photoshop ITかあさん

ITかあさん

Photoshopのアセット機能でレイヤーごとに画像生成する方法

5年ぶりに真面目にPhotoshopでWebデザインをしたら何かどえらいことになってるんですね。

mark

久々にブログ更新します。(実家のお母さん、読んでますか?)

色々引っ越しの準備やら、新しい現場に移動だわ、なかなか書く時間が取れず長い期間ブログを放置しておりましたが久々の更新です。
突然ですがITかあさんは現在諸事情により

SEから5年越しでWebデザイナーに戻りました。

マルチでバイス時代のPhotoshopでWebデザインをどうすればいいのか分からない!

しまった!私のWebデザイナー時代にはPCサイトとガラケーしか無かった!!

今の時代はスマホ・タブレット・PC マルチデバイス。Retina対応させるとなると、画像は2倍の大きさで作って 半分に縮小した大きさで表示させなければなりませんね。

うん!そんなの知ってる! でもサイト1ページのデザインをPhotoshopで作る時はどうすればいいの??

分かりませんね、知りません。なのでそこは現役WEBデザイナーに聞くのが早いですね

教えてWEBデザイナー

ITかあさん
ちょっと分からないので誰か助けて。
Photoshopでサイトのデザインをするんですが、Retina対応する場合は単純に2倍の大きさのキャンバスで作ればよいのですか?
余白込みで横幅1500pxだった場合、Retinaにするなら倍の3000pxでサイトデザインするんですか?

画像アセットで2倍で書き出せるぞな。

書き出し
ITかあさん

・・・これ?

画像アセットで調べれば出てくるよ

ITかあさん

スマートオブジェクト
2倍書き出しのとき、画像をドラッグアンドドロップでスマートオブジェクトにして利用している場合は元が大きな画像(2倍以上のサイズ)であったとしても2倍の解像度を保持してくれないので気をつけてください…!
画像ファイルを配置してからスマートオブジェクト化しないとダメです!

ITかあさん

日本語でしゃべって。。

(笑)
画像はドラッグアンドドロップでキャンバスに直接持ってくると書き出した時にぼやけてしまいます

スマートオブジェクトではない方
ITかあさん
あ!このレイヤーにバッテンが付いている状態はスマートオブジェクトなんだ!

アセットをさらに詳しく解説

ITかあさん

アセットについて何となく理解したところで、実際にアセットで画像の自働切り出しをやってみます。
ちょっとレイヤーやグループ名の付け方にルールがあって面倒ですが、切り出しの手間が全て省けるので理解出来ると超絶便利です!

まずは普通にPSDファイルを準備します

普通のPSD
まずは普通にレイヤーが分かれた状態の普通のPSDファイルを準備します。

画像アセットをONにする

アセットをON

ファイル>生成>画像アセット

画像アセットにチェックが付いていることを確認します

レイヤー名をアセットのルールに従って変更します

アセット
アセットルールに従って、レイヤー名、またはグループ名を変更します。
アセットルールに従っていないレイヤーまたはグループ名は個別の画像として保存されません。

アセットルール

必要なサイズ ファイル名_出力画質.拡張子,必要なサイズ ファイル名_出力画質.拡張子

cat.jpg,200% cat_4.jpg

サイズに指定が無ければ等倍です。jpegやgifやpngの画像の種類によって設定できるアセットのパラメータは違いますので、さらに詳しいアセットパラメータについてはAdobe本家のこちらのページの「画質パラメーターとサイズパラメーターの指定」を確認してください。
1つのレイヤーやグループで複数サイズの画像が欲しい場合ではカンマ区切りにして別のアセットルールを設定すれば、2回に分けて切り出す必要もありません。

自働で保存された画像を確認

アセットされた画像ファイル
アセット化されたファイルはPSDと同じ階層にフォルダが生成され、そこに命名規則に沿ってレイヤー名がつけられたものだけが画像として切り出されます。

ITかあさん

いやー!本当に便利な時代になりましたね!
サイトデザインのキャンバスの大きさは等倍でも2倍でもどちらでもOKで、サイトのコーディングする時までにアセットで欲しい画像サイズをレイヤーまたはグループに設定すればOKってことで

無料で人物モデルの写真が手に入るサイト

女性の写真、子供の写真など、人物モデルの写真素材が無料で手に入るサイトを探しました。いずれも商用利用可能で高品質な写真ばかりです。

高解像度の人物モデルの写真が手に入るサイト

写真素材 足成【フリーフォト、無料写真素材サイト】

モデルの質も高い、非常にクオリティの高い素材が多いです。人物写真意外にも充実しています。全て無料でダウンロード可能で、高解像度でダウンロードも可能です。

日本人、外国人など様々な女性モデルの無料写真が手に入るサイト


女性を中心とした無料写真素材のサイトです。会員登録不要ですぐに利用可能です。日本人だけでなく、外国人モデルが多いのも特徴です。

自分好みのモデルから写真を選べるサイト


ポーズやカテゴリから写真を選ぶものは昔からありましたが、モデルから選ぶ写真素材サイトというのはなかなか珍しい試みですね。会員登録が必要ですが、無料で利用出来ます。

ちなみにこちらのサイトはフォトモデルになると3万円もらえるそうですよ。

ルックスに自信のある方は試してみては??

いつかどこかで使えるかもしれない、フリーテクスチャ画像まとめ

写真素材は無料に限る。だって会社が買ってくれないから。

そんなあなたはぜひフリーテクスチャ画像のまとめをチェックしてみてください!
何個あるんだろう 数えていないので分かりませんが・・・

High Quality Colorful Textures For Ambitious Designer

WEB制作に最適なミニアイコン集32

WEB制作に最適な32のアイコン集!かわいくてついつい見入ってしまいます!無料で今すぐ使えるアイコンばかりです!

シンプルで使い勝手のよいものばかり並んでいます!WEB制作に最適なミニアイコン集32
Useful Free Small Icons For Web Development Projects

これはすごい!iphone、Android 33のWEBキットまとめ

iphone、Android 33のWEBキットまとめ

先日 JqueryMobileなる iphoneサイトが簡単に作れちゃうプラグインを紹介しましたが、やっぱり事前にPhotoshopなんかでデザインの準備はしっかりしないとね!

iphoneだけじゃなく、Android、ipadなどの高品質なWEBキットが紹介されています。Photoshopデータなのも助かります!

Browser Form Elements PSD

Apple iPhone 4G .PSD

Galaxy まで・・・す、すごい。

Android 2.2 だってあります。

まだまだあります!こちらからどうぞ!
33 Hottest Web and Mobile UI, Wireframe Kits and Resources

Photoshopの代わりになる便利なフリーソフト


画像編集ソフトの王道はやはり『Photoshop』だけど、スペックの低いノートPCにはインストールするのをためらいます。
今日の更新にも使ってるノートPCも、軽くて小さい分、スペックも低いので余計なソフトは一切インストールできません。

そこで私が使っているのがPixlrという画像編集ソフトです。

pxlrの主な特徴

  • Photoshopと使用感が近い
  • インストール不要(インターネットにアクセスするだけ)
  • 日本語にも対応
  • レイヤー機能あり・レイヤー効果
  • 編集可能で保存(pxlr形式での保存ができる)

・・・と、こんな感じでいいところをあげるときりがないくらいです。
実はこのpixlrというソフトはFirefoxのアドオンでもあるんです!

このアドオンはホームページの1ページ丸っとキャプチャしたり、好きな部分だけ選択してキャプチャすることができるんです。

今までGIMPとか色々試したけど、Photoshopの代わり、となるとこれが一番使い勝手がよかったです

Pixlrはこちら!

今日のかあさん

今日のご姉弟

今日は実家に日帰りで帰省しました。電車とバスで60分くらいかな。暑すぎて外で遊べないので、新聞紙の雪をばらばらしていました。
息子が服を着ていないのは比較的いつものことなのでスルーで。