カテゴリー「アイコン(ウェブなどに使用)」の記事

長方形グリッドツールを使ったアイコンの作成1

<長方形グリッドツールを使ったアイコンの作成>Illustrator

今回は、Illustratorの長方形グリッドツールを使い、
図1のようなデザインを簡単に作ってみますup

Grid_allow
図1

1長方形グリッドツールを選択します。(直線ツールを右にドラッグすると出てきます)(図2)

002_right_132307_
図2

2長方形グリッドツールをダブルクリックします(図3)。

003_left_21238_
図3

3水平方向の分割と垂直方向の分割数を入力
 外枠に長方形を使用、グリッドの塗りにチェックを入れます(図4)。

カラーの設定は、塗りを適当に選択し、線はなしにしておきます(図5)。
私の場合は、水平方向の分割は6と垂直方向の分割は20としました。

005_left_1055746_
図4

008_left_666385_
図5

4アートボード上にグリッドを作成します(図6)。
009_ldrag_1270603_
図6

5最上部メニューより、ウィンドウ>パスファインダを選択し、
 パスファインダツールを表示させます。

6オブジェクトを選択したまま、分割を選択(図7)
001_left_94492_
図7

7オブジェクトを選択したまま、オブジェクト上で右クリックし、
 グループ解除を選択(図8)

004_right_974570_
図8

8最上部メニューのオブジェクト>変形>個別に変形を選択

9拡大・縮小の、水平方向垂直方向に同じ値をいれ、縮小します(図9)。(今回は82%にしました)

002_left_592506_ok
図9


10余計な部分を、選択ツールで選択、Deleteキーで削除していき、
 作りたい図形になるようにします(図10)。

003_left_1236592_
図10

004_left_969592_
図11

11部分的に色を変えてもよいかもしれません(図11)

001_left_1032600_
図11

完成です☆

| | コメント (0) | トラックバック (0)

ふきだしのアイコン(ウェブなどに使用)

<新規ドキュメントの設定の仕方>photoshop
1最上部メニューよりファイル>新規を選択

002_left_11251_
2幅→140px、高さ→140px、解像度→72pixel/inch、RGBカラー8bit、カンバスカラー白
 を選択

003_left_1106681_

3レイヤーの「背景」を右クリックし、レイヤーに変換

006_left_1786693_

 新規レイヤーを作成

008_left_18621136_

 レイヤーに変換した「背景」レイヤーを削除する。

010_left_18861134_

4カスタムシェイプツールを選択

002_left_24501_
5上部メニューより、シェイプレイヤーを選択

004_left_7550_

6上部メニューより、シェイプ横の↓をクリック
7ダイヤログ横の→をクリックし、「すべて」を選択

007_left_650488_

8シェイプより、吹き出しを選択

011_left_420126_

9ドキュメント内に、吹き出しを作成

012_left_678532_

10レイヤーの色パレットをダブルクリックし開き、色を#bdbdbdに指定。

001_ldbl_1844658_

006_left_1201583_

11レイヤーをダブルクリックし、レイヤースタイルのダイヤログを表示

009_left_1832658_

12
<ドロップシャドウにチェック>
描画モード:乗算
描画モード右のカラーをクリックし、#6b6969に指定
不透明度:46%
角度:97%
包括光源を使用にチェック
距離:0
スプレッド0
サイズ2

001_left_1351480_

<シャドウ(内側)にチェック>
描画モード:乗算
描画モード右のカラーをクリックし、#2f2e2eに指定
不透明度:49%
角度:97%
包括光源を使用にチェック
距離:3
チョーク2
サイズ5

002_left_1405560_

<べベルとエンボスにチェック>
スタイル:ベベル(内側)
テクニック:滑らかに
深さ:378%
方向:上へ
サイズ1
ソフト9

003_left_1437547_

13新規レイヤーを作成

14ペンツールを選択し、上部メニューより、シェイプレイヤーを選択

上部メニューのスタイルはなしを選択しておきます。

001_left_23431_

003_left_8265_

 吹き出しにつやを描く

007_left_1060731_

15[14]のレイヤーの色パレットをダブルクリックし、色を
 #ffffffに指定

16[15]のレイヤーの不透明度を56%にする

001_left_1877604_

17吹き出し本体のレイヤーの下に、新規レイヤーを作成する

001_left_1797707_

18吹き出し本体と同様、吹き出しを作成する。

19選択ツールを用い、コピーした吹き出しを本体より若干大きくする

003_left_1156855_

20レイヤーの色パレットをダブルクリックし、色を
 #ffffffに指定

21不透明度を20%にする

22レイヤーをダブルクリックし、レイヤースタイルのダイヤログを表示

23<べベルとエンボスにチェック>
スタイル:ベベル(内側)
テクニック:滑らかに
深さ:100%
方向:上へ
サイズ5
ソフト0

diamond完成diamond

004_left_1260804_

photoshopのファイル自体は、
最上部メニューのファイル>保存より保存します。

web用素材としては、
最上部メニューのファイル>webおよびデバイス用に保存を選択し
JPEGやGIF,PNG形式を選択します。

吹き出しの背景を透過させたい場合、
PNG-24を選択し、透明部分にチェックをします。

010_left_1494264_web_100

保存したPNG画像

1

| | コメント (0) | トラックバック (0)