Photoshopでチョーク風にイラストやフォントを加工する

kyatti

先日チョーク風なテイストで作る方法を調べて、色々試していました。

以外とベストなやり方を探るのに時間がかかったので、メモとして書き残しておきます。


やり方はとても簡単で、ダウンロードしたPSDの中にある、チョークセットのレイヤースタイルをチョーク風にしたいレイヤーにコピーするだけです。

色を変える場合はレンズフィルターで設定すれば色が変わります。

チョーク 加工 photoshop イラスト テキスト


チョーク風に加工するだけでも、かなり見栄えがよくなるので、画がしまらない時にお世話になります…(笑)
ほら世界地図だけなのに…以外と…

ライセンス的に商用利用も可能でとても助かるのでダウンロードしておくといざというときに助かるかもしれません!

WordPressのタグ自動挿入を削除するプラグイン

set

空いた時間を見つけては、ちょくちょくブログのカスタマイズを行っています。

カスタマイズを行っていると、CSSの記述は間違っていないはずなのに、なぜか崩れる…。って所が出てきました。

原因は、Wordpressは文章に改行があると自動的にPタグやBRタグを入れてくれるという機能があり、これがレイ アウトが崩れる原因になっていました。

これは、タグについて詳しくない方にとっては、とっても助かる機能なのですが、ゴリゴリカスタマイズしていきたい人にとっては若干邪魔な存在です..。

直し方はfunction.phpに以下のコードを記述するだけで治るようです。


とはいえ、記事数も増えてきたこのタイミングで、記事全体に変更が及ぶfunction.phpを編集して、整形機能をOFFにしてしまうと、過去に書いた記事全ての段落周りがおかしくなってしまいます。それをいちいち修正していくのも手間がかかりすぎるなぁと…。

なんとかこの問題を解決出来ないものか、探した結果、プラグインでいい感じに解決出来たので共有します。

自動整形機能をオフにしてくれる「PS Disable Auto Formatting」


レイアウトが崩れる原因にもなってしまう、Wordpressの自動整形をオフにしてくれるプラグイン「PS Disable Auto Formatting」です。

インストールして有効化すると、自動整形をOFFにしてくれます。
しかし、function.phpと同じように、すでに過去に整形機能を利用して書いていた記事は、一気に段落が崩れてしまいます。

その問題を、このプラグインの過去記事の一括整形機能で自動で修正します。

使い方はWordpressのダッシュボードから、設定 > 自動整形で設定画面へ入り、過去記事の一括整形の整形処理時限の項目を、「整形処理を適応したい記事の時刻より後」に設定し、一括整形処理を許可のチェックボックスをチェックし、一括整形処理のボタンを押すだけです。

この機能を使うことで、指定した期日より前の記事だけ整形機能を反映した形にしてくれます。

そのため過去に整形機能を使っていた記事だけ整形機能をONにした時と同じ見栄えに、これから新規に書く記事については整形機能がOFFになるといった感じです。

このプラグインのお陰で、過去記事に遡って修正しなくて済みました。ヨカタ

これからWordpressでブログ始める方は、最初にfunction.phpを設定しておくか、このプラグインを導入しておくことをおすすめします。

家計簿はじめました。

kyatti

はじめました。マネーフォワードで。

家計簿マネーフォワード-自動で簡単な無料アプリカテゴリ: ファイナンス, ユーティリティ

そもそもの経緯は貯金がたまらないところから。
なんでたまらないのか、考えていたら気付きました。

自分が何にお金をどれくらい使っているか、全く把握していないという事実に

よくよく考えてみれば異常なんですよね。毎月限られた給与でやりくりしなくちゃいけないのに、今プラスなのかマイナスなのかすらわかっていないという。

さすがにやばい

そんなわけで。家計簿、はじめました。

俺的にはかなり快挙です。今日はさらだ記念日

自分という人間を20年間も見ていると、この家計簿が続くか続かないかなんてはっきりわかるんですよ。

