ページが見つかりませんでした https://sdesignlabo.com Tue, 30 Jan 2024 02:22:26 +0000 ja hourly 1 https://sdesignlabo.com/blog/wp-content/uploads/2019/04/cropped-ico-32x32.png ページが見つかりませんでした https://sdesignlabo.com 32 32 【AdobeExpress】noteの見出し画像をデザインする方法 https://sdesignlabo.com/express/ex-note/ Tue, 30 Jan 2024 02:22:25 +0000 https://sdesignlabo.com/?p=163236

Adobe Express(アドビエクスプレス)でnote(ノート)の見出し画像を簡単にデザインする方法をデザイン初心者の方向けに詳しく解説します。デザイナーで無い方にとって見出し画像をゼロから作成するのは非常に面倒です ... ]]>

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Adobe Express(アドビエクスプレス)でnote(ノート)の見出し画像を簡単にデザインする方法をデザイン初心者の方向けに詳しく解説します。

デザイナーで無い方にとって見出し画像をゼロから作成するのは非常に面倒です。
しかしAdobe Expressの見出し画像用テンプレートを使えば高品質なデザインがあっという間に作成可能!

ブラウザ上で簡単にデザイン編集・書き出しができます。
noteに最適化された1280px x 670px、PNG・JPEGなど、サクッと見出し画像が作成できます。

noteの見出し画像でお困りの方にとって超便利なツールを活用してみませんか?

何が作れるの?

上記サンプルのようなnote(ノート)の見出し画像があっという間に作れるサービスです。
テンプレートの文字や画像を差し替えるだけで高品質な見出し画像が作成可能!
ノンデザイナーの方でも簡単に使いこなせる機能ですよ。

AdobeExpressのnote用見出し画像テンプレ

Adobe Express(アドビエクスプレス)でnoteの見出し画像を作る方法を詳しく解説します。
デザイン初心者の方でも再現できる内容ですよ!

AdobeExpressでテンプレを選択

STEP.1
note見出し画面を開く
AdobeExpressの [ note見出し画像 ] へアクセスします。
Adobeアカウントが無い方はGoogleアカウントでも利用できますよ。
STEP.2
テンプレートを選択
お好きなテンプレートを選択すると、[ テンプレートから開始 ] が開きます。
引き続き [ テンプレートをカスタマイズ ] をクリックしましょう。
サンプルはダイエット記録のテンプレートを選択しました。
STEP.3
Adobe Expressの編集画面が開く
左図がAdobe Expressの編集画面です。
以上でnoteの見出し画像のテンプレートが開けました。
STEP.4
ファイル名を変更
Adobe Express左上のファイル名を変更します。
左向けの < をクリックすると自動的にファイルが保存されます。
[ プロジェクト ] にnoteの見出し画像テンプレートが保存されます。
開きたいプロジェクトをクリックすると編集対象のテンプレートが開きます。

以上Adobe Expressのテンプレート選択、ファイルの保存と開き方です。
アプリ版と保存方法が違う
Photoshop感覚で [ Ctrl + S ] (Mac: + S) を使った上書き保存をすると、ブラウザのウェブページを保存が実行されるので注意して下さい。

AdobeExpressで文字を編集

STEP.1
文字をクリック
編集したい文字オブジェクトをクリックしていき、左図のように文字編集モードにします。
STEP.2
文字を編集
お好きな文字に変更し、左メニューのテキストメニューからフォントやサイズ、色などが変更できます。
変更が終了したら文字以外のオブジェクトをクリックすると文字編集から抜けられます。
STEP.3
文字編集が完了
以上でAdobe Expressを使った文字編集が完了しました。

AdobeExpressで画像を編集

STEP.1
編集したい画像をクリック
編集したい画像をクリックします。
サンプルは左上の画像を選択しました。
STEP.2
画像を置換する
Adobe Expressの画面左に画像編集のメニューが表示されます。

[ 置換 ] のアイコンをクリックしましょう。
すると任意の画像と差し替える事ができます。
[ デバイスからアップロード ] をクリックすると手持ちの画像に差し替える事もできます。

サンプルは季節の素材から選択しました。
形状編集も可能
対象画像をダブルクリックすると切り抜きの形状が編集できます。
矩形の切り抜き、様々な形状のシェイプなど、お好みで編集して下さい。
STEP.3
画像編集が完了
以上でnoteの見出し画像テンプレートの画像編集が完了しました。

PNGやJPEG形式で書き出し

STEP.1
ダウンロードをクリック
Adobe Expressの画面左上にある [ ダウンロード ] をクリックします。
STEP.2
ファイル形式を選択
するとファイル形式が選択できます。
PNG(画像向け)
JPG(データサイズが小さい画像向け)
PDF(ドキュメント向け)

note用の見出し画像にはPNGを選択し、ダウンロードしましょう。
STEP.3
書き出しの完了
PCのダウンロードフォルダを開くと対象ファイルが保存されている事が確認できます。
後はnoteにログインし、ダウンロードした見出し画像を設定しましょう。

ゼロから作ると時間と手間がかかりますが、Adobe Expressのテンプレートを活用すれば僅か数分で品質の高い見出し画像が作成できますよ!
PhotoshopやIllustratorなら更に快適
ウェブサービスであるAdobe Expressはもっさりした動作で表現の幅が限られていますが、アプリ版のPhotoshopやIllustratorならサクサクと直感的な動作で表現の幅が段違いに広がります。
クリエイティブの品質や幅を広げたい方はフォトショ、イラレの併用をオススメします。
Photoshopはコチラ、Illustratorはコチラで徹底解説しています。

高品質なポートフォリオテンプレート

紙媒体やPDF形式で作成したポートフォリオの品質を手っ取り早く高めるには、高品質なテンプレートの活用が最も効率的かつ効果的です。

商用利用可能で高品質テンプレートばかり厳選!
今まで意識しなかった多くの「気づき」に出会えますよ。

※なお、ポートフォリオ制作はInDesign(インデザイン)を使うのが最も効率的です。
コチラでインデザ初心者の方向けにポートフォリオテンプレートの使い方を詳しく解説しております。

#01 Pink Portfolio Layout

ピンク系のキレイ目カワイイ風ポートフォリオ用テンプレートです。InDesign形式なので文字と画像の差し替えが超楽!
2時間あればポートフォリオが作れます。
編集にはInDesignが必須、未導入の方はInDesign公式サイトから入手しておきましょう。

ダウンロードする

#02 Portfolio Layout with Gray Accents

モノトーン系でどんな作風にも合うポートフォリオ用テンプレートです。イラスト、写真、建築、Web、グッズ…テンプレ選びに迷ったらコレがオススメ!
A4に印刷したポートフォリオ、PDF形式、どちらも短時間で作成可能です。

ダウンロードする

#03 Portfolio Layout with Yellow Accents

黄色が鮮やかでキレイなポートフォリオテンプレートです。
爽やかな画風のイラストにもピッタリ!
クセが無く、ベースデザインとして非常に扱いやすいテンプレートの一つです。

ダウンロードする

#04 Portfolio Template in Pale Green and Mint

収録されているレイアウトパターンが非常に豊富なポートフォリオ用テンプレートです。
作品を大きく見せる、制作過程を見せる、複数見せる、横長作品を画面内に綺麗に収める等、どんなパターンにも当てはめる事が可能ですよ。

ダウンロードする

#05 Minimalist Portfolio Layout

ポートフォリオの表紙には必ずメインビジュアルを入れないとダメか?そんな事はありません。
単色に文字だけで構成した表紙も素敵です。
ページ中身のレイアウトパターンも豊富、あえて表紙をシンプルにする手法もアリですよ。

ダウンロードする

紹介しきれなかったポートフォリオテンプレートや素材
上記のテンプレートはほんの一部。
下記リンクで多数の高品質なポートフォリオテンプレートを紹介しています!

おわりに

以上、Adobe Express(アドビエクスプレス)のnoteに適した見出し画像のテンプレートの使い方でした。

Adobe Expressはデザインから画像の書き出しまで全てブラウザ上で完結するツールです。
豊富なテンプレートの中から適したデザインを選択し、微調整をするだけで高品質なグラフィックが作成できるチートサービスです。

もちろんnoteの見出し画像だけでなく、instagramの投稿やストーリー・リール、TikTokやYouTube、Facebook、そしてチラシやロゴ、プレゼンテーションなど、様々なテンプレートが存在します。
デザイン初心者の方でもスキル不要で優れたグラフィックが作れるので是非お試しください!

ではまた!

]]>
【Illustrator】パスの単純化とスムーズの使い方を徹底解説forイラレ初心者 https://sdesignlabo.com/illustrator/ai-simplify-smooth/ Fri, 12 Jan 2024 08:45:40 +0000 https://sdesignlabo.com/?p=162853

Illustrator(イラストレーター)の「パスの単純化」と「スムーズ」を活用し、無駄の無い柔らかなグラフィックを超短時間で作成する方法をイラレ初心者の方向けに詳しく解説します。無駄なアンカーポイントの数を、元グラフィ ... ]]>

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Illustrator(イラストレーター)の「パスの単純化」と「スムーズ」を活用し、無駄の無い柔らかなグラフィックを超短時間で作成する方法をイラレ初心者の方向けに詳しく解説します。

無駄なアンカーポイントの数を、元グラフィックのイメージを壊さず30秒で削減。
カクカクしたパスを滑らかで柔らかな印象の線へ30秒で調整など。
「パスの単純化」と「スムーズ」は従来のイラレテクニックだと大幅に時間がかかる工程が一瞬で出来る便利機能です。

これからIllustratorを始められる方、より詳しくイラレを学習されたい方にオススメのコンテンツですよ。

パスの単純化とスムーズで出来る事

上記サンプルのように、「パスの単純化」を使えば元オブジェクトの形状を維持したまま無駄なアンカーポイントの削除が数秒で実現できます。
そして「スムーズ」を使えば数秒で角ばった線を滑らかで美しい曲線に調整する事ができます。

よりシンプルで編集性の高いアイコン作成、そして柔らかな曲線のグラフィック作成を手助けしてくれる強力な機能をゼロからマスターできるコンテンツですよ。

パスの単純化の使い方

Illustrator(イラストレーター)の [ パスの単純化 ] の使い方を詳しく解説します。
元オブジェクトの形状を維持しつつアンカーポイントの数を減らしたり、よりシンプルな形状にする事ができる便利な機能ですよ。

Illustratorを導入しましょう
当記事の内容を実践するにはIllustratorが必須です。
未導入の方はIllustrator公式サイトからダウンロードしておきましょう。(7日間の無料体験が可能)
なお、AdobeCCのプランはコチラの記事で徹底解説しています。
STEP.1
オブジェクトを作成
Illustratorでパスを単純化したいオブジェクトを作成します。
アンカーポイントの数が無駄に多い事が確認できますね。このままだとオブジェクトの形状編集が面倒です。

※パスの単純化をしたいオブジェクトは事前にコピーしておく事をオススメします。一度単純化すると元に戻せません。
STEP.2
単純化をクリック
[ 選択ツール ] でオブジェクトを選択します。

[ オブジェクト ] → [ パス ] → [ 単純化 ] をクリック。
STEP.3
単純化を設定
パスの単純化の設定画面が開きます。
最初の時点で [ 自動単純化 ] が有効になり、最適な単純化がされます。

より単純化をしたい場合はスライダーを左へドラッグ。
FINISH
完成
以上でパスの単純化ができました。
元オブジェクトの形状を変えず、無駄なアンカーポイントを自動でサクッと削除する事ができます。
もちろん更に単純化させる事で違った表現のオブジェクトにする事も出来ます。
詳細オプションを活用
[ 詳細オプション ] をクリックすると単純化のより細かな設定ができます。

曲線の単純化、コーナーポイント角度のしきい値、自動単純化、直線に変換、変更前のパスを表示、最新の情報を保持し、このダイアログを直接開く…等の設定が可能です。

スムーズの使い方

[ スムーズ ] を使う事でオブジェクトのコーナーを滑らかにする事ができます。
角ばったアンカーポイントを滑らかな曲線にでき、柔らかな印象のグラフィック作成を効率化できます。

STEP.1
オブジェクトを準備
Illustratorでスムーズを適用したいオブジェクトを作成します。サンプルは先に解説したパスの単純化で作成したネコです。

対象オブジェクトは [ 選択ツール ] で選択しておきましょう。
※一度スムーズを適用すると元に戻せません。コピーしたオブジェクトに適用する事をオススメします。
STEP.2
スムーズをクリック
[ オブジェクト ] → [ パス ] → [ スムーズ ] をクリックします。
STEP.3
スムーズを設定
スムーズの設定画面が開きます。

スライダーを右に動かすとスムーズ化されます。
右端の [ 自動スムーズ ] をクリックすると自動で良い感じにスムーズ化をしてくれます。

設定後は画面の何もない個所をクリックするとスムーズの確定です。
FINISH
完成
以上でオブジェクトのスムーズ化ができました。
エッジの立っていたコーナー部分が滑らかな曲線になり、柔らかな印象のグラフィックになりました。

わずか数秒でなめらかな曲線にする事ができるスムーズは非常にオススメの機能ですよ!
スムーズツールも活用しよう
併せてスムーズツールも活用し、より効率的なオブジェクトを行ってみませんか?イラストやアイコン・ロゴ等を効率的に滑らかにする事ができますよ。

高品質なポートフォリオテンプレート

紙媒体やPDF形式で作成したポートフォリオの品質を手っ取り早く高めるには、高品質なテンプレートの活用が最も効率的かつ効果的です。

商用利用可能で高品質テンプレートばかり厳選!
今まで意識しなかった多くの「気づき」に出会えますよ。

※なお、ポートフォリオ制作はInDesign(インデザイン)を使うのが最も効率的です。
コチラでインデザ初心者の方向けにポートフォリオテンプレートの使い方を詳しく解説しております。

#01 Pink Portfolio Layout

ピンク系のキレイ目カワイイ風ポートフォリオ用テンプレートです。InDesign形式なので文字と画像の差し替えが超楽!
2時間あればポートフォリオが作れます。
編集にはInDesignが必須、未導入の方はInDesign公式サイトから入手しておきましょう。

ダウンロードする

#02 Portfolio Layout with Gray Accents

モノトーン系でどんな作風にも合うポートフォリオ用テンプレートです。イラスト、写真、建築、Web、グッズ…テンプレ選びに迷ったらコレがオススメ!
A4に印刷したポートフォリオ、PDF形式、どちらも短時間で作成可能です。

ダウンロードする

#03 Portfolio Layout with Yellow Accents

黄色が鮮やかでキレイなポートフォリオテンプレートです。
爽やかな画風のイラストにもピッタリ!
クセが無く、ベースデザインとして非常に扱いやすいテンプレートの一つです。

ダウンロードする

#04 Portfolio Template in Pale Green and Mint

収録されているレイアウトパターンが非常に豊富なポートフォリオ用テンプレートです。
作品を大きく見せる、制作過程を見せる、複数見せる、横長作品を画面内に綺麗に収める等、どんなパターンにも当てはめる事が可能ですよ。

ダウンロードする

#05 Minimalist Portfolio Layout

ポートフォリオの表紙には必ずメインビジュアルを入れないとダメか?そんな事はありません。
単色に文字だけで構成した表紙も素敵です。
ページ中身のレイアウトパターンも豊富、あえて表紙をシンプルにする手法もアリですよ。

ダウンロードする

紹介しきれなかったポートフォリオテンプレートや素材
上記のテンプレートはほんの一部。
下記リンクで多数の高品質なポートフォリオテンプレートを紹介しています!

ワンランク上のテンプレート素材

Illustratorのスキルアップをする上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減するだけでなく、スキルアップの教材としても活用できますよ!


AI形式で作られた高品質なフライヤーのテンプレート50選です。画像と文字を差し替えるだけ、超短時間でハイクオリティなフライヤーが作成可能!
様々なフライヤーのテンプレート50選


デザイン制作を学ぶ導入編としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い!
相手に舐められない名刺テンプレート50選


例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートでレイアウトや余白、文字サイズを簡単に研究可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート40選


ロゴ作成とIllustratorの相性は抜群!
ロゴ制作の効率化だけでなく、アイディアやデータの作り方を学習・研究するための良質な教材だらけですよ。
ハイクオリティなロゴテンプレート50選


単なる白黒のテキストを高品質なロゴのようなグラフィックにできるエフェクトです。
ロゴ・見出しなどキャッチなオリジナルタイトルを一瞬で作成できる優秀な素材ばかり!
商用利用が可能で高品質なテキストエフェクト50選


継ぎ目が無い高品質な背景素材50選です。
全て商用利用OK!作品の密度を一気に高める事ができる汎用性の高い素材ばかりです。
商用利用できる高品質なシームレス背景パターン58選


良質な素材をもっと見る
上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください!

おわりに

以上、Illustrator(イラストレーター)の「パスの単純化」と「スムーズ」の使い方と活用テクニックについてでした。

従来のイラストレーターの機能を使って同じ編集を加えると、非常に手間がかかります。
しかし当記事で解説した「パスの単純化」と「スムーズ」だと数十秒で無駄なアンカーポイントの削除と滑らかな曲線化ができます。

ロゴ作成、アイコン作成をはじめとした各種グラフィック制作に役立つ強力な機能なので、是非ご活用ください!

ではまた!

InDesignは活用されていますか?
Illustratorだけでなく、InDesign(インデザイン)も活用されているでしょうか?
ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方はAdobe公式サイトから入手できます。
高品質で商用利用可能なポートフォリオテンプレート40選はコチラ
Illustratorの操作方法

イラレ基本操作

