アイコン

2015-12-15

【PhotoShop】ウェブページのデザインや制作に便利!作業を効率化する7つの方法

今回は、ウェブページの制作に便利なやり方をまとめてご紹介します。

 効率化には欠かせないやり方だと思いますので、是非試してみてください。

1.【Photoshop】Illustratorのような整列・分布をする方法

Base

 Illustratorのような右揃えや左揃えや均等間隔に並べるといったことをすることが出来るやり方。

実はPhotoshopにも、イラストレーターのような整列・分布の機能があります。

その使い方を今回はご紹介します。

Photoshopってショートカットで使うことが多いツールに限って、こういう機能隠れてるんですよね・・・(笑)

 http://cubelic3.jp/alignment/

2.【Photoshop】画面外の色を取る方法

Base

ウェブページや画像など、Photoshop以外のところから色を取る方法。

Webや画像の色を調べるときってみなさんはどうしていますか?

Photoshopに一度読み込んでスポイトツールを使っている人結構いるのではないでしょうか。

しかし、そんなことをしなくてもPhotoshopの機能を使えば、簡単に画面の色を取り出すことができます。

 http://cubelic3.jp/color_picker/

3.【PhotoShop】修正に強いデータを作るスマートオブジェクト

Base

非破壊編集、フィルターのON・OFF、画像の一括管理などができるスマートオブジェクトの使い方。

スマートオブジェクトは簡単にいうと元の画質を保ったまま変形をしたり、別ファイルを埋め込む・・・といった使い方ができます。

 

スマートオブジェクトが出来ることは

1. 非破壊編集
2. スマートフィルター
3. 画像の一括管理(別ファイルの埋め込み)

です

ちなみに、このスマートオブジェクトですが、別ファイルとして扱われているので
レイヤースタイルや解像度の高い画像をたくさん使っている・・・といった理由で動作が重い場合でも、スマートオブジェクトに変換してしまえば編集可能な状態で動作を軽くすることも可能です。
※その分ファイルサイズは増えます

 http://cubelic3.jp/smart_object/

4.PhotoshopCCでレイヤーごとに画像アセットとして書き出す方法

Sample

レイヤーごとに画像を出力する事ができる方法。

 画像アセットとは、PSDファイルのレイヤーやレイヤーグループから、要素に適したサイズで画像の書き出しを自動で行ってくれるPhotoshopの新機能です。

また、この機能はPhotoshop CCで追加された機能なので、それ以前のバージョンでは使用する事が出来ません。

レイヤーごとにアセットとして書き出す方法をご紹介します。

 http://cubelic3.jp/photoshop12/

5.【Photoshop】レイヤー名を一瞬で一括変更する方法

Base

レイヤー名を一発で連番や特定の文字列に変更する方法。

アセット画像などで自動的に書き出す場合、被らないように1つ1つ名前をつけたり、拡張子を付け忘れたりした時にとてもめんどうです。

レイヤー名を一括で名前を変更できる方法をご紹介。

 http://cubelic3.jp/rename/

6.HTMLの基本構成まだ自分で0からしてるの?PhotoShopからHTMLとCSSを直接書き出す方法

Base

PSDデータから直接HTML形式に超速で出力できる方法。

photoshopやイラレのデータでページのデザインを受け取り、それをWeb用に書き出して位置を調整しつつコーディング

・・・という感じで結構大変なんですよね。このコーディング、Photoshopから直接できないものか・・・と前から考えていました。

なんと!PhotoShopの機能をフルに活用すればHTMLとCSSの書き出しまで、全て自動ですることが可能なんです!

その方法とは、JavaScript(JSX)を使います。

 http://cubelic3.jp/html_basic/

 

 7.色の組み合わせを自動で選択してくれるサービス

Base

ウェブ上のアプリですが、Adobe color CCを使うと色の組み合わせで相性のいいものを自動で選択してくれる便利なページです。

組み合わせに困った時などにおすすめです。

↓↓

https://color.adobe.com/ja/create/color-wheel/

 

 

フォトショップをもっと詳しく学びたい方はこの講座がオススメ