一般労働者派遣:(般)13-302759 / 有料職業紹介:13-ユ-302233 ｜会社概要｜お問合せ｜法人のお客様へ｜就業中スタッフ専用｜ログイン│サイトマップ

職種からお仕事を探す　 Webディレクター│ Webデザイナー│ コーダー │ ネットショップ運営│モバイルサイト│ 事務 │ その他　 今週の特集

ネットショップでのPhotoshop活用術 写真の上に文字を配置するとき （東京近郊限定かもしれませんが・・・） 9月に入り、朝晩はめっきり涼しくなりました。 今回は「視認性」を考えながら、写真の上に文字を配置する時、 気にしていることをお話ししたいと思います。 いわゆる、「バナー」のなかには対象となる商品や風景の上に、 文字を配置することが非常に多いと思います。 文字を配置する場合、 マツイは通常2つのパターンに分けて考えます。 パターンその1：雰囲気付けとしての文字（多くは欧文） パターンその2：文章を読んでもらいたいための文字（説明文） 両者の場合でも、共通して考えることは、 文字がきちんと読めること「視認性」を重視してバナーを作成してゆきます。 そのために、非常に便利なツールとしてあるのは、 レイヤー効果の各種となります。 文字レイヤーと画像（写真）レイヤーとの境界を作成することで、 背景となる写真に文字が沈むことなく、見やすい文字を配置することが出来ます。 【実例その1】基本の境界線 左：Deep〜という文字レイヤーに境界線なし 右：Deep〜という文字レイヤーに境界線あり 見て分かるように、境界線があるだけで文字が「はっきりくっきり」と見えるようになります。 【実例その2】境界線だけでなく縁取りを影っぽくしてみる。 左：Chocolate〜という文字レイヤーに境界線のみ 右：Chocolate〜という文字レイヤーをコピーして（Ctrl+J）下の文字レイヤーの色を変え、 変えた文字色で境界線を1px追加した上で、右下に自由変形でチョコッと移動 アメリカンっぽいイメージを作りたいときに、マツイは安直※ですが、 メジャーリーグやアメリカのお菓子を参考にして、 バナーを作成するので、こんな感じの文字を作成することが多いです。 ※安直と書きましたが、誰が見てもすぐにイメージを与えることが出来るという点では、 　マニアックよりも安直というのも、良い選択肢と思います（特にECサイト） 【実例その2】境界線だけでは文字の視認性が低いので、文字レイヤーの下に半透明のレイヤーを敷いてみる 左：アメリカン〜という文字レイヤーに境界線のみ 右：アメリカン〜という文字レイヤーの下に、新規レイヤーを作成（Ctrl+Shift+N） 　　背景色が白の場合（Ctrl+Delete）でレイヤー全体を塗りつぶし、自由変形で文字レイヤーの下だけを 　　塗りつぶすようにして、レイヤーの透明度を変更 上の文章では判りづらいので、作成手順を説明すると 1、アメリカン〜という文字レイヤーの下に、新規レイヤーを作成（Ctrl+Shift+N） 2、背景色が白の場合、背景色で塗りつぶす（Ctrl+Delete）でレイヤー全体を塗りつぶし 3、自由変形（ctrl+T）で文字レイヤーの下だけを塗りつぶすように変形 4、レイヤーの透明度を変更 この文字レイヤーの下に透明度を調整したレイヤーを敷くという小技は、 写真と似たような文字を配置するときにも、文字の「視認性」アップとして、 有用な方法なので、マツイもチョコチョコ使っています。 （しかも作るのが簡単♪） 【おまけ】透明度を調整したレイヤーにクイックマスク＋Deleteでグラデーション 同系色でまとめても、視認性を損なわず、 おまけにチョッと上品な感じがする便利な小技です。 それでは〜