【導入編】ゼロから始めるIllustrator
Adobe Creative Cloudの料金プランやオススメプランを徹底解説
イラレでよく使う機能15選 for 初心者
イラレ全ショートカット一覧
Illustratorとは・DTPの基礎知識
操作画面、新規作成と保存、各種ファイル形式
オブジェクトの作成と選択、構造
イラレの塗りと線について
イラレのカラーモードについて
RGBからCMYKへ変換する方法
整列と分布について徹底解説
オブジェクト重ね順について徹底解説
数値入力によるオブジェクトの作成と操作
レイヤーの概念と操作を分かりやすく徹底解説
オブジェクトの色々なコピペ方法
ペンツールの基本操作とパスの編集
文字ツールの基本的な使い方
文字を装飾する・アピアランスの設定
文字で画像をマスクする
グラデーションツールを極める
メッシュツール・グラデーションメッシュの使い方
ブラシツール・塗りブラシツールの使い方と違い
消しゴムツール・はさみツール・ナイフの使い方
パスファインダーの機能全てを徹底解説
ブレンドツールを使ったオブジェクト作成
回転ツールと回転コピーの使い方
リフレクトツールの使い方
クリッピングマスクの使い方を徹底解説
トンボ(トリムマーク)の設定と塗り足し
ライブトレースを徹底解説
ライブペイントを徹底解説
編集しやすい角丸長方形の作り方
アートボードツールの使い方
パペットワープツールの使い方
リシェイプツールの使い方
線幅ツールを使いこなそう
ワープツールをはじめとした線幅ツールの派生ツール
スライスツールを使った超効率的な画像の書き出し
拡大・縮小ツールの使い方とテクニック
シアーツールの使い方と応用例
自由変形ツールの使い方

バナーやデザイン関連

【就活生向け】ポートフォリオ用テンプレート
サイズ違いのバナー広告を効率的に作る方法
名刺サイズのレイアウト用紙の作成&ガイドの有効的な活用法
オリジナル名刺をデザインして入稿用データを作ろう!
入稿用AIデータの作成方法と注意点について
【AI】ニーアオートマタのUI風ポートフォリオ用テーマ
【AI】ニーアオートマタのUI風エミールの名刺

絵作り

変形を使って水玉模様(ドット柄)や精密なパターン柄を作る方法
ペンツールを使ったトレースのテクニック①
ペンツールを使ったトレースのテクニック②
アピアランスを使った線の設定・線のデザイン
汎用性抜群な略地図の作り方
【鬼滅の刃】炭治郎の耳飾りをイラレで作る方法for初心者
レース柄やレースリボンブラシの作り方を徹底解説
ラフな手描き風の線にする方法
ブレンドと変形効果を使った螺旋状のドット模様の作り方
大阪の謎「連絡まつ村」のシールを作ってみよう【AI配布中】
マーブル模様の作り方を徹底解説forイラレ初心者
ハーフトーン(網点)の作り方と応用
集中線(スピード線)の作り方を徹底解説

アイコン・ロゴ制作

歯車や花、本など色々な図形を作る方法
【全2回】ラノベ風ロゴの作り方【サンプルAI有り】
ファビコンの作り方をデザインパターン別に徹底解説
アイソメトリック文字の作り方【3D・押し出し・ベベル】
リアルなネオンサインの作り方を徹底解説
レトロな雰囲気のロゴを作る方法
高品質な金(ゴールド)表現の作り方
長い影(ロングシャドウ)の作り方2選
デボス加工風カットアウトの作り方
燃えさかる炎をまとった文字の作り方
刺繍(ステッチ)表現の作り方
黒板に描かれたチョーク文字やイラストを再現する方法
真っ二つにスライスされたオブジェクトを作る方法
色ずれをイラレで再現する方法
1980年代レトロフューチャー風ロゴの作り方
レトロゲームのドットテキストを簡単に作る方法

追加機能・その他機能

アナログ画材風の無料ブラシ36選
ブラシ素材の登録方法
スウォッチの登録方法や使い方を徹底解説
グラフィックスタイルの追加・編集方法
ツールバーを編集する方法
スポイトツールでアピアランスをコピーする方法と注意点
別のAIファイルをAI内に配置・編集する方法
ブラックのアピアランスを正しく設定
「最近使用したもの」を非表示にする方法
遠近グリッドを消す方法と基本的な使い方

ゼロイラの目次一覧
SCROLL
目次一覧
ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!

]]>
【Illustrator】寸法ツールでサイズ記載を追加する方法forイラレ初心者 https://sdesignlabo.com/illustrator/ai-dimensiontools/ Thu, 11 Jan 2024 13:34:12 +0000 https://sdesignlabo.com/?p=162755

Illustrator(イラストレーター)の寸法ツールでサイズ記載を簡単に追加する方法をイラレ初心者の方向けに詳しく解説します。寸法ツールを使った作例と使い道、そして寸法ツールの全機能の詳しい使い方を徹底解説!これからI ... ]]>

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Illustrator(イラストレーター)の寸法ツールでサイズ記載を簡単に追加する方法をイラレ初心者の方向けに詳しく解説します。

寸法ツールを使った作例と使い道、そして寸法ツールの全機能の詳しい使い方を徹底解説!
これからIllustratorを始められる方、より詳しくイラレを学習されたい方にオススメのコンテンツですよ。

寸法ツールで出来る事

例えば上記のようなパッケージデザインの展開図をIllustratorで作成します。
各辺の長さや角度、角丸の半径などの正確なサイズを簡単に追加する事ができます。

従来の方法だとサイズ測定後にわざわざペンツールで線を描き、矢印の設定を加える必要がありましたが、当記事で紹介する [ 寸法ツール ] を使えばクリックとドラッグの操作だけで正確な寸法が追加できます。

劇的な作業効率化に繋がるツールですよ!

寸法ツールの場所

ツールバー内に [ 寸法ツール ] があります。
※寸法ツールはIllustrator v.28.1で新たに追加された機能です。

寸法ツールが非表示の場合はツールバーを編集して表示できます。
ツールバー下部の [ ] → [ アドオン ] → [ 寸法ツール ] で追加可能。

※ツールバーの編集方法はコチラの記事で詳しく解説しています。

寸法ツールの使い方

Illustrator(イラストレーター)の寸法ツールの使い方を詳しく解説します。
簡単に寸法が記載できる便利な機能ですよ!

Illustratorを導入しましょう
当記事の内容を実践するにはIllustratorが必須です。
未導入の方はIllustrator公式サイトからダウンロードしておきましょう。(7日間の無料体験が可能)
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

寸法ツールのモード

寸法ツールを選択すると、コンテキストタスクバー内から寸法ツールのモードが選択できます。
左から順に [ 長さ寸法 ] 、[ 角度寸法 ] 、[ 径寸法 ] 、[ ツールオプション ] が選択可能。

※コンテキストタスクバーが非表示の場合は [ ウィンドウ ] → [ コンテキストタスクバー ] で表示可能。詳しい使い方はコチラの記事で詳しく解説しています。

長さ寸法の使い方

寸法ツールのモードを [ 長さ寸法 ] にします。

長さを測定したい線分の始点をクリック後に終点をクリック。最後に点線の寸法補助線の長さをドラッグで決定後、クリックするだけです。
測定したい線分のアンカーポイント上にカーソルを合わせるとキッチリ長さ寸法が測定できますよ。

※後から寸法補助線はドラッグで長さ調整が可能。

角度寸法の使い方

寸法ツールのモードをコンテキストタスクバーから [ 角度寸法 ] に変更。
角度の中心から測定したい角度に向かってドラッグすると寸法補助線と角度が表示されます。

作成した角度寸法をドラッグすると後からサイズ調整が可能。

径寸法の使い方

寸法ツールのモードをコンテキストタスクバーから [ 径寸法 ] に変更。

円弧上にカーソルを合わせてドラッグすると半径を記載。
円弧上から円の内側にドラッグすると直径を記載できます。

寸法ツールオプションを使いこなす

コンテキストタスクバーの [ ツールオプション ] で [ 寸法ツールオプション ] の設定ができます。
※寸法ツール上をダブルクリックでも開きます。

寸法の単位と尺度、寸法線や寸法補助線の太さや色・線種、寸法テキスト等が細かくカスタマイズ可能。
例えば左図のような寸法表記にする事もできます。
お好みで寸法ツールオプションの調整を入れてください。

高品質なポートフォリオテンプレート

紙媒体やPDF形式で作成したポートフォリオの品質を手っ取り早く高めるには、高品質なテンプレートの活用が最も効率的かつ効果的です。

商用利用可能で高品質テンプレートばかり厳選!
今まで意識しなかった多くの「気づき」に出会えますよ。

※なお、ポートフォリオ制作はInDesign(インデザイン)を使うのが最も効率的です。
コチラでインデザ初心者の方向けにポートフォリオテンプレートの使い方を詳しく解説しております。

#01 Pink Portfolio Layout

ピンク系のキレイ目カワイイ風ポートフォリオ用テンプレートです。InDesign形式なので文字と画像の差し替えが超楽!
2時間あればポートフォリオが作れます。
編集にはInDesignが必須、未導入の方はInDesign公式サイトから入手しておきましょう。

ダウンロードする

#02 Portfolio Layout with Gray Accents

モノトーン系でどんな作風にも合うポートフォリオ用テンプレートです。イラスト、写真、建築、Web、グッズ…テンプレ選びに迷ったらコレがオススメ!
A4に印刷したポートフォリオ、PDF形式、どちらも短時間で作成可能です。

ダウンロードする

#03 Portfolio Layout with Yellow Accents

黄色が鮮やかでキレイなポートフォリオテンプレートです。
爽やかな画風のイラストにもピッタリ!
クセが無く、ベースデザインとして非常に扱いやすいテンプレートの一つです。

ダウンロードする

#04 Portfolio Template in Pale Green and Mint

収録されているレイアウトパターンが非常に豊富なポートフォリオ用テンプレートです。
作品を大きく見せる、制作過程を見せる、複数見せる、横長作品を画面内に綺麗に収める等、どんなパターンにも当てはめる事が可能ですよ。

ダウンロードする

#05 Minimalist Portfolio Layout

ポートフォリオの表紙には必ずメインビジュアルを入れないとダメか?そんな事はありません。
単色に文字だけで構成した表紙も素敵です。
ページ中身のレイアウトパターンも豊富、あえて表紙をシンプルにする手法もアリですよ。

ダウンロードする

紹介しきれなかったポートフォリオテンプレートや素材
上記のテンプレートはほんの一部。
下記リンクで多数の高品質なポートフォリオテンプレートを紹介しています!

ワンランク上のテンプレート素材

Illustratorのスキルアップをする上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減するだけでなく、スキルアップの教材としても活用できますよ!


AI形式で作られた高品質なフライヤーのテンプレート50選です。画像と文字を差し替えるだけ、超短時間でハイクオリティなフライヤーが作成可能!
様々なフライヤーのテンプレート50選


デザイン制作を学ぶ導入編としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い!
相手に舐められない名刺テンプレート50選


例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートでレイアウトや余白、文字サイズを簡単に研究可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート40選


ロゴ作成とIllustratorの相性は抜群!
ロゴ制作の効率化だけでなく、アイディアやデータの作り方を学習・研究するための良質な教材だらけですよ。
ハイクオリティなロゴテンプレート50選


単なる白黒のテキストを高品質なロゴのようなグラフィックにできるエフェクトです。
ロゴ・見出しなどキャッチなオリジナルタイトルを一瞬で作成できる優秀な素材ばかり!
商用利用が可能で高品質なテキストエフェクト50選


継ぎ目が無い高品質な背景素材50選です。
全て商用利用OK!作品の密度を一気に高める事ができる汎用性の高い素材ばかりです。
商用利用できる高品質なシームレス背景パターン58選


良質な素材をもっと見る
上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください!

おわりに

以上、Illustrator(イラストレーター)の寸法ツールの使い方についてでした。
パッケージデザインの寸法を記載する時など、クリエイティブのサイズ詳細を簡単に追記できる機能です。

従来の方法だとペンツール等で線を描き、矢印の設定を追加して寸法表記を加える必要がありました。
しかし寸法ツールを使えばクリックとドラッグだけで簡単に寸法が追加できます。

大幅に作業時間を短縮できるツールなので是非ご活用ください!

ではまた!

様々なテキストエフェクトの作り方

Illustratorのアピアランスを使いこなして様々な質感のテキストエフェクトを作る方法を解説しています。
気になるサムネイル画像をクリックすればジャンプします。

 

※作成したテキストエフェクトをグラフィックスタイルへ登録する方法はコチラ

InDesignは活用されていますか?
Illustratorだけでなく、InDesign(インデザイン)も活用されているでしょうか?
ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方はAdobe公式サイトから入手できます。
高品質で商用利用可能なポートフォリオテンプレート40選はコチラ
Illustratorの操作方法

イラレ基本操作

【導入編】ゼロから始めるIllustrator
Adobe Creative Cloudの料金プランやオススメプランを徹底解説
イラレでよく使う機能15選 for 初心者
イラレ全ショートカット一覧
Illustratorとは・DTPの基礎知識
操作画面、新規作成と保存、各種ファイル形式
オブジェクトの作成と選択、構造
イラレの塗りと線について
イラレのカラーモードについて
RGBからCMYKへ変換する方法
整列と分布について徹底解説
オブジェクト重ね順について徹底解説
数値入力によるオブジェクトの作成と操作
レイヤーの概念と操作を分かりやすく徹底解説
オブジェクトの色々なコピペ方法
ペンツールの基本操作とパスの編集
文字ツールの基本的な使い方
文字を装飾する・アピアランスの設定
文字で画像をマスクする
グラデーションツールを極める
メッシュツール・グラデーションメッシュの使い方
ブラシツール・塗りブラシツールの使い方と違い
消しゴムツール・はさみツール・ナイフの使い方
パスファインダーの機能全てを徹底解説
ブレンドツールを使ったオブジェクト作成
回転ツールと回転コピーの使い方
リフレクトツールの使い方
クリッピングマスクの使い方を徹底解説
トンボ(トリムマーク)の設定と塗り足し
ライブトレースを徹底解説
ライブペイントを徹底解説
編集しやすい角丸長方形の作り方
アートボードツールの使い方
パペットワープツールの使い方
リシェイプツールの使い方
線幅ツールを使いこなそう
ワープツールをはじめとした線幅ツールの派生ツール
スライスツールを使った超効率的な画像の書き出し
拡大・縮小ツールの使い方とテクニック
シアーツールの使い方と応用例
自由変形ツールの使い方

バナーやデザイン関連

【就活生向け】ポートフォリオ用テンプレート
サイズ違いのバナー広告を効率的に作る方法
名刺サイズのレイアウト用紙の作成&ガイドの有効的な活用法
オリジナル名刺をデザインして入稿用データを作ろう!
入稿用AIデータの作成方法と注意点について
【AI】ニーアオートマタのUI風ポートフォリオ用テーマ
【AI】ニーアオートマタのUI風エミールの名刺

絵作り

変形を使って水玉模様(ドット柄)や精密なパターン柄を作る方法
ペンツールを使ったトレースのテクニック①
ペンツールを使ったトレースのテクニック②
アピアランスを使った線の設定・線のデザイン
汎用性抜群な略地図の作り方
【鬼滅の刃】炭治郎の耳飾りをイラレで作る方法for初心者
レース柄やレースリボンブラシの作り方を徹底解説
ラフな手描き風の線にする方法
ブレンドと変形効果を使った螺旋状のドット模様の作り方
大阪の謎「連絡まつ村」のシールを作ってみよう【AI配布中】
マーブル模様の作り方を徹底解説forイラレ初心者
ハーフトーン(網点)の作り方と応用
集中線(スピード線)の作り方を徹底解説

アイコン・ロゴ制作

歯車や花、本など色々な図形を作る方法
【全2回】ラノベ風ロゴの作り方【サンプルAI有り】
ファビコンの作り方をデザインパターン別に徹底解説
アイソメトリック文字の作り方【3D・押し出し・ベベル】
リアルなネオンサインの作り方を徹底解説
レトロな雰囲気のロゴを作る方法
高品質な金(ゴールド)表現の作り方
長い影(ロングシャドウ)の作り方2選
デボス加工風カットアウトの作り方
燃えさかる炎をまとった文字の作り方
刺繍(ステッチ)表現の作り方
黒板に描かれたチョーク文字やイラストを再現する方法
真っ二つにスライスされたオブジェクトを作る方法
色ずれをイラレで再現する方法
1980年代レトロフューチャー風ロゴの作り方
レトロゲームのドットテキストを簡単に作る方法

追加機能・その他機能

アナログ画材風の無料ブラシ36選
ブラシ素材の登録方法
スウォッチの登録方法や使い方を徹底解説
グラフィックスタイルの追加・編集方法
ツールバーを編集する方法
スポイトツールでアピアランスをコピーする方法と注意点
別のAIファイルをAI内に配置・編集する方法
ブラックのアピアランスを正しく設定
「最近使用したもの」を非表示にする方法
遠近グリッドを消す方法と基本的な使い方

ゼロイラの目次一覧
SCROLL
目次一覧
ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!

]]>
【Illustrator】溶けた文字の作り方forイラレ初心者 https://sdesignlabo.com/illustrator/ai-melted-letters/ Mon, 11 Dec 2023 06:22:09 +0000 https://sdesignlabo.com/?p=161351

Illustrator(イラストレーター)で溶けたような表現の文字をゼロから作る方法をイラレ初心者の方に詳しく解説します。スライムやチョコレート、ハチミツ、血、チーズなど粘度の高い液体のような表現。そして文字の尖った部分 ... ]]>

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Illustrator(イラストレーター)で溶けたような表現の文字をゼロから作る方法をイラレ初心者の方に詳しく解説します。

