chouchou

未経験からWEBデザイナーを目指すfuyu_naのブログ

Photoshop

バナー模写 #29.YAHOO! 資格取得・キャリアアップ

バナー模写を再開します。 今までは「模写すること」に一生懸命になっていましたが、これからは「デザインの観察」を中心に取り組んでいきたいと思います。 time:40minsize:300×250tool:Photoshop 全体的に清潔感があってフレッシュな印象。メリハリと安…

Photoshopで印刷物を作る時に失敗しないための3つのポイント

先日私が経験したことですが、Photoshopで印刷物を作ったとき、プリントした完成版を見て「なんか思ってたのと違う」ということがありました。(自業自得ですが締め切り前日の出来事だったので、かなりショックを受けました) 同じようなことが初心者のお仲…

Webデザインのトレース #5.My Home,My Starbucks

今回は、スターバックスさんのWebデザインをトレースさせて頂きました。 My Home, My Starbucks のランディングページです。基本はAdobe XDを使用し、一部のパーツはPhotoshopで編集しました。 選んだ理由 スターバックスが好きだから。 手書き風のデザイン…

Webデザインのトレース #4.島の病院おおたに(2)

今回は、島の病院おおたにさんの「診療科ページ」です。 トップページがシンプルで素敵なデザインだったので続けてトレースしてみました。 デザインの観察 TOPページ以外で共通のデザイン ヘッダー、ナビゲーション、背景、フッターはトップページ以外のペー…

Webデザインのトレース #3.島の病院おおたに

今回は、こちらの「島の病院おおたに」さんのWebサイトをトレースさせて頂きました。 選んだ理由 パノラマ写真と海を連想するBGMに惹かれた シンプルで目的にたどり着きやすいデザイン 医療機関のWebサイトに興味があった デザインの観察 パノラマ写真を使っ…

Webデザインのトレース #2. ハルイロ歯科クリニック

今回は、ハルイロ歯科クリニックさんのWebサイトをトレースさせて頂きました。 左がお手本、右がトレースです。Photoshopを使用してます。 選んだ理由 良い意味で医療系施設のサイトに見えなかった 診療情報や予約の部分がシンプルでわかりやすいデザイン セ…

初めての「Adobe XD」で簡単にWebデザインができた

今までPhotoshopを使ってWebサイトのトレースをしていましたが、1サイトに時間がかかり過ぎて全然数がこなせませんでした。 そこで、効率化のために Adobe XD を使ってみました。 XDを使うきっかけになったのは、以下の記事です。使用方法がわかりやすく書か…

バナー模写 #28.30%OFF coupon

time:40mintool:photoshop パターンに色をつける方法が今まで理解できてなくて、試行錯誤した結果、時間がかかってしまいました。最終的に手探りでは限界!ということで、下記サイト様のお世話になりました。 フォントに統一感がなくて反省してます。こう…

バナー模写 #27.つくる。みんなのTシャツ。

time:不明tool:Photoshop 作ってあったけどアップしてなかったものを発見しました。そのため所要時間は不明です。確か時間があまりとれない時に、「1日1個は練習!」と思って模写したものです。 ビビットな黄色が目立つ、派手でアクティブな第一印象です。…

バナー模写 #26.CLEARANCE SALE

time:40mintool:photoshop シンプルだけど目立つビジュアル。「2つ買ったら10%OFFですよ」って文字をわざわざ読まなくても、視覚的にすぐ理解できます。 メインのフォントは全体的に細めのサンセリフ体で構成されていて、女性的かつ都会的な印象を受けます…

バナー模写 #25.EXTRA 30% OFF

time:40mintool:photoshop ミントカラーにドット柄のフォントが可愛いバナーです。全体的に余白が大きくて余裕のあるデザイン。 模写の方は『30』のフォントが小さい気がします。フォントが小さいからか、合わせたはずの枠線の太さも太く見えてしまいます…

バナー模写 #24.SUMMER SALE!

time:40mintool:photoshop アウトラインのあるフォントが相変わらず好きです。少しずらしてる感じがポップでまた可愛い。動きのある切り取り写真を入れることで楽しい雰囲気になっています。ロゴを少し傾けることでさらに動きが出ました。 記事を書いてる…

バナー模写 #23.眼鏡市場

time:25mintool:Photoshop サングラスの色が違うだけで、大きく異なる印象。原本の方が軽くてかわいい感じに見えます。画像選びも大切。

バナー模写 #22.スカパー!

time:30mintool:photoshop ロゴを作るのに時間かかりそうでしたが、思ったより早くできました。前回、前々回のものとはまた雰囲気が違うけど、こういうはっきりしたデザインも好きです。

バナー模写 #21.楽天カード

time:80mintool:Photoshop とってもかわいくて好きなデザイン。こういう明るくてポップなバナーが特に好きです。ただすごく時間がかかりました。特にリボンと「8,000」の部分。大変だったけどやっぱり好きなものを作れるのは楽しいです。

バナー模写 #20.CLUB Panasonic

