online class text for web and video

photoshopカテゴリーの共通アイキャッチ画像

PhotoshopでWFやカンプを作成する手順

Photoshopと Illustratorの違い

Photoshop

  • Photoshopはピクセルベースのソフトウェアで、画像をピクセル（ドット）単位で編集します。これにより、写真や細かなビジュアルエレメントの編集が得意です。
  • 主な用途は写真編集、デジタルペインティング、レタッチ、Webデザイン、UI/UXデザインなど、ピクセル単位での操作が必要な作業に適しています。

Illustrator

  • Illustratorはベクトルベースのソフトウェアで、画像を数学的な線や曲線（パス）で描画します。これにより、サイズ変更しても画質が劣化せず、シャープなグラフィックを維持できます。
  • 主な用途はロゴデザイン、アイコン作成、イラストレーション、印刷用のグラフィック、ポスターや名刺などのデザインに適しています。

まとめ

  • Photoshopはピクセル単位で画像を操作するため、詳細な画像編集や写真の修正に適しています。画像が拡大縮小すると画質が劣化するため、解像度を考慮して作業する必要があります。
  • Illustratorはベクトルベースのため、拡大縮小しても品質が保たれます。ロゴやアイコンなど、スケーラブルなグラフィックの作成に適しており、精確なパスと形状を利用したデザインが可能です。

参考：chat GPT

ワイヤーフレームを作成する手順

  • ドキュメントの作成
    • 左上の[新規ファイル] から
    • 必要なサイズと解像度を設定します。一般的には、ウェブの場合、幅は1920px、解像度は72dpiで設定します。
    • ドキュメントの名前を付けて、[作成]
  • 定規の表示
    • [表示] メニューから [定規] を表示します。
    • コンテンツ幅などを設定する際は、長方形ツールでボックス[幅1200px等]を作成し、ボックスをセンターを合わせて両サイドにガイドを引くと便利です。
  • ガイドの設定
    • [表示] メニューから [ガイド] を選択し、[新規ガイドレイアウトを作成]を表示します。
  • レイアウト設計
    • [ツールバー] から、[長方形ツール] や [線ツール] を使って、ページの基本的なレイアウトを作成します。
  • 詳細の追加
    • [テキストツール] を使って、ボタンやラベルなどのテキストを追加します。

デザインカンプを作成する手順

カンプ作成のポイント

  • レイヤーの整理：header、main、footerの他、section毎にグループ化してレイヤーを管理します
  • ガイドの活用：ガイドを使ってheader、main、footerなどの領域を区切ります。
  • スマートオブジェクト：画像や形状をスマートオブジェクト化することで、後から編集が可能です。
  • アクション：繰り返し行う作業を自動化するために、アクションを作成できます。
  • 新規ドキュメントを作成
    • サイズ: ワイヤーフレームに合わせて、幅と高さを設定します。
    • 解像度: Webデザインでは通常72dpiに設定します。
  • ワイヤーフレームの配置
    • 配置：ワイヤーフレームを画像化してPhotoshopに配置します。（ワイヤーフレーム自体がPhotoshopで作成されている場合、レイヤーをそのまま流用する事もあります。）
    • ロック：ワイヤーフレームのレイヤーはロックをして誤動作を防ぎます。
  • デザイン要素の追加
    • 画像：素材画像ドラッグ＆ドロップで読み込み、サイズを調整します。
    • テキスト: フォント、サイズ、色などを指定し、見やすいテキストを作成します。
    • ボタン：長方形や楕円形などの形状ツールやカスタムシェイプを使用して、ボタンやアイコンなどを作成します。
    • カラー: ワイヤーフレームを参考に、各要素の色を決定します。
  • レイヤーの整理
    • グループ: 各要素ごとにレイヤーをグループ化することで、管理しやすくなります。
    • 名前: レイヤーに分かりやすい名前を付けることで、後からでもどのレイヤーが何に対応しているかすぐに分かります。
  • レイヤースタイルの適用
    • スタイル: レイヤースタイル機能を利用することで、デザイン要素を一括で変更できます。
    • 作成: よく使うスタイルは、あらかじめスタイルとして登録しておくと便利です。
  • 注釈の追加
    • テキスト: デザインに関するメモや説明をテキストで追加します。
  • レスポンシブデザイン対応
    • アートボード: 異なる画面サイズのアートボードを作成し、それぞれのサイズに合わせてデザインを調整します。
    • メディアクエリ: CSSでメディアクエリを使用することを想定し、デザインを調整します。
  • 画像の書き出し
    • イラストや背景を透過したい画像はレイヤー（またはグループ）の名前を[example.png8]に変更します。
    • 写真などの画像はレイヤー（またはグループ）の名前を[example.jpg]に変更します。
    • [ファイル] メニューから [生成] を選択し、[画像アセット]を選択するとPSDファイルと同じ場所に[assetフォルダ]が作成され、フォルダ内に書き出した画像が格納されます。以降ファイルを修正して保存したタイミングで修正した画像が自動的に書き出しされます。
PAGE TOP