フォトショップでデザイン
Designed by Ajipebriana / Freepik
スポンサーリンク

スマホやタブレットの普及で、イラストやオリジナルのロゴが簡単に作れるようになり、デザインが身近になっています。

でも、せっかくイラストやロゴが作れても発表の場がないと続かなかったり、やる気もなくなったりしますよね。

そんな発表の場がない個人的に制作したイラストやロゴを使うオススメの場所がTシャツです。Tシャツは自分でも着れて、飾ってもおけるし、プレゼントしても喜ばれる。着れる作品になります

でも初心者が色々なソフトをいきなり使うのは難しかったり、そもそもイラストを書くのが苦手な人は諦めてしまいそうですが、今はソフトの進歩でデザインは誰にでも出来ちゃうんです!

デザイン・イラスト制作ソフトの中でもプロにも愛されている定番の
アドビphotoshopだけを使い、イラストは無料素材を使ってTシャツのデザインを作って行きます

スポンサーリンク

photoshop【フォトショップ】はどんなソフト?

Photoshopは、アドビが販売しているビットマップ画像編集アプリケーションソフトウェアで写真を加工して思い通りに仕上げたり、画像や文字を使ってWebページやバナーなどのデザイン作業。水彩画や油絵のようなイラスト表現などが出来ます。プロも使用する世界最高峰の画像編集ソフトウェアで、精度の高い写真の編集はもちろん、高品質なデザインやイラストを作成するためのさまざまなツールが備わっているのが特徴です。

photoshop【フォトショップ】とは
・写真加工
・画像や文字のデザイン
・イラスト描画

などがプロの現場(プロの定番ソフト)でも多く使われています

写真の補正や合成、イラスト制作に特化したプロフェッショナルソフトです

デザイン作業の前にイラストや写真素材を揃えておきましょう

今回のTシャツデザインにはライオンのイラストを使いますが、このライオン、自分で描かずに無料の素材で探していきます
無料素材でも加工可能なイラストが豊富に使えるfreepikならイメージにあったイラストが探しやすいです

完成イメージがまだない場合にはサイトの素材をみながら考えても良いですね

freepikについて

freepikには「写真素材」「ベクター素材」「PSD素材」「アイコン素材」の4種類の素材があり使用する環境に合わせたデータをダウンロード出来ます。無料素材で個人・商用利用可能な素材を大量に配布しているサイトで、使う素材は選ぶ必要がありますが、種類がとても多いですよ
freepikの使用にあたって注意事項が2つあります!

未登録ユーザーは1日3ファイルまでのダウンロード
未登録ユーザーは1日3ファイルまでですが、無料アカウントに登録すれば1日10個ダウンロードまでダウンロード可能です。さらに月額1000円程のプレミアム会員になれば無制限ダウンロード可能!
使用ライセンス
素材はほぼ全て個人・商用共に利用可能ですが使用した作品や商品にはクレジット明記が必須(DLしたファイルに書いてあります)。ただしプレミアムライセンスを取得すればクレジット表記なしで商用使用が可能です。

スポンサーリンク

それではフォトショップでTシャツのデザインをしていきましょう

前置きが長くなりましたがTシャツのデザインをはじめて行きます!

動画でも説明していますのでご覧ください。このサイトでは動画より少し詳しい解説をしています

新規ファイルをA4サイズ背景色黒、RGBカラー、300dpiでつくります
freepixでイメージに会うライオンのイラストをダウンロード。イラスト使用のクレジットはDesigned by Ajipebriana / Freepik

ライオンを白色に変えて【イメージ→色調補正→色相・彩度】の明度100%でも白になります
楕円選択ツールでライオンを囲むように選択
【編集→境界線を描く】を白で1pxにします。次に【レイヤー→レイヤースタイル→境界線】をカラー白のサイズ18pxに
1.最初に描いた円をコピーして少し大きめの大きさに変更【編集→変形】で任意の大きさに出来ます
2.【レイヤー→レイヤースタイル→境界線】をカラー白のサイズ46px
※レイヤースタイルの境界線を使うのは拡大・縮小時に線幅の調整が後でもできるからです
長方形選択ツールを使い文字を入れる帯を、任意のサイズで選択範囲を設定。
白で塗りつぶします。後で大きさは変更できますのでサイズはだいたいでもOK
先ほどの帯をコピーして天地が短く左右を長く変形【編集→自由変形】させます。こちらの帯は上のレイヤーにしておきます
上のレイヤーにある帯を【レイヤー→レイヤースタイル→境界線】をカラー黒のサイズ18px、位置中央にしてフチをつけます
帯の内側にGARRETT MOTORの文字をフォント:Kompakt LT Stdで入れます。
帯と文字のレイヤーを結合してから【編集→変形→ワープ→円弧】で曲がり具合を調整。
円弧状にする方法も色々ありますが、簡単な方法を使っています
下に入れるsince2020の文字も
円弧の向きが逆ですが、上のGARRETT MOTORSと同じ方法で作れます

Tシャツに入れるデザインが完成しました

応用編:作ったtシャツデザインを合成してイメージビジュアルにする

デザインは完成しました、この後は応用編として
デザインをTシャツに入れたイメージと
Tシャツに合わせたイメージでビジュアルを作って行きます

これも全てフォトショップで制作します。
今回は説明を簡単にしますが、今後は詳しく解説していこうと思います

背景には車イメージ写真を入れます。※これも無料素材でクレジットが必要ない写真です
Tシャツの画像をおきます。背景写真にノイズが入っているので
Tシャツにもノイズを入れ、2枚重ねて上の画像を乗算80%にしてトーンを合わせました
このTシャツ写真も無料素材、クレジット記載不要のものです

デザイン素材を入れて行きます。今回のデザインを大きく少し背景が透けるように入れます(比較(明)・不透明度85%配置)
全体の位置と大きさのバランスを調整

最後に文字を入れていきますGARRETT MOTORS(ブランド名的な立ち位置)は下部分が少し透けるグラデーションで
架空のカスタムショップという意味のIMAGINATION CUSTOM SHOPという文字(ブランドの説明キャッチ的なもの)もいれます
白い文字だとつまらないので、文字にテクスチャーを入れることにしました、今回は男臭く?炎でいきます
文字レイヤーの上に炎の画像レイヤーを置いたら、
レイヤーの間をAlt(⌘)+クリックすると、上のレイヤーは下のレイヤーでクリッピングされ、文字の中に炎のテクスチャーが入ります
全体のトーンが合うように質感を調整したら完成です!
イラスト:Designed by Ajipebriana / Freepik

イラストが描けなくても、イメージに合う素材が使えれば簡単にTシャツのデザインはできます。ソフトはあえてフォトショップだけを使ってみました。架空のカスタムショップ:ギャレットモータースのワイルドで迫力のあるTシャツができました

何かご質問やこの画像データ(レイヤーが残ったもの)が欲しい!(笑)
という方がもしおられましたら
お気軽にお問い合わせからご連絡いただければ、
私のわかる範囲でお返事させていただきます

※説明している方法には他のツールを使って制作できる方法もあります
※今回使用した素材は個人的な使用目的で使用しています
※2021年2月時点での情報になります

スポンサーリンク

Twitterでフォローしよう

おすすめの記事