模写

最近バナー模写できてなかったので、久しぶりの更新になります〜！

よく見ると黒いボックスの中に細かい宇宙のような模様が入っていたので、同じように作成しました。

もう知ってる人もいると思いますが、

レイヤーにフィルター

→ ノイズ(グレースケールノイズ)

にすれば、そんな感じのものができます！笑

すいません、ちょっとテキトーな感じです。笑

人間さんの切り抜きは時間がなくて

ざっとやった感じなので雑です。すいません

また時間のある時にアップしますね〜！

課題

オンラインスクール途中経過

デジハリオンライン講座を受講して、約２ヶ月弱が経ちます。

ということで、初めての小課題が出ました！

前回の記事でも途中経過をアップしていたのですが、昨日ようやくスマホ用サイトも完成しました！と言っても、スクールから出された指示書通りにphotoshopを使ってページのデザインをしていくというもので、本格的なサイト作成にはまだまだです。

課題は１ページサイト

今回はいくつか選べる課題の中から、企業の１ページサイトを選びました。

使用ソフトはPhotoshop、制作時間は約３時間です。

自分の中で少し時間がかかったところは、

フォームの職業選択のボタンです。

ただの円ではなく、境界線、円の内側をぼかしました。

そのほかは特に難しいと感じたところはなかったです。

課題制作を終えて 

今回の課題は、スクールから指定されたものを作成したので実際に自分で考えて作成したわけではありません。ですが、ソフトが使えること、これは最低限のレベルには到達できたのではないのかなと思います。課題制作を作り上げた時は、やはり達成感はありました！早く自分で１からサイトを作りたいという気持ちが以前にも増して強くなったような気がします。

課題制作①

昨日はデジハリオンラインから出された小課題を制作してました。

まだPC用しかできていませんが、こんな感じで進めてます〜！

正直まだグラフィックの講義動画が見終わっていないのもあって、今の段階でできるものを制作しました。

デザインは、全部指示書通りに制作していけばいいので、正確にソフトがきちんと使えるか、が一番重視されていると感じました。なので、先生からの添削等はありません。

課題もそんなに難しいものではなくて、講義動画でやったことの総復習という感じです。

今日の夜はスマホ用のデザインを仕上げていかなければならないので、しばらくはバナー模写できなさそうですが、終わり次第またやっていきますよ〜！

最近twitterを見て、同じようにバナー模写をされている方が増えてきたりして、とても心強いです。なかなか初心者の立場だと既に活躍されている方に声をかけるのってすごく勇気がいりますが、初心者同士だと、わからないところとか、つまづくところが似ているのでお互いに教えあえてとてもいい関係になっていると感じます！

ブログの更新頻度は少なめですが、twitterでたまにつぶやくのでその時はまたよろしくお願いします( ^ω^ )！

バナー模写続く。。。

バナー模写４枚目

毎日できなくても、できるだけphotoshopやillustratorに触れておきたいと思い、

ここに記録として残していこうと思います。

今回のバナーはこちら

元のバナー

模写したもの

（photoshop : 3h） 

今回の模写は、緑のボタンがネックでした。

正直、納得がいくようなものではないです。。。

どうやったら、元のバナーのようにぷっくりしたボタンができるのか

例えば、カラーをグラデーションにしてぷっくり見えるようにするとか、影をつけるとか。

わからないまま、こんな感じなのかなあと手探りでやってみた結果、ボタンにはドロップシャドウを使いました。あとは少しだけグリーンのグラデーションを。

枚数を重ねてみて

最初の頃よりかは、作成の手順がなんとなく自分の中でイメージができているように感じます。しかし、まだまだ細かいところまで観察できていないなあと痛感。バナー模写の際、途中経過を妹に見てもらうのですが、「ここ、影あるよ」とか「ここなんか違くない？」など、私と同じ素人ですが作成者とは別の角度で見ているせいか、間違いを指摘してくれます。

まだまだ全体から詳細を見る目が養われてないと反省中です。

今はとにかく数をこなしていきます！

バナー模写２

バナー模写続きます

今日はお仕事をお休みする用事があったので、落ち着いたところでバナー模写をしました。毎回毎回やってみて思うのですが、まだ初心者なので毎回新しいことに出会う楽しみと学びは、本当にやってて自分のスキルにつながっていくなあと感じています。

参考書を読み込んだりするのも大事ですが、私は自分で体験・経験して学んでいく方が自分に合っているような気がするので、なんでもやっていこうと思っています！笑

模写３枚目

元のバナー

模写

 (photoshop : 2時間） 

元のバナーの水の波紋みたいなデザインがありますが、正直自分でどうしたら良いのかわからず、諦めました。その代わり、グラデーションに。ただ、やはり元のバナーのように波紋のようなデザインがあった方がより、美容液を印象付けられる気がします。

今回はそれ以外は頭を悩ますところがなく、スムーズに模写できました。 

バナー模写やってみた

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

模写するということ

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

実際にやってみた

まず１つ目

元のバナー

模写したもの

（photoshop：制作時間２日） 

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

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

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

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

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

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

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

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

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

では次。

２つ目

元のバナー

模写したもの

（photoshop：制作時間４時間）

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

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

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

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

模写してみての感想

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

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

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

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

ライブ授業2

先週に第2回目のライブ授業が行われたので、その時のことをここに残しておきます。

今回のテーマは

{photoshopを使って合成写真をつくる}

まずはじめに

次に提出する小課題①(名刺orバナー製作)について概要の説明。

それから、ライブ授業用課題の評価。

これは、生徒さんたちが提出した課題(今回は合成写真)を実際に見て、先生からのアドバイスなどをもらいつつ、他の生徒さんからも感想を言ってもらうというもの。

正直先生は基本褒めてくれる感じなので、もうちょっとこうしたらりあるっぽくなるよ等、アドバイスが欲しかったなーという印象です。

他の生徒さんたちの作品を見るのは、やっぱりいい刺激になるし、あー！こんなやり方もあるのか！とか、こんなアイディアもあるのか！と気づかされることが多かったです。

自分の作品に対して批評も欲しかったですが、実際に他の方の作品を見て、自分の作品を客観的に見て改善点を見つけていくいい勉強になりました！(^ ^)

•合成写真作成においてのコツ

1) 光が当たっている角度をチェック

　⇨どこから光が当たっているか？

2) できるだけ光の色味と明るさを同じにする

　⇨外で撮ったもの＋室内で撮ったもの＝不自然

3)写真を撮った時のアングルに気をつける

　⇨目線の高さの写真＋ローアングル＝不自然

　（変形⇨遠近法で調整する）

ちなみに私が制作したものはこちらです笑

まだまだ練習あるのみです。。。。笑

ペンツールを使う際のショートカットキー

photoshopを使うにあたって、もちろん制作物のクオリティーも大事ですが、制作時間も意識しなければならない！ということで、

1. アンカーポイントを追加⇨パス上に＋マークが出てくる時にクリック
2. アンカーポイントを削除⇨パス上にーマークが出てくる時にクリック
3. ALTキーを押している間はアンカーポイントツールになる
4. contrlキーを押している間は直前に使用していた選択ツールになる

この４つは最低でも意識して使っていきましょうということでした。

まだまだおぼつかないところもあるけれど、使っていくよう意識していったら結構便利でした。