フォトショップの練習問題

こちらの課題は、どなたでも活用いただけます。
・ポートフォリオ掲載可
・講師の方が授業での利用可
※転載、再配布、改変は禁止です。URLのシェアをお願いいたします。
※TwitterやInstagramでの公開もOK!
※現在テスト運用中なので、予告なく非公開になることがあります。
フォトショップの練習問題

Photoshop レイヤースタイルを理解する

概要 Photoshopの応用機能解説です。 この記事では「レイヤースタイル」機能を紹介します。 レイヤースタイルの基本 WEBデザインにおいて、ボタンなどに影をつけたような加工をすることがよくあります。 影をつける作業をどのように行えば良...
フォトショップの練習問題

Photoshop クイックマスクモードを理解する

概要 Photoshopの選択ツール解説の続きです。 この記事では「クイックマスクモード」「選択とマスク」機能を紹介します。 Photoshopの選択範囲の概念を把握しよう 今回解説する「クイックマスクモード」「選択とマスク」を理解するにあ...
フォトショップの練習問題

Photoshop グラデーションの基本

概要 Photoshopの使い方解説の基本の続きです。 この記事では「グラデーション」機能を紹介します。 グラデーションは色の選択、ツール、グラデーションレイヤーなど複数の要素があり、非常に説明が難しいです。 うまく説明するように頑張ってみ...
フォトショップの練習問題

Photoshop 調整レイヤーの基本

概要 Photoshopの使い方解説の基本の続きです。 この記事では「調整レイヤー」機能を紹介します。 調整レイヤーを使うと画像を明るくする、一部の色を変更するなど表現の幅が非常に広くなります。 グラフィック表現に力を入れたい方はぜひマスタ...
フォトショップの練習問題

Photoshopのクリッピングマスクを理解しよう

概要 Photoshopのレイヤーマスクについては以下の記事で紹介しています。 この記事では「クリッピングマスク」というレイヤーマスクと似た機能を紹介します。 こちらもしっかりと使い方を把握しましょう。 角丸長方形の画像を作成する クリッピ...
フォトショップの練習問題

Photoshop使い方解説③ 図形描画とペンツール

この記事では、Photoshopの基本の使い方を解説します。 上記の記事の続きです。 図形を作成する WEBデザインでボタンを作成したり、文字の後ろに長方形を置いたりなど簡単な図形を作る機会はたくさんあります。 どのように図形を作成するのか...
フォトショップの練習問題

Photoshop使い方解説② レイヤーと移動ツール

この記事では、Photoshopの基本の使い方を解説します。 上記の記事の続きです。 レイヤーを理解する レイヤーパネル レイヤー関連の操作はレイヤーパネルで行います。 出してみましょう。 ウインドウ > レイヤー  レイヤーの種類 レイヤ...
フォトショップの練習問題

Photoshop使い方解説① 基礎と文字ツール

この記事では、Photoshopの基本の使い方を解説します。 画面説明 最初にワークスペースの状態を初期化することをお勧めします。 ウインドウ > ワークスペース > 初期設定 ウインドウ > ワークスペース > 初期設定をリセット ツール...
Figmaの練習問題

架空のカフェの新メニュー試食キャンペーンLPをデザインしよう!(ワイヤーサンプルあり)

概要 架空のカフェの新メニュー試食キャンペーンランディングページをデザインしよう。 キャンバスサイズ  PC版 : 横幅1366px SP版:横幅375px のアートボードで作成すること 納品形式 PhotoshopもしくはFigmaで出力...
フォトショップの練習問題

プロフィールリンクのデザイン

概要 オリジナルのプロフィールリンクをデザインしてみましょう。 サンプル(あくまで例、オリジナルのデザインにすること) キャンバスサイズ 横幅390px 納品形式 PhotoshopもしくはFigmaで出力したPNG 参考サイト: 目的 P...
フォトショップの練習問題

youtubeサムネトレース課題

概要 次の2つのサンプルを参考にyoutubeのサムネイルを作成してください。 ※画像はこちらで配布されているものを使用しています。 キャンバスサイズ 1280px × 720px 納品形式 Photoshopで出力したPNG 目的 Pho...
Figmaの練習問題

WEBパーツ作成課題

概要 次のWEBページをデザインツールでデザインデータとして作成してください。 キャンバスサイズ 390px × 500px 納品形式 PhotoshopもしくはFigmaで出力したPNG 目的 PhotoshopもしくはFigmaでWEB...