続かないことが

だからより簡単なやつがいいわけです。ならばアプリだろうと。

探すにあたって重視した点は以下の二点

  • 労力をなるたけかけない
  • スマホ・PCで家計簿を編集できること

一点目の労力をなるたけかけないは、家計簿を作るのが負担になるぐらいならつけないで、その時間でもっとゲームしたいわけです。
なのでよりラクに効率的に、それでいて家計簿としての体を保ってくれるアプリを探しました。(理想)

スマホ・PC両方で編集できることに関しては、スマホは使う度等にぱぱっと入力する感じで、まとまった時間がある時にPCで詳細に編集したいなーと思ったから。
スマホで金額だけぱぱっと入れておいて、後でPCからこれは納豆巻の値段で…とかやりたいから。

選ばれたのは…

マネーフォワード

そんなこんなで、ちまちまと検索した結果、家計簿アプリの「マネーフォワード」を選びました。

これが大正解で、使い始めてから1時間とたたずに、早速自分の全財産の額と今月は使いすぎてマイナスだということがわかりました。

全体的に使いすぎだけれども、特に趣味代かけすぎやね。

マネーフォワードの機能面に関しては、口座やカードと連携できる所が素晴らしく良い感じです。
レシートもカメラパシャするだけで、家計簿への入力がおわったり。俺みたいな家計簿絶対続かないマンに優しい設計になってます。

とりあえず、メインの口座の三菱東京UFJとVISAカードとEPOSカードまとめて登録しました。
これだけで、現時点の全財産の確認と、マネーフォワード上で引き落とし額が一覧で確認出来たりするので超ベンリに。

ついでにAmazonも登録できて、Amazonで購入したものとかは自動で、日用品だとかカテゴリ分けしてくれます。神か。

使い始めた感じすごいいい感じなので、引き続き使い続けてみようと思います。

いい感じに使い方が確立したらマネーフォワード単体の記事でご紹介します。

Adobe MAX 2015をまとめてみた

AdobeMax 2015 まとめ

こんにちは! YOUKNOWです。
Adobe Max 2015で発表されたことを個人的にまとめました!
ざっと確認したい人向けになっていると思います。

今回の発表はかなりボリューミーな感じになっています。

ちなみにこのAdobe MAXは日本のAdobe社員さんが10月6日(火)21時に解説してくれるそうです。
より詳しく知りたい方は下のリンクからどうぞ!

また、こちらから英語版ですが、講演を見直すことが出来ます。

Adobe MAX 2015 まとめ

AdobeMax 2015 まとめ

今回のAdobe Maxはアプリケーションやデバイスの連携がテーマで、
どこでどんなデバイスを利用しても作業ができるようにしていく。とのことでした。

ソフト・デバイス間の連携を強化!「Creative SYNC」

AdobeMax 2015 まとめ

デバイス問わず、アセットやTypeKitが利用できるようになりました。

アプリケーション間の連携がより強力になり、より効率的な制作が行えるようになります。
Adobe MAXのデモでは例としてヨガスタジオのデザインを作りながら説明してくれました。

AdobeMax 2015 まとめ

Adobe Stockでヨガの画像を検索、プレビューのボタンを押すだけで、すぐに画像のデーターがライブラリに追加され、各種Adobe製品で利用可能になります。

ライブラリについてはこちら

パターンが一瞬で制作できる!「Adobe Capture」

AdobeMax 2015 まとめ

Color、Shape、Brush、Hueが統合された、新アプリAdobe Capture CCが発表されました。

似たようなアプリが統合されて、若干わかりやすくなりました。

AdobeMax 2015 まとめ

新機能のPatternはカメラを向けるだけで、テクスチャ画像を制作してくれます。
デモではホテルから持ってきた花にカメラを向けていました。

もちろんCapture CCで制作した素材は、ライブラリを介する事で各種Adobeソフトでも利用することが出来ます。

TypeKitにモリサワフォント20種類が追加