スライムやチョコレート、ハチミツ、血、チーズなど粘度の高い液体のような表現。
そして文字の尖った部分が溶けて丸くなったような表現。
二種類の溶け文字表現の作り方を順を追って詳しく解説します。

ロゴデザインやWebデザイン、各種印刷物、UIデザイン等、幅広いクリエイティブに応用できます。
これからIllustratorを始められる方、より詳しくイラレを学習されたい方にオススメのコンテンツですよ。

どんな表現ができるの?

Illustratorを使って上記のような溶けた文字の表現ができます。
制作難易度は低いのでイラレ初心者の方でも10分あれば作成可能!

溶け文字の作り方①

Illustrator(イラストレーター)で溶けた文字を作る方法の1つ目です。
スライムやチョコレート、血、チーズやハチミツなど、粘度の高い液体表現に適しています。

Illustratorを導入しましょう
当記事の内容を実践するにはIllustratorが必須です。
未導入の方はIllustrator公式サイトからダウンロードしておきましょう。(7日間の無料体験が可能)
なお、AdobeCCのプランはコチラの記事で徹底解説しています。
STEP.1
文字を入力
[ 文字ツール ] で文字を入力します。
サンプルのフォントは [ めもわーる – まる ] を使用しました。

[ Ctrl + Shift + O ] (Mac: + Shift + O) でフォントをアウトライン化します。
※アウトライン化はコチラの記事で詳しく解説しています。
STEP.2
ワープツールを選択
ツールバーから [ ワープツール ] を選択します。
※ショートカットは [ Shift + R

ツールバーに無い場合は [ ツールバーを編集 ] して表示させましょう。
STEP.3
ワープツールでドラッグ
STEP.1でアウトライン化した文字をドラッグでなぞってみましょう。
にゅるっと溶けだしたように変形できます。
ブラシサイズを変更する方法
[ Alt ] (Mac:Option) を押しながらドラッグするとワープツールのブラシサイズを変更できます。

[ Alt + Shift ] (Mac:Option + Shift) を押しながらドラッグすると正円の形でブラシサイズを変形できます。
FINISH
完成
以上で溶けたような文字の完成です。
粘度のある液体のようなテキストエフェクトが簡単に作れます。
お好みで色を付けて質感付与をして下さい。
サンプルはスライムをイメージして [ グラデーションツール ] で色を付けました。
全ての加工を含めた所要時間は約5分程度です。

溶け文字の作り方②

Illustratorを使った溶け文字表現の2つ目です。
本来のフォントでは尖った部分が溶けて丸みを帯びたような表現ができます。
※イラレ未導入の方は事前にAdobe公式サイトから入手しておきましょう。

STEP.1
文字を入力
[ 文字ツール ] でお好きな文字を入力します。
明朝体の方が雰囲気が出ます。
サンプルのフォントは [ A-OTF リュウミン Pr6N ] を使用しました。
フォントサイズ:300pt

入力したフォントは [ 選択ツール ] で選択しておきましょう。
STEP.2
アピアランスを開く
[ アピアランスパネル ] を開きます。
非表示の場合は [ Shift + F6 ] で表示可。

アピアランスは対象オブジェクトの外観を自由に設定できる項目です。
STEP.3
オフセットに-の値を入力
アピアランスパネル左下から [ 新規効果を追加 ] → [ パス ] → [ パスのオフセット ] を追加します。
オフセット:-7px
角の形状:ラウンド
角の比率:4

※オフセットの値はお好みで調整して下さい。
すると左図のように文字が細くなります。
FINISH
オフセットに+の値を入力
アピアランスパネル左下から新たに [ 新規効果を追加 ] → [ パス ] → [ パスのオフセット ] を追加します。

オフセット:4px
角の形状:ラウンド
角の比率:4

※オフセットの値はお好みで調整して下さい。
すると一旦細くなった文字が再度太くなり、角張っている箇所が溶けたような表現にできます。
以上で溶け文字エフェクトその②が完成しました。
OMAKE
他のフォントだと?
他のフォント、例えばゴシック体に同じオフセット効果を適用した例です。

もちろんフォントだけでなく、ペンツール等で作成したオブジェクトにも適用できるので、色々とお試しください。

高品質なポートフォリオテンプレート

紙媒体やPDF形式で作成したポートフォリオの品質を手っ取り早く高めるには、高品質なテンプレートの活用が最も効率的かつ効果的です。

商用利用可能で高品質テンプレートばかり厳選!
今まで意識しなかった多くの「気づき」に出会えますよ。

※なお、ポートフォリオ制作はInDesign(インデザイン)を使うのが最も効率的です。
コチラでインデザ初心者の方向けにポートフォリオテンプレートの使い方を詳しく解説しております。

#01 Pink Portfolio Layout

ピンク系のキレイ目カワイイ風ポートフォリオ用テンプレートです。InDesign形式なので文字と画像の差し替えが超楽!
2時間あればポートフォリオが作れます。
編集にはInDesignが必須、未導入の方はInDesign公式サイトから入手しておきましょう。

ダウンロードする

#02 Portfolio Layout with Gray Accents

モノトーン系でどんな作風にも合うポートフォリオ用テンプレートです。イラスト、写真、建築、Web、グッズ…テンプレ選びに迷ったらコレがオススメ!
A4に印刷したポートフォリオ、PDF形式、どちらも短時間で作成可能です。

ダウンロードする

#03 Portfolio Layout with Yellow Accents

黄色が鮮やかでキレイなポートフォリオテンプレートです。
爽やかな画風のイラストにもピッタリ!
クセが無く、ベースデザインとして非常に扱いやすいテンプレートの一つです。

ダウンロードする

#04 Portfolio Template in Pale Green and Mint

収録されているレイアウトパターンが非常に豊富なポートフォリオ用テンプレートです。
作品を大きく見せる、制作過程を見せる、複数見せる、横長作品を画面内に綺麗に収める等、どんなパターンにも当てはめる事が可能ですよ。

ダウンロードする

#05 Minimalist Portfolio Layout

ポートフォリオの表紙には必ずメインビジュアルを入れないとダメか?そんな事はありません。
単色に文字だけで構成した表紙も素敵です。
ページ中身のレイアウトパターンも豊富、あえて表紙をシンプルにする手法もアリですよ。

ダウンロードする

紹介しきれなかったポートフォリオテンプレートや素材
上記のテンプレートはほんの一部。
下記リンクで多数の高品質なポートフォリオテンプレートを紹介しています!

ワンランク上のテンプレート素材

Illustratorのスキルアップをする上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減するだけでなく、スキルアップの教材としても活用できますよ!


AI形式で作られた高品質なフライヤーのテンプレート50選です。画像と文字を差し替えるだけ、超短時間でハイクオリティなフライヤーが作成可能!
様々なフライヤーのテンプレート50選


デザイン制作を学ぶ導入編としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い!
相手に舐められない名刺テンプレート50選


例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートでレイアウトや余白、文字サイズを簡単に研究可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート40選


ロゴ作成とIllustratorの相性は抜群!
ロゴ制作の効率化だけでなく、アイディアやデータの作り方を学習・研究するための良質な教材だらけですよ。
ハイクオリティなロゴテンプレート50選


単なる白黒のテキストを高品質なロゴのようなグラフィックにできるエフェクトです。
ロゴ・見出しなどキャッチなオリジナルタイトルを一瞬で作成できる優秀な素材ばかり!
商用利用が可能で高品質なテキストエフェクト50選


継ぎ目が無い高品質な背景素材50選です。
全て商用利用OK!作品の密度を一気に高める事ができる汎用性の高い素材ばかりです。
商用利用できる高品質なシームレス背景パターン58選


良質な素材をもっと見る
上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください!

おわりに

以上、Illustrator(イラストレーター)で溶けた文字を作る方法についてでした。
ロゴデザイン、Webデザイン、紙面デザイン、UIデザインなど、幅広い制作に役立つ制作テクニックです。

一つ目の溶け文字表現で使うワープツールはイラレで度々使います。
そして [ Alt ] (Mac:Option) を使ったブラシサイズ変更は覚えておくと非常に便利ですよ。

二つ目のパスのオフセットを使った溶け文字表現もしっとりとしたロゴなどに適しています。
アピアランスを使えば後から簡単にフォントや溶け具合の調整も可能なので手軽でオススメ。

上手く活用し、Illustratorを使ったクリエイティブを更に加速させてください!

ではまた!

様々なテキストエフェクトの作り方

Illustratorのアピアランスを使いこなして様々な質感のテキストエフェクトを作る方法を解説しています。
気になるサムネイル画像をクリックすればジャンプします。

 

※作成したテキストエフェクトをグラフィックスタイルへ登録する方法はコチラ

InDesignは活用されていますか?
Illustratorだけでなく、InDesign(インデザイン)も活用されているでしょうか?
ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方はAdobe公式サイトから入手できます。
高品質で商用利用可能なポートフォリオテンプレート40選はコチラ
Illustratorの操作方法

イラレ基本操作

【導入編】ゼロから始めるIllustrator
Adobe Creative Cloudの料金プランやオススメプランを徹底解説
イラレでよく使う機能15選 for 初心者
イラレ全ショートカット一覧
Illustratorとは・DTPの基礎知識
操作画面、新規作成と保存、各種ファイル形式
オブジェクトの作成と選択、構造
イラレの塗りと線について
イラレのカラーモードについて
RGBからCMYKへ変換する方法
整列と分布について徹底解説
オブジェクト重ね順について徹底解説
数値入力によるオブジェクトの作成と操作
レイヤーの概念と操作を分かりやすく徹底解説
オブジェクトの色々なコピペ方法
ペンツールの基本操作とパスの編集
文字ツールの基本的な使い方
文字を装飾する・アピアランスの設定
文字で画像をマスクする
グラデーションツールを極める
メッシュツール・グラデーションメッシュの使い方
ブラシツール・塗りブラシツールの使い方と違い
消しゴムツール・はさみツール・ナイフの使い方
パスファインダーの機能全てを徹底解説
ブレンドツールを使ったオブジェクト作成
回転ツールと回転コピーの使い方
リフレクトツールの使い方
クリッピングマスクの使い方を徹底解説
トンボ(トリムマーク)の設定と塗り足し
ライブトレースを徹底解説
ライブペイントを徹底解説
編集しやすい角丸長方形の作り方
アートボードツールの使い方
パペットワープツールの使い方
リシェイプツールの使い方
線幅ツールを使いこなそう
ワープツールをはじめとした線幅ツールの派生ツール
スライスツールを使った超効率的な画像の書き出し
拡大・縮小ツールの使い方とテクニック
シアーツールの使い方と応用例
自由変形ツールの使い方

バナーやデザイン関連

【就活生向け】ポートフォリオ用テンプレート
サイズ違いのバナー広告を効率的に作る方法
名刺サイズのレイアウト用紙の作成&ガイドの有効的な活用法
オリジナル名刺をデザインして入稿用データを作ろう!
入稿用AIデータの作成方法と注意点について
【AI】ニーアオートマタのUI風ポートフォリオ用テーマ
【AI】ニーアオートマタのUI風エミールの名刺

絵作り

変形を使って水玉模様(ドット柄)や精密なパターン柄を作る方法
ペンツールを使ったトレースのテクニック①
ペンツールを使ったトレースのテクニック②
アピアランスを使った線の設定・線のデザイン
汎用性抜群な略地図の作り方
【鬼滅の刃】炭治郎の耳飾りをイラレで作る方法for初心者
レース柄やレースリボンブラシの作り方を徹底解説
ラフな手描き風の線にする方法
ブレンドと変形効果を使った螺旋状のドット模様の作り方
大阪の謎「連絡まつ村」のシールを作ってみよう【AI配布中】
マーブル模様の作り方を徹底解説forイラレ初心者
ハーフトーン(網点)の作り方と応用
集中線(スピード線)の作り方を徹底解説

アイコン・ロゴ制作

歯車や花、本など色々な図形を作る方法
【全2回】ラノベ風ロゴの作り方【サンプルAI有り】
ファビコンの作り方をデザインパターン別に徹底解説
アイソメトリック文字の作り方【3D・押し出し・ベベル】
リアルなネオンサインの作り方を徹底解説
レトロな雰囲気のロゴを作る方法
高品質な金(ゴールド)表現の作り方
長い影(ロングシャドウ)の作り方2選
デボス加工風カットアウトの作り方
燃えさかる炎をまとった文字の作り方
刺繍(ステッチ)表現の作り方
黒板に描かれたチョーク文字やイラストを再現する方法
真っ二つにスライスされたオブジェクトを作る方法
色ずれをイラレで再現する方法
1980年代レトロフューチャー風ロゴの作り方
レトロゲームのドットテキストを簡単に作る方法

追加機能・その他機能

アナログ画材風の無料ブラシ36選
ブラシ素材の登録方法
スウォッチの登録方法や使い方を徹底解説
グラフィックスタイルの追加・編集方法
ツールバーを編集する方法
スポイトツールでアピアランスをコピーする方法と注意点
別のAIファイルをAI内に配置・編集する方法
ブラックのアピアランスを正しく設定
「最近使用したもの」を非表示にする方法
遠近グリッドを消す方法と基本的な使い方

ゼロイラの目次一覧
SCROLL
目次一覧
ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!

]]>
【Photoshop】スーパーマリオ風ロゴの作り方forフォトショ初心者 https://sdesignlabo.com/photoshop/ps-mariologo/ Thu, 16 Nov 2023 07:28:25 +0000 https://sdesignlabo.com/?p=160738

Photoshop(フォトショップ)でスーパーマリオを模したロゴデザインをゼロから作る方法をフォトショ初心者の方に詳しく解説します。カラフルな文字色と黒の枠線が特徴的なマリオのロゴですが、フォトショップで忠実に再現するに ... ]]>

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop(フォトショップ)でスーパーマリオを模したロゴデザインをゼロから作る方法をフォトショ初心者の方に詳しく解説します。
カラフルな文字色と黒の枠線が特徴的なマリオのロゴですが、フォトショップで忠実に再現するにはテクニックが必要です。

ゲーム系のポートフォリオ制作、WebデザインやDTPデザインのあしらい、UIデザイン等。
フォトショを使った幅広いクリエイティブに応用できる内容が盛りだくさんです。

Photoshopを始められる方、より深くフォトショップを学習されたい方にオススメのコンテンツです。

どんなロゴが作れるの?

Photoshopを使って左図のようなスーパーマリオブラザーズのロゴ風デザインがゼロから作れます。

見た目的に簡単なロゴデザインですが、忠実に再現するには普通に思いつく機能以外を使いこなす必要があります。

レイヤースタイルの境界線やドロップシャドウを使ってスーパーマリオ風のロゴを再現した場合のサンプルです。それっぽくは作れますが、再現度は低いですね。

当記事ではスーパーマリオのロゴを忠実かつ効率的に作る方法を解説します。

スーパーマリオ風ロゴの作り方

Photoshopでスーパーマリオ風のロゴデザインをゼロから作る方法を解説します。
フォトショ初心者の方にも再現できるよう詳しく解説いたします!

Photoshopを導入しましょう
当記事の内容を実践するにはPhotoshop(フォトショップ)が必須です。
未導入の方はフォトプラン公式サイトから入手可能。(月額は最安の1,078円、7日間の無料体験が可能)
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

キャンバスを作成し、文字を入力

STEP.1
新規ドキュメントを作成
下記の新規ドキュメントを作成します。
幅:1000px
高さ:500px
解像度:72px/inch
STEP.2
文字を入力
[ 文字ツール ] で文字を入力します。
左図のように1文字ずつ入力しテキストレイヤーを分けます。

入力後は [ 移動ツール ] で文字をある程度レイアウトしておきましょう。

村尾佐、架空の人物です。
STEP.3
フォントを変更
フォントを変更します。
サンプルは下記を使用。

フォント:SuperMario256
フォントサイズ:150pt
FINISH
文字色を変更
文字の塗りを変更します。
サンプルは下記です。

赤:#e6280f
緑:#46af37
黄:#ffd200
青:#00a0dc

エッジの立ったアウトラインを作成

次に文字に黒線のフチを付けていきます。
なお、[ レイヤースタイル ] → [ 境界線 ] を使って黒線を追加すると、左図のように角に丸みを帯びたデザインになります。

スーパーマリオのロゴはエッジが立ったデザインなので、境界線を使わず黒フチ線を表現します。
STEP.1
コピーしてシェイプに変換
まずは文字レイヤーをコピーします。
コピーしたテキストレイヤーを [ 右クリック ] → [ シェイプに変換 ] を適用します。
※シェイプレイヤーはテキストレイヤーの下部に配置しておきましょう。

文字ごと [ Ctrl + G ] (Mac: + G) でグループ化しておきましょう。
シェイプに変換できない場合は?
左図のように [ 要求された操作を完了できません。テキストレイヤーは太字を使用しています ]  と表示され、シェイプに変換できない場合があります。

文字パネルの [ 太字 ] を解除してから再度シェイプに変換して下さい。
STEP.2
線を追加する
[ U ] を押して [ 長方形ツール ] に変更します。
すると画面上部の [ オプション ] に塗りと線の設定が表示されます。

塗り:テキストと同じ色
線:黒
線幅:25px、実線
すると左図のような状態にできます。
STEP.3
レイアウトを整える
[ 移動ツール ] で文字のレイアウトを微調整します。

[ バウンディングボックス ] で回転させたり微妙に拡縮し、全体を整えましょう。
FINISH
中心を黒く塗りつぶす
新規レイヤーを作成し、最下部に配置します。

ロゴ中心の白抜き部分を [ ブラシツール ] で黒く塗りつぶします。すると左図のようなスーパーマリオ風ロゴに近づきます。

シャドウを追加する

