Web designはじめました。

Web designはじめました。

web初心者がオンラインスクールでwebデザインを学ぶ話

バナー模写やってみた

 webデザインを勉強するにあたって、ただ単にオンライン講座を受けているだけじゃダメだなって思って。ネットで色々「webデザイン 勉強」とか「webデザイン 上達」とか「webデザイン 初心者」とか調べて、行き着いた先がバナー模写でした。

 

 

 

模写するということ

 

webの業界について私は知らないことだらけですが、これは他のことにも言えることで、何をするにもまずは真似をすることから始まると思ってます。私は1年前にバンクーバーへ語学留学に行っていたのですが、英語もまずは真似るところから始めます。もちろん、語彙とか、文法とか、イディオムとかは、自分自身で学び、自分のものにしなければもちろん上達は遅くなります。でも、発音や、言葉の言い回し、使う場面というのはネイティブの真似をすればするほど体や脳に入っていく気がします。

 

f:id:webkaatoxun:20180408235556j:plain

 

実際にやってみた

 

まず1つ目

 

元のバナー

f:id:webkaatoxun:20180409185818p:plain

 

模写したもの

f:id:webkaatoxun:20180409185829p:plain

photoshop:制作時間2日) 

 

模写とは程遠いものになってしまいましたが、私がwebデザインの勉強を初めてから模写した初めてのバナーです。記念すべき1枚目はこんな感じです。

 

意識したことは、作成しながら考えるのではなく、元になるバナーをじっと見つめてどういう手順で作成しているのか考えることです。

 

作りながら考えると、途中で迷子になっちゃったりしちゃうのでできるだけその時間を減らすようにしました。

 

難しかったところは、女性の画像の切り抜きとモノクロ化です。

最初は背景までモノクロになってしまったりして一晩考えるほど、、、笑

youtubeで探したり、サイトをみたりしてどの方法ですればいいのか探しました。

結果的に女性を範囲選択して、周りの背景を消しゴムで削除⇨背景を追加 という手順で行いました。

 

参考にした動画はこれです


簡単画像編集!Photoshopで写真の切り抜きと縁取りの方法^^

 

 

 

 

 

では次。

 

 

 

 

 

2つ目

 

元のバナー

f:id:webkaatoxun:20180408233101j:plain

 

模写したもの

f:id:webkaatoxun:20180409202144p:plain

photoshop:制作時間4時間)

 

2枚目なので比較的1枚目よりかはスムーズに進めることができました。

似たようなフォントを探すのが難しく感じました。photoshopでは似たようなフォントを探してくれる機能もあるようで、いちお試しに使ってみましたが自分で探す方が良かった気がします。笑

 

このバナー制作で学んだことは、文字の縁取りと文字色のグラデーションです。

ANAのロゴはパスを打って作ったのですが、パスを打つ前にシェイプを選択してからトレースしていくとできるということ。何度もやって気づきました。笑

 

 

模写してみての感想

 

模写って最初は簡単そうだなって正直思っていたのですが、実際にやってみると時間はかかるし、いろんな機能知ってなきゃいけないしで、難しいなあと思うばかりでした。

ただ、模写をしてみて得たことはすごく多くて、自分からなんでもやってみるもんだなって改めて感じさせられました。これからもバナーの模写は続けて行きたいし、もっと早く時間を意識した制作にして行きたいですね。もちろんクオリティーも!

 

こうした方が良いよ!とかアドバイスがあれば気軽に声かけてください^^

私にとっては貴重なアドバイスになると思います!!

 

f:id:webkaatoxun:20180408235411j:plain