• このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

Photoshopでアートボードをつくる方法

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

こんにちは、プロクラスの渡辺です。
気が付けばもう今年も終わりに近づいてきましたが、今日はここ最近で一番ありがたい~~~!!ってなったPhotoshopの機能をブログにします 😉

Photoshopのアートボード機能について

そもそも、どうしてこの機能を使用することに行きついたかというと、デザインをラフで何パターンかを提出しないといけないときに、今までは①psdファイルでパターン分のデータを作って、②jpgにして、③2、3パターンを並べ直して…という、まあ~~面倒くさいことをしていました。
面倒くさいな~と思っていた時に、illustratorでしているようなことができたら楽なのに‥‥と思い至って調べたところ!
あるじゃないですか!アートボード機能!!君の事をもっと早くに知りたかったよ~~!! 😥 

そんな経緯でPhotoshopのアートボード機能を使うことにしたので、使い方と、実際使って感じたメリットデメリットを書こうと思います!

アートボード機能の使い方

【1】新規作成をするか、Photoshopで何かしらを開いた状態にしておきます。

【2】レイヤーの右端にある「三」をクリックしたら「アートボードを新規作成」があるので選択をする

【3】アートボードのサイズを入力する(今のは適当なサイズにしています)

【4】アートボード完成です!
画像に対してアートボード部分(白い部分)でかいな…って思ったときは!ちゃんと調節もできます!

アートボードのサイズ変更(めちゃくちゃ簡単)

レイヤーのところにある「アートボード1」をクリックして選択します。
そしたら、白い枠の四辺中央につかめそうな「〇」が出てくるので、それをつかんでぎゅぎゅぎゅ~~と調節します!簡単!

簡単にサイズ変更できるの地味にありがたいです。
アートボードを増やしたいときは、【1】~【4】の手順で増やしていけばOKです!すごい!

増やしました。
あと、アートボード機能を使わないときは後ろの背景部分に配置することができませんでしたが、アートボード機能を使うとそれもできちゃうのでありがたいです。
しかも!なんと!


ボード外にあった要素をボード内に移動させたら、レイヤー側も勝手に移動してくれます!!

一回してもらえればわかるんですが、illustratorではいちいち手動で動かしていたのですごく助かりました。。。
アートボード間の移動でも同じことをしてくれます。ありがたいなあ。
使い方は以上です!

使ってみて感じたメリット

使ってみて感じたメリットはいくつかありますが、「サイズ違いのバナー」を作るときや、「縦に長すぎるデザインの時」とか、「いくつかパターンを作って並べて提出したいとき」とかに圧倒的に便利でした!!
それならillustratorでしたらいいのでは?とか思いますが、ご要望によってはPSDファイルで提出しなければいけないこともあります。
元々psdデータで作ってたので、そのままpsdデータに纏めたいとか、いろいろあるんですよね。
せっかくなので箇条書きでもまとめておきます 🙂

  • サイズ違いのバナーを作るときに便利!
  • 縦に長すぎるデザイン(LPサイトとか)の時にアートボードで分けちゃう
  • パターンを作って並べて見せたいときに便利
  • 何かしらのデータをまとめておきたいときも便利!

使ってみて感じたデメリット

実はデメリットもいくつかありました。まだ使い慣れていないからかもしれないのであまり信用しないでください…。これからも調べながら使います… 😥 
こちらも箇条書きでまとめます!

  • CSの人とうまくファイルの受け渡しができなかった
  • 1つのデータが重くなりすぎちゃうことがある(調子に乗るから)
  • 切り抜きするために、アートボードを解除しないと透過保存ができなかった(方法があるかもしれない)

さいごに

Photoshopも長いこと使っていますが、まだまだ知らない機能がたくさんあるなあと日々感じます。
その中でも今回のブログは今年一番感激した機能だったのでご紹介しました!
作業がこれだけでグッと早くなるので便利なものはたくさん使っていきたいですね 😳

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
各地で開催中!

【簡単ホームページ制作!はじめてのWordPress講座】
受講者満足度95%以上の人気講座!

WordPress東京
【簡単ホームページ制作!はじめてのWordPress】講座詳細はこちら