• Skip to primary navigation
  • Skip to main content

石崎力也のコンサルティング「いしこん」

年収1000万円以上のネットビジネス経営者を対象にデジタルコンテンツの販売方法とマーケティングオートメーションの導入方法に関する情報を発信するブログ。

  • いしこん 2.0
  • 無料ウェビナー
  • もう1本読む?
    • ネットビジネスの始め方【これでオランダ移住を実現しました】
    • オンラインコース(講座)ビジネスの作り方・やり方
    • 会員制サイトの作り方とサブスクリプションの導入方法
    • 動画広告の作り方マスター講座|種類、活用方法から効果測定のコツまで
    • 短くて成約率の高いVideo Sales Letter(VSL)の作り方
    • エバーグリーンローンチとは?ツールの使い方を詳しく解説!
    • 個人でKindle電子書籍を出版して利益を得る方法
    • Teachable(ティーチャブル)の使い方・操作方法
    • ClickFunnels(クリックファネル)の使い方・操作方法
  • コース一覧
  • お客様の声
  • 石崎力也とは?
  • リソース
  • ログイン
    • 新規登録はこちら
    • アカウントを持っている
  • Show Search
Hide Search
現在の場所:ホーム / アーカイブPhotoshop

Photoshop

Envato Elementsの使い方(モックアップの作り方)

Last updated on 2017年12月16日 By 石崎 力也

あなたはEnvato Elementsは英語だから難しいと思っているかもしれません。大丈夫、僕が今から”日本語”でEnvato Elementsの使い方を紹介しますので。検索エンジンでは「Envato Elements 読み方」なんかでググる人が多いようですけど、たぶん(調べてませんが)エンバトエレメントだと思います。Envato Elementsは、彼らのモットーのごとく、あらゆるデザイン作業を素早く終わらせるWebサービスです。

#01. モックアップとは何か?

今回は、商品の模型と言える、モックアップ画像の作り方を紹介しようと思います。モックアップって、例えばこんな感じです。今回はお客さんに配るeBookのモックアップを作ってみました。

Mockup toeic

どう?かっこよくないですか?商品の知覚価値が上がりません?これを無料でもらった人は「やった、嬉しい」と思うはずです。少なくとも、WordやPagesで作った、白背景黒字のシンプルな無料レポートよりかは見栄えがいいです。

#02. Envato Elementsからテンプレートをダウンロードする

021

使うのはEnvato Elements。Design without limits(制限なしのデザイン)・・・。ようはデザイン関係ならお任せ、ということでしょう。実際に彼らの月額プランを申し込むようになってから、全部とは言わないまでも、デザイン作業のほとんどはEnvato Elementsを経由して仕事をするようになりました。

022

プランは2つあります。月額で払うか、年額で払うか。年額で払うとWordPressのテーマを無制限にダウンロードできるようになるんですけど、僕は熱心なGenesis Frameworkのユーザーなので、テーマは不要です。だから月額で支払っています。しかもEnvatoは不定期で(直近はクリスマスとかブラックフライデーとか)$19/mのキャンペーンをやっています。僕は運よくキャンペーン中に申し込めたので、今でも$19/mを払うだけでEnvato Elementsが使い放題なんです。

023

本当にデザイン関係は全部、Envatoで完結できるのかよ?と思いましたか。例えば、Keynoteのかっこいいテンプレートもあります。Udemyで講義を作るときはEnvatoからダウンロードしてきたテンプレートで資料を作り、ScreenFlowで撮影しています。よくお客さんからも「どこでダウンロードしてきたんですか?ご自身で一からお作りになったのでしょうか?」なんて質問をいただきますが、回答はいつも同じく「Envato Elementsからダウンロードしてきました」です。

024

他にもフラットアイコンもあります。今まではiconfinderでアイコンをダウンロードしていたんだけど、Envatoを知ってからは専らEnvatoだけを使うようにしています。

025

さて早速始めましょう。Envato Elements にログインして、Mock Upと検索します。次に検索結果からGraphic Templatesを選びます。1869もの作品が検索結果に表示されました。

