こんにちは。

もう外を出るとふわっと春の匂いがしますね。

毎年この匂いを嗅ぐと、春が来た！また１年頑張るぞ！とワクワクするのですが、同じような方いますか？

この１年はいろんなことに挑戦していく年にしようと思います。

きっかけ

stakのデザイナーは、WEBサイトやLPなどのWEBデザインから、チラシや名刺などのグラフィックなデザインまで、様々なデザインを担当しています。

今回は、デザインの引き出しを増やすためにも、名刺や革などにも使われることのある、デボス加⼯の作成をしてみようと思いました！

準備するもの

＜使うツール＞
Adobe Photoshop
→Photoshopのダウンロードはこちら

Adobe Illustrator
→Illustratorのダウンロードはこちら

＜用意するもの＞
紙のテクスチャ画像
ロゴマークの素材

やり方

1. 紙のテクスチャ画像にロゴマークを配置する
2. ロゴマークにデボス加⼯を適⽤する

やり方1. 紙のテクスチャ画像にロゴマークを配置する

Photoshopで紙のテクスチャ画像を開き、設定する

1）Photoshopを起動し、「ファイル」＞「開く」を選択し、事前にダウンロードした紙のテクスチャ画像を選択して開きます。

2）「イメージ」＞「画像解像度」を選択し、画像の縦横⽐を固定した状態で「幅：1920px」に変更して「OK」をクリックします。

3）「イメージ」＞「カンバスサイズ」を選択し、「⾼さ：1080px」に変更して「OK」をクリックします。※「新しいカンバスサイズが現在のカンバスサイズより⼩さくなるため、画像の⼀部が切り取られます」というアラートが出る場合もありますが、その場合は「続⾏」をクリックします。

Illustratorでロゴマークを開き、紙のテクスチャ画像の上に配置する

1）Illustratorを起動し、「ファイル」＞「開く」を選択し、ロゴマークを選択して開きます。

2）ロゴマークを選択した状態で、「編集」＞「コピー」を選んでコピー（ショートカットキーで、mac：command+C、windows：Ctrl+CでもOK）し、Photoshopの画⾯に戻って「編集」＞「ペースト」を選択します。（ショートカットキーで、mac：command+V、windows：Ctrl+VでもOK）

3）「ペースト」ウィンドウが表⽰されるので、「ピクセル」を選択して「OK」をクリックします。

4）ロゴマークがペーストされたら、バウンディングボックスのハンドルをドラッグして縦横⽐を保ちながら⼤きさや位置を調整します。

レイヤー名の変更と、ロゴマークのレーヤーの塗りを0％にする

1）「ウィンドウ」＞「レイヤー」を選択してレイヤーパネルを表⽰させます。

2）「背景」をダブルクリックすると「新規レイヤー」ウィンドウが表⽰されるので、「bg」（バックグラウンド）と⼊⼒して「OK」をクリックします。（これで「背景」が「bg」レイヤーに変換されます。）

3）ロゴマークのレイヤーをダブルクリックして、レイヤー名を「logo」と⼊⼒し「塗り：0%」に設定します。

やり方2. ロゴマークにデボス加⼯を適⽤する

カラーオーバーレイを設定する

1）「レイヤー」＞「レイヤースタイル」＞「カラーオーバーレイ」を選択してレイヤースタイルを表⽰させ、以下のように設定します。

・描画モード：乗算
・カラー値：# edece7
・不透明度：100%

シャドウ（内側）を設定する

1）先程と同様にレイヤースタイルを表⽰させ、メニューから「シャドウ（内側）」を選択し、以下のように設定します。

・描画モード：乗算
・カラー値：# d1d0cb
・不透明度：100%
・⾓度：120°
・距離：3px
・チョーク：20%
・サイズ：2px

シャドウ（内側）を再度追加し、設定する

メニューのレイヤースタイル名の横に「+」があるものは、レイヤースタイルを追加して重ねることができます。

1）「シャドウ（内側）」の横にある「+」をクリックして、以下のように設定します。

・描画モード：乗算
・カラー値：#e7e6e2
・不透明度：100%
・⾓度：120°
・距離：10px
・チョーク：0%
・サイズ：10px

ベベルとエンボスを設定する

1）「ベベルとエンボス」を選択して、以下のように設定します。

・スタイル：ベベル（外側）
・テクニック：滑らかに
・深さ：100%
・⽅向：下へ
・サイズ：6px
・ソフト：4px
・⾓度：120°
・⾼度：30
・光沢輪郭：線形
・ハイライトのモード：オーバーレイ
・カラー値：#ffffff
・不透明度：60%
・シャドウのモード：乗算
・カラー値：#000000
・不透明度：10%

完成

複数のレイヤースタイルの組み合わせで、刻印（デボス）加⼯を表現できました！

まとめ

パッケージやラベル、⼿帳、名刺など様々なデザイン⽤途に⽤いられるデボス加⼯。

Photoshopはいろんなデザインの表現ができるので、今後も勉強を続けていこうと思います！

ちょうどstakの名刺も一新しようかというところなので、とてもいい機会になりました♪