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

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

ネットショップでのPhotoshop活用術 素材からバナーを作成まで　その3（トリミング〜完成） 前回のまとめ。 トーンカーブ（Ctrl+M）で画像の明るさと 色味の調整を行い、 暗い画像を明るく、色味も補正しました。 【補正前の画像】 【補正後の画像】 これで、バナー作成のための素材としての商品画像が完成したので、 この画像を使って、 ページの中で決められた大きさのバナーとして、 どのように装飾して行くかを考えます。 現在、担当しているイーストリートベーグルズさんでは、 トップページのバナーの大きさが幅274ｘ高さ260で統一されているので、 この大きさに、加工した商品画像をはめ込んで行きます。※ ※何回かこのコラムで書いている様に、 商品画像をこの大きさに切って作るのではなく、 新規でこの大きさの画像を作成して、商品画像を貼り付け、 自由変形（Ctrl+T）でトリミングしてゆきます。 ここで、 実際に作業を行う前に、 商品名や価格などをどのように配置してゆくかを、 画像を見ながら考えます。 バナーも主役は商品の画像ですので、 主役に文字や装飾が掛からないように、 装飾を逃がしてあげられる場所を探して行きます。 今回の画像の場合、画像の上いっぱいまで、 商品が写っていて、商品の左側にスペースがあるので、 この部分に文字や装飾を入れるスペースとして、 配置してゆきます。 上の画像を規定の大きさ（274X260）に貼り付け、 自由変形すると、こんな感じになります。 バナーに商品画像を貼り付けたら、 後は、商品名や価格などを文字を記入してゆきます。※ ※なぜか、マツイは「文字を流す」と呼んでいます。 このままでは、文字が読みづらく、 バナー自体も画像に文字が乗っているだけなので、 文字レイヤーの下に装飾を加えます。 と、ここで問題発生 商品の上に思いっきり装飾レイヤーが乗っていて、 商品が見えにくくなってしまっています。 文字レイヤーは商品の上で 読んでもらいたいのですが、 装飾はお邪魔なだけなので、 商品をペンツール（P）で切り取って、※ 装飾の上のレイヤーに移動させてあげます。 ※ペンツールで切り取るときは、 アンカーポイントを点、点、点と細かく打って曲線で切り取るというよりも、 点と点でつながった部分を切り取る方法で、パスを作成しています。 DTP出身の方は邪道と思うかも知れませんが、 WEB用の画像であれば、問題ないと思います。 切り取った商品画像を装飾レイヤーの上に移動して、 その他の部分を整えて、バナーとして完成となります。 （ここの部分がバナー作成のノウハウで、次回まとめてみます） 今回はここまでで、 次回、バナー作成のための細かなテクニック編をまとめて見たいと思います。

松井�@和博 有限会社フューチャーワークス オンラインショップ様のパートナーとして、担当するオンラインショップ様の売上に応じて、成功報酬での運営、管理、コンサルティングを行う、有限会社フューチャーワークス在籍。 担当ショップ様、来店するお客様のイメージに合ったデザインを作る事を常に心掛け、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法人　キープラネット / 全国イーコマース協議会

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