026

お気に入りの作品(テンプレート)を見つけたので、ダウンロードします。プロジェクトの名前は「TOEIC塾」としておきます。

#03. Photoshopでテンプレートを編集する

まずダウンロードします。ダウンロードが終わったら、Macの場合であればzipファイルの上でダブルクリック。自動的に解凍が始まります。

031

お、1つのフォルダに6つのファイルが入っていた。どれもかっこいいから、迷うんですよね。でもこんなん、デザインセンスのない僕が選んでても仕方がないので、恣意的に目をつぶって「えい!」と選択します。今回は002.psdを使うことにしました。

032

やることといえば、大抵の場合はスマートオブジェクトを編集するだけ。英語でPlace your design here(ここにデザインを挿入する)と書かれているので、このレイヤーを展開して、中に入っているファイルをダブルクリックします。Photoshopで新しいタブが表示されました。この新しく表示されたファイルを自由に編集していくと、それがモックアップに反映されるという仕組みです。

033

ちなみに背景(Background)の目のマークを Invisibleにすれば、つまりアンチェックすれば、背景が消えます。背景が消えた状態でファイルを書き出したほうが、挿入先のデザインに一致して使い勝手がいいですね。僕は一応、書き出す際に背景のあるバージョンと背景のないバージョンを書き出すようにしています。

034

じゃあ試しにやってみましょう。元のモックアップにはInspiringの文字がありました。それを長方形ツールで隠します。Command + Sで保存して、タブを切り替えモックアップを見ると、おお!こちらも呼応するように消えている・・・という仕組みなんです。もしあなたが会社ロゴやブランドを持っていれば、それを挿入するといいですね。

035

じゃあデザインしていきます。僕が挿入したいのは「TOEIC塾スーターターガイド」という文字列。この商品のブランディングカラーが金と黒なので、色は金と黒を選ぶようにします。全てを編集し終えた後に、モックアップのファイルに戻ると、ちゃんと適用されています。びっくりです。

#04. Photoshopでファイルを書き出す

次の2つのバージョンを書き出しましょう。

  • 背景あるバージョン
  • 背景ないバージョン

041

書き出しは、ファイル > 書き出し > PNGとしてクイック書き出し、を選ぶか

042

コマンド+Eでも書き出せます。はい、まずは背景あるバージョンを書き出しました。

043

次に背景ないバージョンを書き出します。レイヤーパネルからBackgroundの目のアイコンをアンチェックします。この状態で書き出します。

#05. eBookやPDFファイルにモックアップを差し込む

051

まず背景ありバージョンを差し込んでみました。うーん、なんか違うんだよな。

052

次に背景ないバージョン。個人的にはこっちの方がしっくりきます。よし、これで完成。

053

最後に、表紙全体の体裁を整えます。これで表紙が完成しました。モックアップ、便利じゃないですか?

#06. Envato Elementsの使い方(YouTubeの再生リスト)

 

 

三段階で鍛えるフリーランサー必須のフォトショップ・スキル

Last updated on 2017年10月7日 By 石崎 力也

フォトショップって慣れてしまえばそんなもんなんだけど、慣れるまでは「何でこれ動かないんだよ!」「何でここ選択できないんだよ!」の繰り返しです。クラウドソーシングが流行っていますから、デザイン的なことは外注してしまえばいいのかもしれません。僕の場合、学習コストとコミュニケーションコストを比較した時に、誰かに毎回お願いするくらいなら、自分で習得した方が早いと思ったし、今後も使い続けていくスキルだと思ったので、大学生の頃からしばしば本を開いてフォトショップをいじり続けてきました。当時、学生割引でCS5のマスターコレクションを買ったっけ。懐かしいですの。

フォトショップを学習する順番

