未経験からでもWEBエンジニアになれるブログ

可能な限り楽して生きていきたい。好きなものだけ食べて痩せたい。控えめに行っても玉の輿乗りたい。ほんとはプライベートブログにしたい。何もしてないのに尊敬されたい。家から出たくない。

制作進捗

 

 

おひさしぶりです~~~

 

 

講義での作成課題の使用許可をいただきましたんで、進捗報告って感じで、、、、、、

 

 

 

 

 

Psでバナーの制作を8月に

 

 

f:id:mocha0426:20171003191706j:plain

 

 

f:id:mocha0426:20171003191719j:plain

 

 

 

このときが初めてのデザインだったんで、

とにかく必死でしたし、

今見ても恥ずかしいです(笑)

 

 

 

 

で、

その一ヵ月後にAiでランディングページのデザイン案を作成しました。

 

 

 

f:id:mocha0426:20171003191742j:plain

 

 

縦型デザインを採用してみたり、ロゴにも意味を持たせてみたり、

補色でボタンクリックを促しコンバージョンのことを考えてみたりと

 

 

 

 

しかしまぁこれ

 

驚きの素人デザイン、かなりのブラッシュアップが必要ですよね、、、、、

 

 

 

 

 

 

そんでもって

 

先週は架空ライブのフライヤーを作成しました

 

 

 

 

f:id:mocha0426:20171003195218p:plain

画質わっる

 

 

 

 

 

 

 

さて、

 

ここからは怒涛の修了制作にはいりますが、

 

 

 

しばらくはプログラミング分野についての記事をいくつかあげていこうと思います

 

 

 

 

卒業まで残り三ヶ月をきりました!!

 

 

もっともっとがんばらなきゃね

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

光の三原色 色の三原色

 

結構前に書いたカラーコーディネート概論とほとんど内容同じ、、、

 

簡単にざっくり書きます。

 

 

色の基礎

 

 


光の三原色RGB

 

加法混色と呼ばれます。

 

 

光源色の中で、
人間が感じることのできる光の色を、

 

光の三原色

 

といいます。

 

 

R:レッド
G:グリーン
B:ブルー

 

に分類され、これらを重ねていくと白へ近づいていく、つまり明るくなることを加法混色と呼ばれます。

RGBでは、

 

R+G=Y(イエロー)
R+B=M(マゼンタ)
G+B=C(シアン)

 

という色になります。

 

黄色、ピンク、水色といった感じ。厳密にはちゃうけどな!

 

ただ、RGBではつかうデバイスによっていろの見え方が違います。macとブラウン管じゃ大違い。注意が必要です。

 

 

 

 

色の三原色

 

 

RGBとは対照的に、色を重ねるごとに濃くなり、
最終的には黒になる色表現を減法混色といいます。

 

印刷の世界でよく使われ、


CMYではそれぞれ、

 

C:シアン
M:マゼンタ
Y:イエロー

 

を指しています。


本来だと、これらの3色をmaxまで混ぜて黒を表現しますが、それでは黒に限界があるらしく、


実際はCMYK(K:黒)を1セットとして扱うそうです。

 

ちなみに黒が何でKなのかというと、
キートーンや、キープレートというのが語源らしい。詳しくはググってね。

 

 

 

 

 

色については、もっと詳しくは過去のカラーコーディネート概論に書いています。よかったら見てね。

 

 短いけど、アディオス!おなかすいた!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

デザイン-初心者が覚えるべき基礎of基礎

 

今回より具体的なデザインの基礎についてかきます。

 

 

たぶん皆さん、無意識でやってるはず。この感覚がいい人は、きっとデザインが好きなはずです。

 

 


もし感覚で作ったデザインがあれば、これらの基礎知識で理由付けができます。(悪い大人の言葉)

 

 

 

 

 

 

 


デザイン基礎

 

近接

グループ化し、それぞれ近くに配置すること。
人は近くにあるものを、囲ってなくても勝手にグループと認識します。
一般的には、関連性の高いものを近くに配置し、無意識下でグループ認識してもらうことを狙うことが多いです。

 

 

反復

同じグループ内や、同じ要素が続くとき、
パターンを作ってあげることを反復といいます。
要素をパターン化させることで、見る人は意識しなくても、内容を整理できます。

 

 

 

 

対比

重要度の高い情報と低い情報を整理し、

必要に応じて対比(コントラスト)を強くしたり、情報の優先順位を考えます。

 

ジャンプ率

コントラストをつけるときに、
大きさや太さなど、強弱をつけて変化させることをジャンプとよび、

その差をジャンプ率と呼びます。

 

 

本文に比べてタイトルが大きいとか、フォントが太いとか、

 

それだけでも印象派簡単に操作できます。

 


もちろん書体も関連してきますので、
後々紹介していきます。

 

アイキャッチ

周りに比べて大きいものや色が強いものに人間は目を惹かれます。

 

グレーの四角をたくさん並べ、ひとつだけ青い四角を配置したとき、
人の色の印象は大半が「青」になるそうです。

 

ただ、やりすぎには注意が必要

 

