フォトショップの練習問題 Photoshop グラデーションの基本
概要 Photoshopの使い方解説の基本の続きです。 この記事では「グラデーション」機能を紹介します。 グラデーションは色の選択、ツール、グラデーションレイヤーなど複数の要素があり、非常に説明が難しいです。 うまく説明するように頑張ってみ...
2025-03
フォトショップの練習問題 
フォトショップの練習問題 Photoshop 調整レイヤーの基本
概要 Photoshopの使い方解説の基本の続きです。 この記事では「調整レイヤー」機能を紹介します。 調整レイヤーを使うと画像を明るくする、一部の色を変更するなど表現の幅が非常に広くなります。 グラフィック表現に力を入れたい方はぜひマスタ...
フォトショップの練習問題 Photoshopのクリッピングマスクを理解しよう
概要 Photoshopのレイヤーマスクについては以下の記事で紹介しています。 この記事では「クリッピングマスク」というレイヤーマスクと似た機能を紹介します。 こちらもしっかりと使い方を把握しましょう。 角丸長方形の画像を作成する クリッピ...
フォトショップの練習問題 Photoshop使い方解説③ 図形描画とペンツール
この記事では、Photoshopの基本の使い方を解説します。 上記の記事の続きです。 図形を作成する WEBデザインでボタンを作成したり、文字の後ろに長方形を置いたりなど簡単な図形を作る機会はたくさんあります。 どのように図形を作成するのか...
フォトショップの練習問題 Photoshop使い方解説② レイヤーと移動ツール
この記事では、Photoshopの基本の使い方を解説します。 上記の記事の続きです。 レイヤーを理解する レイヤーパネル レイヤー関連の操作はレイヤーパネルで行います。 出してみましょう。 ウインドウ > レイヤー レイヤーの種類 レイヤ...
フォトショップの練習問題 Photoshop使い方解説① 基礎と文字ツール
この記事では、Photoshopの基本の使い方を解説します。 画面説明 最初にワークスペースの状態を初期化することをお勧めします。 ウインドウ > ワークスペース > 初期設定 ウインドウ > ワークスペース > 初期設定をリセット ツール...
WEBデザイン企画 インタラクション前提でデザインしよう！
Web制作における「インタラクション」とは、ユーザーとWebサイト（またはアプリ）との間で行われる双方向のやり取りを指します。ユーザーの行動に応じて、画面上の要素が反応したり変化したりする仕組みのことです。 「Webサイトは操作することがで...
Figmaの練習問題 【応用機能】Figmaのスタイル機能
まずは動画で確認 まずは動画でスタイル機能を使っているところを見てみましょう。 このように、よく使う色やフォント、フォントサイズを記録しておき、統一して利用することができます。 デザインがまだ決まっていない状態では、中途半端に利用すると邪魔...
Figmaの練習問題 【徹底検証】Figmaのペン機能はIllustratorの代替になるのか【Webデザイナー編】
上記の続きです。 Figmaはベジェ曲線のデータを作成することができます。 利用用途 アイコンの作成 イラスト作成 フォントで打ち込んだ文字の加工、あしらいの追加 Webパーツ素材作成 もし、Adobeの契約をしている場合はIllustra...
Figmaの練習問題 Figma「プロトタイプ」の基本をマスターしよう！
上記の続きです。 前回の記事では「デザインタブ」の続きですが「プロトタイプタブ」の基本をマスターしましょう。 サンプルデータ すぐにプロトタイプ機能を試せる画面を用意しました。 こちらのデータを使ってください。 プロトタイプってなに？ Fi...
Figmaの練習問題 Figmaの基本をマスターしよう！
FigmaはWebデザインにおいて非常に重要なツールです。 その重要性は日に日に高まっています。 使い方はそれほど難しくなく、使っていてストレスもありません。さらっと基本を覚えましょう。 こちらの記事では導入はすでに済んでいることを前提に使...
Figmaの練習問題 Figmaのマスクについて
まずは動画で確認 まずは動画で使っているところを見てみましょう。 上記の画像を「WATER」という形にマスクしてみます。 ①マスクするもの、されるものをグループ化する。 ②マスクする形のものをグループの一番下に移動する。 ③一番下のものを右...