みなさん、こんにちは。
あなたの探していたアイデアが見つかる
アイデア図鑑「Aiz」です！
ちょっと聞きたいんですが、
みなさんは、絵心ってあるほうですか？
そういうデザイナーの私はどうかって？
子供みたいな絵が限界です笑
体勢とか関節はどう描いたらいいのか
頭がこんがらがっちゃいます。。。
一方、
Twitterで流れてくるアニメキャラだったり
オリジナルキャラを生み出して描かれている
神絵師の方には、尊敬しかないです！
イラストが描けない私たちは、
指をくわえて憧れるだけなのか。
実は、Canvaを使えば
そんな私たちでもイラスト作れちゃうんです！
基本的なことのようで、奥が深い
色のある性質を利用して作っていきます。
そのヒントは「カメレオン」。
Canvaでデザインする場合には、
知っておくと、かなり汎用性が高く
知らないままだと、表現の幅が激減する
超重要テクニックになっています。
では、聞きます。
あなたは、読み進めますか？
それとも、ブラウザバック？
「そのテクニック、めっちゃ知りたい！」
ワクワクしている、あなたにこそ
私は教えていきたい。
では、今回も一緒にみていきましょう！
そもそも「カメレオン」デザインって何？
カメレオンといったら、
どんな特徴を思い浮かべるでしょうか？
やはり一番思い浮かぶのは、
「周りの環境にあわせて色を変える」
コレじゃないでしょうか。
実は、今回のテーマは
この「周りの色に変える」ことがポイント！
ではここから、
その仕組みを説明していきますね。
同じ色は、重ねると合体する。
先に結論から言いますと、
「同じ色を重ねると、合体する」
コレが超重要なポイントです！
厳密には、
図形の境界線が見えなくなって
合体したように見える、感じですね。
この性質を利用することで、
例えば、、、
同じ色の三角形と四角形を組み合わせれば
「矢印」に進化できちゃいますよね！
背景色と同じだと、逆に切り抜かれる。
この性質の凄いポイントは、
合体するだけじゃ収まらない点。
背景色と同じ色にすれば、
逆に、
図形が切り抜かれたように見えちゃいます！
このように、
周りの色にあわせて重ねることで
合体したり、切り抜かれたように見せる。
しかも簡単なのに、どのシーンでも使えちゃうんです。
これが、
「カメレオンデザイン」の真髄です！
あっ！ カメレオンデザインは、
私が勝手に呼んでる造語なので
お気になさらずに〜笑。
Canvaの操作確認
ここで、実践に入る前に、
Canvaのキホン操作を
一緒に確認していきましょう！
操作のキホン「移動・回転」
お分かりの方も多いと思いますが、
「移動」と「回転」についてのおさらいです。
移動は、
モノを選択して、ドラックしながら
マウスを動かせば、モノを動かせます。
回転は、
選択した際に、下に回転アイコンが出るので
それをドラックして動かせば回転できます。
「切り抜き」のやり方
カメレオンデザインで重要なのは
図形の「切り抜き」操作です。
まず、覚えて欲しい切り抜き1つ目は、
Canvaの「切り抜き」ツール。
図形やイラストをダブルクリック！
すると、
「切り抜きモード」に切り替わります。
角の白い丸を持って、
好きな範囲まで動かすことで
トリミングすることができます。
2つ目に覚えてもらいたい切り抜きは、
「図形を重ねてトリミングする」方法です。
背景色と同じ色の図形を
イラストの上に重ねると…
図形が重なった部分だけ
背景と同化して見えなくなります。
この図形を使った切り抜きテクは、
映したくない所を、部分的に修正できるので
かなり重宝しますから、覚えて帰ってくださいね！
オススメの素材たち
今回のカメレオンデザインに欠かせない
私が愛用する図形があるので紹介しますね。
基本的に、
素材の「線と図形」のグループにあります。
やはり、どの場面でも役立つ
「線」「円」「三角形」「四角形」
この4つは素材として外せません。
ですが、個人的に一番使っているのは
実は、他にあります。
それが、「角丸四角形」です。
角丸を使用する利点として、
ただの四角形よりも角がなく、
柔らかい雰囲気が感じられるからです。
上の資料では、コップを作ってみましたが
角丸のほうが親しみを感じますよね。
ぜひ、みなさんも愛用してください！
【初級編】2Dイラストを作ってみよう！
さて、今回もやってきました
デザイン例紹介コーナー。
今回のデザインは、全てCanvaで制作。
イラストが作られる過程を表現するために
イラストのパーツを分けた状態から、
合体させた完成までを矢印でつないでみました。
さて、お待たせしました！
ここから実践編、一緒に作っていきましょう！
バックとコップを作ってみる。
では、まずは簡単にできる
「バッグ」から作っていきましょう。
「線と図形」の中に、かまぼこ型の図形があるので
1つを「#164773」で紺色に、
もう1つを「#ffffff」で白色に変更。
白いかまぼこを少し小さくして、
青いかまぼこと重ねると、
指を通す穴になります。
最後に、大きさを調整して、
横長にした角丸四角形を重ねれば、完成です！
さて、みなさんここで気づきましたか？
このバッグ、横にすれば、
「コップ」に早変わりすることに！
コップの作り方は、
バッグを横にしてから、
取手を真ん中よりも、少し上に上げるだけ。
テーブルを作ってみる。
それでは、次は
「テーブル」を作ってみましょうか。
まず、角丸四角形で天板を作ります。
茶色「#946B52」で、細長い板状に変形。
黒色「#333333」は、骨組み部分になるので
茶色い天板よりも、さらに細くします。
先ほど作った黒棒をコピーして、
縦に回転させて、足を2本作ります。
最後に、4つのパーツを配置して完成です！
ソファを作ってみる。
この調子で、次は
「ソファ」作ってみましょうね。
まず、背もたれを作っていきますが、
ふかふかな印象を持たせたいので、
より丸みがある角丸四角形を使っていきます。
色は、優しい茶色「#BF7C53」にしました。
お次は、座面にとりかかります。
背もたれと同じ色で、少し厚めの座面を意識。
黒色「#333333」で座面下の枠組みも作ります。
黒色「#333333」の四角形で両サイドの肘置きを、
同じ黒色で、肘置きのクッションも制作。
最後に、
すべてのパーツを組み合わせて、
お好みで背面のクッションによくある
「・」を入れれば、完成です！
【応用編】2Dイラストを作ってみよう！
さて、初級編を乗り越えたみなさん。
ここからついに、
「応用編」へ突入です！
iMacを作ってみる。
それでは、今回のデザイン例にもチラ見した
「iMac」を作っていきます。
こんなの作れるの？、と思うかもですが、
意外と簡単に作れちゃいますよ！
まずは、画面から取りかかりましょう。
ここでのポイントは、iMacは4つの角が丸いこと。
グレーの角丸長方形をつくる際には、
上部は角が出て、下部は丸みを出したいので、
普通の四角形を、
同じグレー色にして、上から重ねて、
上部の丸みが見えないようにしてあげましょう。
次は、台座にうつります。
台形の素材を、少し上に引きのばしてスリムに。
台座の厚みまで足してあげると、実物に近づきます！
最後に、
画面と台座を組み合わせて
お好みでロゴを入れれば、完成です！
ソフトクリームを作ってみる。
少し機転をきかせれば、
「ソフトクリーム」だって作れます。
ソフトクリームで厄介なのが、
アイスの溶けかけた部分の表現。
それを作るために、
うねうねした流体シェイプを使います！
Canvaの素材検索で「blob」と入れて検索。
「blob」とは？ …（どろっとした液体の）しずく、かたまり、しみ。
流体シェイプを探すときは、
「blob」と入れると、素材がたくさん出てきますので
ぜひ使ってみてください！
今回は、ピンクのうねうね図形を使っていきます。
2つ用意して、それぞれ回転させて
合体させれば、アイスの溶けたような
見た目にすることができます。
うねうね図形と同じ色で、
ピンク色の円を作って
上に被せると、アイスの部分が完成！
最後に、
三角形をすぼめて、コーンを作り
お好みで円をすぼめて作った
チョコチップを振りかければ、完成です！
ガラス窓を作ってみる。
最後は、
「ガラス窓」コレに挑戦しましょう！
透明にするので、映り込みもできちゃいますよ。
まずは、窓枠作りから。
四角形を細く伸ばして、棒状にします。
縦棒を3本、横棒を2本つくって、
窓の形に組み合わせてください。
ガラスの部分は、
四角形を「#DDEDFD」の水色にして、
透明度を「39」にすれば準備OKです！
先ほどつくった窓枠に、
ガラスを入れ込めば、窓の完成です！
さらにプラスαで、
カーテンを入れ込んでみたり、
部屋の中でくつろぐ人を
入れると雰囲気が一気に出てきますよ。
お疲れ様でした！
今回は、過去イチのボリュームの多さでお送りした
「作ってみよう！」企画でしたが、、、
ちゃんと伝わっていましたでしょうか？
あまりの資料の多さに、
普段の5割マシで時間がかかりましたが、
楽しんでいただけたなら頑張った甲斐があります。
今回、ソファやiMacなどを作りましたが、
単体で使うのではなく、
他の素材と組み合わせると、
さらに表現の幅が広がります！
ソファだったら、人を座らせてみたり、
机にiMacのせて、仕事場をつくってみたり。
もちろん、２Dイラストなので、
WEBサイト用のアイコンとしても
余裕で使えちゃいます！
絵心なかったら、無料素材に頼るしかない？
そんなことありません！
絵心がないからこそ、試行錯誤して
可能性を広げていくんです。
この記事で、あなたの可能性の光が見えたはず。
あとは、それを使いまくって広げていくだけ。
これからデザインの実力がどんどん上がる自分を
ぜひ、心ゆくまで楽しんでいってくださいね！
デザインの無料アドバイス、やってます。
ここまで詳しく解説してきましたが、
実践するのはあなた自身。
時には、つまずいたり、
分からなくなる事もありますよね。
でも、デザイン詳しい人なんて
周りにいないし、どうしたら…
そんなあなたに吉報です！
現在、自分は「公式LINE」を運営し、
このたび、LINEの友達登録者限定で、
デザインの無料相談を開始しました！
現役デザイナーに直接相談できるチャンス！
ぜひ、活用してみてくださいね↓
コメント