【Photoshop】画像を文字で切り抜く方法（ファーストビューを作る）
今回はサイトで最初に表示されるファーストビューを作っていこうと思います。
画像を文字の形で複製して長方形の上に重ねて作っていきます。
とても簡単なのでぜひ作ってみてください。
簡単にPhotoshopの使い方も見ながら作っていきましょう。
ファイストビューのサイズ
ファーストビューとはユーザーがホームページを訪れた時最初にスクロールしないで表示される部分です。
初めてサイトを作ろうとするとまずファーストビューの大きさはどのくらいにしたら良いか迷います。
よく使われているファーストビューの大きさは幅：1000Px～1200Px 高さ：550Px～650Px ですので今回は「幅：1000Px 高さ：550Px」にしようと思います。
Photoshopを立ち上げる
Photoshopを立ち上げ「新規ファイル」から
「幅：1000Px」「高さ：550Px」「解像度：72」を選択して作成。
このようにカンバスが出来ました。
ここに画像を読み込んでいきます。
今回はunsplashから画像を選びました。
素材サイト注意点
フリーの素材サイトから画像をダウンロードする時は「利用規約」をよく確認して使うようにしましょう。「素材サイト フリー」などで検索してもサイトによっては「クレジット表記が必要」だったり「再配布は禁止」だったり「商用利用不可」だったりサイトによっては使用できなかたりしますので必ず「利用規約」をよく読んで使用するようにしましょう。また、ダウンロード方法もサイトによって違うので正規の方法でダウンロードするようにしましょう。
画像がカンバスより少し小さいので「Shift」を押しながら右下をドラッグすると縦横比を保ったまま拡大できます。
次に横書き文字ツールでテキストを入力します
お好きな文字を入力してください。
文字の大きさやフォントを調節したいので「ウィンドウ」から「文字」を選択して「文字パネル」を出します。ここで文字の大きさやフォントを変えることが出来ます。
今回は「Meiryo UI」「100px」にしました。
画像をテキストの形で抜く
次にテキストレイヤーの「T」を「Ctrl」キーを押しながらクリックします。
するとテキストが範囲選択されるので画像レイヤーを選択した状態で「Ctrl+J」。
するとこのように選択範囲だけが複製されました。
下は分かりやすいように画像レイヤーとテキストレイヤーを非表示にしてあります。
非表示にして確認したい時は「目玉マーク」をクリックします。
次に長方形ツールを持ちテキストより一回り大きく長方形を作ります。
「塗は白」「線は無し」
プロパティパネルから色は変更できます。
長方形が描けました。
長方形の不透明度を50％に下げます。
（分かりやすいようにテキストは非表示にしてあります）
更に長方形より一回り大きい長方形を描きます。
こちらは「塗無し」「線は白」にします。
できたら先ほど作ったテキストを表示させます。
書き出し
出来たら書き出します。
「ファイル」から「Web用に保存（従来）」
「JPEG」を選択します。
＊＊＊＊＊＊＊＊＊＊
Photoshopで書き出す時にどの拡張子を選んだら良いか迷う時はこちら
https://www.beginavi.net/?p=2846＊＊＊＊＊＊＊＊＊＊
完成しました。
他のもこんな感じや
色違いでこんな感じに作ってみました
まとめ
このようにとても簡単に画像をテキストの形でで複製して出来ますのでぜひやってみてください。
Photoshop記事一覧
広告