最後に黒色のシャドウを追加し、立体感を付与します。長く伸びた影を美しく、効率的に作る方法を解説します。

※なお、レイヤースタイルの [ ドロップシャドウ ] を使うと離れた位置に落ち影が追加できますが、ロングシャドウ風の表現はできません。
STEP.1
コピーしてスマートオブジェクト化
先に作成したテキストなど、全てのレイヤーをグループ化してまとめ、[ Ctrl + J ] (Mac: + J) でコピーします。
コピーしたレイヤーグループを [ スマートオブジェクトに変換 ] します。
スマートオブジェクトは最下部に配置しておきましょう。
STEP.2
スマートオブジェクトをコピー
STEP.1で作成したスマートオブジェクトを [ Ctrl + J ] (Mac: + J) で複製します。
サンプルは全20のスマートオブジェクトをコピーして作成しました。

グループ化し、名前を変更しておきましょう。
STEP.3
垂直位置を変更する
STEP.2で作成した最上部のスマートオブジェクトをアクティブにします。
[ Ctrl + T ] (Mac: + T) で自由変形を行います。
すると画面上部の [ オプション ] に水平位置と垂直位置が編集できます。
Yの垂直位置に現在の値+20px追加しましょう。
※もしSTEP.2で作成したスマートオブジェクトが10なら現在の値+10px、30なら現在の値+30pxです。
すると下方向に20px移動しました。
STEP.4
垂直方向に分布
レイヤーパネル内の影用スマートオブジェクトを全てアクティブにします。
[ 移動ツール ] に切り替えます。
※ショートカットは [ V
すると画面上部の [ オプション ] に [ 整列 ] が表示されます。

[ 垂直方向に分布 ] をクリックしましょう。
すると綺麗に全てのスマートオブジェクトが1pxずつズレて綺麗にレイアウトされます。
FINISH
完成
影用グループに [ レイヤースタイル ] → [ カラーオーバーレイ ] を適用します。
描画モード:通常
カラー:黒
不透明度:100%
以上でPhotoshopを使ってスーパーマリオのロゴを模したデザインが完成しました。

Photoshopのロングシャドウ表現の作り方はコチラの記事でも詳しく解説しているので併せてチェックしてください。

高品質なポートフォリオテンプレート

紙媒体やPDF形式で作成したポートフォリオの品質を手っ取り早く高めるには、高品質なテンプレートの活用が最も効率的かつ効果的です。

商用利用可能で高品質テンプレートばかり厳選!
今まで意識しなかった多くの「気づき」に出会えますよ。

※なお、ポートフォリオ制作はInDesign(インデザイン)を使うのが最も効率的です。
コチラでインデザ初心者の方向けにポートフォリオテンプレートの使い方を詳しく解説しております。

#01 Pink Portfolio Layout

ピンク系のキレイ目カワイイ風ポートフォリオ用テンプレートです。InDesign形式なので文字と画像の差し替えが超楽!
2時間あればポートフォリオが作れます。
編集にはInDesignが必須、未導入の方はInDesign公式サイトから入手しておきましょう。

ダウンロードする

#02 Portfolio Layout with Gray Accents

モノトーン系でどんな作風にも合うポートフォリオ用テンプレートです。イラスト、写真、建築、Web、グッズ…テンプレ選びに迷ったらコレがオススメ!
A4に印刷したポートフォリオ、PDF形式、どちらも短時間で作成可能です。

ダウンロードする

#03 Portfolio Layout with Yellow Accents

黄色が鮮やかでキレイなポートフォリオテンプレートです。
爽やかな画風のイラストにもピッタリ!
クセが無く、ベースデザインとして非常に扱いやすいテンプレートの一つです。

ダウンロードする

#04 Portfolio Template in Pale Green and Mint

収録されているレイアウトパターンが非常に豊富なポートフォリオ用テンプレートです。
作品を大きく見せる、制作過程を見せる、複数見せる、横長作品を画面内に綺麗に収める等、どんなパターンにも当てはめる事が可能ですよ。

ダウンロードする

#05 Minimalist Portfolio Layout

ポートフォリオの表紙には必ずメインビジュアルを入れないとダメか?そんな事はありません。
単色に文字だけで構成した表紙も素敵です。
ページ中身のレイアウトパターンも豊富、あえて表紙をシンプルにする手法もアリですよ。

ダウンロードする

紹介しきれなかったポートフォリオテンプレートや素材
上記のテンプレートはほんの一部。
下記リンクで多数の高品質なポートフォリオテンプレートを紹介しています!

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。


例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート40選


デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い!
相手に舐められない名刺テンプレート50選


バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選


紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう!
デジタル媒体向けポートフォリオテンプレ素材35選


制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬!
様々なモックアップテンプレート57選


良質な素材をもっと見る
上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください!

おわりに

以上、Photoshop(フォトショップ)を使ってスーパーマリオのロゴを忠実に再現する方法でした。

単に文字を入力するだけだと、文字同士が重なり合っている部分に黒い境界線が表現できません。
多少面倒ですが、一文字ずつ入力し、個別で境界線を作りましょう。

またレイヤースタイルの境界線だと、角に丸みができるのでスーパーマリオのオリジナルロゴのデザインと異なった表現になります。
文字をコピーし、シェイプに変換してから線の太さを調整して境界線を作ります。

見た目的に簡単に作れそうなロゴデザインですが、普通に思いつく機能だけでは表現できません。
ちょっとしたPhotoshopの小技を組合わせると有名なロゴデザインも忠実に再現できるので、是非お試しください!


ではまた!

テキストエフェクトの作り方まとめ

Photoshopでテキストエフェクトをゼロから自作する方法、そして1分で超高品質で商用利用可能なテキストエフェクトが作れるPSD素材の使い方と作例を解説しています。
ロゴデザイン、Webデザイン、バナーデザイン、各種DTPデザイン、UIデザイン、ポートフォリオ制作等。幅広いクリエイティブに活用できる内容です。

テキストエフェクトを自作

Photoshopを使いこなして様々な質感のテキストエフェクトを作る方法を解説しています。
気になるサムネイル画像をクリックすればメイキング記事にジャンプします。

 
 

1分で高品質なエフェクトが作れるPSD

1分で超高品質なテキストエフェクトが作れるPSD素材です。
全て商用利用可能!
劇的にクリエイティブを効率化できる素材を活用してみませんか?

[/box]

様々なテキストエフェクトのPSD素材
Photoshopで使える商用利用可能で高品質な様々なテキストエフェクトのPSD素材を厳選しました。1分でプロクオリティの作品が作れるチート素材ですよ。
Photoshopの操作方法

フォトショ基本操作

【導入編】ゼロから始めるPhotoshop
Adobe Creative Cloudの料金プランやオススメプランを徹底解説
フォトショの全ショートカットまとめ
フォトショ初心者が押さえておきたい基本操作14選
レイヤーの作成・レイヤーの操作
ブラシツールの基本的な使い方と応用操作を徹底解説
左右対称、マンダラを使った魔法陣・レース模様の作成方法
各種カラーモードについて
【遠近法の切り抜きツール】斜めから撮った写真を正面に補正する方法と応用
切り抜きツールの使い方と解像度・サイズの変更方法を徹底解説
文字ツールの基本的な使い方
文字パネルの機能と使い方を徹底解説
段落パネルの機能と使い方を徹底解説
グラデーションツールとグラデーションオーバーレイの違いと使い方
整列と分布を使ったレイアウト方法
レイヤースタイル、レイヤー効果の基本的な使い方
ドロップシャドウをさりげなく使ってキレイ目デザインを作る方法
作業効率化に繋がるPhotoshop特有の色々なコピペ方法
調整レイヤーを徹底解説
シェイプツールの使い方・編集方法を徹底解説
共通パーツをインクルードする方法

バナーやUIをデザイン

Photoshopでバナー広告を作る方法を完全解説
【前編】スマホゲームのUIを作ってみよう(構成~下絵)
【中編】スマホゲームのUIを作ってみよう(質感付与)
【後編】スマホゲームのUIを作ってみよう(バナーやボタン)
GDNで有効的なサイズのバナー広告の作り方を完全解説
Photoshopで複数サイズのバナーを効率的に作成する方法

様々な質感を再現

Photoshopで黄金風の効果を付ける方法を詳しく解説
ベベルとエンボスで金属表現を作る方法
レイヤースタイルだけで水滴や汗を作る方法
リアルな木彫りのような質感を再現する方法
テキストをネオンサイン風にする方法
テキストにリアルな錆(サビ)た金属表現を追加する方法
レイヤースタイルでポップなロゴを作る方法
すりガラス(曇りガラス)の再現方法

写真の雰囲気を激変させる

Photoshopで写真をインスタグラム風に加工する方法
レンズフレアを追加して印象的な写真に仕上げる方法
ニュートラルフィルターで肌を一瞬でキレイにする方法
RGBずらし(色ずれ)を使った画像の作り方
写真をアメコミ風に加工する方法を徹底解説
写真をポップアート風に加工する方法を徹底解説
昼間の写真を夜に変更する方法を徹底解説
昼間の写真を夕暮れに加工する方法を徹底解説
【チルトシフト】風景写真をミニチュア風に加工する方法
カラーハーフトーンの作り方と応用例を徹底解説
写真を水彩画風に加工する方法を徹底解説
写真をワンランク上の油彩風に加工する方法
アートヒストリーブラシツールを使って写真を絵画風に大変身
写真をデュオトーン(ダブルトーン)に加工
レントゲン写真のような見た目に加工する方法
フォトショで線画スケッチ風のタッチを再現
秋を感じさせる色味にレタッチする方法
写真やイラストをドット柄に変えるテクニック
写真やイラストをドット絵風に加工する方法
緑で覆われた廃墟を1分で作る方法
1980’のレトロなカットアウト表現の作り方
光輝くオーラエフェクトの作り方を徹底解説
サイバーパンク風の加工をお手軽にする方法

便利な画像加工テクニック

Photoshopで人物の表情を簡単に変える方法
コンテンツに応じた塗りつぶしで不要な要素を消す方法
斜めから撮影した画面に画像や文字をはめ込む方法
「空を置き換え」で曇り空を1分で修整する方法
スマートポートレイトをイラストに適用する方法と検証
3分で髪の毛を簡単に切り抜く方法(境界線調整ブラシツール)
【間違い探し動画】初心者向けアハ体験動画の作り方
リアルな虹の作り方と合成方法を徹底解説
リアルな雨の作り方を徹底解説
リアルな雷をゼロから作る方法
雪の作り方と降らせ方を徹底解説
煙の作り方を徹底解説
深度ぼかしで被写体深度を簡単に再現する方法
画像に勢いや動きを付ける方法
スーパーズームで劇的に高画質化する方法
影の付け方を徹底解説forフォトショ初心者
白黒画像を簡単にカラー化する方法
合成画像を1分で自然に調和させる方法
アート風コラージュの作り方
ボロボロの古雑誌や本を簡単に作る方法

機能追加・その他の機能

Photoshopの無料レイヤースタイル全447種まとめ
無料&商用可能なカスタムシェイプ46選
レイヤースタイルの登録と書き出し
シェイプを登録する方法(カスタムシェイプを定義)
無料&商用可能で本当に使えるブラシ素材64選
【ブラシを定義】自作ブラシの作成と登録方法を解説
【ブラシを定義】自作ブラシの作成と登録方法を解説
WebP形式の画像を編集・保存できるプラグインの導入方法
パターンの定義方法とパターン背景の作り方を完全解説
汎用性抜群なストライプパターンの作り方を解説

フォトショップのお困りごと

「最近使用したもの」を非表示にする方法
ブラシのポインタが十字になった時の対処法
突然画面がグレーになってしまった時の対処法
「変形」の仕様をCC2018以前に戻す方法
ツールバーをカスタマイズする方法
別名で保存からJPGやPNG画像に保存できない問題
塗りつぶしの白い隙間を無くす方法3選

目次一覧を見る
SCROLL
目次一覧
ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!

]]>
【Photoshop】ドロップシャドウの向きを連動させない方法forフォトショ初心者 https://sdesignlabo.com/photoshop/ps-shadow-houkatsu/ Wed, 15 Nov 2023 03:38:43 +0000 https://sdesignlabo.com/?p=160683

Photoshop(フォトショップ)でドロップシャドウやシャドウ(内側)を複数のレイヤーに適用した際、影の向きが連動する現象が起きます。レイヤーごとに個別で影の方向を設定したい時の対処方法についてフォトショ初心者の方に分 ... ]]>

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop(フォトショップ)でドロップシャドウやシャドウ(内側)を複数のレイヤーに適用した際、影の向きが連動する現象が起きます。
レイヤーごとに個別で影の方向を設定したい時の対処方法についてフォトショ初心者の方に分かりやすく解説します。

Photoshopを始められる方、より深くフォトショップを学習されたい方にオススメのコンテンツです。

ドロップシャドウの角度連動とは?

左図のように複数のレイヤーに対し、個別でレイヤースタイルの [ ドロップシャドウ ] または [ シャドウ(内側) ] を設定します。

距離を追加し、角度を変更するとシャドウの向きが変えられます。
しかしPhotoshopの初期状態では全てのレイヤースタイルに対して影の向きが連動してしまいます。

当記事では個別で影の方向を設定したい時の解決方法を2つ紹介します。

ドロップシャドウの影を連動しない方法

Photoshopでドロップシャドウやシャドウ(内側)の角度を連動させない方法を2つ解説します。
フォトショップのレイヤースタイルを使う上で押さえておくと非常に便利な機能ですよ。

Photoshopを導入しましょう
当記事の内容を実践するにはPhotoshop(フォトショップ)が必須です。
未導入の方はフォトプラン公式サイトから入手可能。(月額は最安の1,078円、7日間の無料体験が可能)
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

包括光源を使用のチェックを外す

STEP.1
レイヤースタイルを追加
任意のオブジェクトをアクティブにし、[ レイヤースタイル ] を開きます。

各レイヤーにシャドウの角度調整をしたい [ ドロップシャドウ ] または [ シャドウ(内側) ] を追加します。
STEP.2
包括光源を使用のチェックを外す
レイヤースタイルの詳細設定画面にある [ 包括光源を使用 ] のチェックを外します。

あとはお好みで [ 角度 ] を調整しましょう。
STEP.3
完成
すると左図のように複数作成したドロップシャドウやシャドウ(内側)の影の向きが連動しなくなります。

個別で影の向きを変更したい場合は [ 包括光源を使用 ] のチェックを外しましょう。

スマートオブジェクトに変換する

