Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/attlabo-ssl/web/buchiko-web.com/wp-content/plugins/all-in-one-seo-pack/modules/aioseop_opengraph.php on line 844
ベジェ曲線を学べるサイト「Shape Type」 | ぶちろぐ

アラサー主婦のWEBデザイン奮闘記

Webデザイン Web制作 制作お役立ち

ベジェ曲線を学べるサイト「Shape Type」

投稿日:

前回ご紹介したカーニングを練習できるサイト「Kern Type」。このサイトを作ったMethod of Actionから、ベジェ曲線を学べるサイト「Shape Type」も登場しているんです。

以前よりはベジェを使えるようにはなってきたものの、まだまだ扱いに慣れていないところがあるので、こういったゲーム感覚で学べるサイトの存在はとてもありがたいです。

では、早速ですが簡単にその使い方についてご紹介していきますね。

 

「Shape Type」の使い方

まず最初はチュートリアルが表示されるので、ピンクの点を正しい位置に移動させて終了させます。

 

その後から、お題が10問出題されます。

お題のフォントの崩れた部分を、ピンクの丸い点をドラッグして正しい形に調整していきます。

後半になるにつれてお題の難易度もアップしますよ〜。

 

これでOKかな〜と思ったところで、「Compare」をクリック!すると%で採点されます。

…47点でした。やっぱりまだまだ練習が必要です。。

「Kern Type」と同様、「Both letters」にチェックを入れると正解と比較して見ることができます!

  

 

こんな流れで10問すべてを終了すると最終スコアが表示されるのですが、そのスコアをTwitterで共有することもできるようです。

ちなみにiPhoneやiPadなどのタッチ操作にも対応しているそうなので、ちょっとした空き時間などにも手軽に楽しむことができると思います。

デザイナーの方は是非一度、腕試しに挑戦されてみてはいかがでしょうか…?

 

-Webデザイン, Web制作, 制作お役立ち

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

柔らかな形状のまる模様を作成できる「Blobmaker」

Pinterestやギャラリーサイトなどを見ていると、スライム?のような、柔らかい形状の模様を取り入れたサイトを多く見かけますよね。 そんなサイトを真似しようと、同じような素材を探したり、自分で作って …

グラデーションを作る時に役立つサイト5選

ギャラリーサイトを見ていると、グラデーションを使ったデザインをよく見かけますよね。 中でも、色の変化の仕方が綺麗なサイトだとつい見とれてしまいます。 私も綺麗なグラデーションを取り入れたデザインを作り …

Webデザイン学習法その3. 職業訓練校で勉強する

私は初め、Webデザインを学ぶのに職業訓練校に通おうかな、と考えていました。 結局、スクールに通うことに決めたのですが、 職業訓練について調べる中でメリット・デメリットがあることがよく分かりました。 …

Google Chromeでスマホ表示の確認をする方法

スマホでの表示を確認したい時、わざわざスマホを出して検索して…とやっていると結構面倒ですよね。 そんな時は、Google Chromeを使うとパソコンで簡単にスマホの表示を確認することができるんです。 …

面倒なグリッド計算はGridpxにお任せ!

みなさんはデザインのグリッドを決めるとき、計算はどうしていますか? 私はいちいち電卓で計算したりしていましたが、もっと瞬時に計算する方法はないかな?と思い、調べたら便利なサイトを発見しました! Gri …