WEBデザイン WEB制作

【Illustrator】基本図形で出来ちゃう!ハートマークの作り方

投稿日:2014年9月29日 更新日:

こんばんは、新人Aです。

今日は、Illustratorでハートを作る方法についてお話します!
まぁ、素材サイトさんからデータをお借りしちゃえばそれで済む話なのですが…
理想の形が見当たらない!というときには探すよりも自分で作ってしまったほうが早い気もします^^

 

 

【1.円を2つ、正方形を1つ組み合わせる】


円と正方形、この基本図形2つからでも簡単に出来ちゃいます。
円の中心を、正方形の辺に合わせて配置します。

 

 

 

 

【2.合体!】


パスファインダで合体させます。(こちらはCS2の画面ですので、形状エリアに追加→拡張ですね)

 

 

 

 

これで一番簡単なハートの形ができました!
すぐ出来ちゃうのでお手軽!
他にも

このように、楕円を2つ(回転ツールで30度の角度をつけて反転しています)配置して
余分なアンカーポイントを削除、最後に少しだけ形を微調整すれば…
こちらも丸みのあるハートができあがりました^^

 

 


左右非対称にしたり、八角形を使って左下のハートみたいに折り紙っぽくしてみるのも可愛いと思います。
ハートといっても様々ですね!
WEBサイト制作などに役立ててみてください!

 

弊社では技術力を活かした美しいWEBサイトのデザインをご提案します。
様々な目的に応じたプランを用意しておりますので、ご興味のある方はご覧ください。

WEBデザイン

WEBサイト制作実績3,000サイト以上!
新規作成からリニューアルまで、
多様なご要望にお応えした弊社制作事例から検討したい方はこちら

制作実績を見る

-WEBデザイン, WEB制作

関連記事

【多言語サイトデザインの参考になる!】世界のWEBデザインギャラリーサイト

【多言語サイトデザインの参考になる!】世界のWEBデザインギャラリーサイト

本日はクリスマス、また一年の終わりが近ついてきましたが、 皆さんはいかがお過ごしでしょうか? サイトのデザイン制作に入る前に、よくWEBデザインギャラリーサイトで同じ業種やジャンルのサイトを参考してか …

リンク切れを自動的にチェックしてくれるワードプレスのプラグイン

リンク切れを自動的にチェックしてくれるワードプレスのプラグイン

リンクチェックしていますか? マニュアルでチェックするとたいへんですよね。 WordPressには自動で定期的にリンク切れをチェックしてくれる 便利なプラグインがございます。 その名もズバリ、「Bro …

Bamboo PadであなたのPCもタッチジェスチャーで意のままに!

Bamboo PadであなたのPCもタッチジェスチャーで意のままに!

PC使用時に画面上の画像などを拡大したい時、 思わず画面に親指と人差し指を添えて必死にズームしようとしたり、 スクロールしたい時に画面に指をスイッと滑らせたりして、 あ、これタッチできないんだ…とザン …

【コーダーには常識!?】あなたのコーディングをチェック!

【コーダーには常識!?】あなたのコーディングをチェック!

コーディングをしたけど、エラーや間違いがないか不安に感じたりしませんか? リンク切れやソースの間違いなどを一つ一つ調べていくのは大変です。 そこで、コーディングエラー、リンク切れなどを調べてくれるお勧 …

デザインにおいて余白は重要!おしゃれに見える理由や効果などを例をもとにしてわかりやすく解説!

デザインにおいて余白は重要!おしゃれに見える理由や効果などを例をもとにしてわかりやすく解説!

デザイン設計においては、余白が重要です。適度に余白が配置されることで、コンテンツが見やすくなります。余白がなくコンテンツが敷き詰まった状態は、ユーザビリティが低いため改善が必要でしょう。 本記事では、 …