AdobeMax 2015 TypeKit モリサワ

有名なモリサワフォントからフォントが20種類追加されました!

追加された書体はこちらです。

モリサワフォント

  • 太ミン
  • 太ゴ
  • 中ゴシック
  • じゅん
  • 見出ゴ
  • 見出ミン
  • 黎ミン
  • リュウミン
  • 新ゴ
  • 新丸ゴ

TypeBankフォント

  • サン
  • 漢字タイポス415
  • ぷらっしゅ
  • 日活正楷書体
  • カリグラゴシック
  • ちび丸ゴシックPlusK
  • 新聞ゴシック
  • シネマ丸ゴシック
  • 新聞明朝

CreativeCloudの契約ではTypeKitのプランの「ポートフォリオ」プランと同じ扱いを受けられるため、これらのフォントも利用することが出来ます。

ただし、今回追加されたフォントたちは各フォント1ウェイトずつしか利用できないという欠点も存在します…。

パフォーマンスが劇的にあがった! 「Illustrator CC」

AdobeMax 2015 illustrator

以前より10倍早く、64000%まで拡大ができるようになりました。

タッチで快適な操作 「シェイパーツール」

AdobeMax 2015 illustrator シェイパーツール

ジェスチャーで図形を作ったり、形状の変化を行うことができるようになりました。

画像はフリーハンドで図形を書いています。フリーハンドで四角を書くと、自動的に綺麗な四角のシェイプに変換してくれます。

その他にもパスファインダーの適応や、図形の削除・変形を全てジェスチャーで行っていました。

AdobeMax 2015 illustrator シェイパーツール

ジェスチャーを利用して、シェイプからぽっぽが生まれました。

このジェスチャー操作は他のアプリケーションも利用することが出来ます。

レスポンシブ機能に対応! Adobe MUSE

レスポンシブWebデザインを作るためのEdge Reflow CCの機能が、MUSEにも追加されました。

自動でレスポンシブデザインに対応してくれるようになり、コーディング不要でWEBサイトとして公開が可能です。
この際ベクター素材はSVGに自動で変換されるという有能っぷり。

コードのキレイさとか(メンテナンス的に)こうしたいとか、そういう細かい所に気を使わなくてもいいものであれば、もうMUSEでも良いかもしれません。

WEBデザイナーの相棒 「Photoshop」

アートボードの強化

AdobeMax 2015 Photoshop アートボード

Photoshopにアートボードが追加されましたが、不満に感じていた人は多かったようで..。
今回はそんなアートボードがかなり強化されました。

アートボードにフィルタをつけられるようになり、例えばスマホのデザインのみ表示みたいな感じの事ができるようになりました。
またアートボード別にガイドがつくようになり、複製もボタン一つで行えるようになりました。

デモでアートボードを大量に開いていたものの、全く重くなかったので、パフォーマンスも改良されていると思われます。

アセットの強化

AdobeMax 2015 Photoshop

選択したレイヤーからアセットを書き出すことができる機能が追加されました。
コレ地味になくて不便だったんですよね。

また、スマートオブジェクトだけアセット抽出を行うなどの事もできるようになっています。

UI・UXを効率的にデザインできる新プロジェクト 「Comet」

AdobeMax 2015 comet

今はなきFireWorksの到達点…!?

Adobeさんにしては珍しいUI・UXデザイナー向けのデザインツールです。
非常に効率的にデザインを制作できるという特徴を持っています。

Cometは来年の頭にパブリックベータを行うようです

圧倒的な効率

びっくりしたのはその圧倒的なデザインの効率でした。Photoshopでも同じ事をやりたいと何度思ったことか…。

AdobeMax 2015 comet

ドラッグするだけで、デザインパターンの繰り返しを作ることが出来ます。

AdobeMax 2015 comet

一つの場所を変更するだけで、全ての箇所の変更が完了します。

もちろん隙間等も一つ変更するだけで、すべての変更が完了します。