STEP.1
ドロップシャドウを追加
複数のレイヤーに [ レイヤースタイル ] → [ ドロップシャドウ ] または [ シャドウ(内側) ] を設定します。
STEP.2
スマートオブジェクトに変換する
シャドウの角度を変えたくないレイヤーを [ スマートオブジェクトに変換 ] します。
※レイヤー上を [ 右クリック ] → [ スマートオブジェクトに変換

他のシャドウの角度を変えてもスマートオブジェクトに変換したレイヤーのシャドウの角度は変わりません。
STEP.3
スマートオブジェクトを編集
なお、スマートオブジェクトのレイヤーサムネールをダブルクリックすると別ウィンドウでPSBが開き、再度レイヤースタイルの設定ができます。
1つのレイヤー内で複数シャドウの場合は?
1つのレイヤー内に複数のドロップシャドウやシャドウ(内側)を設定し、個別で角度を変えたい時にはスマートオブジェクト化は使えません。

先に解説した [ 包括光源を使用 ] のチェックを外す方法が一番スマートで編集性が高い方法です。

高品質なポートフォリオテンプレート

紙媒体やPDF形式で作成したポートフォリオの品質を手っ取り早く高めるには、高品質なテンプレートの活用が最も効率的かつ効果的です。

商用利用可能で高品質テンプレートばかり厳選!
今まで意識しなかった多くの「気づき」に出会えますよ。

※なお、ポートフォリオ制作はInDesign(インデザイン)を使うのが最も効率的です。
コチラでインデザ初心者の方向けにポートフォリオテンプレートの使い方を詳しく解説しております。

#01 Pink Portfolio Layout

ピンク系のキレイ目カワイイ風ポートフォリオ用テンプレートです。InDesign形式なので文字と画像の差し替えが超楽!
2時間あればポートフォリオが作れます。
編集にはInDesignが必須、未導入の方はInDesign公式サイトから入手しておきましょう。

ダウンロードする

#02 Portfolio Layout with Gray Accents

モノトーン系でどんな作風にも合うポートフォリオ用テンプレートです。イラスト、写真、建築、Web、グッズ…テンプレ選びに迷ったらコレがオススメ!
A4に印刷したポートフォリオ、PDF形式、どちらも短時間で作成可能です。

ダウンロードする

#03 Portfolio Layout with Yellow Accents

黄色が鮮やかでキレイなポートフォリオテンプレートです。
爽やかな画風のイラストにもピッタリ!
クセが無く、ベースデザインとして非常に扱いやすいテンプレートの一つです。

ダウンロードする

#04 Portfolio Template in Pale Green and Mint

収録されているレイアウトパターンが非常に豊富なポートフォリオ用テンプレートです。
作品を大きく見せる、制作過程を見せる、複数見せる、横長作品を画面内に綺麗に収める等、どんなパターンにも当てはめる事が可能ですよ。

ダウンロードする

#05 Minimalist Portfolio Layout

ポートフォリオの表紙には必ずメインビジュアルを入れないとダメか?そんな事はありません。
単色に文字だけで構成した表紙も素敵です。
ページ中身のレイアウトパターンも豊富、あえて表紙をシンプルにする手法もアリですよ。

ダウンロードする

紹介しきれなかったポートフォリオテンプレートや素材
上記のテンプレートはほんの一部。
下記リンクで多数の高品質なポートフォリオテンプレートを紹介しています!

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。


例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート40選


デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い!
相手に舐められない名刺テンプレート50選


バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選


紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう!
デジタル媒体向けポートフォリオテンプレ素材35選


制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬!
様々なモックアップテンプレート57選


良質な素材をもっと見る
上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください!

おわりに

以上、Photoshop(フォトショップ)でドロップシャドウやシャドウ(内側)のシャドウ角度を連動させない方法についてでした。

自然な仕上がりにするならシャドウの角度は連動させておく方が良いですが、個別でシャドウの角度を変えてデザイン調整を行う事もあります。
そんな時は [ 包括光源を使用 ] のチェックを外すとシャドウの角度を個別編集できるようになります。

スマートオブジェクトに変換する方法でも行えますが、別ウィンドウでPSBを編集する必要があるので少し面倒な作りになります。
[ 包括光源を使用 ] のチェックを外す方法が最も利便性の高い方法ですよ。

包括光源を使用はPhotoshopのレイヤースタイルの基本であるドロップシャドウとシャドウ(内側)を使いこなす上で欠かせない機能なので、是非マスターしておきましょう!


ではまた!

Photoshopの操作方法

フォトショ基本操作

【導入編】ゼロから始めるPhotoshop
Adobe Creative Cloudの料金プランやオススメプランを徹底解説
フォトショの全ショートカットまとめ
フォトショ初心者が押さえておきたい基本操作14選
レイヤーの作成・レイヤーの操作
ブラシツールの基本的な使い方と応用操作を徹底解説
左右対称、マンダラを使った魔法陣・レース模様の作成方法
各種カラーモードについて
【遠近法の切り抜きツール】斜めから撮った写真を正面に補正する方法と応用
切り抜きツールの使い方と解像度・サイズの変更方法を徹底解説
文字ツールの基本的な使い方
文字パネルの機能と使い方を徹底解説
段落パネルの機能と使い方を徹底解説
グラデーションツールとグラデーションオーバーレイの違いと使い方
整列と分布を使ったレイアウト方法
レイヤースタイル、レイヤー効果の基本的な使い方
ドロップシャドウをさりげなく使ってキレイ目デザインを作る方法
作業効率化に繋がるPhotoshop特有の色々なコピペ方法
調整レイヤーを徹底解説
シェイプツールの使い方・編集方法を徹底解説
共通パーツをインクルードする方法

バナーやUIをデザイン

Photoshopでバナー広告を作る方法を完全解説
【前編】スマホゲームのUIを作ってみよう(構成~下絵)
【中編】スマホゲームのUIを作ってみよう(質感付与)
【後編】スマホゲームのUIを作ってみよう(バナーやボタン)
GDNで有効的なサイズのバナー広告の作り方を完全解説
Photoshopで複数サイズのバナーを効率的に作成する方法

様々な質感を再現

Photoshopで黄金風の効果を付ける方法を詳しく解説
ベベルとエンボスで金属表現を作る方法
レイヤースタイルだけで水滴や汗を作る方法
リアルな木彫りのような質感を再現する方法
テキストをネオンサイン風にする方法
テキストにリアルな錆(サビ)た金属表現を追加する方法
レイヤースタイルでポップなロゴを作る方法
すりガラス(曇りガラス)の再現方法

写真の雰囲気を激変させる

Photoshopで写真をインスタグラム風に加工する方法
レンズフレアを追加して印象的な写真に仕上げる方法
ニュートラルフィルターで肌を一瞬でキレイにする方法
RGBずらし(色ずれ)を使った画像の作り方
写真をアメコミ風に加工する方法を徹底解説
写真をポップアート風に加工する方法を徹底解説
昼間の写真を夜に変更する方法を徹底解説
昼間の写真を夕暮れに加工する方法を徹底解説
【チルトシフト】風景写真をミニチュア風に加工する方法
カラーハーフトーンの作り方と応用例を徹底解説
写真を水彩画風に加工する方法を徹底解説
写真をワンランク上の油彩風に加工する方法
アートヒストリーブラシツールを使って写真を絵画風に大変身
写真をデュオトーン(ダブルトーン)に加工
レントゲン写真のような見た目に加工する方法
フォトショで線画スケッチ風のタッチを再現
秋を感じさせる色味にレタッチする方法
写真やイラストをドット柄に変えるテクニック
写真やイラストをドット絵風に加工する方法
緑で覆われた廃墟を1分で作る方法
1980’のレトロなカットアウト表現の作り方
光輝くオーラエフェクトの作り方を徹底解説
サイバーパンク風の加工をお手軽にする方法

便利な画像加工テクニック

Photoshopで人物の表情を簡単に変える方法
コンテンツに応じた塗りつぶしで不要な要素を消す方法
斜めから撮影した画面に画像や文字をはめ込む方法
「空を置き換え」で曇り空を1分で修整する方法
スマートポートレイトをイラストに適用する方法と検証
3分で髪の毛を簡単に切り抜く方法(境界線調整ブラシツール)
【間違い探し動画】初心者向けアハ体験動画の作り方
リアルな虹の作り方と合成方法を徹底解説
リアルな雨の作り方を徹底解説
リアルな雷をゼロから作る方法
雪の作り方と降らせ方を徹底解説
煙の作り方を徹底解説
深度ぼかしで被写体深度を簡単に再現する方法
画像に勢いや動きを付ける方法
スーパーズームで劇的に高画質化する方法
影の付け方を徹底解説forフォトショ初心者
白黒画像を簡単にカラー化する方法
合成画像を1分で自然に調和させる方法
アート風コラージュの作り方
ボロボロの古雑誌や本を簡単に作る方法

機能追加・その他の機能

Photoshopの無料レイヤースタイル全447種まとめ
無料&商用可能なカスタムシェイプ46選
レイヤースタイルの登録と書き出し
シェイプを登録する方法(カスタムシェイプを定義)
無料&商用可能で本当に使えるブラシ素材64選
【ブラシを定義】自作ブラシの作成と登録方法を解説
【ブラシを定義】自作ブラシの作成と登録方法を解説
WebP形式の画像を編集・保存できるプラグインの導入方法
パターンの定義方法とパターン背景の作り方を完全解説
汎用性抜群なストライプパターンの作り方を解説

フォトショップのお困りごと

「最近使用したもの」を非表示にする方法
ブラシのポインタが十字になった時の対処法
突然画面がグレーになってしまった時の対処法
「変形」の仕様をCC2018以前に戻す方法
ツールバーをカスタマイズする方法
別名で保存からJPGやPNG画像に保存できない問題
塗りつぶしの白い隙間を無くす方法3選

目次一覧を見る
SCROLL
目次一覧
ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!

]]>
【Photoshop】ドロップシャドウにグラデーションをかけたロゴデザインの作り方forフォトショ初心者 https://sdesignlabo.com/photoshop/ps-isekailogo2/ Fri, 10 Nov 2023 01:40:27 +0000 https://sdesignlabo.com/?p=160587

Photoshop(フォトショップ)でドロップシャドウにグラデーションをかけたロゴデザインを作る方法をフォトショ初心者の方に徹底解説します。異世界転生モノでありがちなロゴデザインが再現できます。実際に異世界系の作品作りの ... ]]>

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop(フォトショップ)でドロップシャドウにグラデーションをかけたロゴデザインを作る方法をフォトショ初心者の方に徹底解説します。
異世界転生モノでありがちなロゴデザインが再現できます。

実際に異世界系の作品作りの素材として、Webデザインや印刷物などのクリエイティブ素材として、ポートフォリオの素材など、ロゴデザインテクニックだけにとどまらない幅広い分野に活用できます。

これからPhotoshopを始められる方、更にフォトショを学習されたい方にオススメのコンテンツですよ。
なお、コンテンツ内容が多いので前編と後編(当記事)に分けて解説いたします。

どんな異世界系ロゴが作れるの?


異世界系ロゴ①「異世界に転生したけど汗かき体質なので心配です」の作り方はコチラ

異世界系ロゴ②「転生したらスライム化して異世界最弱になりました。」の作り方はコチラ

異世界系ロゴ③「鑑定スキルが無敵すぎる、異世界婚活」の作り方はコチラ

異世界系ロゴ④「世界最弱の暗殺者 異世界平民に転生する」の作り方はコチラ

上記の異世界系ラノベ風ロゴをゼロから作成します。

Photoshop初心者の方でも順を追っていけば再現できる異世界転生系のロゴデザインを通して、より深くフォトショップを学ばれてみませんか?
ロゴデザインだけでなく、Webデザイン、印刷物のあしらい、UIデザイン、ポートフォリオ制作など、フォトショを使った幅広いクリエイティブに応用できるテクニックですよ。

異世界系ロゴデザインの作り方(後編)

Photoshopで異世界転生系のラノベや漫画・アニメなどでよく見かけるロゴ制作方法を解説します。
フォトショ初心者の方にも再現できるように順を追って解説いたします!

Photoshopを導入しましょう
当記事の内容を実践するにはPhotoshop(フォトショップ)が必須です。
未導入の方はフォトプラン公式サイトから入手可能。(月額は最安の1,078円、7日間の無料体験が可能)
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

異世界ロゴ③の作り方

異世界系ロゴ③「鑑定スキルが無敵すぎる」と「異世界婚活」の作り方です。

通常の方法ではドロップシャドウにグラデーションの設定はできませんが、少し工夫を加える事でグラデーションのドロップシャドウにできます。
STEP.1
文字を入力
[ 文字ツール ] でロゴのベースとなる文字を入力。
「異世界婚活」「いせかいこんかつ」2つのテキストレイヤーに分けました。

テキストレイヤーは [ Ctrl + G ] (Mac: + G) でグループ化しておきましょう。
STEP.2
文字調整
[ 文字パネル ] でフォント、フォントサイズ、ベースラインシフト、斜体の設定を追加します。

※文字色は白にしますが、サンプルは分かりやすい様に黒にしています。
文字調整が完了したら [ Ctrl + J ] (Mac: + J) でグループをコピーします。

左図は分かりやすい様にレイヤー名を「白文字」と「シャドウ用」としました。
STEP.3
シャドウを設定
シャドウ用のグループに [ レイヤースタイル ] → [ドロップシャドウ ] を適用します。

描画モード:通常 カラー:任意
不透明度:100% 角度:任意 包括光源を使用
距離:0px スプレッド:30% サイズ:40px
すると左図のようなドロップシャドウを付与できました。

次にシャドウ用のグループを [ スマートオブジェクトに変換 ] しましょう。
FINISH
グラデーションを追加して完成
シャドウ用のスマートオブジェクトに [ グラデーションオーバーレイ ] を追加します。

描画モード:通常 不透明度:100%
グラデーション:次図参照
スタイル:線形 シェイプ内で作成
角度:0° 比率:100% 方法:クラシック
グラデーションの詳細設定
分岐点①:#f81ead
分岐点②:#f7cc0c
分岐点③:#ff5a00
すると左図のようにドロップシャドウに対してグラデーションの設定が付与できます。
色が薄く感じる場合はレイヤー複製し、不透明度を調整してお好みの濃さにして下さい。
OMAKE
別パターンのロゴデザイン
ドロップシャドウにグラデーションを付与するテクニックを使い、別の異世界系ラノベ風ロゴも簡単に作れますよ。

なお、元ネタは「転生貴族、鑑定スキルで成り上がる ~弱小領地を受け継いだので、優秀な人材を増やしていたら、最強領地になってた~」です。
光彩(外側)でドロップシャドウにグラデを追加
[ 光彩(内側) ] でもドロップシャドウの表現ができ、更にグラデーションを追加する事ができますが、左図のような表現に限られます。

右から左にかけて等のグラデーションをかけたい場合は先に解説した方法を使ってください。

異世界ロゴ④の作り方

異世界系ロゴ④「世界最弱の暗殺者、異世界平民に転生する」の作り方です。
赤色のドット柄が特徴的なロゴデザインですね。

※なお、Photoshop未導入の方は事前にAdobe公式サイトから入手しておきましょう。
STEP.1
ベースの文字を入力
[ 文字ツール ] で文字をベタ入力します。

後ほど編集しやすい様、下記のように4つのテキストレイヤーに分けて入力しました。
「世界最低の暗殺者、」
「異世界平民に転生する」
「The World’s worst assassin」
「To reincarnate in a different wordl commoner」
STEP.2
文字調整を行う
[ 文字パネル ] を使ってフォントやフォントサイズ、ベースラインシフト等を調整します。
ついでに横線のあしらいを [ ペンツール ] で作成。

文字や線などのロゴを構成しているパーツは全て [ Ctrl + G ] (Mac: + G) でグループ化した後に [ スマートオブジェクトに変換 ] します。
STEP.3
カラーハーフトーンでドットを作成①
ロゴに重なっている赤色のドットを作成していきましょう。

[ ブラシツール ] → [ ソフト円ブラシ ] を選択。
描画色を黒色にし、新規レイヤーに描きます。
新たにレイヤーを追加し、[ 塗りつぶしツール ] で白色で塗りつぶします。

ブラシで描いたレイヤーと白で塗りつぶしたレイヤーを選択し、[ スマートオブジェクトに変換 ] しましょう。
STEP.4
カラーハーフトーンでドットを作成②
STEP.3で作成したレイヤーをアクティブにします。
Photoshop画面上部の [ フィルター ] → [ ピクセレート ] → [ カラーハーフトーン ] を適用。
最大半径:任意
チャンネル1(1):45
チャンネル2(2):45
チャンネル3(3):45
チャンネル4(4):45
すると左図のようにスクリーントーンのようなドット表現が作れました。
STEP.5
ドットのみ抽出
フォトショップ画面上部の [ 選択範囲 ] → [ 色域指定 ] をクリックします。
すると色域指定の設定画面が開きます。
[ 許容値 ] を増やすとより広く選択範囲を作成、減らすと選択範囲が小さくなります。
適宜調整し、[ OK ] をクリック。
[ Ctrl + Shift + I ] (Mac: + Shift + I) で選択範囲を反転させます。

レイヤーパネル下部の [ レイヤーマスク ] を適用し、白い背景部分をマスクします。
すると白い部分を透明状態にできます。
FINISH
完成
STEP.2で作成したロゴのスマートオブジェクトにSTEP.5のドットを [ クリッピングマスク ] します。
ドットレイヤーに [ カラーオーバーレイ ] を適用。
描画モード:通常 カラー:#e50101
不透明度:100%

以上で完成です。
なお、元ネタ作品は小説家になろう原作の「世界最高の暗殺者、異世界貴族に転生する」です。
ラノベや異世界転生系のロゴデザイン
異世界転生モノでありがちなロゴ、ラノベでありがちなロゴデザインのメイキング記事です。Photoshop、Illustrator両ソフトでのメイキングを詳しく解説しております。

高品質なポートフォリオテンプレート

紙媒体やPDF形式で作成したポートフォリオの品質を手っ取り早く高めるには、高品質なテンプレートの活用が最も効率的かつ効果的です。

商用利用可能で高品質テンプレートばかり厳選!
今まで意識しなかった多くの「気づき」に出会えますよ。

※なお、ポートフォリオ制作はInDesign(インデザイン)を使うのが最も効率的です。
コチラでインデザ初心者の方向けにポートフォリオテンプレートの使い方を詳しく解説しております。

#01 Pink Portfolio Layout

ピンク系のキレイ目カワイイ風ポートフォリオ用テンプレートです。InDesign形式なので文字と画像の差し替えが超楽!
2時間あればポートフォリオが作れます。
編集にはInDesignが必須、未導入の方はInDesign公式サイトから入手しておきましょう。

ダウンロードする

#02 Portfolio Layout with Gray Accents

モノトーン系でどんな作風にも合うポートフォリオ用テンプレートです。イラスト、写真、建築、Web、グッズ…テンプレ選びに迷ったらコレがオススメ!
A4に印刷したポートフォリオ、PDF形式、どちらも短時間で作成可能です。

ダウンロードする

#03 Portfolio Layout with Yellow Accents

黄色が鮮やかでキレイなポートフォリオテンプレートです。
爽やかな画風のイラストにもピッタリ!
クセが無く、ベースデザインとして非常に扱いやすいテンプレートの一つです。

ダウンロードする

#04 Portfolio Template in Pale Green and Mint

収録されているレイアウトパターンが非常に豊富なポートフォリオ用テンプレートです。
作品を大きく見せる、制作過程を見せる、複数見せる、横長作品を画面内に綺麗に収める等、どんなパターンにも当てはめる事が可能ですよ。

ダウンロードする

#05 Minimalist Portfolio Layout

ポートフォリオの表紙には必ずメインビジュアルを入れないとダメか?そんな事はありません。
単色に文字だけで構成した表紙も素敵です。
ページ中身のレイアウトパターンも豊富、あえて表紙をシンプルにする手法もアリですよ。

ダウンロードする

紹介しきれなかったポートフォリオテンプレートや素材
上記のテンプレートはほんの一部。
下記リンクで多数の高品質なポートフォリオテンプレートを紹介しています!

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。


例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート40選


デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い!
相手に舐められない名刺テンプレート50選


バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選


紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう!
デジタル媒体向けポートフォリオテンプレ素材35選


制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬!
様々なモックアップテンプレート57選


良質な素材をもっと見る
上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください!

おわりに

以上、Photoshop(フォトショップ)でドロップシャドウにグラデーションを付与したラノベ風ロゴの作り方についてでした。

ロゴデザインを行う上でレイヤースタイルは欠かせません。
通常の方法ではドロップシャドウにグラデーションの設定はできませんが、[ スマートオブジェクトに変換 ] する事でグラデーションオーバーレイの設定が追加できます。