四角を三角にして、角度を変えて、色を変えて、影をつけてサイズを変えて、、、、

 

とするには、かなりの技術が必要。まずはひとつずつ、こなしていきましょう。

 

 

 

 

整列

レイアウトの基礎of基礎。しかしこれが難しい。


サイズも形もばらばらの要素をきれいに見せるには、一定の法則を作り、揃えてあげることが大切です。

 


整列ができていれば、回転をかけたり、角度の違うレイアウトでも、整って見えるようになります。

 

 

等間隔でそろえる、
基準線を決める
グリッドを使う

 

 

整列ひとつにしても、さまざまな方法があります。

 

 

 

ひとまずここまでが、

初心者が気をつけるべきデザインの基礎です。

 

 

ものづくりとデザイン

 

 

 

お久しぶりです。

なんやかんやでイラレが終わり、つたないながらランディングページを作成いたしました。。

 

ここを出るころには、ポートフォリオサイトを作りますので、

皆さんにも見てもらいたい。。。(照)

 

 

 

そしたらは、

 

 

DTPデザインの授業に入りましたので、

ここいらで簡単にデザインの話を。

 

 

 

デザインの考え方

 

物作りの原則

 

①なぜ作るか

②何を作るか

③何で作るか

 

この3つが原則になります。

 

なぜ作るかは、コンセプトということ。

それを作る理由について考えて、作ること。

 

何を作るか

 

ここで素人は引っかかりがちらしいんですが、

「この色が好き」「かっこいいと思ったから」

このような「なんとなく」の理由は通用しないらしい。

 

 

 

自由に作っていいが、

好きに作ってはいけない

 

 

 

感覚で仕事をするのは、芸術家だそうです。

つまり、

 

デザインはアートではない。(名言)(ドヤ顔)(鼻息)

 

 

つまり、なんか作るときは、

 

自由に作っていいが、

好きに作ってはいけない

 

 

これを念頭においてものづくりをすると、行き詰ることも少なくなりそう。

 

 

 

 

デザインの基本

 

3つの基本の鍵。

 

 

 

 

比較

 

整列

 

約束

 

 

簡単そうでめっちゃ難しいんですね~これが。

 

 

まず素人がデザインで無意識に一番初めに気にしているのが、

整列らしい。

見る側の話ね。見る人は、整列が気に入らないとそこから先には進まないらしい。

 

正直文字とかって、入力したらそれで勝手に整列しているように見えますが、

文字によっては、人の目からみて間隔が違う感じがすることもあります。

 

この場合、見た感じで調整しちゃっていいらしいよ!wwww

 

 

比較はコントラストとか対比とかアクセントとか。

大事な部分は赤で書くイメージあるけど、

全部赤だったらどこが大事か分からない。ってことです。

 

 

約束は、まず全体のデザインのルールをきめて、

自分がそれに則ってデザインを組んでいくことで、

 

 

見る人にデザインのルールを感じさせることが一流の仕事。

 

 

気になるデザインのパンフレットやチラシは、取っておくことをお勧めします。

 

一年後くらいにそのコレクション見たらたぶん面白いと思う。

 

パンフレットの選び方から、自分の成長が伺えます。

 

 

秩序を整える

 

さっきの約束に少しかぶりますが、

 

 

デザインの秩序を整えることが大切。

 

つまり、自分で約束を守ろうってことです。

 

 

この約束が守られているデザインには、

 

お客さんは安心し、信頼します。

 

この考えから、黄金比白銀比が大切にされています。

 

 

 

目立たせるべきものがきちんと目立っているか、

引たっているか、

 

そんなことも考えてください。

 

一番大切にしたいものは、自分で一番大切にするしかありません。、

 

 

 

では、次回以降は技術的なお話に入ります。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Illustrator⑤-選択、複数選択

 

 

めっちゃおなかすいた~~助けて

 

 SiMかっけ~~~~

 

 

 

 

 

保存の仕方

 

ファイルメニュー>保存

 

拡張子は.aiです。

 

ファイル名を入力後保存を押すと、以下のようなダイアログが出てきます。

 

f:id:mocha0426:20170901192423p:plain

 

 

バージョンのみ気をつければいいらしい。

 

イラレの古いバージョンを持ってる人に渡すときは、ダウングレードして保存しましょう。

 

基本的にPsと同じで、Aiで作成したファイルはAiでしか開きません。

 

なので、<img>タグで表示しようとしても無理です。

Psでも一緒。

 

 

今更ですが

 

Psはフォトショ、

Aiはイラレです。

 

SVG形式にしたらブラウザにも貼れるらしいですので、

いつか習います(笑)

 

 

 

オブジェクトの選択ツール

 

 

f:id:mocha0426:20170901193018p:plain

 

青い矢印が選択ツール

オレンジの矢印がダイレクト選択ツールです

 

選択ツールのほうは、全部を選択するという意味なので、

図形の一部のみの選択はできません。

 

ダイレクト選択ツールだと、四角形の角の一部のみ選択とか、

 ほんとダイレクトに選択できます。

 

 

 

選択する際、基本的には対象をクリックすることで実現しますが、