AdobeMax 2015 comet

デザインパターンに複数の画像を追加した場合….

AdobeMax 2015 comet

きちんと全てのデザインパターンに違う画像を入れ込んでくれます。

AdobeMax 2015 comet

パフォーマンスも高く、これだけの数のアートボードを開いてもキビキビ動いていました。

AdobeMax 2015 comet

画面推移も簡単に作ることが出来、

AdobeMax 2015 comet

どのような感じになるか確認するためのデモも見ることが出来ます。

DreamWeaver

AdobeMax 2015 dreamweaver

DreamWeaverの方はAdobeさんの公式ブログさんのほうで詳しく書かれていましたので、引用させてもらいます。

もうすぐ公開されるDreamweaverのアップデートでは、CC Libraryが追加されて、PhotoshopやIllustratorといったデザインツールのデザインアセットを共有したり、Adobe Stockとの連携が可能になるようです。ライブラリ経由でIllustratorからSVGアセットを利用することも可能です。

Dreamweaver関連での注目は、来年公開される新バージョンでの、コードエディタの刷新が予告されたことです。基調講演では明らかにされませんでしたが、Dreamweaverチームのブログ記事によれば、新しいエディタはBracketsをベースにしたものになるようです。Bracketsでお馴染みのインラインエディタやSass/LessサポートなどがそのままDreamweaverでも使えるようになれば、開発ツールとしてのDreamweaverの使い勝手はずいぶん向上することでしょう。ベータ版の一般公開も検討されているようです。

まとめ

いかがでしたでしょうか。なかなかボリューミーな発表でしたけど、凄くアップデートが楽しみなAdobe MAXでした!

個人的にはCometが期待ですね。これでWEBデザインはできるのだろうか..?とか考えております。

【iPhone】無料の広告ブロックアプリ「1Blocker」の紹介と使い方

スクリーンショット 2015-09-24 21.18.28

激震が走っております…!!

先日発表されたAppleのiOS9で遂にSafariで広告ブロックが可能となりました。
しかしデフォルトで使用可能ではなく、ブロックアプリを別途入れる必要があります。

しかし巷で有名なブロックアプリはほとんど有料…!!
今回紹介するブロックアプリは高機能+無料!
手軽にブロックをキメこむ予定の方は、このアプリがオススメです。

無料で広告ブロック! 1Blocker

1Blocker – Block ads, tracking scripts, anythingカテゴリ: ユーティリティ

そもそも広告ブロックとは

インターネットサイトの多くに広告が付いているのを見たことがあると思います。

1blocker 無料 広告ブロック apple safari

これらを読み込まなくすることができるのが広告ブロック機能です。
消えたらさっぱりしますよ!WEB製作者はただただ涙ですが…(滝涙)

1Blockerの使い方

1Blockerをインストールしアプリを起動します。

1blocker 無料 広告ブロック apple safari1blocker 無料 広告ブロック apple safari

アプリを起動してしばらくするとBlockAllとなっていますので、真ん中のスイッチをタップして、Enabledになるようにします。

IMG_1780IMG_1781

その後、iPhoneの設定から Safari > コンテンツブロックへ進みます。

コンテンツブロックの中にある1BlockerをONにして完了です。

WEBサイトをSafariで見ると広告が消えているはずです。※例外はあります。

1blocker 無料 広告ブロック apple safari

ちなみに右下のCunstomizeをタップすると、カスタム画面が出てきます。

1Blockは広告の他にも様々なものをブロックすることが出来ます。(広告以外は課金で開放していく方式)

Photoshopで全ての階層のレイヤーフォルダを閉じる方法

photoshop レイヤー フォルダ 閉じる 全て

デザイナーはレイヤー構造の見栄えを良くするためについレイヤーをフォルダーで囲いまくる癖がある。

私だ。

見栄えをよくするためにわざわざ囲っているので、コーダーさんにデザインデーターを渡すときには、主に見栄のためにフォルダーを全て閉じて完璧な状態でPSDデータを渡したい。

