CSS3でクールなローディングを制作・掲載完了しました!

こんばんは!もう春だ梅雨だと季節なんかすっとんで、一気に夏が来たような気がしている今日この頃ですが、みなさんいかがお過ごしですか?山本は少々死にそうになりながらアスファルトの上を歩いている日々です。

さて、暑さに死にそうになっていないで、今回は久しぶりにCSS3テクニックを更新させていただきました。

題材は「ローディングアニメーション」です。

WEBサイトをよくご利用になられる方はご存じではないでしょうか?しばらく画面にサイトが表示されるまでに待っていると、グーッと画面のど真ん中で伸びてくる、あの棒がローディングアニメーションです。

動くものを制作する、という言葉に難しいのではないだろうか?とアレルギーを持たれる方もいらっしゃるかもしれませんが、CSS3を用いれば、それほど難しいものではありません。

特にサイト制作者にはローディングインジケーターは必須となってきます。そこでコピペですぐに使えるように、様々なインジケーターを制作し、掲載しました。

お気軽にご利用ください。

やっぱりアニメーションって派手で私は大好きです。一昔前とは違って、本当にCSS3はイメージがなくても何でも叶えてくれる、魔法の言語になりつつあります。

どうぞ、BLACK SHIVACSS3テクニックを見ながら、自分のお好みのインジケータを制作して遊んでみてください。面倒な方は是非、私が作ったインジケータをコピペしてご利用ください!

by 山本

▼▼BLACK SHIVAはこちら▼▼

https://black-shiva.com/

Illustratorで上手く絵を描くコツ!

こんばんは!山本です!

最近お問合せにとてもお若いお客様からご質問を頂きました。ご自身独学でイラストや絵のお勉強をされているご来訪者様のご質問にお答えさせていただきたいと思います。

こんな下手な私の素材でいいのか?と迷いましたが、せめて私自身が書いていて、気が付いたコツを簡単に説明させていただきたいと思います。

(お写真の作者様)こちらのお写真をお借りしたかった主をお伝えしたかったのですが、拡散された写真素材なのか、掲載画像からリンク切れしており、ご連絡できませんでした。練習用にお借りしております。)

今回は上記のお写真をお借りして、ペンギンをモデルに練習したいと思います。

まずは練習に綺麗に、実物を見て、同じようにアウトラインを引きます。外枠がしっかりとしていなければ、実物を美しく反映させることはできません。初心者の方は必ず画像をレイヤーロックし、その上に新規レイヤーを制作して、トレースしてください。上手に線(ベジェ線)を引くためには、トレース練習も必要ですから、真似て書くことから始めてみましょう。

山本も写真に沿ってトレースを引いてみました。下記のようになります。

ここから画像を外すと…下記のようになります。

後は線とロックされた画像に沿って、新規レイヤーをそれぞれ作り、色塗りを施していきます。写真通りに色塗りを施すと、下記のようになります。

これは練習用なので、くちばしの黄色や光の陰影は入れません。黒と白色、足の色を入れるだけで、大体のリアルなペンギンの形が出来上がりました。ここからが大切です。

コツ1、自分は忠実なリアルイメージを描きたいのか、キャラクター的なイメージを描きたいのかを考える。

リアルを追求すれば、トレースでも細かく描き出すと、かなり個性が出て美しいペンギンが仕上がりますが、今回の山本のテーマは、、リアルとキャラクターを3:7で混ぜ合わせた、メタボリック要素のある個性の強いペンギンをテーマとしています。

リアルとキャラクター混ぜ混ぜにして制作した山本のペンギンが下になります。なお、このペンギンはトレースはしておらず、画像をみて自分なりに描いています。

お気づきになったとは思いますが、リアルにトレースしたものとは大きく形が違っていることがわかると思います。では、どこがキャラクター的になったのか?解説していきます。わかり易いように二つの画像を並べてみます。

