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

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

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

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

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

Photoshop グラデーションの基本

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

Photoshop 調整レイヤーの基本

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

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

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

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

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

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

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

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

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

インタラクション前提でデザインしよう!

Web制作における「インタラクション」とは、ユーザーとWebサイト(またはアプリ)との間で行われる双方向のやり取りを指します。ユーザーの行動に応じて、画面上の要素が反応したり変化したりする仕組みのことです。「Webサイトは操作することができ...
Figmaの練習問題

【応用機能】Figmaのスタイル機能

まずは動画で確認まずは動画でスタイル機能を使っているところを見てみましょう。このように、よく使う色やフォント、フォントサイズを記録しておき、統一して利用することができます。デザインがまだ決まっていない状態では、中途半端に利用すると邪魔になる...
Figmaの練習問題

【徹底検証】Figmaのペン機能はIllustratorの代替になるのか【Webデザイナー編】

上記の続きです。Figmaはベジェ曲線のデータを作成することができます。利用用途 アイコンの作成 イラスト作成 フォントで打ち込んだ文字の加工、あしらいの追加 Webパーツ素材作成もし、Adobeの契約をしている場合はIllustrator...
Figmaの練習問題

Figma「プロトタイプ」の基本をマスターしよう!

上記の続きです。前回の記事では「デザインタブ」の続きですが「プロトタイプタブ」の基本をマスターしましょう。サンプルデータすぐにプロトタイプ機能を試せる画面を用意しました。こちらのデータを使ってください。プロトタイプってなに?Figmaにはプ...