フォトショップの練習問題 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」という形にマスクしてみます。 ①マスクするもの、されるものをグループ化する。 ②マスクする形のものをグループの一番下に移動する。 ③一番下のものを右...
イラストレーターの練習問題 SNSプロフィールアイコン制作課題
SNSプロフィールアイコン制作課題 課題内容 Adobe Illustratorを使用して、各SNSサイトで利用するための「自身を表わすプロフィールアイコン」を作成してください。 今回ちゃんとしたものを作っておくと今後のサイト作成や、アカウ...
Figmaの練習問題 架空のカフェの新メニュー試食キャンペーンLPをデザインしよう！（ワイヤーサンプルあり）
概要 架空のカフェの新メニュー試食キャンペーンランディングページをデザインしよう。 キャンバスサイズ PC版 : 横幅1366px SP版：横幅375px のアートボードで作成すること 納品形式 PhotoshopもしくはFigmaで出力...