ペンギンは動物ですので、もちろん忠実にトレースをすれば、体の脂肪や筋肉はぼこぼこと凹凸を生みます。しかし、私が描きたいペンギンは7の割合でキャラクター化させたいわけです。まずはリアルから切り離すために、ボコボコとした体や顔のラインを美しい一本曲線で描いています。次に、リアルでは地面についているお腹は、重力によってお腹がぐにゃりと凹むはずですが、お腹部分も重力には反発し、胴体は右横に転がした綺麗な卵形を作っています。

次は足を見てみましょう。

リアルトレースは大きな体を支えられる、恐竜のような大きな足がトレースされています。改定後の足を見てみると、漫画チックな小さく、均等な大きさの足の指が並んでいることがわかりますね。

コツ2、まずは書きたい素材をトレースしてみて、どうしたら自分のオリジナリティーを出せるのかを考えてみる。

絵の練習に練習を重ねて、その方特有のオリジナリティーのある作品は多く見受けられます。リアルな絵をとことん追求される方もいれば、完全なイラストレータとしてのキャラクターを描かれる人もいます。山本はどちらかと言えば、リアルが好きでした、が、相当画力がないと書ききれない壁にぶち当たり、最後に行きついた場所が、リアル3:キャラクター7の世界です。

人も動物も、生きている限り、ベジェ線には必ず出るであろう凹凸線を、少し不自然な感じに美しくまっすぐに曲線を引くことで、今までとは少し感じが違う、不思議なキャラクターが生まれました。少し漫画チックな指先であったり、髪の乱れ方、フレアツールを使った美しい瞳であったり、非現実を取り入れることで、キャラクター性を高めるようにしています。

非現実性は私たちの人生にも必要なように、一つの制作に欠かせないものです。非現実的な不思議なキャラクター、一度試していただいてはいかがでしょうか?

素敵なイラストレータ、又は絵描きさんがこの将来に輝かれることを願って…

by山本

▼▼BLACK SHIVAはこちら▼▼

https://black-shiva.com/

 

 

 

 

 

ペンギンイラスト新規追加しました!

しばらくご無沙汰しておりました。ジケジケとした梅雨が始まりましたね。皆様、お変わりございませんでしょうか?

さて、今回はそんな梅雨もブッ飛ばす、ピカピカの夏素材を制作、新規追加させていただきました。

今回のテーマはリアルだけど、憎めない可愛いメタボペンギンです。ペンギンの可愛らしさと言えば、あのよちよちした歩き方。WEBデザイン時やイラスト制作時などに私はよく、プラネットアースを何となくかけながら作業をしていることがあるのですが、その時たまたま出ていたのは、極寒の地で命がけで命を繋いでいくペンギンたちの姿が映し出されていました。

「私、人間でよかった…」と思えるほど過酷なペンギンたちの命がけの極寒生活なのですが、やはりその深刻さを失わせてくれるのが愛らしい姿です。そこで気付いたのは、人間と同じく、ペンギンもスレンダーな奴と、私と同じようなメタボペンギンがいるという現実です。

しかし、ペンギン界のメタボさんは他のペンギンたちより沢山の魚をお腹に蓄えているので、いうなれば”勝ち組!”といったところでしょうか?そんな可愛く憎めないペンギン達を、自分なりにオリジナルスタイルを作り、制作をしました。

今回一番気遣ったところがあると言えば、その柔らかなペンギンの曲線です。スレンダーでは可愛らしさが欠けてしまう、ふっくらしたお腹から背中部分、首元から背中部分の柔らかな曲線を出すのには少々苦労しました。

BLACK SHIVAのペンギンたちのスタイルパターンは5パターンをご用意!背景は透明にて制作しておりますので、好きな背景でイメージをご利用ください。

なんだか日々暑くてジメジメ、冷たーい水の中に潜り込めるペンギンたちが羨ましいです。さて、次はどんな素材を制作しようか?

こんな日は暖かいコーヒーでも飲みながら考えることにします。

by 山本

 

▼▼BLACK SHIVAはこちら↓↓▼▼

https://black-shiva.com/