PR

デザイン制作例

注意事項

本作例は職業訓練校の授業内で制作しており、一部画像については著作権および肖像権については許諾を得ておりません。詳しくは文化庁資料を参照ください。
参考にさせて頂いた著作権者に謝意申し上げます。

【画像合成】

使用ソフト|Photoshop(制作時間 各1時間)
制作内容|人物画像から被写体選択、切り抜いて背景画像に合成しました。
画像は訓練課題所定のものを使用しました。

使用ソフト|Photoshop(制作時間 各1時間)
制作内容|花画像から花を切り抜いた窓から、2枚の背景画像を合成しました。
画像は訓練課題所定のものを使用しました。

使用ソフト|Photoshop(制作時間 各1時間)
制作内容|りんごを切り抜いた穴に猫の画像を合成しました。画像は訓練課題所定のものを使用しました。

【イラスト】

使用ソフト|Illustrator(制作時間 10分)
制作内容|幾何学的な模様を如何に短時間で制作できるか挑戦しました。
(楕円ツールで重ねて、パスファインダーで分割し、分割パーツに塗りを加え。グループ化して4つコピー)

使用ソフト|Illustrator(制作時間 2時間)
使用ソフト|Photshop(制作時間 5分)
制作内容|オリジナルで辰のイメージキャラクターを制作し、年賀状として当て込んで制作しました。
背景画像|商用フリー素材をPhotoshopにて取り込み画質調整。
キャラクタ|Illustratorでオリジナル制作、辰の印影
その他|文字入れ

【トレース】

使用ソフト|Illustrator(制作時間 1時間)
制作内容|Apple社ロゴを如何に少ない手数(アンカーポイント)でトレースできるか挑戦しました。
 歪な部分が3箇所ありますが、まずは手数としての目標は達成できたのではないかと考えます。

【トレース(改変)】

使用ソフト|Photoshop(制作時間 2時間)
制作内容|実在WEBバナーを模写して架空の別バージョンバナーを制作しました。

使用ソフト|Photoshop(制作時間 1時間)
制作内容|実在WEBバナーを模写して架空の別バージョンバナーを制作しました。


【ピクトグラム】

使用ソフト|Illustrator(制作時間 3時間)
制作内容|登山をテーマに、登山時の注意喚起のピクトグラムを制作しました。


【アクセスマップ】

使用ソフト|Illustrator(制作時間 2時間)
制作内容|訓練校へのシンプルなアクセスマップを制作しました。


【DM】

使用ソフト|Illustrator(制作時間 2時間)
制作内容|夏をテーマにして、明るくポップなイメージを念頭に、黄色背景と泡感の文字で制作。(写真はスマホで撮影しました。ビールは半分飲んでしまっています。撮影地は「孤独のグルメ」で有名な杉並区大宮八幡近くの武蔵野園)

使用ソフト|Illustrator(制作時間 2時間)
制作内容|DMとして真っ先にイメージが浮かんだ「いかにも」な感じの紳士服店のDMを具現化しました。


【ロゴ】

使用ソフト|Illustrator(制作時間 2時間)
制作内容|単語はラテン語一覧を参考に、ラテン語の意味からイメージロゴを制作しました


【名刺】

●縦タイプ

●横タイプ

使用ソフト|Illustrator(制作時間 2時間)
制作内容|名刺としてイメージが浮かんだデザインを具現化しました。


【WEBバナー】

使用ソフト|Photoshop(制作時間 0.5時間)
制作内容|Iwataniの既存商品画像(カセットフー タフまるジュニア)に対して、よりアウトドアに合いそうな迷彩柄を制作しました。元画像に迷彩柄(多角形選択&フィルター/スポンジ効果、サンドは色調補正でセピア補正)、明るくし(覆い焼き、明るさ追加)、馴染ませ(ぼかし)ました。
(金額表示はバナー下に掲載する前提で画像には入れていません)