time:40mintool:photoshop 一瞬でT-POINTの宣伝だとわかる配色が素晴らしいです。画像がなくてシンプルに見えるけど、いろんな要素が入っている。多くの要素がバランス良く配置されていて、ごちゃごちゃしていない。 全体的に楽しく模写できました。

バナー模写 #19.FELISSIMO 秋のオトナ服

time:80mintool:Photoshop いつも逃げてしまう写真を今回は入れてみました。写真を入れる作業をしただけで、とっても達成感があります。写真の加工にもっと時間がかかると思いましたが、案外簡単にできて驚きました。上達している…のだと思いたいです。 左…

バナー模写 #18.MUSEE PLATINUM

time:60minTool:Photoshop 色々と残念な結果だと反省しております。 水色×ピンク×白の配色がとてもかわいいMUSEE PLATINUMさんのバナーです。「女の子!」って感じが伝わってきます。 文字はなぜカクカクしているのでしょうか?雲のようなシェイプは手書き…

バナー模写 #17.CLINIQUE

time:30mintool:Photoshop 色の数や変化が少ないバナーは最初よりも早く作れるようになってきました。 模写の方はフォントのウェイトや色によるものか、どこか印象が薄いです。「瞬時に、カバー。」の文字が明らかに弱いですね。 これまでバナー模写してき…

バナー模写 #16.白潤の部屋

time:40mintool:Photoshop 吹き出しやシズクなど、今まで作ったことがなかったので挑戦してみました。シェイプは使ったことなかったですが便利ですね。色々な種類があると分かったので、また幅が広がりそうです。 フォントの違いで印象が違う模写になりま…

バナー模写 #15.niko and...

time:30mintool:Photoshop 人物画像を入れてたら30分では済まなかっただろうと思う作品。色々フォントが使われているので模写してみたいと思いました。こういうかわいいデザイン大好きです。 コーディネイトプレゼントキャンペーンの「上下のライン」がな…

バナー模写 #14.JINS PC

▼ sample time:30mintool:Photoshop いつもお世話になっているJINSさんのバナーです。いつからかこのJ!NSさんのロゴが好きで。なぜ好きなのかというのは、ボキャボラリーが少なくて言葉にして伝えられないけど きっとこの「配色」は好きなんでしょうね。模…

バナー 模写 #12-13.LA BOO

今回は同じブランドのバナーを2種類作ったので、ひとつの記事にまとめました。 #12.NOVELTY PARTY time:60mintool:Photoshop フォントの色をピンクにすることで若者向けのかわいらしいイメージになっています。洋服や小物の写真も切り抜きでランダムに配置…

バナー模写 #11.SUUMO

time:40minsize:600 × 500tool:Photoshop 写真で魅せるバナー、このトーン、どちらも好きです。 似たような家の写真を使ってみたらそれっぽくなって嬉しい。雲がないことには記事を書いている今気づきました。フォントもそれなりに似せられたと思ったけど…

バナー模写 #10.LAWSON MACHI cafe

time:30mintool:Photoshop ついに30分で作れたと思ったら「ブレンドコーヒー(S)」「アイスコーヒー(S)」の『 (S) 』が抜けちゃってますね、残念。MACHIcafeのロゴはネットで見つけたものにクリッピングマスクかけて色を変えたのですが、サイズが全然違いま…

バナー模写 #9.大阪人間科学大学 Open Campus

time:120mintool:Photoshop 全然上手くできなかった、これ本当に悔しい! 全体にトーンが低くて暗い印象になってしまいました。お手本の明るくて楽しい雰囲気が伝わらない、残念な模写。 紙の質感、クレヨンのような文字・ラインに特に時間がかかりました…

バナー模写 #8.Expedia

Time:120minSize:160 × 600Tool:Photoshop ボタンの練習をしたくて選んだバナーです。テキストの加工には慣れてきた気がするけど、背景やボタンの絶妙なパターンとか、グラデーションに時間がかかるのでもっと練習していきたいです。 ひとつひとつ調べな…

バナー模写 #7.フェリシモ公式LINE

Time:60minSize:718px × 88pxTool:Photoshop 単色のバナーは作りやすいのもあって作業時間が短くなってきました。こちらは一目でLINEのバナーだってわかるのが良くて、ブランドカラーって大事だなと思います。 Photoshopの操作にも少しずつ慣れてきました…

バナー模写 #6.SUMMER SALE

▼ sample Time:90minSize:700 × 300Tool:Photoshop 周りの三角形が重なるところ、どうすればお手本と同じにできるのでしょう。不透明度を変えて作る画像は今の技術じゃどうしてもできない。こういうとき誰かに教えて欲しい。正解がわからない。 フォント…

バナー模写 #5.三越のお歳暮

Time:120minSize:300×250pxTool:Photoshop 駄目だ、めちゃくちゃ難しいです三越様。 主役不在なのはそっくりな画像がなかったからです。とても寂しい。 グラデーションや初めてのテクスチャ、光が差し込む加工、全てにおいて残念でしかない。ただただ悔し…