松井�@和博 有限会社フューチャーワークス オンラインショップ様のパートナーとして、担当するオンラインショップ様の売上に応じて、成功報酬での運営、管理、コンサルティングを行う、有限会社フューチャーワークス在籍。 担当ショップ様、来店するお客様のイメージに合ったデザインを作る事を常に心掛け、WEB制作業界以外、過去5社での、製造、営業、小売での経験から商品の見せ方、デザインに限らず制作、広告、イベント等での工程管理も得意する。仕事は段取り8割がモットー。 現在、担当ショップ様2（8サイト） 過去の新規制作案件2社。 使用PhotoShopバージョン：PhotoShop6(Windows) ■連絡先 〒120-0034 東京都足立区千住3-35シルクビル3階 03-6912-8855 有限会社フューチャーワークス http://www.future-worx.net/ ベタだけどやってみよう〜♪ 教えて下さい〜（ズレを直す方法） スキャンしてみよう♪ アプローチの選択は簡単が一番♪ 写真の上に文字を配置するとき 同系色でまとめてみては？？ 基本のまとめカレンダー作り バナーには枠線を引きましょう♪ 文字を変形してみよう♪ スライスでGoGo! 文字の装飾イロイロ 大きなバナーを作るとき・・・ クイックマスクで選択範囲を作ってみよう♪（その2） 点線のイロイロ♪ グラデーションで合成♪ フォントの使い方（実践編） 画像を囲って、写真っぽくしてみよう〜 フィルター（そういえばシャープしか使っていない・・・） 管理しやすく画像を作るっ フォント選びは簡単に〜 ---------------------------------------------------- 全ての記事を見る とこみゆきの良新日記 大池めぐみブログ 佐藤麻衣子ブログ 笠原華子ブログ 橋和田智子ブログ 平岡典子ブログ 野崎朋子ブログ 高見英作ブログ 松本ひとみブログ 高橋理華ブログ 椎木美由紀ブログ 外薗聖子ブログ ちょっと耳より♪Web/Mobileコラム 　サポタントSTAFFが、現場で感じた 　スキルUP情報を交代でお届け♪ 今週のイチオシ企業様 　毎週、コーディネータの 　おすすめ企業様をご紹介します♪ 関東のイチオシ企業様 関西/中部のイチオシ企業様

東京｜神奈川｜埼玉｜千葉 大阪｜京都｜奈良｜兵庫 愛知｜静岡｜岐阜 非公開案件も多数あります。まずは、派遣スタッフエントリーより登録面接会にお越しください。 派遣スタッフエントリー 登録から契約までの流れ 派遣スタッフ登録特典

↑このページのトップへ

---

ウェブタント運営会社	サポタント株式会社　http://www.supotant.com/
	ネット業界で目標実現を目指すお客様を「おブッチギリ」に「愛」たっぷりにお手伝いする【サポート担当】の会社です。 IT業界で、就職・転職を目指している方、人材を募集されている企業の人事採用（雇用）担当者さま、ネットショップを立ち上げられたい方、ネット通販を運営されている経営者の方々のお手伝いをさせていただきます！
主な事業内容	■一般労働者派遣事業：(般)13-302759　　■有料職業紹介事業：13-ユ-302233
	WEBデザイナー、WEBディレクター、WEBプロデューサ、WEBマスター、ネットショップ店長・運営者、ブログ編集管理者、ソーシャルネットワーキングの制作・管理業務者、プログラマー・保守、マーケティング企画、メルマガライター、WEB系企業一般事務員など、即戦力スタッフを派遣・紹介いたします。未経験者には、技術研修を行い、スキルアップを図ります。（中途採用もあり）
	＜主な派遣先企業様実績　最寄り駅＞ 【関東】東京：銀座、新橋、有楽町、目黒、代官山、渋谷、神谷町、表参道、恵比寿、六本木、飯田橋、大森、　神奈川：横浜、新横浜、茅ヶ崎 【関西】大阪：梅田、本町、心斎橋、なんば、三ノ宮、神戸、京都
	■ECサイトセミナーの企画及び運営事務局
	サイト開設、売り上げUP、集客UP、SEO、SEM、PPCなど、EC業界の最新情報をお届けするセミナーを企画・運営しております。
参加団体	社団法人　日本人材派遣協会　会員 / 東京商工会議所 / Web広告研究会 / オンラインショップマスターズクラブ / NPO法人　キープラネット / 全国イーコマース協議会

トップページ｜ 会社概要・各拠点連絡先 ｜個人情報保護方針 ｜法人のお客様へ