フォトショップを勉強してきた過程を思い出すと、3つのプロセスがあったように思えます。多分、これ集中的にやれば3ヶ月ほどで全てマスターできるはず。僕の場合は、本業というか学業があったので、片手間でやった結果、全てを網羅するのに3年ほどかかりました。今仕事で使うフォトショップのスキルって、学んだ量の10%ほどなんだけど、学習って基本的なそんなもんですよね。じゃあ最初からその10%がわかればいいんだけど、わからないからこそ、最初は網羅的に学習する必要があるんです。外交官時代、大統領通訳まで務めた神田昌典さんは「今、仕事で使う英語って中学レベルに落ち着いている」と言っています。そんなイメージです。最初から中学レベルでよかったのか、というとそうではないということです。

  1. 操作方法を覚える
  2. 合成、加工、表現を覚える
  3. レタッチ、描画モードを覚える

多分、このプロセスでうまくいきます。他のサイトやオンラインコースとか見ていると、だいたいこんな感じで初級、中級、上級を教えているし、実際にこれが僕の辿ってきた道でもあります。

1. 操作方法を覚える

さて、使うのは本です。しかも売れている本を使います。売れている本で紹介されているスキルは耐久性があり、ニーズがあります。きっと仕事で使う機会が多いはずです。少なくとも、僕が普段から使っているフォトショップのスキルは、ベストセラー本にそのまま掲載されているものばかりです。まずは基本をしっかりと本で学びます。実は、応用もしっかりと本で学ぶんですけど・・・それは後述。ここで紹介する3つの本は、どれも3日ほどで読破できるものばかりです。読むだけじゃなく、一緒に手を動かしながら、理解して読み進めても、やはり3日くらいで読み終えてしまいます。3日*3冊で合計9日で基本操作を学べます。重複も多いので、もっと早く学べるかもしれませんね。

1-1. Photoshop 操作とデザインの教科書

レッスンデータがあるので、手を動かしながら学習できます。1つ1つを丁寧に説明してあるので、最初の1冊としてオススメです。

1-2. Photoshopしっかり入門

情報が網羅されています。僕がネットビジネスの現場で使うスキルのほとんどが、この1冊で網羅されていると言っても過言ではありません。

1-3. これからはじめるPhotoshopの本

この本を購入した当時、ある程度、DVDなどを見ながら学習していたので、この本は簡単すぎました。でも逆にいうと、それくらい解説が丁寧です。何よりわかりやすい。DVDでわかりにくかった場所は、この本を見て理解を深めました。

2. 合成、加工、表現を覚える

実は、合成、加工、表現はほとんど現場では使いません。使わないけど、合成、加工、表現を行う過程で、これまでの総復習ができるイメージです。あるいは個別の操作方法を連動させて、体系的に理解できると言った方が正しいかもしれません。体系的に理解できるとどうなるか。まず、予想がつきやすくなります。「これってどうやるんだろう?」という疑問が湧いてきたのに、初心者だったら何をググればいいのかすらわかりませんが、中級者になってくると、「おそらくレタッチ関係だな」と予想がつくのでググるキーワードがすぐに頭に思いつきます。「これってどうやるんだろう?」のこれにたどり着くスピードがアップするということです。

2-1. おいしいネタ辞典

ネタを一個一個完成させる過程で、多くの知識が結びつきます。途中まで読み進めると、先ほど説明した「予想」が働くようになります。解説を読む前に、たぶんアクションを使うなとか予想しながら作業を進めるとより一層、楽しんで学習できます。

2-2. 10年使える逆引き手帖

この本、紀伊国屋に行っても、丸善に行っても、ジュング堂に行っても、ほぼ100%の確率で置いてありますよね。そのくらい有名な本で、プロユースでフォトショップを使う人たちならみんな持っているんじゃないかっていうくらい人気の本です。中級者向きの本なので、基本的な知識なしでは読めない本になっています。

3. レタッチ、描画モードを覚える

ここで紹介する2冊は両方とも海外の翻訳本です。海外で活躍するデザイナーオフィスに忍び込み、まるでスパイがじっくりと彼らの仕事内容を観察するかのように、超実践的な表現が散りばめられています。これ、このままパクればフライヤーとしてそのまま使えるよね!みたいなレッスンがたっぷり。解説は丁寧ではありません。でも、もうここまでくるとフォトショップの上級者ですから、手を動かしながらやれば理解できる内容です。