[ 文字ツール ] と [ 文字パネル ] 、そして [ レイヤースタイル ] を使えば簡単にラノベ風のロゴが作れます。
フォントサイズに強弱を付け、ベースラインシフトをズラすと異世界系ロゴに近づきますよ。

Webデザイン、バナーデザイン、チラシなどのDTPデザイン、UIデザイン、ポートフォリオのデザイン等、異世界系ロゴ制作テクニックは幅広い制作に役立ちます。

Photoshopの基本的&よく使う機能を押さえ、フォトショを使ったクリエイティブを加速させてください!


ではまた!

Photoshopの操作方法

フォトショ基本操作

【導入編】ゼロから始めるPhotoshop
Adobe Creative Cloudの料金プランやオススメプランを徹底解説
フォトショの全ショートカットまとめ
フォトショ初心者が押さえておきたい基本操作14選
レイヤーの作成・レイヤーの操作
ブラシツールの基本的な使い方と応用操作を徹底解説
左右対称、マンダラを使った魔法陣・レース模様の作成方法
各種カラーモードについて
【遠近法の切り抜きツール】斜めから撮った写真を正面に補正する方法と応用
切り抜きツールの使い方と解像度・サイズの変更方法を徹底解説
文字ツールの基本的な使い方
文字パネルの機能と使い方を徹底解説
段落パネルの機能と使い方を徹底解説
グラデーションツールとグラデーションオーバーレイの違いと使い方
整列と分布を使ったレイアウト方法
レイヤースタイル、レイヤー効果の基本的な使い方
ドロップシャドウをさりげなく使ってキレイ目デザインを作る方法
作業効率化に繋がるPhotoshop特有の色々なコピペ方法
調整レイヤーを徹底解説
シェイプツールの使い方・編集方法を徹底解説
共通パーツをインクルードする方法

バナーやUIをデザイン

Photoshopでバナー広告を作る方法を完全解説
【前編】スマホゲームのUIを作ってみよう(構成~下絵)
【中編】スマホゲームのUIを作ってみよう(質感付与)
【後編】スマホゲームのUIを作ってみよう(バナーやボタン)
GDNで有効的なサイズのバナー広告の作り方を完全解説
Photoshopで複数サイズのバナーを効率的に作成する方法

様々な質感を再現

Photoshopで黄金風の効果を付ける方法を詳しく解説
ベベルとエンボスで金属表現を作る方法
レイヤースタイルだけで水滴や汗を作る方法
リアルな木彫りのような質感を再現する方法
テキストをネオンサイン風にする方法
テキストにリアルな錆(サビ)た金属表現を追加する方法
レイヤースタイルでポップなロゴを作る方法
すりガラス(曇りガラス)の再現方法

写真の雰囲気を激変させる

Photoshopで写真をインスタグラム風に加工する方法
レンズフレアを追加して印象的な写真に仕上げる方法
ニュートラルフィルターで肌を一瞬でキレイにする方法
RGBずらし(色ずれ)を使った画像の作り方
写真をアメコミ風に加工する方法を徹底解説
写真をポップアート風に加工する方法を徹底解説
昼間の写真を夜に変更する方法を徹底解説
昼間の写真を夕暮れに加工する方法を徹底解説
【チルトシフト】風景写真をミニチュア風に加工する方法
カラーハーフトーンの作り方と応用例を徹底解説
写真を水彩画風に加工する方法を徹底解説
写真をワンランク上の油彩風に加工する方法
アートヒストリーブラシツールを使って写真を絵画風に大変身
写真をデュオトーン(ダブルトーン)に加工
レントゲン写真のような見た目に加工する方法
フォトショで線画スケッチ風のタッチを再現
秋を感じさせる色味にレタッチする方法
写真やイラストをドット柄に変えるテクニック
写真やイラストをドット絵風に加工する方法
緑で覆われた廃墟を1分で作る方法
1980’のレトロなカットアウト表現の作り方
光輝くオーラエフェクトの作り方を徹底解説
サイバーパンク風の加工をお手軽にする方法

便利な画像加工テクニック

Photoshopで人物の表情を簡単に変える方法
コンテンツに応じた塗りつぶしで不要な要素を消す方法
斜めから撮影した画面に画像や文字をはめ込む方法
「空を置き換え」で曇り空を1分で修整する方法
スマートポートレイトをイラストに適用する方法と検証
3分で髪の毛を簡単に切り抜く方法(境界線調整ブラシツール)
【間違い探し動画】初心者向けアハ体験動画の作り方
リアルな虹の作り方と合成方法を徹底解説
リアルな雨の作り方を徹底解説
リアルな雷をゼロから作る方法
雪の作り方と降らせ方を徹底解説
煙の作り方を徹底解説
深度ぼかしで被写体深度を簡単に再現する方法
画像に勢いや動きを付ける方法
スーパーズームで劇的に高画質化する方法
影の付け方を徹底解説forフォトショ初心者
白黒画像を簡単にカラー化する方法
合成画像を1分で自然に調和させる方法
アート風コラージュの作り方
ボロボロの古雑誌や本を簡単に作る方法

機能追加・その他の機能

Photoshopの無料レイヤースタイル全447種まとめ
無料&商用可能なカスタムシェイプ46選
レイヤースタイルの登録と書き出し
シェイプを登録する方法(カスタムシェイプを定義)
無料&商用可能で本当に使えるブラシ素材64選
【ブラシを定義】自作ブラシの作成と登録方法を解説
【ブラシを定義】自作ブラシの作成と登録方法を解説
WebP形式の画像を編集・保存できるプラグインの導入方法
パターンの定義方法とパターン背景の作り方を完全解説
汎用性抜群なストライプパターンの作り方を解説

フォトショップのお困りごと

「最近使用したもの」を非表示にする方法
ブラシのポインタが十字になった時の対処法
突然画面がグレーになってしまった時の対処法
「変形」の仕様をCC2018以前に戻す方法
ツールバーをカスタマイズする方法
別名で保存からJPGやPNG画像に保存できない問題
塗りつぶしの白い隙間を無くす方法3選

目次一覧を見る
SCROLL
目次一覧
ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!

]]>
【Photoshop】異世界転生モノでありがちなロゴデザインの作り方4選forフォトショ初心者 https://sdesignlabo.com/photoshop/ps-isekailogo/ Fri, 10 Nov 2023 01:40:21 +0000 https://sdesignlabo.com/?p=155102

Photoshop(フォトショップ)で異世界転生モノでありがちなロゴデザインをゼロから作る方法をフォトショ初心者の方に詳しく解説します。4パターンの異世界系ロゴデザインが再現できます。今や異世界転生ものが1ジャンルとして ... ]]>

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop(フォトショップ)で異世界転生モノでありがちなロゴデザインをゼロから作る方法をフォトショ初心者の方に詳しく解説します。
4パターンの異世界系ロゴデザインが再現できます。

今や異世界転生ものが1ジャンルとして確立され、無数の作品が発表されています。
原作のラノベ、マンガ、そして放送中のアニメも異世界転生モノが多い事!

当記事はそんな異世界モノでありがちなロゴデザインをフォトショップを使ってゼロから作る方法を解説します。実際に異世界系の作品作りの素材として、Webデザインや印刷物などのクリエイティブ素材として、ポートフォリオの素材など、幅広い分野に活用できます。

これからPhotoshopを始められる方、更にフォトショを学習されたい方にオススメのコンテンツですよ。
なお、コンテンツ内容が多いので前編(当記事)と後編に分けて解説いたします。

どんな異世界系ロゴが作れるの?


異世界系ロゴ①「異世界に転生したけど汗かき体質なので心配です」の作り方はコチラ

異世界系ロゴ②「転生したらスライム化して異世界最弱になりました。」の作り方はコチラ

異世界系ロゴ③「鑑定スキルが無敵すぎる、異世界婚活」の作り方はコチラ

異世界系ロゴ④「世界最弱の暗殺者 異世界平民に転生する」の作り方はコチラ

上記の異世界系ラノベ風ロゴをゼロから作成します。

Photoshop初心者の方でも順を追っていけば再現できる異世界転生系のロゴデザインを通して、より深くフォトショップを学ばれてみませんか?
ロゴデザインだけでなく、Webデザイン、印刷物のあしらい、UIデザイン、ポートフォリオ制作など、フォトショを使った幅広いクリエイティブに応用できるテクニックですよ。

異世界系ロゴデザインの作り方(前編)

Photoshopで異世界系のラノベや漫画・アニメなどでよく見かけるロゴをゼロから作る方法を解説します。
フォトショ初心者の方にも再現できるように順を追って解説いたします!

Photoshopを導入しましょう
当記事の内容を実践するにはPhotoshop(フォトショップ)が必須です。
未導入の方はフォトプラン公式サイトから入手可能。(月額は最安の1,078円、7日間の無料体験が可能)
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

異世界ロゴ①の作り方

1つ目の異世界系ロゴ「異世界に転生したけど汗かき体質なので心配です」の作り方です。
酷いタイトルですね。

Photoshop初心者の方にも再現できるよう、順を追って詳しく解説いたします。
STEP.1
文字をベタ入力
ベースとなる文字を [ 文字ツール ] で入力します。

「異世界に転生したけど」「汗かき体質」「なので」「心配」「です」

1つのテキストレイヤーで入力せず、上記の様に後の編集が楽にできるようテキストレイヤーを分けています。
STEP.2
文字を調整
[ 文字パネル ] でフォント、フォントサイズ、レイアウトを編集します。
STEP.3
パーツ作成
長方形ツールから角丸長方形を作成、三角形ツールで吹き出しのしっぽや楕円形ツールで文字の下地を作成します。
心配の文字は [ バウンディングボックス ] で少し傾けました。
STEP.4
質感付与①
フキダシと文字の部分の作り方です。
吹き出しの黄色い影は [ レイヤースタイル ] → [ ドロップシャドウ ] で表現。
描画モード:通常 カラー:#fff900
不透明度:85% 角度:135° 距離:3px
スプレッド:100% サイズ:0px

吹き出し本体の塗り色はシェイプの塗り自体を変更しても良いですし、[ カラーオーバーレイ ] で変更しても構いません。
カラー:#570400
すると左図のような表現ができます。
スプレッドの値を100%にすると、パキっとしたドロップシャドウが作れます。
STEP.4
質感付与②
汗かき体質の部分は3つのレイヤーで構成。

最上部:グラデーションと黄色のシャドウ
2番目:境界線を2つ重ね
最下部:2番目レイヤーをスマートオブジェクトに変換し、茶色のカラーオーバーレイを付与して数px右下に移動
最上部レイヤーの構造です。
レイヤースタイルで下記設定を追加。

