Web・モバイル業界専門お仕事情報サイト「ウェブタント(WEB担当)」 お問合せ:東京0120-31-7133 大阪0120-14-2667
一般労働者派遣:(般)13-302759 / 有料職業紹介:13-ユ-302233 / プライバシーマーク:17000123(02)

会社概要お問合せ法人のお客様へ就業中スタッフ専用サイトマップ
Web・モバイル業界専門お仕事情報サイト「ウェブタント」トップページへ お仕事検索 派遣スタッフ特典 スキルアップセミナー お仕事情報メルマガ 初めての方へ
職種別 求人情報  WebディレクターWebデザイナーhtmlコーダーネットショップ運営携帯サイト運営WEB系一般事務その他  特集



松井@和博
有限会社フューチャーワークス
オンラインショップ様のパートナーとして、担当するオンラインショップ様の売上に応じて、成功報酬での運営、管理、コンサルティングを行う、有限会社フューチャーワークス在籍。

担当ショップ様、来店するお客様のイメージに合ったデザインを作る事を常に心掛け、WEB制作業界以外、過去5社での、製造、営業、小売での経験から商品の見せ方、デザインに限らず制作、広告、イベント等での工程管理も得意する。仕事は段取り8割がモットー。

現在、担当ショップ様2(8サイト)
過去の新規制作案件2社。

使用PhotoShopバージョン:PhotoShop6(Windows)


■連絡先
〒120-0034
東京都足立区千住3-35シルクビル3階
03-6912-8855
有限会社フューチャーワークス
http://www.future-worx.net/



光彩が足りなかったら、重ねてみれば??
今年も納涼カレンダー作成
簡単に簡単な小物を作ってみる〜(付箋編)
よく頂くご質問から(角の丸い画像って・・・)
便利な罫線を活用してみる
レイヤーを結合して、部品作成を効率アップ♪
いまさらですが・・・キラキラ♪
説明文を読んでもらうための小技(その1)・・・
あとチョッと位なら、切ったり、貼ったり、伸ばしたり・・・
組み合わせの難しい色は間に淡色をはさんでみよう〜
言いにくいことを画像で表示するとき・・・
難しい色の代表選手「黒」
暖色の中で目立つ!
緊張の・・・女性の写真を補正するとき・・・
カタカタするときは光彩(内側)でスムースに♪
後で調整が簡単な縁線の描き方(自己流です)
冬休み特別号?文字装飾のまとめ
文字をナナメにしたら、カタカタしたときは・・・
色で悩んだら、調整レイヤーを使ってみよう。
ベタだけどやってみよう〜♪
----------------------------------------------------
全ての記事を見る

ノウハウコラム
現場で使えるDreamweaver & Fireworksの
「イラストを描く前に、イラストを理解すること」をモットーに
ネットショップでのPhotoshop活用術
WEB制作会社で役立つPhotoshop活用術
デジカメ商品撮影 情報満載図書館
ネットショップに役立つプログラミングを楽しく伝授
【トントンのネットショップ運営繁盛講座】
売るための"サイト構築テクニック
心を動かすお店の作り方
御社の「売り」は何ですか?

スタッフ紹介
とこみゆきの良新日記
大池めぐみブログ
佐藤麻衣子ブログ
笠原華子ブログ
橋和田智子ブログ
平岡典子ブログ
野崎朋子ブログ
高見英作ブログ
高橋理華ブログ
外薗聖子ブログ

スタッフコラム
ちょっと耳より♪Web/Mobileコラム
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でグラデーション



同系色でまとめても、視認性を損なわず、

おまけにチョッと上品な感じがする便利な小技です。



それでは〜





お仕事を探す
東京神奈川埼玉千葉 大阪京都奈良兵庫 愛知静岡岐阜

スタッフ登録する
  非公開案件も多数あります。
  登録後にお仕事を探される場合は、まずは登録面接会予約をしてください。
登録面接会予約 登録から契約までの流れ 派遣スタッフ登録特典

このページのトップへ

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

 トップページ会社概要 個人情報保護方針法人のお客様へ