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

Photoshop基本編 080 スライス機能 ドラックしてスライス(CS6)(7分49秒)

Photoshop基本 初心者 独学 スライス機能 ドラックしてスライス(CS6)

今回は、Photoshopで作ったボタンやバナーをWebサイト用に個別のパーツとして書き出すためのスライス機能を解説しています。

Photoshop上で作成した画像は、インターネットブラウザで表示できる、「jpgやgif、pngなどのファイル形式」に変換して保存する必要があります。

この作業のことを「書き出し」といいます。

Webサイト用の画像は、webページ全体を1枚の画像で構成するのではなく、例えばイメージ画像やボタン、バナーといったように部分ごとにパーツを分けて書き出す必要があります。

この画像を分割する作業のことをスライスといいます。

パーツに分けて書き出した画像をHTMLで組み立てることでwebページを作ることができます。

概要

  • ドラックによるスライス
  • スライスのコツとショートカットキー
  • スライスのサイズや位置を調整する
  • スライス選択ツール
  • スライスをコピーする方法
  • スライスオプション

スライスはPhotoshopでデザイン後、部分ごとにパーツを分けていくという必ず必要となる作業です。

できるだけ効率よく進められるようにショートカットキーを利用するようにしましょう。

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

福本 智子

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

Pocket
LINEで送る

関連記事

ログイン

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

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

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

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

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