[ グラデーションオーバーレイ
カラー分岐点①:#ed8001
カラー分岐点②:#e30214

[ ドロップシャドウ
描画モード:通常 カラー:#fff900
不透明度:85% 角度:135° 距離:3px
スプレッド:100% サイズ:0px
2番目のレイヤー構造です。
下記レイヤースタイルを追加。

[ 境界線①
位置:外側 描画モード:通常
不透明度:100% カラー:#ffffff

[ 境界線②
境界線①をコピーし、サイズを増やす
カラー:#570400

[ グラデーションオーバーレイ
カラー分岐点①:#ed8001
カラー分岐点②:#e30214

※境界線を複数重ねる方法はコチラの記事で完全解説しています。
2番目のレイヤーを [ Ctrl + J ] (Mac: + J) でコピーし、[ スマートオブジェクトに変換 ] します。

レイヤー効果の [ カラーオーバーレイ ] で下記設定を付与。
描画モード:通常
カラー:#ac2304
不透明度:100%
以上でメイン部分の質感付与が完了しました。
複数のレイヤースタイルを重ねる事で異世界ロゴの表現ができますよ。
STEP.4
質感付与④
残りの部分を装飾しましょう。

「心配」の文字色:#fdf343
レイヤースタイルの [ 光彩(外側) ] を追加。
描画モード:通常 不透明度:100%
カラー:#1c7fc9
テクニック:さらにソフトに
スプレッド:17% サイズ:24px
「です」の詳細設定です。
文字色:#0268b3
白と青色の境界線の重ね掛け。

「なので」の背景色:#5a0102
FINISH
完成
以上で異世界ロゴ①「異世界に転生したけど汗かき体質なので心配です」の完成です。

フォントの強弱とレイアウト、そしてレイヤースタイルによる装飾で簡単に異世界系作品のロゴデザインが完成しますよ。
イラレを使ったラノベ風ロゴの作り方
Illustratorを使ってラノベでありがちなロゴデザインをゼロから作る方法を解説しています。イラレ初心者の方にも再現できるよう徹底解説しております。

異世界ロゴ②の作り方

2つ目の異世界系ロゴ「転生したらスライム化して異世界最弱になりました。」の作り方です。

これもまたよく見かける要素が詰まった異世界系ロゴですね。
赤色のドロップシャドウの一部をオレンジ色にした装飾を加えた表現をしています。
STEP.1
文字を入力
ベースとなる文字を [ 縦書き文字ツール ] で入力。

※ [ 横書き文字ツール ] で入力後、Photoshop画面上部の [ 書式 ] → [ 方向 ] → [ 縦書き ] で変更可。

後から編集しやすい様に「転生したら」「スライム化」「して」「異世界最弱」「になりました。」に分けて入力しました。
STEP.2
文字調整
[ 文字パネル ] を使ってフォント、フォントサイズ、ベースラインシフト等を調整します。

「転生」の文字の背景には [ 長方形ツール ] で正方形のシェイプを作成し、[ バウンディングボックス ] を使って45°回転させました。
STEP.3
質感付与①
「スライム化」と「異世界最弱」を [ Ctrl + G ] (Mac: + G) でグループ化します。

[ レイヤースタイル ] → [ ドロップシャドウ ] を追加。
描画モード:通常 カラー:#110500
不透明度:85% 角度:135°
距離:2px スプレッド:100% サイズ:1px
[ 光彩(外側) ] を追加。
描画モード:通常 不透明度:100%
ノイズ:0% カラー:#ec020c
テクニック:さらにソフトに
スプレッド:0% サイズ:28px
すると左図のような状態にできます。
FINISH
質感付与②
STEP.3で作成したグループを [ Ctrl + J ] (Mac: + J) でコピーします。
コピーしたグループの [ 塗り ] を0%にし、[ スマートオブジェクトに変換 ] しましょう。

※塗りを0%にする事で文字の塗りは無くなり、レイヤー効果のみ表示する事ができます。
[ ブラシツール ] → [ ソフト円ブラシ ] を選択。
描画色:#ff7800

新規レイヤーを作成し、先ほど作成したスマートオブジェクトにクリッピングマスクします。
ロゴの一部をブラシで塗ると左図のような表現ができます。

赤やオレンジ系のシャドウは異世界系のラノベでよく使われていますよ。
異世界転生系ロゴデザイン後編
異世界転生モノでありがちなロゴデザインのメイキング記事後編です。ドロップシャドウにグラデーションをかけるテクニックをチェックされてみませんか?

文字を大変身させる高品質エフェクト

単なる文字や写真を超短時間で全く違った表現にできる高品質なエフェクトです。
全て商用利用可能!
制作時間の短縮と作品のクオリティアップを重視したい方に超オススメのフォトショエフェクトです。

#01 Old monitor CRT Screen Text Effect Mockup

古いブラウン管モニターの走査線のような表現ができるエフェクトです。
シュタインズ・ゲートを彷彿させますね。
Photoshopで再現するにはかなりの高等テクニックが必要です。

ダウンロード

#02 Brick Wall Text Effect Mockup

レンガの壁にスプレーでペインティングしたような表現ができるエフェクトモックアップです。
単色の文字にベタ塗り背景を準備するだけでサンプルのような仕上りに!

ダウンロード

#03 Engraved Wood Text Effect Mockup

屋外の壁で使われるような木を彫り込んだようなエフェクトモックアップです。

ダウンロード

#04 Glitter Text Effect with Gold Stroke Mockup

ラメ加工のようなキラキラが超簡単にできるエフェクトモックアップです。
情報量が多く、仕上がりも超リアル!
ゼロから作るのはメチャ大変です。

ダウンロード

#05 Golden Stars Text Effect Mockup

金色の星で構成されたエフェクトを追加できます。
クリスマスだけでなく、誕生日や結婚式など様々な祝い事で使えますよ。

ダウンロード

Photoshop用の高品質なエフェクト集
入力した単なる文字オブジェクトをあっという間に大変身させてくれるエフェクト集です。
もちろん文字だけでなく様々なグラフィックに適用可能!全て商用利用可能です。

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。


例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート40選


デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い!
相手に舐められない名刺テンプレート50選


バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選


紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう!
デジタル媒体向けポートフォリオテンプレ素材35選


制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬!
様々なモックアップテンプレート57選


良質な素材をもっと見る
上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください!

おわりに

以上、Photoshop(フォトショップ)で異世界転生モノでありがちなロゴデザインの作り方でした。

[ 文字ツール ] と [ 文字パネル ] 、そして [ レイヤースタイル ] を使えば簡単にラノベ風のロゴが作れます。
フォントサイズに強弱を付け、ベースラインシフトをズラすと異世界系ロゴに近づきますよ。

Webデザイン、バナーデザイン、チラシなどのDTPデザイン、UIデザイン、ポートフォリオのデザイン等、異世界系ロゴ制作テクニックは幅広い制作に役立ちます。

Photoshopの基本的&よく使う機能を押さえ、フォトショを使ったクリエイティブを加速させてください!


ではまた!

テキストエフェクトの作り方まとめ

Photoshopでテキストエフェクトをゼロから自作する方法、そして1分で超高品質で商用利用可能なテキストエフェクトが作れるPSD素材の使い方と作例を解説しています。
ロゴデザイン、Webデザイン、バナーデザイン、各種DTPデザイン、UIデザイン、ポートフォリオ制作等。幅広いクリエイティブに活用できる内容です。

テキストエフェクトを自作

Photoshopを使いこなして様々な質感のテキストエフェクトを作る方法を解説しています。
気になるサムネイル画像をクリックすればメイキング記事にジャンプします。

 
 

1分で高品質なエフェクトが作れるPSD

1分で超高品質なテキストエフェクトが作れるPSD素材です。
全て商用利用可能!
劇的にクリエイティブを効率化できる素材を活用してみませんか?

[/box]

様々なテキストエフェクトのPSD素材
Photoshopで使える商用利用可能で高品質な様々なテキストエフェクトのPSD素材を厳選しました。1分でプロクオリティの作品が作れるチート素材ですよ。
Photoshopの操作方法

フォトショ基本操作

【導入編】ゼロから始めるPhotoshop
Adobe Creative Cloudの料金プランやオススメプランを徹底解説
フォトショの全ショートカットまとめ
フォトショ初心者が押さえておきたい基本操作14選
レイヤーの作成・レイヤーの操作
ブラシツールの基本的な使い方と応用操作を徹底解説
左右対称、マンダラを使った魔法陣・レース模様の作成方法
各種カラーモードについて
【遠近法の切り抜きツール】斜めから撮った写真を正面に補正する方法と応用
切り抜きツールの使い方と解像度・サイズの変更方法を徹底解説
文字ツールの基本的な使い方
文字パネルの機能と使い方を徹底解説
段落パネルの機能と使い方を徹底解説
グラデーションツールとグラデーションオーバーレイの違いと使い方
整列と分布を使ったレイアウト方法
レイヤースタイル、レイヤー効果の基本的な使い方
ドロップシャドウをさりげなく使ってキレイ目デザインを作る方法
作業効率化に繋がるPhotoshop特有の色々なコピペ方法
調整レイヤーを徹底解説
シェイプツールの使い方・編集方法を徹底解説
共通パーツをインクルードする方法

バナーやUIをデザイン

Photoshopでバナー広告を作る方法を完全解説
【前編】スマホゲームのUIを作ってみよう(構成~下絵)
【中編】スマホゲームのUIを作ってみよう(質感付与)
【後編】スマホゲームのUIを作ってみよう(バナーやボタン)
GDNで有効的なサイズのバナー広告の作り方を完全解説
Photoshopで複数サイズのバナーを効率的に作成する方法

様々な質感を再現

Photoshopで黄金風の効果を付ける方法を詳しく解説
ベベルとエンボスで金属表現を作る方法
レイヤースタイルだけで水滴や汗を作る方法
リアルな木彫りのような質感を再現する方法
テキストをネオンサイン風にする方法
テキストにリアルな錆(サビ)た金属表現を追加する方法
レイヤースタイルでポップなロゴを作る方法
すりガラス(曇りガラス)の再現方法

写真の雰囲気を激変させる

Photoshopで写真をインスタグラム風に加工する方法
レンズフレアを追加して印象的な写真に仕上げる方法
ニュートラルフィルターで肌を一瞬でキレイにする方法
RGBずらし(色ずれ)を使った画像の作り方
写真をアメコミ風に加工する方法を徹底解説
写真をポップアート風に加工する方法を徹底解説
昼間の写真を夜に変更する方法を徹底解説
昼間の写真を夕暮れに加工する方法を徹底解説
【チルトシフト】風景写真をミニチュア風に加工する方法
カラーハーフトーンの作り方と応用例を徹底解説
写真を水彩画風に加工する方法を徹底解説
写真をワンランク上の油彩風に加工する方法
アートヒストリーブラシツールを使って写真を絵画風に大変身
写真をデュオトーン(ダブルトーン)に加工
レントゲン写真のような見た目に加工する方法
フォトショで線画スケッチ風のタッチを再現
秋を感じさせる色味にレタッチする方法
写真やイラストをドット柄に変えるテクニック
写真やイラストをドット絵風に加工する方法
緑で覆われた廃墟を1分で作る方法
1980’のレトロなカットアウト表現の作り方
光輝くオーラエフェクトの作り方を徹底解説
サイバーパンク風の加工をお手軽にする方法

便利な画像加工テクニック

Photoshopで人物の表情を簡単に変える方法
コンテンツに応じた塗りつぶしで不要な要素を消す方法
斜めから撮影した画面に画像や文字をはめ込む方法
「空を置き換え」で曇り空を1分で修整する方法
スマートポートレイトをイラストに適用する方法と検証
3分で髪の毛を簡単に切り抜く方法(境界線調整ブラシツール)
【間違い探し動画】初心者向けアハ体験動画の作り方
リアルな虹の作り方と合成方法を徹底解説
リアルな雨の作り方を徹底解説
リアルな雷をゼロから作る方法
雪の作り方と降らせ方を徹底解説
煙の作り方を徹底解説
深度ぼかしで被写体深度を簡単に再現する方法
画像に勢いや動きを付ける方法
スーパーズームで劇的に高画質化する方法
影の付け方を徹底解説forフォトショ初心者
白黒画像を簡単にカラー化する方法
合成画像を1分で自然に調和させる方法
アート風コラージュの作り方
ボロボロの古雑誌や本を簡単に作る方法

機能追加・その他の機能

Photoshopの無料レイヤースタイル全447種まとめ
無料&商用可能なカスタムシェイプ46選
レイヤースタイルの登録と書き出し
シェイプを登録する方法(カスタムシェイプを定義)
無料&商用可能で本当に使えるブラシ素材64選
【ブラシを定義】自作ブラシの作成と登録方法を解説
【ブラシを定義】自作ブラシの作成と登録方法を解説
WebP形式の画像を編集・保存できるプラグインの導入方法
パターンの定義方法とパターン背景の作り方を完全解説
汎用性抜群なストライプパターンの作り方を解説

フォトショップのお困りごと

「最近使用したもの」を非表示にする方法
ブラシのポインタが十字になった時の対処法
突然画面がグレーになってしまった時の対処法
「変形」の仕様をCC2018以前に戻す方法
ツールバーをカスタマイズする方法
別名で保存からJPGやPNG画像に保存できない問題
塗りつぶしの白い隙間を無くす方法3選

目次一覧を見る
SCROLL
目次一覧
ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!

]]>
【Illustrator】生成再配色の使い方と応用を徹底解説forイラレ初心者 https://sdesignlabo.com/illustrator/ai-generate-recoloring/ Wed, 11 Oct 2023 09:28:46 +0000 https://sdesignlabo.com/?p=158841

Illustrator(イラストレーター)の生成再配色の使い方と機能をイラレ初心者の方に徹底解説します。ベクターイラストの面倒な色変更を数ステップで終わらせられる超便利な色調整機能です。再配色を使った手動での別カラーの展 ... ]]>

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Illustrator(イラストレーター)の生成再配色の使い方と機能をイラレ初心者の方に徹底解説します。
ベクターイラストの面倒な色変更を数ステップで終わらせられる超便利な色調整機能です。

再配色を使った手動での別カラーの展開。
そして生成再配色を使ったAdobe FireflyのAIによるカラーの提案など。
ベクターイラストの色を変更する上で非常に強力な生成再配色をゼロから解説します。

これからIllustratorを始められる方、より詳しくイラレを学習されたい方にオススメのコンテンツです。

生成再配色で何ができるの?

上記の様にIllustratorの再配色や生成再配色を使えば手軽に別カラーが作成できます。
案外手間のかかる2Pカラーが1分で作成可能!
1つのベクターイラストがあれば簡単に派生カラーの展開が行える便利機能です。

再配色の使い方

Illustrator(イラストレーター)の再配色を使った色変更の方法を解説します。
手順通り進めていけばイラレ初心者の方にも再現可能な内容ですよ!

Illustratorを導入しましょう
当記事の内容を実践するにはIllustratorが必須です。
未導入の方はIllustrator公式サイトからダウンロードしておきましょう。(7日間の無料体験が可能)
なお、AdobeCCのプランはコチラの記事で徹底解説しています。
STEP.1
イラストを作成
ペンツールや文字ツールなどを活用し、お好きなグラフィックを作成します。
完成したオブジェクトは [ Ctrl + G ] (Mac: + G) でグループ化しておきましょう。
STEP.2
再配色をクリック
作成したイラストを [ 選択ツール ] で選択すると、オブジェクト下部に [ コンテキストタスクバー ] が表示されます。
一番左側に [ 再配色 ] があるのでクリック。
画面上部のコントロール内、またはプロパティパネル下部の [ オブジェクトを再配色 ] でも可。
STEP.3
再配色の設定画面
再配色の設定画面が開き、下記設定が可能。

カラーライブラリ
カラー
カラーテーマピッカー
すべてのカラー
カラー配列をランダムに変更
彩度と明度をランダムに変更
目立つカラー
ハーモニーカラーをリンク、またはリンク解除
明度と色相をカラーホイールに表示
彩度と色相をカラーホイールに表示
新規カラーグループ
詳細オプション
STEP.4
再配色を設定
例えば [ すべてのカラー ] のカラーハーモニーツール内の一番大きなカラーホイールをドラッグすると、簡単に全体の色味を変更できます。
小さなカラーホイールをドラッグすると、対象カラーのみ色変更が可能。

下部の [ 目立つカラー ] をドラッグすると、目立たせたいカラーの比率を感覚的に調整できます。

更に下部のスライダーでイラストの彩度・明度を全体調整可能。

ミスをした時は画面左上の [ 変更の取り消し ] または画面右上の [ リセット ] で元に戻せます。
設定後は再配色の画面外をクリックすると色変更の確定です。
FINISH
再配色の完了
以上でオブジェクトの再配色を活用したベクターイラストの色変更が完了しました。

少ない労力で複雑な色変更ができるイラレの新たなチート機能ですよ。
詳細オプション
左図はオブジェクトを再配色の画面左下にある [ 詳細オプション ] です。現在使用中のカラーをカラーピッカーで個別編集する事が可能です。
より細かな色のカスタマイズが必要な際に活躍する機能ですよ。

生成再配色の使い方

Illustrator(イラストレーター)の生成再配色を使った色変更の方法を解説します。
Adobe FireflyのAIによって色が新たに生成できる次世代の色変更方法です。

STEP.1
コンテキストタスクバーを表示
生成再配色を適用させたいオブジェクトを [ 選択ツール ] で選択します。
すると [ コンテキストタスクバー ] に [ 再配色 ] が表示されるのでクリックします。

画面上部のコントロール内、またはプロパティパネル下部の [ オブジェクトを再配色 ] でも可。
STEP.2
生成再配色をクリック
オブジェクトを再配色の編集画面が開きます。
上部タブの [ 生成再配色 ] をクリックすると下記設定が可能。

プロンプト
カラー
生成
サンプルプロンプト
バリエーション
新規カラーグループ
詳細オプション
STEP.3
プロンプトを設定
プロンプト入力エリアに任意の文字を入力してみましょう。
サンプルは「サイバーパンク SF」と入力し、[ 生成 ] をクリックしました。

すると [ バリエーション ] に入力したプロンプトに即したカラーバリエーションが追加されます。
気に入ったカラーがあればクリックしましょう。
FINISH
カラーを指定
バリエーションを設定後、 [ カラー ] をクリックしてテーマカラーを決めてから [ 生成 ] を行うと、更に色の絞り込みをする事ができます。
あっという間にサイバーパンク風の世界観の色味にできました。

この色変更作業を手動で行うと時間がかかりますが、生成再配色を使えば1分で完了しますよ。
OMAKE
サンプルプロンプトを活用
生成再配色にはあらかじめ下記サンプルプロンプトが収録されています。お好みで活用して下さい。

サーモンの寿司
砂石のビーチ
ダークブルーの真夜中
気分が上がるディスコライト
テラコッタ砂漠
イエローサブマリン
ラベンダーの嵐
色あせたエメラルドの街
海辺の夏
新規カラーグループ
オブジェクトを再配色の画面右下に [ 新規カラーグループ ] のボタンがあり、気に入ったカラーをスウォッチに登録する事ができます。
[ すべてのカラーを保存 ] 、[ 目立つカラーを保存 ] の2パターンから選択できますよ。
※スウォッチの使い方はコチラの記事で解説しています。

テキストからベクター生成と相性抜群

Illustratorバージョン28.0から搭載された [ テキストからベクター生成 ] と生成再配色は相性が抜群です。
Adobe Fireflyの生成AI技術を活用したベクター画像の生成機能です。
プロンプトを入力して生成ボタンを押すだけ!
あっという間に様々なベクターイラストが作成できる新たなイラレのチート機能です。

テキストからベクター生成を完全解説
Illustratorのテキストからベクター生成の使い方を完全解説しています。併せてチェックされてみませんか?

高品質なポートフォリオテンプレート

紙媒体やPDF形式で作成したポートフォリオの品質を手っ取り早く高めるには、高品質なテンプレートの活用が最も効率的かつ効果的です。

商用利用可能で高品質テンプレートばかり厳選!
今まで意識しなかった多くの「気づき」に出会えますよ。

※なお、ポートフォリオ制作はInDesign(インデザイン)を使うのが最も効率的です。
コチラでインデザ初心者の方向けにポートフォリオテンプレートの使い方を詳しく解説しております。

#01 Pink Portfolio Layout

ピンク系のキレイ目カワイイ風ポートフォリオ用テンプレートです。InDesign形式なので文字と画像の差し替えが超楽!
2時間あればポートフォリオが作れます。
編集にはInDesignが必須、未導入の方はInDesign公式サイトから入手しておきましょう。

ダウンロードする

#02 Portfolio Layout with Gray Accents

モノトーン系でどんな作風にも合うポートフォリオ用テンプレートです。イラスト、写真、建築、Web、グッズ…テンプレ選びに迷ったらコレがオススメ!
A4に印刷したポートフォリオ、PDF形式、どちらも短時間で作成可能です。

ダウンロードする

#03 Portfolio Layout with Yellow Accents

黄色が鮮やかでキレイなポートフォリオテンプレートです。
爽やかな画風のイラストにもピッタリ!
クセが無く、ベースデザインとして非常に扱いやすいテンプレートの一つです。

ダウンロードする

#04 Portfolio Template in Pale Green and Mint

収録されているレイアウトパターンが非常に豊富なポートフォリオ用テンプレートです。
作品を大きく見せる、制作過程を見せる、複数見せる、横長作品を画面内に綺麗に収める等、どんなパターンにも当てはめる事が可能ですよ。

ダウンロードする

#05 Minimalist Portfolio Layout

ポートフォリオの表紙には必ずメインビジュアルを入れないとダメか?そんな事はありません。
単色に文字だけで構成した表紙も素敵です。
ページ中身のレイアウトパターンも豊富、あえて表紙をシンプルにする手法もアリですよ。

ダウンロードする

紹介しきれなかったポートフォリオテンプレートや素材
上記のテンプレートはほんの一部。
下記リンクで多数の高品質なポートフォリオテンプレートを紹介しています!

ワンランク上のテンプレート素材

Illustratorのスキルアップをする上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減するだけでなく、スキルアップの教材としても活用できますよ!


AI形式で作られた高品質なフライヤーのテンプレート50選です。画像と文字を差し替えるだけ、超短時間でハイクオリティなフライヤーが作成可能!
様々なフライヤーのテンプレート50選


デザイン制作を学ぶ導入編としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い!
相手に舐められない名刺テンプレート50選


例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートでレイアウトや余白、文字サイズを簡単に研究可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート40選


ロゴ作成とIllustratorの相性は抜群!
ロゴ制作の効率化だけでなく、アイディアやデータの作り方を学習・研究するための良質な教材だらけですよ。
ハイクオリティなロゴテンプレート50選


単なる白黒のテキストを高品質なロゴのようなグラフィックにできるエフェクトです。
ロゴ・見出しなどキャッチなオリジナルタイトルを一瞬で作成できる優秀な素材ばかり!
商用利用が可能で高品質なテキストエフェクト50選


継ぎ目が無い高品質な背景素材50選です。
全て商用利用OK!作品の密度を一気に高める事ができる汎用性の高い素材ばかりです。
商用利用できる高品質なシームレス背景パターン58選


良質な素材をもっと見る
上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください!

おわりに

以上、Illustrator(イラストレーター)の再配色と生成再配色の使い方についてでした。

ついにイラストレーターにも実装されたAI系の機能です。
複雑なベクターイラストの色変更には多くの手数が必要です。

単色ではなく、グラデーションを交えた塗りとなると、色変更の作業は更に増大…
そんな色変更やカラーバリエーションの展開が非常に楽にできる機能が再配色と生成再配色です。

上手く活用し、Illustratorを使ったクリエイティブを更に加速させてください!

ではまた!

InDesignは活用されていますか?
Illustratorだけでなく、InDesign(インデザイン)も活用されているでしょうか?
ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方はAdobe公式サイトから入手できます。
高品質で商用利用可能なポートフォリオテンプレート40選はコチラ
Illustratorの操作方法

イラレ基本操作

【導入編】ゼロから始めるIllustrator
Adobe Creative Cloudの料金プランやオススメプランを徹底解説
イラレでよく使う機能15選 for 初心者
イラレ全ショートカット一覧
Illustratorとは・DTPの基礎知識
操作画面、新規作成と保存、各種ファイル形式
オブジェクトの作成と選択、構造
イラレの塗りと線について
イラレのカラーモードについて
RGBからCMYKへ変換する方法
整列と分布について徹底解説
オブジェクト重ね順について徹底解説
数値入力によるオブジェクトの作成と操作
レイヤーの概念と操作を分かりやすく徹底解説
オブジェクトの色々なコピペ方法
ペンツールの基本操作とパスの編集
文字ツールの基本的な使い方
文字を装飾する・アピアランスの設定
文字で画像をマスクする
グラデーションツールを極める
メッシュツール・グラデーションメッシュの使い方
ブラシツール・塗りブラシツールの使い方と違い
消しゴムツール・はさみツール・ナイフの使い方
パスファインダーの機能全てを徹底解説
ブレンドツールを使ったオブジェクト作成
回転ツールと回転コピーの使い方
リフレクトツールの使い方
クリッピングマスクの使い方を徹底解説
トンボ(トリムマーク)の設定と塗り足し
ライブトレースを徹底解説
ライブペイントを徹底解説
編集しやすい角丸長方形の作り方
アートボードツールの使い方
パペットワープツールの使い方
リシェイプツールの使い方
線幅ツールを使いこなそう
ワープツールをはじめとした線幅ツールの派生ツール
スライスツールを使った超効率的な画像の書き出し
拡大・縮小ツールの使い方とテクニック
シアーツールの使い方と応用例
自由変形ツールの使い方

バナーやデザイン関連

【就活生向け】ポートフォリオ用テンプレート
サイズ違いのバナー広告を効率的に作る方法
名刺サイズのレイアウト用紙の作成&ガイドの有効的な活用法
オリジナル名刺をデザインして入稿用データを作ろう!
入稿用AIデータの作成方法と注意点について
【AI】ニーアオートマタのUI風ポートフォリオ用テーマ
【AI】ニーアオートマタのUI風エミールの名刺

絵作り

変形を使って水玉模様(ドット柄)や精密なパターン柄を作る方法
ペンツールを使ったトレースのテクニック①
ペンツールを使ったトレースのテクニック②
アピアランスを使った線の設定・線のデザイン
汎用性抜群な略地図の作り方
【鬼滅の刃】炭治郎の耳飾りをイラレで作る方法for初心者
レース柄やレースリボンブラシの作り方を徹底解説
ラフな手描き風の線にする方法
ブレンドと変形効果を使った螺旋状のドット模様の作り方
大阪の謎「連絡まつ村」のシールを作ってみよう【AI配布中】
マーブル模様の作り方を徹底解説forイラレ初心者
ハーフトーン(網点)の作り方と応用
集中線(スピード線)の作り方を徹底解説

アイコン・ロゴ制作

歯車や花、本など色々な図形を作る方法
【全2回】ラノベ風ロゴの作り方【サンプルAI有り】
ファビコンの作り方をデザインパターン別に徹底解説
アイソメトリック文字の作り方【3D・押し出し・ベベル】
リアルなネオンサインの作り方を徹底解説
レトロな雰囲気のロゴを作る方法
高品質な金(ゴールド)表現の作り方
長い影(ロングシャドウ)の作り方2選
デボス加工風カットアウトの作り方
燃えさかる炎をまとった文字の作り方
刺繍(ステッチ)表現の作り方
黒板に描かれたチョーク文字やイラストを再現する方法
真っ二つにスライスされたオブジェクトを作る方法
色ずれをイラレで再現する方法
1980年代レトロフューチャー風ロゴの作り方
レトロゲームのドットテキストを簡単に作る方法

追加機能・その他機能

アナログ画材風の無料ブラシ36選
ブラシ素材の登録方法
スウォッチの登録方法や使い方を徹底解説
グラフィックスタイルの追加・編集方法
ツールバーを編集する方法
スポイトツールでアピアランスをコピーする方法と注意点
別のAIファイルをAI内に配置・編集する方法
ブラックのアピアランスを正しく設定
「最近使用したもの」を非表示にする方法
遠近グリッドを消す方法と基本的な使い方

ゼロイラの目次一覧
SCROLL
目次一覧
ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!

]]>
AdobeColor(アドビカラー)の使い方を徹底解説for初心者 https://sdesignlabo.com/design/adobe-color/ Tue, 15 Aug 2023 12:53:16 +0000 https://sdesignlabo.com/?p=154591

