【Procreate】文字を装飾しよう 写真と組み合わせる編

自社商品の良さetc.を伝えるために「文字」は必須ですが、文字だけでは読み流されてしまい、なかなか印象に残りません。

【before】文字のみ

【After】文字+写真

・「文字」のみ

・「文字+画像」

を比較すると、画像ありの方が印象に残ります。

また、文字だけでは伝えきれない雰囲気も伝えることができます。

そこで素敵な写真を用意したいのですが

  • 小物等を買ってきて自分で撮影するのは大変
  • フリー素材でハイクオリティな画像って無いよね?
  • 商用利用不可なのでは?

と心配になりますね。

そこでおすすめなのがフリー素材サイトUnsplash(アンスプラッシュ) です。

フリー素材サイト Unsplash(アンスプラッシュ)

Unsplash(アンスプラッシュ)のメリット】

  • 無料
  • 商用利用可
  • クレジット表記不要
  • 使用報告不要(クレジット表記してくれると嬉しい)
  • プロのフォトグラファーが撮影している
  • 高画質
  • 高品質
  • 画像数が多い
  • 加工可能
  • アプリ版がある

フリー素材のサイトはたくさんありますが、その中でもUnsplash(アンスプラッシュ)圧倒的なクオリティ&使いやすさです。

Unsplash(アンスプラッシュ)の注意点】

  • 日本語での検索は不可
  • 画像サイズは不統一
  • イラスト画像は無い

日本語検索は出来ませんが、簡単な英語を使う、もしくは翻訳サイトで翻訳して使ってみましょう。

【今回使用するもの】

【テキストを書く】

今回は例として「Unsplash」という文字にオシャレな写真を配置してみます。

【Unsplashで写真を探す】

Unsplash(アンスプラッシュ)を開きます。

検索ボックスに、探したいイメージに関する単語を英語で入力します。

今回は紫色をベースとした写真を探したいので「purple」と入力してみます。

紫を基調とした写真が一覧で表示されました。

下側にスクロールすると更に多くの写真を見ることが出来ます。

今回は猫の写真を使用してみます。

【写真をダウンロードする】

写真をタップすると、下向き矢印のダウンロードボタンが表示されます。

下向き矢印をタップします。

ダウンロードをタップします。

ファイルアプリを開いて、ダウンロードされているか確認します。

ダウンロードフォルダに保存されています。

【写真を貼る】

お絵描きアプリProcreate(プロクリエイト)を立ち上げます。

テキストの下に画像を配置するので、テキストレイヤーの1つ下のレイヤーをタップして選択状態にします。

左上のスパナマーク「アクション」→「追加」→「ファイルを挿入」をタップします。

Unsplash(アンスプラッシュ)からダウンロードした写真をタップして選択します。

キャンバスにダウンロード画像が取り込まれました。

【写真を加工する】

取り込んだ写真をキャンバス内にいい感じに配置していきます。

写真の四隅の●をドラッグしてサイズ調整します。

キャンバスサイズからはみ出して調整することも可能です。

はみ出した部分はカットされます。

いい感じになったら画面左上の矢印マークをタップして、選択状態を解除します。

写真をキャンバスいっぱいに配置できました。

【文字デザインを調整する】

写真はいい感じに配置できましたが、このままでは文字が写真に埋もれてしまっています。

文字が引き立つように調整していきます。

今回は彩度が暗めの画像を使用しているので、文字色をホワイトにして目立たせてみます。

元データは残したまま調整用の文字データを作りたいので、テキストレイヤーを複製します。

レイヤーを左スワイプすると「複製」ボタンが表示されるのでタップして複製します。

テキストレイヤーが複製されました。

テキストデータのままだと加工できないので、イラストデータに変換していきます。

「フラット化」をタップします。

テキストデータ → イラストデータに変換できました。

今回は「黒→白」への変更なので「反転」をタップします。

文字の色がホワイトになり、引き立ちました。

【画像の周りに枠をつける】

【before】枠なし

【After】枠あり

【before】の画像でもいいのですが【After】の枠あり画像にする場合は、もう一手間かけます。

全てのデータを一括でサイズ変更するために、まずは「グループ化」します。

グループ化する全てのレイヤーを右スワイプ→グループをタップします。

「新規グループ」」にグループ化されました。

下向き三角をタップすると折りたたむことができ、扱いやすくなります。

↑折りたたんだ状態です。

画面左上の矢印マークをタップして選択します。

画像の四隅の●をドラッグしてサイズ調整します。

いい感じに調整出来たら矢印マークをタップして選択状態を解除します。

今回は「背景色レイヤー」にデフォルトで入っている白色塗りつぶしレイヤーをそのまま「枠」として利用しました。

写真全体が白い枠で囲まれている状態になりました

画面左上のギャラリーをタップして、作業を完了させます。

Procreateのギャラリー一覧に保管されました。

【データを取り出す】

今回はTwitterやInstagram、blogなど、何にでも利用しやすいJPEG(ジェイペグ)形式で画像を取り出していきます。

取り出したい画像を選択し、「共有→JPEG」をタップします。

今回は写真アプリに取り出したいので「画像を保存」をタップします。

写真アプリに保存されているか確認します。

写真アプリをタップして開きます。

写真アプリに保存されています。

【完成】

【before】文字のみ

【After】文字+写真

印象的な画像になりました。

【追記】更に微調整した例

文字に「影」「光彩」の加工を施した例

さきほど完成した画像の文字を、更に少しだけ加工した例です。

文字に影をつける方法

輝く文字を書く方法

影をつけたり、光彩の加工をしたりする方法は上記で紹介しています。もし良かったら併せて参考にしてみてください。

【例】文字+写真(Unsplashより)

以上、圧倒的クオリティのフリー素材サイトUnsplash(アンスプラッシュ)を使って文字を引き立たせる方法の紹介でした。

Birthday Color iphone icons