使用ソフト|Photoshop(制作時間 0.5時間)
制作内容|
・訳あり文字は赤背景白文字、ジャンプ率で目立たせ、半額は黄色文字で抑えめに強調してみました。
・和食材なのでフォントは筆系フォント、一体感を出すため透過を選択しました。
・画像自体は無加工です。


使用ソフト|Photoshop(制作時間 0.5時間)
制作内容|
・秋冬に向けてぐっとくるおでんバナーを制作しました。
・文字は画面上部にすることで御当地を目立たせ、文字背景は上部50%白抜きですっきり感を出すことで「半額セール」を強調しました。
・和食材なのでフォントは筆系フォントを選択しました。
・画像自体は無加工です。


使用ソフト|Photoshop(制作時間 0.5時間)
制作内容|
・WEBサイトの「隙間バナー」を想定して制作しました。
・青でカシオのイメージを表現しました。
・画像自体は無加工です。(背景透過のみ)


使用ソフト|Photoshop(制作時間 0.5時間)
制作内容|
・画像は、deuterの無地のシュラフ画像に、夏山に合いそうな迷彩柄に加工しました。
・売切クリアランスセール感(赤札)を出すため赤背景で強調してみました。


【WEBバナー(楽天向け)】

使用ソフト|Photoshop(制作時間 1時間)
制作内容|
・楽天ショップ商品バナーを想定して制作しました。
・画像自体は無加工です。(背景透過のみ)

使用ソフト|Photoshop(制作時間 1時間)
制作内容|
・楽天ショップ商品バナーを想定して制作しました。
・画像自体は無加工です。(切り抜きのみ)

使用ソフト|Photoshop(制作時間 1時間)
制作内容|
・楽天ショップ商品バナーを想定して制作しました。
・画像自体は無加工です。

使用ソフト|Photoshop(制作時間 0.5時間)
制作内容|
・楽天ショップ商品バナーを想定して制作しました。
・画像自体は無加工です。


【WEBバナー(サイズ別)】

使用ソフト|Photoshop(制作時間 2時間)
制作内容|「福」の金貨をデザイン制作。福岡おでんの5種バナーを制作しました。


【当て込み】

使用ソフト|Photoshop(制作時間 0.5時間)
制作内容|左下画像のカセットコンロを迷彩加工モデルに差し替えて当て込みました。

使用ソフト|Photoshop(制作時間 0.5時間)
制作内容|左下画像のシャインマスカットを長野県アルクマの豊水梨に差し替えて当て込みました。

使用ソフト|Photoshop(制作時間 0.5時間)
制作内容|右下画像のシャインマスカット晴王を鬼ゆずに差し替えて当て込みました。(鬼ゆずは背景ぼかし修整。鬼ゆずを選んだ理由は「桃太郎と鬼を並べたい」ということからです。)

【ランディングページ】

洋風居酒屋サンプルページ

■技術|HTML5/CSS3
■使用ソフト|テキストエディタ(Terapad/秀丸/DreamWeaver/VSCode)(制作時間 都合18時間)
■制作内容|デザインカンプは「飲食店からWEBページのLP制作を依頼された」という想定のもと制作しました。WEBページの手組み(HTML5とCSS3のコーディング)は、イチから行うのは初めてで、プロパティ等は調べながらChrome表示&検証ツールの繰り返しとなり苦戦しました。RWD対応も知識不足のためmargin調整に多大な時間がかかりました。引き続き研究をして、CSS3を自由に扱えるようになって「論よりRUN」地獄から脱却したいと思います。

自己紹介サンプルページ

https://b104.deau-ac.com/profile

■技術|HTML5/CSS3/JavaScript/Swiper
■使用ソフト|テキストエディタ(Terapad/秀丸/DreamWeaver/VSCode)(制作時間 3時間)
■制作内容|課題制作の自己紹介ページ(HTML5/CSS3)に、部品「Swiper」のスライダーを追加しました。
■個別ライブラリィ
コンテンツスライダー(swiper)
公式サイト:swiper(https://swiperjs.com/)
CDN(css):https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css
CDN(js):https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js