photoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。バニデザノートバニデザノートとっておきのウェブデザインTipsのかけらを、まいにち少しずつ。photoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。photoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。15:54:25デザインphotoshopのアートボード機能を使えば、sketchみたいにカンプを複数並べてデザインができます。レスポンシブデザインはもちろんですが、PC/スマホサイトの各カンプをデザインしたり複数サイズのバナーパターンを同時に編集したりと結構使えたので、ご紹介。アートボードの使い方[ファイル]→[新規...]で新規ファイル作成画面を開き「ドキュメントの種類」から、「アートボード」を選択します。「アートボードの設定」から、最初に作るアートボードのサイズを設定します。あとでアートボードのサイズを自由に変更できるので、欲しいサイズがない場合は近いものを選んでおいても大丈夫です。アートボードのサイズを変更するアートボードツールは、[移動ツール]の中にあります。長押しして、[アートボードツール]を表示し、選択します。アートボードレイヤーを変更することでも、自動でアートボードツールに変わります。幅や、高さを設定します。数値でやりたいときは、パネルで。*マウスで高さをぐぐーっと広げたいときは、アートボードレイヤーを選択すると、自由変形ツールのような表示になっているので、下の真ん中の四角を下に下げるだけでOK。移動も可能なので、好きな位置へ移動させることができます。近くに置き過ぎると、レイヤーが被って選択が面倒になりそうなので、すこし離し気味にしたほうが良い気がします。新しいアートボードを作りたいときは、[アートボードツール]になっている状態で、アートボードの外のグレーの部分で好きなサイズにドラッグすれば作れます。アートボードのふるまいと、書き出しアートボードのレイヤーは、グループのような動作をします。レイヤーパネルで上下を入れ替えることもできます。アートボード外は表示しないようにしてくれます。アートボードの中に、ロックがかかっているレイヤーがあると、アートボード移動はできないみたいなので、最初に設定を決めておくほうが効率がよさそうです。アートボードのレイヤーも、「◯◯.png」等、画像アセットの自動書き出しに対応しています。[ファイル]→[書き出し]→[書き出し形式..]で書き出す際、アートボードごとに書きだしてくれます。その際、アートボード名(アートボードレイヤーに設定している文字列)を、そのまま使うことができるので、提出ルールに合わせて設定しておくこともできます。アートボード内のレイヤーに画像アセット名を指定すれば、パーツ別に書き出せます。私がよく使うのは、バナーのバリエーションを作成するとき、サイズ違いのものを作るとき、faviconを作るとき、レスポンシブなデザインをするときと様々です。別のアートボードへオブジェクトを移動させることもできるので、複数パターンのカンプ作成〜書き出しが一気にできるのが便利です。Retina+iphone6のサンプルファイルのダウンロード最近ウェブデザインをする際に基準にしている960gsベース、PC(Retinaなので2倍サイズ)+iphone6のテンプレートをシェアしてみます。スマホサイトを分ける際にも使えるし、レスポンシブでもタブレットなどの中間を成り行きにするときにも使えます。アートボードの動作確認にもどうぞご自由に。(自作なので、利用する際は自己責任でお願いします。ダウンロードこんな感じで、よく使うファイルサイズはテンプレート化しておくと、さらに作業スピードアップかもです。関連記事PhotoshopとIllustratorとSketchを上手に使っていこう2015/12/03ウェブデザインの文章レイアウト組みパターンを展開してみる2015/11/15愛され♡「メリハリ」ウェブデザインを作る!注目を集めたいときのデザインテクニック2015/10/30photoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。referencephotoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。photoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。Link▲Udemy講座第二弾!Photoshopデザインカンプ作成の流れをレクチャーします。▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、お得な価格で受講可能!ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。10年以上に渡りオールラウンドウェブクリエイターとして活動した経験を活かして高品質なPhotoshopデータでの「デザインカンプ作成」のお仕事を主に行っています。業務提携いただける企業さま、ウェブディレクターさまを随時募集中です。見た目と効果を向上させるプロのテクニックWordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。110ページ前後ぐらい。付Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。vanillate(バニレート)フリーランスのウェブクリエイター。wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。インタビューに答えています。個まで】を追加費用無料で設定できます。つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。★【カラーミーショップ】なら本当に安心!★かわいいテンプレートが続々登場するから、初心者のあなたにも安心!オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!サポート充実で初心者でも安心なレンタルサーバー。