レイヤーを一括で閉じるショートカットとしてよく取り上げられている、⌘commandを押しながらレイヤーフォルダの隣にある▶を押すというやり方では、同じ階層のフォルダしか閉じてくれない

もし下層に閉じていないフォルダがあったとしても、それを閉じずに指定した階層のフォルダのみ閉じられる。

するとコーダーさん及び第三者が閉まっているフォルダを開けてしまうと、しまってるフォルダとしまっていないフォルダが混在した大変見にくいレイヤー構造になってしまう。

これは見栄っぱりとしては由々しき問題であるため、他のやり方はないのかとちまちまと試してみた。

下の階層のフォルダを含め全てのレイヤー構造のフォルダを閉じる方法

photoshop レイヤー フォルダ 閉じる 全て

⌘command+alt+一番上の階層のフォルダの隣にある▶のマークをクリックする

これだけ!

かなり簡単である。これだけで少しやり遂げた感が生まれるはずだ。

臭いものにフタをするようなグループは、ありがちだけれども修正作業で死ぬので自分のためにも直しておこう(戒め)

Photoshop等でテキスト修正を劇的にラクにする!検索と置換機能

Photoshop WEBデザイン 効率化

こんにちは!YOUKNOWです。

前回の記事ではライブラリを紹介しました!
何か他にもっと便利な機能がないか、もう一度色々見直してきました。

その中で最近の業務でかなり役立った機能検索と置換機能をご紹介します。

この機能は制作業務でありがちな文言の修正を劇的に楽にする機能です。

▶ 機能のやり方と説明だけを見たい方はこちら

制作業務で頻発する文字修正

ひとたび行えばまたひとたび。修正界の不死鳥のような存在…。

我ら制作班は文字修正に怯えながら暮らす。何ページにも及ぶカンプ制作だった場合は終電の命がなくなる

特にやばいのは走れメロスのメロスをメロウに変更する系の文字修正だと、クライアントの皆様方にはここで声を大にして述べておきたい。

今回はそんな悲惨な修正をちょろい修正に変える神機能の紹介です。

Photoshop Illustrator等で一斉に文言修正を行える 検索と置換 機能

検索と置換機能は、検索する文字を指定し、その文字と一致しているテキストを全て置き換えることができる機能です。

例えば、走れメロスの場合、検索文字を「メロス」に置き換え文字を「メロウ」にすると走れメロウとなります。
メロスという単語が複数あった場合、メロスという単語が全てメロウに変わる機能です。

検索と置換機能の使い方

さすがに標準搭載されている機能だけあって、使い方も簡単。

Photoshop illustrator 文字 置換 検索

PhotoshopやIllustrator等、機能を使いたいAdobe系アプリケーションメニューから編集 > 検索/置換を選択します。

Photoshop illustrator 文字 置換 検索

すると検索文字と置換文字を入力するウィンドウが出てくるので、これらを入力し、全てを置換を選択すると、指定した検索文字が全て置き換わります。

おわりに

知らないだけで便利な機能って結構あるんですね。
ちょっと前までこの機能無しで文言修正を行ってました\(^o^)/

CC2014で新しく追加された「ライブラリ」が超便利だった

Photoshop 便利 パーツ ライブラリ

こんにちは!YOUKNOWです!

今までWEBサイトデザインの制作効率化の為に、自分で作ったデザインパーツや商用素材などをストックするPSDを作っていました。

Photoshop 便利 パーツ ライブラリ

こんなかんじで一つのPSDにまとめてました

そんな中、Photoshopのスタイルをいじっていたらライブラリの存在に気づきました。

なんやこれ…。と思いながらも使ってみるとまあこれが便利便利!!

Adobe ライブラリとは?

Photoshop 便利 パーツ ライブラリ

