概要
Photoshopの応用機能解説です。
この記事では「アートボード」機能を紹介します。
アートボードの基本
まず、アートボードを有効にするには新規作成の際にチェックを入れておく必要があります。
こうすることでアートボードが有効になります。
レイヤーや作業エリアに「アートボード」の記述があれば有効になっています。
アートボードはPhotoshop上で複数の画面を編集するための機能です。
Webサイトデザインをするときには複数ページやPCとスマホのバージョンを作る必要があるので欠かせない機能です。
単体の画像の補正→アートボードなし
Webサイトなどの複数ページ→アートボードあり
にするようにしましょう。
アートボードなしで始めてしまうと、あとからアートボードの追加が非常に混乱する事態になるので、新規立ち上げの際のチェックの有り無しは間違えないようにしましょう。
アートボードツール
アートボードを編集するにはアートボードツールを使います。
このツールに切り替えたらアートボード名をクリックしてみましょう
４辺に「＋」のマークとバウンディングボックスが表示されます。
バウンディングボックスの下をドラッグして、サイトの長さを長くしましょう。
webサイトデザインの場合は横幅を変更することはあまりありません。
「＋」のマークをクリックすると新規でアートボードが追加されます。
このアートボードのサイズはもともとあったサイズと同じものが新規で追加されます。
アートボードを選んだ状態で、プロパティにも注目してみましょう。
ここから幅や高さを変更することができます。
プリセットでは「モバイル」つまりスマホのサイズにも変更できますが、これはあまり活用していません。解像度の関係から100%表示された時に拡大表示されてしまうサイズになります。
そのため手動で375pxや390pxなどのサイズを指定することが多いです。
（書き出される画像のサイズが小さくなる問題があるが、これは画像アセット機能をうまく使うと門外が回避できます。）
レイヤーの部分でアートボードの名称は変更できます。
アートボードの移動
アートボードはキャンバス上で移動ができます。好きな位置に移動して作業しましょう。
アートボード内のレイヤーが増えたり、アートボードが増えるとphotoshopの動作が重くなります。
Webサイトデザインにおいては3枚程度の数にとどめ、それ以上はファイル分けしたほうがいいでしょう。
多くのアートボードを扱うような作業をしたい場合はphotoshopではなく、figmaを使用しましょう。
figmaではアートボードが100枚あっても重くなることはありません。
隣にスクリーンショットを置いて作業するには
初学者にとって、既存のいいデザインのWebサイトほど勉強になるものはありません。
サイズや余白の感覚を身につけるまでは、見本のサイトを隣に起き、おおいに参考にすると良いでしょう。
茶道や剣道における「守破離」の考え方と同じです。
学習のためと割り切ってちゃんと真似をするのが上達の近道です。
使用するプラグイン
次のプラグインを導入すると便利です。
上記のリサイズアプリとスクリーンショットのアプリを駆使して、制作する横幅のサイトの画像を入手しましょう。
そしてアートボードを画像の横幅と同じにします。
画像を埋め込み配置しましょう。
埋め込み配置の際に「W」の値を変更できるので、ここを任意の値にするとスマートに配置できます。
- 上記のプラグインを追加
- 参考サイトを表示する
- 【PCサイズの撮影】ウインドウリサイズのプラグインで任意の幅に変える
- 【PCサイズの撮影】スクリーンショットプラグインでサイト全体を撮影する
- 【SPサイズの撮影】モバイルシミュレーターのプラグインで任意の幅に変える
- 【SPサイズの撮影】モバイルシミュレーターのプラグインでサイト全体を撮影する
- アートボードを作成する
- アートボードに配置を行う
