Photoshopをさらに使いこなす!

flaticonでモックアップ用のアイコンを作る手間を省く

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
まだデザインが決まる前のモックアップを作る際、ひとめで分かるアイコンを用意するのに時間がかかります。flaticonを利用して暫定的なデザインラフの作成をより簡単にしましょう。
講師:
06:01

字幕

Web サイトのモックアップ作成時とりあえずサンプルでいいから、アイコンを入れておきたいという時があります。その時に便利なのが、PhotoshopExtension の flaticon 。簡単にアイコンを探して入れることができます。こちらがその Web サイトです。flaticon.com ここからエクステンションをダウンロードします。ずっとスクロールして下の方に Photoshop Plugin というのがあるのでこれをダウンロードします。バージョンはここに書いてあるようにCS5 CS6 CC で使うことができます。こんな形でアイコンが出てきてこれをダブルクリックするだけでPhotoshop に入るんですね。まずはダウンロードをしましょう。Download the FREE pluginそうするとこの様な画面になりますのでここをクリックしてダウンロードします。ダウンロードができるとflaticon-plugin-1.4.zxp というものがあります。これをダブルクリックするとExtension Manager が起動しライセンス画面になります。内容を一通り見たら承諾するを押してください。 これでインストールが完了です。次に Photoshop を起動しましょう。Photoshop が起動しました。ちゃんとインストールができているか確認するためにメニューの「ウィンドウ」>「エクステンション」にマウスを合わせます。ここに FlatIcon がありますね。クリックするとこのようにパネルの右側に表示されます。クリックする事で閉じたり、開いたりができます。そうすると、こんな形でアイコンが入っています。例えば、ファイルを新規で作成しておきここで Web サイト、何かデザインを作るとします。黒にしておきましょう。黒にしてタイトルが Website sample とかにしておきましょう。文字は白。真ん中に配置してそして、アイコンがこう並んでそこでクリックするようにしておきたいですね。こんな形にして、こうメニューみたいに作るとします。ここにとりあえず何でもいいからモックアップ、一番最初のデザインを考えるところじゃなくてこんなレイアウトでここをクリックしたらこうなるよ、みたいな物をチームで、あとはお客さんと共有しておきたいときに何かちゃんとアイコンを作るんではなくてとりあえずこういうのが入るのが分かればいいというときに凄く便利です。 例えば、まずツイッター、ダブルクリックをするとこのようにレイヤーとか画面でもわかりますね、入ります。あとは、「編集」で大きさを変更してEnter キーで確定して矢印で移動。このように入れられたら OK です。これはシェイプなんですね。なのでダブルクリックをすると色も変えられます。こんな形で。とっても簡単でしょ。FlatIcon をもう一回クリックして次はフェイスブックを入れましょう。これもダブルクリックするだけで入ります。これ、シェイプだと分かりやすいですね。このツール、パス選択ツールをクリックするとシェイプとして触ることができます。ちょっと変えたいときなんかはこれでこれで編集ができますので非常にカスタマイズしやすくなっています。これも同様にサイズを変更します。Enter キーで確定、矢印で位置を調整した後色を変更していきましょう。はい、入りました。このように一時的にとりあえず本当のデザインで上げるときはこれじゃないけれどもサクッと入れてお客さんとかチーム内で共有するときにこれを使うことができます。ライセンスとして、こちらですねFlatIcon はいっぱいアイコンがありますがそれぞれ作った人によって許諾が違います。 商用でもクレジットなしで使っていいよというものもあればこれはなるべく改変しないでほしいとか商用で使うのはダメとひとつひとつ著作権が設定されているんですね。なるべく、クレジットを入れることで対応できるものであれば便利ですがこういったところ一個一個許諾を確認していってとっても大変だったりします。ですので、モックアップで見るときにだけ使用して本番の Web サイトのときはちゃんと自分で一から作ったり然るべきところでアイコンを購入したりして使うようにしましょう。でも、こうやって簡単な見た目でいいから早く見せてというワイヤーフレームとかモックアップでとりあえず見たいよというときには非常に便利なツールですね。今までは、Web サイトで検索をしていろんなアイコンを探さなくちゃいけなかったんです。アイコンでこう検索のsearch とかこれは許諾は大丈夫なのかなとか。ライセンスってどうなんだろうとここにあったCreative Commons 何だろうとか。こういう手間が比較的省きやすいのでエクステンションとして入れておくとあなたの下準備の作業がすごく楽になると思います。これで、FlatIcon を使ってアイコンを入れることができました。

Photoshopをさらに使いこなす!

このコースではPhotoshop用のエクステンションや連携可能な他のソフトなどを活用して、普段の作業をよりいっそう便利にする方法を紹介します。BridgeやCamera Rawフィルターを素材の整理や補正に利用したり、CanLinkItやdevRocket、speccterなどのエクステンションを活用した業務の効率化について解説します。

2時間01分 (24 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2014年05月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。