2018年春〜第1回ワードプレスレッスン

ワードプレスHPつくりから話題がそれつつありますが、photoshopによる「アイキャッチ画像」作成方法について教わりました。

東京都内の会社でプログラミングをつかう仕事にフル勤務するのでなければ、むずかしいプログラミングをおぼえたところで何ができるわけでもないようです。

そのようなわけで当面は「IT情報発信でだれでもできるような基礎」をやるのがいいのかもしれません。

ランサーズで「Webマーケティングをスカイプで教える仕事」というのも申し込んでみたりしたところです。

フォトショップは次のことができれば一通り使えます

フリー素材をつかう

「イラストを自分でえがくことがむずかしい(手間がかかりすぎる)ということがわかりました。

基本イラストは「フリー素材」商用OKのところからいただいてくることが多いようです。

ライセンス・規約をよく読んで利用します

今までいちばん多く見かけたアイコン素材屋さん

http://icooon-mono.com

もうひとつ

http://pictogram2.com

写真はこちらをすすめられました

アンプラッシュ

https://unsplash.com

素材サイトではないですが勉強用に

神里さんのブログ

http://utina.yoshitokamizato.com

図形

「丸」「四角」など、基本の図形がありました

たしか「吹き出し」もあったと思います

テキスト「T」の下のアイコン(図形)を「右クリック」すると・・・

長方形、角丸、だ円などえらべます

ラインツールは直線ひき??

フォトショップで「直線のひきかた」がわからないのですが

もしかしたら「図形」内にある「ラインツール」で線をひくようです

「太さ」「色」「実線」などえらべるようです

何度もペンをさがしたのですが、ブラシっぽいのしかなくて、やっと見つけました

独学でなく教わると「早い」ですね

文字いれ

とりあえず、今あるフォントでつくります

フォントを足せるのだとしたら、レベルアップのため加えていきたいです

納品先ブログだけでなく、おしゃれな女性や納品先に近い男性向けブログ(IT関係)のアイキャッチも勉強のため見にいこうと思います

どうやってこのアイキャッチをつくっているのか?

分解して、簡単な手法は取り入れたいです

移動

図形などを配置するため移動するようです

ドラッグしてサイズ変更するのができなかった気がします

長方形のサイズを変えたい場合には、図うえの数値を大きく(小さく)する方法でサイズ変更する、という話だったと思います。

レイヤー

丸かいて、フリーイラストはって、文字入れして。

これで3つのレイヤーをつかっているのではと思います。

「目」マークをはずすと画面上からきえます

「目」マークをつけると画面上にあらわれます

「レイヤーをまとめる」のような操作があったと思うので、必要におうじて行いたいです

今までフォトショップでは、5枚くらいのレイヤーがバラバラなまま「png」「jpg」でデスクトップに書き出していました。

この方法でも全然問題ないそうです。

フォトショップは一括購入でなく月払い(980円)でレンタルする仕組みです

「photoshop cc」で黒・ブルーのPSアイコンです

せっかく借りたのでフルに使いたいです

1件200〜400円でアイキャッチ画像の納品をはじめます

つくりたいものを作るのが上達への早道です

おまけに納品させていただくので作成料もいただけます

ありがたいですね

請求書をつくるよう頼まれましたが、ライター時代に何度かつくったのでpdfファイルにして毎月つくろうと思います。

しめ、支払い、31日(月末)づけだったと思います。

便利な機能

透けた写真〜不透明度を100%から80%、50%に

写真の「不透明度」は通常100%なので、不透明度をさげて「透明感」のある写真をつくってみました

「レイヤー」パネルで「不透明度」100%とさいしょはありますので

不透明度100%の写真(加工前)

不透明度50% 半分

不透明度80%にもどしました

50%作業画面

80%作業画面

スポイトで色をひろう

フォトショップの画面上で、スポイトの色を拾って、そのまま別な場所にぬったりできるようです

いちいち「同じ色」をさがしてこなくて良いので、たいへん便利そうでした。

フィルターギャラリー(カッコよく見える便利な写真加工)

(加工したい写真のレイヤーをだした状態で)

「フィルター>フィルターギャラリー」を選択します

アーティスティック、スケッチ、テクスチャ・・・と6項目の写真加工がでてきます。

今回は「変形」の「光彩拡散」というものをつかってみました

光があたったように加工をかけました

強めに加工しないとちがいがわからないです

macプレビューでも「透過」作業はできる

わたしの場合macユーザーですので「プレビュー」で作業可能します

参考:qiitaさまより

(ウィンドウズ時代にはフリーソフト「pixia」を入れてそちらで作業した記憶があります)

mac「プレビュー」のツールアイコン(道具箱)で

インスタントアルファ 魔法のつえみたいなものをクリック

これで「透過」ができる

1.背景あたりを範囲選択(四角に)

一瞬、背景が「茶色」に転色しましたが、背景部分に「点線」があらわれ点滅しはじめました

「command+X」で背景がきりとられます!

失敗作:プレビュー上で「切り取り」をクリックすると「人物」がきりとられてしまいました><

あくまで「command+X」で透過作業します。

脇の下、カバンをもつ背景が「みどり」で残っているので、左上むしめがね「拡大」して、丸っぽく範囲指定(わきの下・点線)

「command+X」でだいたい削除できました

「グループ化」多くのレイヤーを扱うフォトショップで便利です

 

「Command+G」でグループ化、もういっかい「Command+G」で解除とのことです

背景と文字をセットで「グループ1」などとできて便利です

背景1と文字2、アイコン3でグループ化:a(1・2・3)

ピアノイラスト1と文字2、飾りリボン3でグループ化: b(1・2・3)

ロゴ背景チェックと文字でグループ化:c(1・2)

まだつくっていませんが、このようなイメージでレイヤーをまとめていけるようです

3+3+2で8つもレイヤーがあるとごちゃつく時に便利そうです

画像のコピー

レイヤーを複製していくようです

画像じたいをコピーする機能はないっぽいです

複製したレイヤーを、位置をずらして並べていくのだと思います(作業はしていません)

フォトショップまとめ:学びながら即、つくり、即、仕事につなげる姿勢

フォトショップの使い方はこれから覚えます。

1か月つかえば慣れるでしょう。

さいごに:自己作成サービスについて

またピアノ教え方noteの参考にするよう言われましたのが

フォトショップアクションのつくりかた

大谷キミトさん

イラストや動画をつかって文章で説明していこうと思います。

ライン@(登録無料)などで流れをつくる

メルマガとうろく→無料レポートをもらったりして(顧客候補リストどりをする)→note更新したりしたら「つくったよ」と流したりする(連絡)

ピアノ独学者に解説書をつくるくらいで、気楽な感じでやるとよいと思いました

もう一点。サンプルHPに使用したフリー素材(ピアノ鍵盤+バラ)について

商用なのでそのまま設置につかっても良いようですが、二次配布がきになるようなら自分で撮影しても

被写体(ピアノ鍵盤、バラ)は用意できる

またはその画像に「https:// 写真ACのURL」などと文字入れして、「ここから自分でダウンロードしてきてね」と言おうかと思います。

文字入れしたらそのまま使えませんので