『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。得意を活かした企画に挑戦中!

Photoshop基本編 100 スライスで分割した画像をWeb用に最適化して書き出す(CS6)(7分50秒)

Photoshop基本 初心者 独学  スライスで分割した画像をWeb用に最適化して書き出す(CS6)

今回は、スライスで分割した画像をWeb用に最適化して書き出す方法を解説しています。

Photoshop上で作成した画像をインターネットのブラウザで表示できる「jpg、gif、png」などのファイル形式に変換して、ファイルサイズや画質を調節し、
スタイルシートでのコーディング用にパーツごとに書き出します。

概要

  • スライスに名前をつける→コレが書き出しの際のファイル名になる
  • Web用に保存のダイアログの説明
  • JPEG形式での書き出し方法
  • 画像圧縮率の設定とコツ
  • 書き出し設定

補足・ポイント

書き出しの形式について

一般的にロゴマークやイラストなど色数の少ない画像はGIF形式、写真やグラデーション等の効果がついた色数の多いものはJPEG形式で書き出します。

gif形式での書き出し

画像やボタン等のパーツの一部を透明にして書き出したい場合はPNG形式で書き出します。

gif形式での書き出し

PNG形式のファイルは、複雑な背景やグラデーション等の上にパーツを配置したい場合によく利用されます。

この記事が気に入ったら
いいね ! しよう

福本 智子

フリーランスWebデザイナー・Webスクール講師。 子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。 Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ】を運営。 フリーランスでWebデザイナーを目指す方々のサポートに注力している。

Pocket
LINEで送る

関連記事

ログイン

新米クリエイターズ Webメディア部

『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。

Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。
現在の肩書きは違えど目指すところは皆「フリーランスのWebデザイナー(クリエイター)」

日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、
Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。

新米クリエイターならではの気づきや学び、Webデザイナーの腕を磨いていく模様をリアルに感じていただけます!