AdobeColor(アドビカラー)の基本操作や生成したカラーをPhotoshopやIllustrator等で色を使う方法を徹底解説します。色彩の知識が無くても美しい配色があっという間に作成できるAdobeColorを活 ... ]]>

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

AdobeColor(アドビカラー)の基本操作や生成したカラーをPhotoshopやIllustrator等で色を使う方法を徹底解説します。

色彩の知識が無くても美しい配色があっという間に作成できるAdobeColorを活用し、日々のクリエイティブをより効率化してみませんか?
Adobeアカウントを持っていれば誰でも無料で使えるサービスなので使わなければ損!

Webデザイナー、UIUXデザイナー、DTPデザイナーといったデザイナー職だけでなく、ちょっとした店舗のポップ作成やチラシなど。
デザイナーを稼働させるまでも無い案件のクオリティを高めるのにも便利なAdobeColorを活用し、ワンランク上の配色を実現しましょう!

AdobeColorとは?

AdobeColor(アドビカラー)とは色彩の知識が無くても良い感じの色を自動生成してくれるサービスです。
よりクオリティの高いデザインを実現するには色彩検定やカラーコーディネーター検定をはじめとした色の知識や資格が必要になります。

しかしAdobeColorを使えばドラッグ&ドロップで相性の良い配色を自動的に生成可能!

やれ明度対比とか色相対比、再度対比、補色、同化現象、色相環、色度座標など…
本格的に色彩の知識を得る為には多くの学習事項がありますが、AdobeColorを使えば知識不要で直感的に色の選定ができます。

AdobeColorの基本操作

AdobeColor(アドビカラー)の機能や使い方について初心者の方に詳しく解説します。

カラーホイールを使う方法

STEP.1
AdobeColorにアクセス
まずはAdobeにログインしましょう。
ログイン後はAdobeColorにアクセスします。

※なお、AdobeCCを未導入の方はAdobe公式サイトから入手できます。
STEP.2
カラーホイールを選択
AdobeColorのトップ画面です。
画面最上部に [ 生成 ] 、[ 探索 ] 、[ トレンド ] 、[ ライブラリ ] があります。

その下部に [ カラーホイール ] 、[ テーマを抽出 ] 、[ グラデーションを抽出 ] 、[ アクセシビリティツール ] が見つかります。
まずは初期設定のカラーホイールを操作しましょう。
初期設定はRGBカラー
AdobeColorの画面左下からカラーモードを選択できます。初期設定はRGBですが、他にHSBとLABが選択できます。

サンプルは使用頻度が高いRGBで解説します。
STEP.3
カラーハーモニーツールを設定
左メニューのカラーハーモニーツール内に [ 類似色 ] 、[ モノクロマティック ] 、[ トライアド ] 、[ 補色 ] 、[ 分割補色 ] 、[ 二重分割補色 ] 、[ 正方形 ] 、[ コンパウンド ] 、[ シェード ] 、[ カスタム ] が存在します。

よく使う類似色を試してみましょう。
STEP.4
ベースカラーをドラッグ
5つの丸(カラーホイール)があります。
真中に小さな三角形のアイコンが付いた丸(ベースカラー)があるのでドラッグで操作しましょう。

色相環を移動させ好きな色相を選択。
外側に移動させるとビビッドカラー(冴えた色)に、内側に移動させるとペールカラー(薄い色)にできます。

同時に下部にカラーコードが表示され、リアルタイムで更新されます。
三角形の付いていない4つのカラーホイールを動かすと色の個別カスタマイズが可能です。

基本的には三角形の付いたベースカラーのカラーホイールを操作する事をオススメします。
下部のスライダーで色調整可能
カラーホイールだけでなく、AdobeColor下部のスライダーを動かす事で色変更が可能です。

RGBと明度のスライダーを左右に動す、6桁のカラーコードをキーボードで直接入力など、お好きな方法で色を作成しましょう。
FINISH
その他カラーハーモニーツールも同様
例えば [ 補色 ] を選択し、三角形の付いたベースカラーのカラーホイールを動かしてみましょう。
するとベースカラーの類似色が2色、反対色である補色が2色生成されます。

基本的な操作は同じなので難なく操作可能ですよ。

画像からテーマを抽出する方法

テーマを抽出のタブをアクティブにすると、任意の画像を元にカラーの抽出が可能です。
使い方はお好きな画像をドラッグ&ドロップでアップロードするだけ。

左メニューの [ カラームードを使用して抽出 ] から [ カラフル ] 、[ ブライト ] 、[ ミュート ] 、[ ディープ ] 、[ ダーク ] 、[ なし ] の6パターンが選択できます。

あとからカラーホイールをドラッグで移動させる事もできますよ。

結局色彩の知識はあるに越した事は無い
具体的な色彩の知識が無くてもAdobeColorがあればいい感じに色の生成は可能です。デザイナーの方で無ければAdobeColorでサクッと色の生成を行えば良いでしょう。
しかし何でもそうですがAIに頼り切るのは危険。自身の能力値が間違いなく劣化します。
特にデザイン業務を主としてされている方は色彩検定やカラーコーディネーター検定の教本で色についてたまに見返される事をオススメします。色彩検定2級程度の知識は最低限身に付けておきましょう。

画像からグラデーションを抽出

基本操作は先に解説した [ テーマを抽出 ] と同じです。
左メニューの [ グラデーションの分岐点 ] を任意で変更可能。
また、カラーホイールをドラッグする事で色の抽出場所を変更する事ができます。

学校の教材例
私が学生時代に色彩の授業で使っていた教科書である [ カラーコーディネーター入門 色彩 ] と [ 新配色カード199b ] です。色彩に関する入門書の定番!
他にも [ スピード合格! カラーコーディネーター ] や [ 色彩検定 公式テキスト 2級編 ] はオススメですよ。

便利なアクセシビリティツール

アクセシビリティツールのタブをクリックするとコントラスト比を数値化する事ができます。
要は文字の視認性の確認が数値化され、可読性の合否判定をしてくれるツールですね。

デザインを作成する上でアクセシビリティを意識する事は重要です。


例えば黄色の背景に白の文字を配置するとコントラスト比が低く、非常に視認性が悪いですね。
数値で見ると 1.12 : 1 と、ほぼ同じです。
白の文字を黒色に変更するとコントラスト比がグッと高くなり、視認性が高まります。
数値化すると 18.79 : 1 と非常にコントラスト比が大きくなり、小さなフォントでも十分可読性が担保できています。

テキストサイズの違いでの合否判定なども行ってくれるので、日々のデザイン制作をより効率的に!
デザイン制作とアクセシビリティの両立は欠かせないので、色の選定だけで終わらないAdobeColorを一度知ってしまうと無くてはならないモノになりますよ。

ただし、より深くAdobeColorを活用するには色彩の知識が必要不可欠なので、色彩検定カラーコーディネーター検定の取得を検討されるのもアリですよ。
デザイン業務以外にも活用できる汎用性の高い資格の一つなので持っておいて損はありません。

AdobeColorの色を保存&参照する方法

AdobeColor(アドビカラー)で生成した色を保存し、PhotoshopやIllustrator等で参照する方法を解説します。

STEP.1
色を生成
AdobeColorでお好きな色を生成します。

サンプルは [ カラーホイール ] → [ 類似色 ] を使って色を生成しました。
STEP.2
ライブラリを作成して保存
画面右上の [ + ] をクリックし、任意の名称のライブラリを作成します。
サンプルは [ AdobeColor_sample ] とし、最後に [ 作成 ] をクリック。

名前:任意
タグ:任意
Colorに公開:任意

設定後は [ 保存 ] をクリック。
STEP.3
Photoshop,Illustratorを起動
PhotoshopやIllustratorを立ち上げます。
未導入の方は事前にAdobe公式サイトから入手しておきましょう。

サンプルはPhotoshopで解説します。
STEP.4
CCライブラリを開く
[ CCライブラリ ] を開きます。
非表示の場合は [ ウィンドウ ] → [ CCライブラリ ] で表示可。
FINISH
クリックで色を適用
先に保存した [ AdobeColor_sample ] を選択すると生成した色が保存されています。
あとはクリックすると描画色に適用可能。

左図は [ 楕円形ツール ] でシェイプを作成し、塗りの色を変更した例です。
AdobeColorで生成した色はCCライブラリへ保存できるので非常に便利ですよ!
Illustratorで作成したオブジェクトにAdobeColorで生成した色を適用する例です。

塗り・線、お好きな要素を選択し、CCライブラリから適用したいカラーをクリックするだけですよ。
様々なカラーを検索してみよう
[ 探索 ] や [ トレンド ] をクリックすると、世界中の方が作成した配色やデザインのトレンド情報が閲覧できます。刺激タップリのコンテンツなので見ていて飽きませんよ。

高品質なポートフォリオテンプレート

紙媒体やPDF形式で作成したポートフォリオの品質を手っ取り早く高めるには、高品質なテンプレートの活用が最も効率的かつ効果的です。

商用利用可能で高品質テンプレートばかり厳選!
今まで意識しなかった多くの「気づき」に出会えますよ。

※なお、ポートフォリオ制作はInDesign(インデザイン)を使うのが最も効率的です。
コチラでインデザ初心者の方向けにポートフォリオテンプレートの使い方を詳しく解説しております。

#01 Pink Portfolio Layout

ピンク系のキレイ目カワイイ風ポートフォリオ用テンプレートです。InDesign形式なので文字と画像の差し替えが超楽!
2時間あればポートフォリオが作れます。
編集にはInDesignが必須、未導入の方はInDesign公式サイトから入手しておきましょう。

ダウンロードする

#02 Portfolio Layout with Gray Accents

モノトーン系でどんな作風にも合うポートフォリオ用テンプレートです。イラスト、写真、建築、Web、グッズ…テンプレ選びに迷ったらコレがオススメ!
A4に印刷したポートフォリオ、PDF形式、どちらも短時間で作成可能です。

ダウンロードする

#03 Portfolio Layout with Yellow Accents

黄色が鮮やかでキレイなポートフォリオテンプレートです。
爽やかな画風のイラストにもピッタリ!
クセが無く、ベースデザインとして非常に扱いやすいテンプレートの一つです。

ダウンロードする

#04 Portfolio Template in Pale Green and Mint

収録されているレイアウトパターンが非常に豊富なポートフォリオ用テンプレートです。
作品を大きく見せる、制作過程を見せる、複数見せる、横長作品を画面内に綺麗に収める等、どんなパターンにも当てはめる事が可能ですよ。

ダウンロードする

#05 Minimalist Portfolio Layout

ポートフォリオの表紙には必ずメインビジュアルを入れないとダメか?そんな事はありません。
単色に文字だけで構成した表紙も素敵です。
ページ中身のレイアウトパターンも豊富、あえて表紙をシンプルにする手法もアリですよ。

ダウンロードする

紹介しきれなかったポートフォリオテンプレートや素材
上記のテンプレートはほんの一部。
下記リンクで多数の高品質なポートフォリオテンプレートを紹介しています!

商用利用可能な高品質テンプレート

商用利用ができる高品質なデザインテンプレートを厳選しました!
制作時間を大幅に短縮でき、尚且つ品質の向上が可能な優秀な素材ばかりです。

制作の手間を格段に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。


例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート40選


紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差をつけてより高みを目指してみませんか?
デジタル媒体向けポートフォリオテンプレ素材35選


デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い!
相手に舐められない名刺テンプレート50選


バナーはフォトショップの練習をする上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選


AI形式で作られた高品質なフライヤーのテンプレート50選です。画像と文字を差し替えるだけ、超短時間でハイクオリティなフライヤーが作成可能!
様々なフライヤーのテンプレート50選


制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬!
様々なモックアップテンプレート50選


良質な素材をもっと見る
上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください!

おわりに

以上、AdobeColor(アドビカラー)の使い方とCCライブラリに色を登録&使用する方法でした。
色彩の知識が無くてもカラーホイールをドラッグするだけで良い感じの配色を自動生成できるAdobeの無料サービスです。

WebデザインやUI/UXデザイン、チラシをはじめとしたDTPデザインなど、AdobeColorは様々な制作に使える便利な機能です。
色を生成するだけでなく、CCライブラリに生成したカラーを保存し、PhotoshopやIllustratorをはじめとしたAdobe製品でカラーの使用も可能!

間違いなく制作が加速する便利なWebサービスなので使わない手は無いですよ。

ではまた!

商用利用可能な高品質素材

ポートフォリオテンプレート

ポートフォリオ用の高品質なテンプレート34選
デジタルポートフォリオ用のテンプレート35選
InDesign形式の高品質なポートフォリオテンプレート77選
AI形式の高品質なポートフォリオテンプレート25選
PSD形式のポートフォリオ用テンプレート12選
【InDesign】 A4横のポートフォリオテンプレート15選
【InDesign】 A4縦のポートフォリオが簡単に作れるテンプレート15選

印刷物のテンプレート

【名刺テンプレート】 高クオリティな名刺テンプレート50選
【名刺Part.2】高品質なミニマルデザインの名刺テンプレート18選
高品質な三つ折りパンフレットのテンプレート76選
【神速チラシデザイン】商用利用可能なフライヤーのテンプレート50選
【イラレ初心者でも自作可】商用可能で高品質なクリスマスカード素材53選
【商用利用可能】高品質な便箋のテンプレート50点を厳選

Web制作にオススメ

高クオリティなロゴのテンプレート50選
高品質なバナーテンプレート50選
Webサイトのデザインカンプ用テンプレート35選

その他のテンプレートや素材

ゲームUIに使える高品質なテンプレート48選
ゲームやイラストの背景素材66選
1枚絵として成立するクオリティの和風背景素材20選
【デザインモックアップ】様々な素材の高品質なモックアップ50選
イラスト初心者の為の便利なテンプレート
【商用OK!】フリーフォントと一味違う超高品質でユニークなフォント20選

最強素材リストの目次一覧
SCROLL
目次一覧
ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!

]]>