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

関連記事

ドットインストールとは

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

Photoshopで水滴

こんにちは、北野です。 実習11日目です。 暑い季節になってきました。 梅雨入りしてから雨がふっていません。 今日は、Photoshopで水滴を作ってみました。 かなり難しかったです。できたのは奇跡と …

IllustratorとPhotoshopで和紙

こんにちは、北野です。 実習12日目です。 ひたすらひたすらパーツとバナーを増産しています。 使えるものかどうかわかりませんので、実質は増えていないかもしれませんが。 少しワンパターンになってきました …

抹茶ラテを作ろう

こんにちは、北野です。 実習6日目です。   今日もひたすらバナーをトレースしています。 ずっと作製しているだけあって、写真の加工は少し、ほんの少し、速くできるようになりました。 そこで、写 …

フォントの選び方を考える

こんにちは、北野です。 実習16日目です。 パーツのデザイン・制作を続けています。 今日はシンプルなパーツを作りました。 ほぼ文字だけのものです。 文字だけですと、文字が読めなくては、いったいなんのパ …