フォトショップの練習問題 Photoshop使い方解説③ 図形描画とペンツール
この記事では、Photoshopの基本の使い方を解説します。上記の記事の続きです。図形を作成するWEBデザインでボタンを作成したり、文字の後ろに長方形を置いたりなど簡単な図形を作る機会はたくさんあります。どのように図形を作成するのか把握して...
Photogentle
フォトショップの練習問題 
フォトショップの練習問題 Photoshop使い方解説② レイヤーと移動ツール
この記事では、Photoshopの基本の使い方を解説します。上記の記事の続きです。レイヤーを理解するレイヤーパネルレイヤー関連の操作はレイヤーパネルで行います。出してみましょう。ウインドウ > レイヤー レイヤーの種類レイヤーにはいくつか種...
フォトショップの練習問題 Photoshop使い方解説① 基礎と文字ツール
この記事では、Photoshopの基本の使い方を解説します。画面説明最初にワークスペースの状態を初期化することをお勧めします。 ウインドウ > ワークスペース > 初期設定 ウインドウ > ワークスペース > 初期設定をリセットツールバーの...
WEBデザイン企画 インタラクション前提でデザインしよう！
Web制作における「インタラクション」とは、ユーザーとWebサイト（またはアプリ）との間で行われる双方向のやり取りを指します。ユーザーの行動に応じて、画面上の要素が反応したり変化したりする仕組みのことです。「Webサイトは操作することができ...
Figmaの練習問題 【応用機能】Figmaのスタイル機能
まずは動画で確認まずは動画でスタイル機能を使っているところを見てみましょう。このように、よく使う色やフォント、フォントサイズを記録しておき、統一して利用することができます。デザインがまだ決まっていない状態では、中途半端に利用すると邪魔になる...
Figmaの練習問題 【徹底検証】Figmaのペン機能はIllustratorの代替になるのか【Webデザイナー編】
上記の続きです。Figmaはベジェ曲線のデータを作成することができます。利用用途 アイコンの作成 イラスト作成 フォントで打ち込んだ文字の加工、あしらいの追加 Webパーツ素材作成もし、Adobeの契約をしている場合はIllustrator...
Figmaの練習問題 Figma「プロトタイプ」の基本をマスターしよう！
上記の続きです。前回の記事では「デザインタブ」の続きですが「プロトタイプタブ」の基本をマスターしましょう。サンプルデータすぐにプロトタイプ機能を試せる画面を用意しました。こちらのデータを使ってください。プロトタイプってなに？Figmaにはプ...
Figmaの練習問題 Figmaの基本をマスターしよう！
FigmaはWebデザインにおいて非常に重要なツールです。その重要性は日に日に高まっています。使い方はそれほど難しくなく、使っていてストレスもありません。さらっと基本を覚えましょう。こちらの記事では導入はすでに済んでいることを前提に使い方を...
Figmaの練習問題 Figmaのマスクについて
まずは動画で確認まずは動画で使っているところを見てみましょう。上記の画像を「WATER」という形にマスクしてみます。①マスクするもの、されるものをグループ化する。②マスクする形のものをグループの一番下に移動する。③一番下のものを右クリックし...
イラストレーターの練習問題 SNSプロフィールアイコン制作課題
SNSプロフィールアイコン制作課題課題内容Adobe Illustratorを使用して、各SNSサイトで利用するための「自身を表わすプロフィールアイコン」を作成してください。今回ちゃんとしたものを作っておくと今後のサイト作成や、アカウントへ...
Figmaの練習問題 架空のカフェの新メニュー試食キャンペーンLPをデザインしよう！（ワイヤーサンプルあり）
概要架空のカフェの新メニュー試食キャンペーンランディングページをデザインしよう。キャンバスサイズ PC版 : 横幅1366pxSP版：横幅375px のアートボードで作成すること納品形式 PhotoshopもしくはFigmaで出力したPNG...
フォトショップの練習問題 プロフィールリンクのデザイン
概要オリジナルのプロフィールリンクをデザインしてみましょう。サンプル（あくまで例、オリジナルのデザインにすること）キャンバスサイズ 横幅390px納品形式 PhotoshopもしくはFigmaで出力したPNG参考サイト： 目的Photosh...