「Illustrator-Photoshop」カテゴリーアーカイブ

Adobe製品の一覧

Adobe Creative Cloudにはさまざまなアプリケーションが同伴されています。Webサイト制作にメインに用いるのは主にPhotoshop・Illustrator・Dreamweaverの3つですが、その他のソフトの使い方を覚えておくと意外なところで役立つかもしれません。

3大ソフト

Photoshop(Ps)
・主な用途―画像の編集や加工。イラスト・デザインの制作も可能。(ラスター画像)
Illusttator(Ai)
・主な用途―デザイン(イラスト・ロゴ・アイコン作成に特化)。(ベクター画像)
Dreamweaver(Dw)
・主な用途―ホームページ制作に特化したテキストエディタ。HTML・CSS以外のプログラミング言語を扱うことも可能。

Webデザイン

Adobe XD
・主な用途―UX/UIのデザインツール。Webサイトやアプリのデザイン、プロトタイプ作成に用いる。
Muse
・主な用途―Web制作に使用するソフト。コードを書くのではなく、ユーザーインターフェースからホームページを作成することができる。

画像作成

Lightroom
・主な用途―写真補正用のソフト。Photoshopと違い、写真編集に関するプロパティーに特化している。
Fuse
・3Dキャラクターを作成する。Photoshopとも連携できる。
Dimention
・3Dツール。製品画像やパッケージデザインに特化している。

文書作成

Acrobat DC
・主な用途―PDF文書の作成。Office-PDF間の互換性もある。
InDesign
・主な用途―印刷物や書籍の作成。ページの一括編集・索引の作成な。
InCopy
・主な用途―文書の共同作業。編集スケジュールに基づいた文書作成をすることができる。

映像・サウンド

Premire Pro
・主な用途―動画作成。VFX効果を動画追加することも可能。
After Effects
・主な用途―動画に視覚効果をつけるソフト。エフェクト・VFXに特化している。
Animate
・主な用途―Flashアニメーションを作成できるソフト。Ps・Aiのアセットを活用できる。
Character Animator
主な用途―アニメーションをつけるソフト。名前通り、キャラクターのアニメーションに特化している。
Audition
・主な用途―音声編集ソフト。音楽を加工するときや、その他効果音を作成したいときに用いる。
Media Encorder
・主な用途―ビデオファイルのエンコーダー。動画ファイルをYoutube等にアップロードしたい際に便利。
Prelude
・主な用途―メディアファイル管理に用いるソフト。Adobeの映像・サウンド作品を大量に扱う際に役立つ。

Photoshop講義ノート・練習・課題

今週分のILLUSTRATOR講義ノートを発表します。作品制作の他、Photoshopの使い方について参考になるメモを作成しました。
また、今回はブログやランディングページによくあるバナー広告を作成していただきます。
条件に気をつけながら制作を進めてみてください。

Photoshopから画像を書き出す

デザインカンプからどのようにWeb上で使用する画像を書きだすか。PSDの構成にもよりますが、Photoshopの場合はスライスがメインです。スライスツールを用いて必要なアセットを作成する機能を、画像アセット機能といいます。
スライスツールを用いて出力したい画像の領域を選択すると、選択した領域を一気にまとめてフォルダー内に出力することができます。

画像アセットの手順

・psdファイルをフォルダに入れる
ファイル>生成>画像アセットにチェックを入れる
・書き出し対象のレイヤーに適切な(test.pngなど)名前を付ける
・保存すると同一階層上assetフォルダが生成

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

従来からPhotoshopでは「カンバスサイズ」で描画領域を決定していましたが、アートボードが新しく加わったことで領域を示す方法がもうひとつ増えました。既にアートボードでファイルを作成しているときで、描画領域を増やそう(サイズを大きくしよう)という場合はイメージ>カンバスサイズから変更するとアートボードのサイズは変わらないので混乱を招きます。アートボードがすでに存在する場合は、アートボードツールから該当するアートボードを選択して、オプションバーから変更すると確実です。

アートボードのサイズについては下記リンクが参考になります。

アートボードとは何か?というと、複数のレイヤーをまとめたグループのようなものです。具体的な利用シーンを見ていった方が、わかりやすいかもしれません。ウェブページのデザインを例に出すと、各デバイスのデザインを同一ファイルにまとめておくことができます。また、バナーなどのデザイン要素をまとめて制作、管理することも可能なんです。デザインの効率化をしてくれる、とっても便利な機能なんですね。

Ai,Psの定規の上で右クリック

Ai,Psの定規の上で右クリックすると、単位が変更できます。属性パネル内で単位表示がバグってしまった場合は、ここで一旦他の単位に変更したうえで、ピクセルに戻すと全てピクセル表示になります。メニューバーから編集>環境設定>単位・定規をいちいち設定する煩わしさがないのが良点です。