作ったパーツなどをストックしておくことができるものがライブラリです。
追加したデザインパーツは、CleativeCloudで同期される為、追加したデザインパーツはPhotoshopやIllustratorで同じものを使用することが出来たり、他の端末でも同じパーツを使用することが出来ます。

なおこの機能はCC2014から使用することが出来ます。

ありがとう。Adobeさん

なんで俺この機能にもっと早く気づかなかったんだろうか…。
それくらいに便利です。これでもうパーツを保存しておくPSDが増えなくてすみます。

今回の記事はこのライブラリがすごいということをただただ書きなぐるだけの記事です。

Adobeライブラリのすごいとこ

ライブラリは即同期される

Illustratorで作ったこの素材をPhotoshopですぐに使いたいなぁという時。ライブラリに追加すればすぐにライブラリが同期されます。
その為、アドビ製品を行き来してデザイン制作しなくてはならない場面で非常に便利。

ライブラリは他人と共有することができる

Photoshop 便利 パーツ ライブラリ

そう、作ったパーツを他人と共有することが出来ます。
例えば会社であれば、汎用パーツを共有したりすることができると思います。

プロジェクトに応じて使う素材などが送られてきたら、このライブラリを使ってチームで共有すると捗ると思います。

ライブラリの追加がワンクリック

ライブラリウィンドウの左下のボタンを押すだけでライブラリの追加は完了している…。

ライブラリで管理できる種類が豊富

デザインパーツ以外もライブラリに保管することが出来ます。

  • カラー
  • カラーテーマ
  • スタイル
  • ブラシ
  • グラフィック(パーツ)

Adobe製品で作ったもののほとんどをライブラリに保存することが出来ます。やばい。

パーツの整理が可能

Photoshop 便利 パーツ ライブラリ

とはいえデザインパーツを入れ続けたら、だんだんどこに何があるかわかりづらくなってきます。
そういったことにならないように非常に整理しやすく作られています。最高。

サムネイル表示が優秀

Photoshop 便利 パーツ ライブラリ

Adobeライブラリの使い方

Photoshop 便利 パーツ ライブラリ

使い方を説明するまでもなく簡単な所もライブラリの良い所

Photoshopのメニューからウィンドウ > ライブラリでライブラリウィンドウが出てきます。

デザインパーツなどの追加方法

追加したいデザインパーツを選んで、ライブラリウィンドウの左下の丸と四角と三角が重なっているアイコンをクリックするだけ!

ライブラリに保存したパーツを使う方法

ドラッグ&ドロップ

便利なのでぜひ!!ぜひに!!一度試してみてください。

Photoshopでレイヤーを一つ一つ拡大してくれるスクリプト Transform Each

daqweq

こんにちは!制作効率はパワーだと考えるYOUKNOWです。
スクリプトをよく使うのでそのスクリプトをご紹介していこうかと思っています。

WEBデザインでありがちな修正として、これらのロゴ全部少し大きくして下さいとか、ここの詳しくはこちらの隣についてる矢印だけ大きくして下さいという指示あると思います。

拡大作業って一つなら手間じゃないんですが、複数個の拡大作業はかなり手間になります。

Photoshop スクリプト 拡大 transformEach

引用: Captainawesome様より

というのも全部を拡大しようとすると、選択したオブジェクト達の真ん中を基準として拡大処理を行うため、位置がズレズレになってしまう問題があります。
今回はこのような問題を解決してくれるスクリプトをご紹介します。

レイヤーの拡大を助けてくれるPhotoshopスクリプト Transform Each

Photoshop スクリプト 拡大 transformEach

引用: Captainawesome様より

Transform Eachはレイヤーの拡大・縮小を補助してくれるPhotoshopスクリプトです。
拡大・縮小以外にも、回転なども補助してくれます。

思ったより使うポイントが多いのがこのスクリプト。コレのお陰でかなり時間が短縮出来ています。

インストール

通常のPhotoshopスクリプトとかわりありません。

こちらのページのダウンロードボタンから[KAM]Transform Each.jsxをダウンロード

