文字やアイコンをピンバッジ風に加工できる無料PSDデザイン素材

カテゴリーPSDデザイン素材
配布サイトFREE Enamel Pin mockup on Behance
使用許諾 :商用利用可
※記事作成時の情報となりますので、最新の情報は配布サイト及びダウンロードファイルに同梱されている「License.txt」をご確認下さい

こんなフリー素材、初めて見た…!
今回紹介するのは、文字やアイコンをピンバッジ風に加工できるPSDデザイン素材

通常のピンバッジのモックアップ素材ではデザインの柄を変えるなどの効果しかないものが多いですが、この素材は平面で描かれた素材自体をピンバッジ風に変えてしまうという珍しい効果を持っています。

それでは、早速見ていきましょう。

Before→After

今回はイラスト素材を使用しましたが、同じ形をした「カラー」と「線」の要素がある素材を用意すれば効果を上手く適用することができます。

※画像の中心にある線はPC上ではクリックしながら、スマートフォン上ではタッチしながら左右に動かすとBefore→Afterの写真を見ることができます

使用許諾

個人利用&商用利用可!
ライセンスファイル

▲ 使用許諾はダウンロードファイルに同梱されている「License.txt」に記載

この使用許諾によると、個人利用も商用利用も可能とのこと。

You are allowed to use resources in any quantity for personal and commercial projects, for yourself or for a client. You can modify resources according to your requirements and include them in such works as websites, applications, printed materials and others. But you cannot sell it.

また、素材の再配布は禁止されています。

Do not give the downloaded files to anyone. Let everyone who wants to use them come and download themselves.

※記事作成時の情報となりますので、最新の情報は配布サイト及びダウンロードファイルに同梱されている「License.txt」をご確認下さい

PSDデザイン素材の使い方

STEP.1/2丨PSDデザイン素材をダウンロード

配布サイトよりPSDデザイン素材をダウンロードしていきます。

まずは配布サイトに行き、説明文の「demo」の部分をクリック。そして、価格の欄に「0」を入力し、その下にあるボタンをクリック。

配布サイトの画面

▲ 赤い囲みの部分をクリックし…

配布サイトの画面

▲「0」を入力後、「これが欲しいです!」のボタンをクリック

その後、メールアドレスを入力する画面に移るので、入力後に「手に入れる」のボタンをクリック。

配布サイトの画面

▲ メールアドレスを入力し、「手に入れる」のボタンをクリック

すると、「コンテンツを表示」というボタンが出てくるので、これを押し、ようやくダウンロードすることができます。

ちなみに入力したメールアドレスには、少し待つと素材をダウンロードすることができるページリンクが送られてくるので、このページを閉じてしまっても後からメールのリンク経由でダウンロードすることができます。

配布サイトの画面

▲ 「コンテンツを表示」をクリックすると…

配布サイトの画面

▲ 赤い囲みの部分からダウンロードできる

STEP.2/2丨アイコンに効果を適用し、完成

配布サイトからダウンロードしたZipフォルダを解凍し、フォルダの中にあるPSDファイルを開きます。

ファイルの画像

▲ フォルダに入っているPSDファイルを開くと…

Photoshopの画面

▲ このような画面が出てくる

ここから効果を適用していきます。まずはレイヤー「PASTE YOUR ENAMEL COLOR DESIGN」とレイヤー「PASTE YOUR METAL DESIGN」のサムネイルをダブルクリック。

すると、「ピンバッジの下地(カラー)の部分」と「ピンバッジの枠線(メタル)の部分」の編集画面が開くので、それぞれに対応する素材を配置していきます。

Photoshopのレイヤー画像

▲ 赤い囲みのサムネイルをそれぞれダブルクリックすると…

Photoshopの画面

▲ このような編集画面が開く

今回私が使用したのは、以前このサイトで紹介した無料イラスト素材サイト「Linustock」。

無料で使えることはもちろん、このサイトの最大の特徴は全てのイラストに「カラー」と「線」のイラストが用意されていることになります。

最終的に重なるようにデザインされるこのPSDデザイン素材において、「Linustock」のイラストは非常に相性が良いです。

マキナスの使用例 Linustock|カラー素材もダウンロードできる無料の線画イラスト素材サイト

このような素材を用意できたら、それぞれ開いた画面に素材を貼り付けます。

Photoshopの画面

▲ 「カラー」と「線」の素材をそれぞれ貼り付ける

そして、両方とも保存を行い、元の画面に戻ると素材に効果が適用されています。

Photoshopの画面

▲ ピンバッジ風に加工された!

無償版のみで行う様々な加工

可能性は無限大!
このPSDデザイン素材には有償版があり、より応用が効いたピンバッジ風の加工を行うことができます。

有償版の使用例

▲ 有償版には様々なシチュエーションに応じた素材が用意されている

無償版でもPhotoshopの色彩機能を使えば背景の色を変えられたり、フリー素材のプラスチックテクスチャを被せたりすることである程度のクオリティを上げることはできます。

▲ 背景の色を変え、プラスチックテクスチャを追加

工夫次第は無償版だけでもデザインの現場で十分に活躍でできるようなポテンシャルを持っています。

気になる方はぜひ使ってみてはいかがでしょうか。

今回紹介したフリー素材

カテゴリーPSDデザイン素材
配布サイトFREE Enamel Pin mockup on Behance
使用許諾 :商用利用可
※記事作成時の情報となりますので、最新の情報は配布サイト及びダウンロードファイルに同梱されている「License.txt」をご確認下さい

加工に使用したフリー素材

マキナスの使用例 Linustock|カラー素材もダウンロードできる無料の線画イラスト素材サイト
プラスチックテクスチャPLASTIC TEXTURES PACK-Pixelbuddha