3-1. レタッチ&合成の秘訣

実はUdemyやLyndaなどのオンラインコースにも、レタッチと合成のコツを上手に説明してくれるものがあるんだけど、言語が英語なので、100%完璧に理解するのはちょっと難しい。ということで、翻訳本です。レッスンに含まれている様々な表現がどれもプロフェッショナルで、完成させた暁にはちょっとした満足感があります。

3-2. Photoshopレタッチの超時短レシピ

文字、広告、写真、色、光、テクスチャ、3D、ハリウッドなどのテーマに分かれていて、自分の好きな、あるいは自分のよく使うテーマを集中的に勉強することができます。全てを網羅しようと思うとかなり時間がかかります。たくさんのレクチャーが含まれているので。やりたいテーマから順番に学習していくのが一番です。

Photoshopでバナー広告を作る方法(Envato Elementsのテンプレートを利用)

Last updated on 2017年10月7日 By 石崎 力也

サイトに掲載するかっこいいバナーを作りたい。だけどPhotoshopのスキルが高いわけでもない。そんなあなたに朗報です。Envato Elementが提供しているバナーのテンプレートを使えば、高速で、しかも簡単にバナー広告を作ることができます。あなたのやることは、訴求文章を考えることだけ。

#01. Envato ElementsのUnlimitedプランを購入しよう

011

例えばカテゴリー「Udemy」に属している記事があるとします。例題のタイトルは「石崎式!Udemy講師になってオンラインコースを販売する方法」です。この記事は説明するまでもなく、Udemyに関して書かれた記事です。で、この記事を下にスクロールしていくと・・・

参考:http://rikiyaishizaki.com/udemy/how-to-earn-as-udemy-instructor

012

下にスクロールすると、UDEMY FREE GUIDEがあります。マーケティングオートメーションの基本は、見込み客のニーズにマッチした無料プレゼントを用意することです。つまりUdemyのカテゴリに属しているUdemyに関する記事の直下では、Udemyのオファーをする必要があるわけです。このUDEMY FREE GUIDEは、Photoshopで作りました。しかも超高速で。

全てのオンラインクリエイターはenvato elements($29)を購読すべき

013

使ったのはこれ。envato elementsです。月々$29を払えば、先ほどのバナーテンプレートはもちろん、ブログの冒頭に挿入するサムネイル写真から、Keynoteやパワーポイントのテンプレートまでダウンロードし放題です。

参考:僕が使ったバナーテンプレートはこれ

014

これはPhotosです。コンテンツマーケティングを実施している、米国のちゃんとした企業は必ずブログの冒頭にキャッチの写真を挿入しています。彼らもきっとこういったストックフォトの会社と契約しているのでしょう。魅力的な写真がたくさんあります。その数、10万以上!

Envato Elementsに含まれているテンプレートの種類

015 

BROWSEボタンをクリックすると、ドロップダウンメニューが降りてきます。見てください、いろいろなテンプレートや写真、イラストが用意されています。Web Temeplatesまで用意されているんですね。

  • Photos
  • Graphics
  • Add-ons
  • Fonts
  • Graphic Templates
  • Presentation Templates
  • Web Templates 
  • CMSTemplates
  • 3D 

#02. Envato ElementsでLandscape(横長)のテンプレートを探す

021 

今回、Photoshopで使うテンプレートが欲しいわけですね。シンプルに「banner」で検索をかけてみましょう。

022

いくつか候補が見つかりました。ではFlat Line Web Bannersをダウンロードしようと思います。いくつかパターンもあるので、複数のバナーが作れそうですね。

023 

PROJECT NAMEには適切な名前を用意してください。名前を記入してダウンロードします。 

#03. Envato Elementsでダウンロードしたファイルをフォトショップで開く

031 

先ほどEnvatoからダウンロードしたテンプレートをFinderで開きます。Photoshopを使うので、拡張子が .psd のファイルを選びます。イラストレーターが得意な人は .ai ファイルでもOKです。

032 

