Internship Blog June 2017

インターンシップ生ブログ

未分類

ハンコ風にロゴをデザインする方法

投稿日:2017年6月15日 更新日:

こんにちは、MIYAです。
実習9日目。本日もWebサイトのパーツ作成を行っております。
その中で覚えたテクニックがこちら。

ハンコ風にロゴをデザインしてみました。・・・ハンコのように見えますかね!?これはIllustratorで作成しました。今回はこの作成方法についてご紹介します。

Illustratorでハンコ風にデザインする方法

1.円と文字でベースを作成

まずは作りたい文字を円の中におさめます。円と文字の隙間は少なめの方がハンコらしく見えます。

2.文字の輪郭をハンコらしくする

まず、文字をShift+Ctrl+Oでアウトライン化します。

その後、メニューバー[効果]→[パスの変形]→[ラフ]で輪郭の線を少しガタガタにします。今回はオプション値:1%、詳細:30/lnchと入力しました。

んー、あまり変化がないかもしれません…。
イラストをハンコ風に加工する際はこの操作によって手彫り感が出るので是非やってみてください。

3.円の輪郭をハンコらしくする

実際にハンコを押した場合、円の太さが均一にならず、なかなかキレイになりません。(私が不器用なだけですが。)

とにかくこの風合いを出すために、円の線にブラシの効果を追加しました。今回は「アート_木炭・鉛筆」の中の「木炭(滑らか)」のブラシを選択しました。

4.かすれた風合いを出す

まず、このような素材を作成しました。地道にペンツールで描き、アウトライン化&グループ化をしております。(本当はもっと効率の良いやり方があるかもしれません。)

これらを複製しながら文字や円に重ねていきます。この時、素材のレイヤーは新規レイヤーで作成し、ハンコのベース(文字+円)とは分けておくと後々の作業が楽です。

5.素材とハンコベースを合体させる

1~3で作成したハンコのベースと、4で作成したかすれ素材を合体させます。

まずは、4の素材達を一括選択し、メニューバー[オブジェクト]→[複合パス]→[作成]で一体化させます。同様にハンコベースも複合パスとして一体化させます。

次に、この2つを選択し、パスファインダーで「前面オブジェクトで型抜き」をします。これによって、ハンコ風の1つの素材となります。
最後に少し傾きをつけると、よりハンコらしさが出ます。

Photoshopでもっとハンコらしい色むら加工を

Illustratorで作成したオブジェクトをコピーし、Photoshopにスマートオブジェクトとしてペーストします。

貼り付けたオブジェクトの上に新規レイヤーを作成し、プラシツールでハンコの色よりやや薄い色をほんのり被せます。ブラシで描いたレイヤーでクリッピングマスクの作成を行います。

これによって、ハンコらしい色むらを表現することができます。

作成方法は様々

今回ご紹介した方法以外にも、やり方は色々あるかと思います。様々な方法を学んで作るものに最適な方法を選べるようになりたいです。

-未分類

執筆者:


comment

関連記事

著作権フリーのサイトを探す

こんにちは、北野です。 実習3日目です。 Webの実習をしていると、著作権フリーのサイトがとてもありがたいです。 同じ文章でも、写真やイラストは印象をがらりと変えてしまいます。 ただネット上に流れてい …

Photoshopでキラキラ効果を作る方法

こんにちは。MIYAです。 実習8日目。本日は、Webサイトで使う、見出しやグローバルナビゲーション、リンクボタン等のパーツデザインの作成をしました。大物から小物まで様々ですが、その中で作成した1つが …

人物写真をデッサン風に加工する方法

こんにちは。MIYAです。 実習15日目。今週もWebサイトのパーツをゴリゴリ作成しております。 今回は、Photoshopを使って人物写真をデッサン風にアレンジする方法をご紹介します。 ちなみに、も …

4か月の職業訓練を振り返って

こんにちは。MIYAです。 本日で企業実習が最後となりました。この1ヶ月、本当にあっという間に過ぎてしまいました。それだけ沢山の事を勉強させていただきました。 本日は、これまでの3ヶ月間の職業訓練と1 …

ドットインストールとは

こんにちは、北野です。 実習2目です。 本日は、ドットインストールというサイトで学習しました。 ドットインストールとは、「3分動画でマスターする初心者向けのプログラミング学習サイト」と書いてあります。 …