マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEBデザイン WEB制作

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

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

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

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

 

 

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

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

 

 

 

 

【2.合体!】

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

 

 

 

 

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

4 5 6 7

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

 

 

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

-WEBデザイン, WEB制作

執筆者:


comment

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

関連記事

WYSIWYGエディタCKEditor + KCFinderで画像の保存先を動的に指定する方法。

WYSIWYGエディタCKEditor + KCFinderで画像の保存先を動的に指定する方法。

ブログの記事の編集などにWYSIWYGエディタCKEditor + KCFinderを導入しているサイトでログインするユーザごとに画像のアップロード先を切り替えたい状況がございます。 その方法を紹介し …

オンライン上でPDFファイルをWordファイルに変換する

オンライン上でPDFファイルをWordファイルに変換する

WEBディレクターとして働いていますと、PSDやPNGなどのデザインデータ以外にもパワーポイントやエクセル、PDFなどのファイルなどクライアント様からさまざまな素材をいただいたり、こちらが資料を作成し …

【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その1~

【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その1~

皆様こんばんは。 今春に新卒で入社しました、ひよっこWEB制作者のMです。 お腹と背中に貼るカイロを装備し、なんとか寒さをしのいでおります。 先日誕生日を迎え、ついにハタチと言えなくなってしまいました …

jQueryを使ってみよう【開閉式メニューを作る編】

html・CSSでのマークアップは何となく分かるけどjQueryはちょっと分からないという方、 今からjQueryを使ってみようと思っている方必見。 jQueryの便利な使い方をご紹介します。 jQu …

参考になるスマホサイト

皆さん・・・ こんばんは・・・・ webデザインを新人デザイナーKです・・・ 何故私がこんなに落ち込んでいるかというと・・・最近、5kgも太っ”#$#”$!!! ことではなく! 最近、スマホのデザイン …