.psdファイルの上でダブルクリックをするとPhotoshopが開きます。envatoにはこういうタイプのファイルがたくさんあります。データ容量を小さくするためなのかな?僕はこの3つ繋がっているバナーの一箇所だけを使いたいので、後でクロップする必要がありそうですね。 

#04. 広告訴求の文章に関するテクニックと作成方法

04-1. フォトショップのレイヤーを理解する

041 

まずPhotoshopのレイヤーについて。Layer2には文字やロゴなどのデータが格納されていて、Layer1にはバックグラウンドカラーが格納されています。Layer1の目玉のマークをクリックすると、 背景が消えましたね。

04-2. レイヤー2を展開する

042

まずLayer2を展開します。

04-3. テキストを変更する

043 

展開されたレイヤーの中から、左側の編集画面と文字が呼応している箇所を探します。HEALTH PLAN MANAGEMENT SOLUTIONSの文字が呼応していますね。実際に目玉のアイコンをクリックしてみてください。対応しているのがわかります。

044

キーボードのTを叩くか、左側のメニューから横書き文字ツールを選択します。

045

編集したい文字の上にカーソルを合わせて、文字ツールのアイコンが入力モードに変わったことを確認して、訴求文章を書きましょう。

04-4. 文字の大きさを変更する

046

今回は「無料eBookと無料コースで学ぶ Udemyでオンラインコースを販売する方法」という訴求文章を作りました。上のGIFでは文字のサイズを変え、フォントや太さを調節しながら、画面いっぱいに文字を広げています。文字が読みにくいと広告として機能しないので、見やすいように調節してください。無料や0円という言葉は、僕を含めて怪しい人たちが使う常套句なんだけど、一方でHubSpotのようなニューヨーク証券取引所に上場している企業ですら使っている(FREE!)キーワードです。なぜ今だに訴求文章にそれを使うのかというと、一言で、反応率が上がるからです。だから仮にあなたが無料/0円でプレゼントを提供しているなら、素直に「無料」あるいは「0円」という単語をタイトルに入れるようにしてください。

#05. フォトショップ 切り抜きツールの使い方

051

3つのバナーが連なっているので、切り抜きツールを使って必要な部分だけをクロップします。最後にエンターを叩いて切り抜き完了!

#06. フォトショップで広告バナーをPNGとしてクイック書き出しする

061

ブログに戻ります。chromeブラウザを使っています。右クリック > 検証 で、ボディ部分のWidth(横幅)を確かめます。1058pxだそうです。じゃあ書き出しサイズもこの大きさになります。

062

Photoshopに戻り、イメージ > 画像解像度を選択。幅を1058pixelに変更してOKします。

063

書き出しましょう。ファイル > 書き出し > PNGとしてクイック書き出し > 名前をつけて保存します。例題では udemy.png としました。

064

Finderで書き出されたデータを確認します。udemy.pngは、大きさ1058になっています。よし、完成。

#07. WordPressのウィジェットでバナー広告を挿入する設定方法

071

完成図はこんな感じ。ブログ記事直下にバナーを挿入したい。実際にバナーを作りました。さて挿入していきましょう。

072

少し先回りしてお話をします。WordPressのダッシュボードから、外観 > ウィジェットに移動します。

073

左側の利用できるウィジェットから「テキスト」を選びます。ブログの記事直下ですから、After Entryにテキストを配置します。After Entryのウィジェットがあるかどうかは、WordPressのテーマによりけりです。僕はGenesis FrameworkのNews Proというテーマを使っています。

074

さて、最後のプロセスです。長いですが、集中して聞いてください。

  1. メディア > 新規追加
  2. ファイルを選択 > 選択 > 開く
  3. アップロードした画像の「編集」をクリック
  4. ファイルのURLをコピーする
  5. テキストウィジェットをAfter Entryに追加する
  6. command + Vでバナーを貼り付ける

はい、以上でバナーの作成と、記事直下での表示が完了しました。

知っていることはお金になる…1度限りのウェビナーをご用意しました

石崎力也のコンサルティング「いしこん」

Copyright © 2023 · Rikiya "Sales Funnel" Ishizaki