塗りのない図形は線の部分のみしか反応しません。

 

でもできれば、

 

外からドラッグして図形の一部分を範囲に入れる

 

このやり方が一番いいです。ダイレクトはまた別ですが、、

 

 

理由として、選択の際に画像が移動してしまうことを避けるためです。

また、バウンディングボックスは消しておきましょう。

 

ctrl+shift+B→バウンディングボックスの表示/非表示

 

意図しない図形の回転や、変形につながります。

 

 

 

複数オブジェクトを選択する

 

複数を選択したいとき、

 

ドラッグで囲むのが一番早いですが、

 

 

shift+ドラッグで選択を追加できます。

 

Psとほとんど同じです。

 

 

 

 

 

選択ショートカット

 

Shift+クリック→連続選択/連続選択解除

 

Shift+ドラッグ→角度制限移動

 

alt+ドラッグ→コピー移動

 

shift+alt+ドラッグ→角度制限付コピー移動

 

 

 

shift絡みの選択については、先にクリックしてからalt+shiftを押さないとうまくいかないようになってます、、、、、

 

Illustrator④-ツール描画と変形

 

 

 

今日は華金なので~~~飲みに~~~行く~~~↑

でもめっちゃおなかすいた

 

 

 

 

 

数値指定で描画する

 

 

ツールを選択して、

 

ドラッグではなくクリックします

 

 

f:id:mocha0426:20170901183310p:plain

 

 

 

ここに寸法を入力したら完了

 

 

 500×350で描画しました

 

f:id:mocha0426:20170901183440p:plain

 

 

クリックしたところを左上として、左上を起点として広がります

 

 

中央起点にしたいときは、altを押しながらクリック

 

 

 

多角形ツールの角の増減

 

 多角形ツールは、ドラッグ中に矢印キーの上下で角の増減ができます。

 

デフォルトは六角形です。

 

 

f:id:mocha0426:20170901190438p:plain

 

 

ちなみにクリックのほうが簡単かも知れない

 

f:id:mocha0426:20170901190501p:plain

 

 

 

これもライブシェイプ使えますので、使ってみて

 

 

 

スターツールで変形する

 

 

スターは長方形ツールのなかにあります

 

 

f:id:mocha0426:20170901190934p:plain

 

 

左が普通の星ですが、

 

右側は変形しています

 

 

ドラッグ中にctrlを押すと、変形できます

 

ただ変形後はその形がデフォになってしまうので、

戻すときもctrlで戻しましょう

 

 

f:id:mocha0426:20170901191208p:plain

 

 

これも多角形同様、

 

ドラッグと上下キーでなんか角?見たいなのが増えます

 

ウニになります

 

 

 

円弧ツール

 

名前のとおり円弧を書くツール

 

 

 

f:id:mocha0426:20170901191714p:plain

 

 

 こんな風につなげたつもりでも、オープンパスなので本当はつながってないです

 

そういう風に見えるだけです

 

 

 

 

スパイラルツール

 

 

ドラッグと上下キーで渦の数かわります

 

f:id:mocha0426:20170901191858p:plain

 

 

 

長方形グリッドツール、同心円ツール

 

 

まとめて描いてしもた

 

 

上がグリッド、下が同心円

 

 

f:id:mocha0426:20170901192116p:plain

 

 

上下キーで画像のように線が変化します

Illustrator③-ライブシェイプって何だ?

 

 

 

ここからはたぶん描画祭りです。

 

 

 

 

他ツールを用いて描画する

 

 

f:id:mocha0426:20170901180443p:plain

 

長方形ツールの仲間のところにいますよ

この画像の右端、小さい三角があります

そこをクリックするとツールパネルも独立するよ

 

 

f:id:mocha0426:20170901182617p:plain

 

 

 

輪郭や塗りの色はここで選べます

 

f:id:mocha0426:20170901180517p:plain

↓クリックするとこうなります

f:id:mocha0426:20170901180507p:plain

 

 

 

赤丸のってところクリックすると

 

f:id:mocha0426:20170901180556p:plain

 

詳細設定が可能

 

 

フレアツールを興味本位で使うと若干ビビりました

 

 

f:id:mocha0426:20170901180807p:plain

 

 

 

 

 

 

 

ライブシェイプ

 

CC2014からの新機能

 

 

コーナーウィジェットで、

描画後の長方形の角の形を変えられるツール

 

 

まずは描画する

 

 

f:id:mocha0426:20170901181226p:plain

 

これは角丸で描いてます

 

 

f:id:mocha0426:20170901181355p:plain

 

四隅の丸をダイレクト選択ツールでドラッグすると簡単に丸みがつきます

 

 

利点は、角をつぶさないように変形できること

 

 

 

f:id:mocha0426:20170901181718p:plain

 

 

altクリックで四隅の丸を押せば、こんな形にもなります。

 

何でかわからんけどいつの間にかすごい形になっとった

 

f:id:mocha0426:20170901182129p:plain

 

 

あ~なんかかわいい~~

 

 

ダイレクト選択ツールは、あくまでも選択ツールなので、

 

変形したい角のところを選択し、変形も可能です。