ダウンロード完了したら、以下の場所にダウンロードした.jsxを保存します。

Windows : C:/Program Files/Adobe/Adobe Photoshop/Presets/Scripts
Mac : Application/Photoshop/Presets/Scripts/

上記の場所にjsxファイルをおいたらPhotoshopを起動し、(すでに起動してある場合は再起動)、Photoshopのメニューから
ファイル > スクリプトの中に入れたスクリプトの名前があればインストール完了です。

必要環境

Adobe Photoshop CS5, CS6, CC2014 , CC2015

使い方

処理を行いたいレイヤー達を選択し、ファイル > スクリプト > [KAM]Transform Eachを選択しスクリプトを起動します。

Photoshop スクリプト 拡大 transformEach

あとは行いたい操作に合わせてパラメータをいじるだけです。

Photoshop スクリプト 拡大 transformEach 日本語

複数のバナー画像制作に、Photoshopのアートボードが大変捗った話

Photoshop WEBデザイン 効率化

こんにちは!YOUKNOWです。

お仕事でよくバナーを作る機会があるんですが、ふと思い立ってPhotoshopの2015で追加されたアートボードを利用して作ってみました。

バナーってGoogleのバナーだったりYahooのバナーだったりうんちゃらかんちゃらで結構な個数を作ることが多いんじゃないでしょうか。

加えてやっぱり修正も多く発生しがちですよね。
数が多いとその分だけ修正の手間も増えてきます。
その度に書き出しを行うのだけでも以外と時間がかかってしまったり…

Photoshopのアートボードツールを利用してバナーを作ったら修正にも対応しやすくなるし、書き出しもラクそうで良いのではないかと考えました。

結論からいうととてもラクで良い!大正解でした。

どうラクだったのかというと

  • スマートオブジェクトの更新がラク
  • パーツのコピーもラク
  • パーツをアートボード外にストックしておくことができる
  • 書き出しに手間がかからない

が大きかったなぁ…と。

Photoshopのアートボードがバナー制作で捗る点

スマートオブジェクトの更新がラク

Photoshop 2015 アートボード バナー

どうしても文字でこだわりたかった所や、小物の制作はIllustratorを使用して制作します。

それをスマートオブジェクトとしてPhotoshopに落としこむのですが、別のファイルでバナーを制作していると、こっちのバナーのスマートオブジェクトは更新されたが、こっちは更新されない…などの問題が発生します。

しかしアートボードで作る場合、同じPSDファイル内なので一つのスマートオブジェクトを更新すれば同じスマートオブジェクトは全て更新されます。

これで頻発する文言修正対応にも捗るってもんです。

パーツのコピーもラク

まだまだ便利さは続きます。

Yahooバナー GDPバナーなどの種類の豊富さに加え、サイズも豊富と来ているバナー達。

圧倒的数量でやってきます。けれども入れる要素は同じかつ、バナーをクリックして飛ぶ先も変わるわけではないので、同じパーツや賑やかしを使うことが多いです。

別のPSDファイルで制作していると、このパーツをこっちのPSDに持ってこよう..。Photoshopのウィンドウを調整して…こっちに持ってきて…ああ!このPSDも開かないと!

アートボードなら一発です。コピーしたいものを選んで、command+J で複製して移動ツールで移動するだけです。

アートボードの特性で、アートボードの上にあるパーツは自動的に適切なアートボードにレイヤーを移してくれるので、本当に移動するだけでOKです。素晴らしい

パーツをアートボード外にストックしておくことができる

例えば、そのバナーがシリーズものだった場合など、参考になりそうなものをおいておけば、作業が捗るでしょう。

パーツの一時退避としても使える子です。

書き出しに手間がかからない

全てのアートボードを一斉に書き出すことが出来ます。

command+alt+SHIFT+W

これで保存場所・保存形式を選ぶだけで全てのバナーが書き出されます。

まとめ

アートボードツールなかなかオススメです。