Home > スポンサー広告 > photoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/185-ac5ffd44
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > photoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。

Home > デザイン > photoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。

photoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。

psartboard_02.jpg

photoshopのアートボード機能を使えば、
sketchみたいにカンプを複数並べてデザインができます。
レスポンシブデザインはもちろんですが、PC/スマホサイトの各カンプをデザインしたり複数サイズのバナーパターンを同時に編集したりと結構使えたので、ご紹介。

※アートボード機能は、Adobe Photoshop CC 2015 から利用できます。

アートボードの使い方

[ファイル]→[新規...]で新規ファイル作成画面を開き
「ドキュメントの種類」から、「アートボード」を選択します。
さらに、「アートボードの設定」から、最初に作るアートボードのサイズを設定します。

あとでアートボードのサイズを自由に変更できるので、欲しいサイズがない場合は近いものを選んでおいても大丈夫です。

アートボードのサイズを変更する

アートボードツールは、[移動ツール]の中にあります。長押しして、[アートボードツール]を表示し、選択します。


もしくは、アートボードレイヤーを変更することでも、自動でアートボードツールに変わります。


既にあるアートボードのサイズを変えたいときは、アートボードレイヤーを選択して、
幅や、高さを設定します。数値でやりたいときは、パネルで。

*マウスで高さをぐぐーっと広げたいときは、アートボードレイヤーを選択すると、自由変形ツールのような表示になっているので、下の真ん中の四角を下に下げるだけでOK。

アートボードを選択した状態なら 矢印キー での移動や、shift+矢印キー での移動も可能なので、好きな位置へ移動させることができます。
あまり近くに置き過ぎると、レイヤーが被って選択が面倒になりそうなので、すこし離し気味にしたほうが良い気がします。

新しいアートボードを作りたいときは、[アートボードツール]になっている状態で、アートボードの外のグレーの部分で好きなサイズにドラッグすれば作れます。

アートボードのふるまいと、書き出し


アートボードのレイヤーは、グループのような動作をします。
レイヤーパネルで上下を入れ替えることもできます。
アートボード外は表示しないようにしてくれます。

アートボードの中に、ロックがかかっているレイヤーがあると、アートボード移動はできないみたいなので、最初に設定を決めておくほうが効率がよさそうです。
アートボードのレイヤーも、「◯◯.png」等、画像アセットの自動書き出しに対応しています。

また、[ファイル]→[書き出し]→[書き出し形式..]で書き出す際、アートボードごとに書きだしてくれます。その際、アートボード名(アートボードレイヤーに設定している文字列)を、そのまま使うことができるので、提出ルールに合わせて設定しておくこともできます。

もちろん、アートボード内のレイヤーに画像アセット名を指定すれば、パーツ別に書き出せます。

使い方は無限にありそう

photoshopの新しい書き出し設定と相性が良いので、
私がよく使うのは、バナーのバリエーションを作成するとき、サイズ違いのものを作るとき、faviconを作るとき、レスポンシブなデザインをするときと様々です。
Alt+ドラッグ&ドロップ で別のアートボードへオブジェクトを移動させることもできるので、複数パターンのカンプ作成〜書き出しが一気にできるのが便利です。

960gsベース、PC Retina+iphone6のサンプルファイルのダウンロード

最近ウェブデザインをする際に基準にしている960gsベース、PC(Retinaなので2倍サイズ)+iphone6のテンプレートをシェアしてみます。スマホサイトを分ける際にも使えるし、レスポンシブでもタブレットなどの中間を成り行きにするときにも使えます。
アートボードの動作確認にもどうぞご自由に。
(自作なので、利用する際は自己責任でお願いします。)

960_grid_12_col_retina_artboard.psd のダウンロード

こんな感じで、よく使うファイルサイズはテンプレート化しておくと、さらに作業スピードアップかもです。

ご参考にどうぞ。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/185-ac5ffd44
Listed below are links to weblogs that reference
photoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。 from バニデザノート

Home > デザイン > photoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。