検索

PSDスライス＆書き出し

目次

  1. PSDスライス解説動画
  2. 注意事項
  3. logo.svgファイル
    1. ファイルの編集
      1. 不要なコードも書き出された初期のコード
      2. ドキュメント宣言などを削除
      3. 不要な表現の削除
    2. SVGファイル書き出し＆編集方法の解説動画
  4. logo.pngファイル

PSDスライス解説動画

出来上がったPSDファイルにスライスを行います。スライスした履歴がデータ内に残るように、PSDを保存してください。以下に、スライス作業全体を収録した様子の解説動画があります。

注意事項

サーバーには既に以下のような構成のフォルダー構成で画像が保存されています。

 .com ルートディレクトリー
├ images---------------------：制作者画像一式
│  ├ bg-----------------------：CSSで使用する背景画像
│  ├ common-------------------：ヘッダー・フッターなど共通パーツで使う画像
│  ├ img----------------------：ページ内で使用する画像
│  │ ├ about------------------：.com/about ページで使用する画像
│  │ └ area-------------------：.com/area ページで使用する画像
│  │ - ├ tokyo_01.jpg-----------：.com/area/tokyo ページで使用する画像
│  │ - ├ saitama_01.jpg---------：.com/area/saitama ページで使用する画像
│  │ - └ tokyo----------------：.com/area/tokyo の内部階層の写真
│  │  --- ├ shibuya_01.jpg-------：.com/area/tokyo/shibuya の写真
│  │  --- └ shibuya_02.jpg-------：.com/area/tokyo/shibuya の写真
│  ├ colorbox-----------------：カラーボックスで使用する画像
│  ├ header-------------------：ヘッダーで使用する画像
│  ├ icons--------------------：アイコン画像、アイコンSVGファイル
│  ├ tablesorter--------------：管理画面で使用するテーブル順序入替
│  └ video--------------------：.mp4などの動画ファイル
└ robots.txt-------------------：検索エンジン用
  • 既にアップされている画像はレギュレーションサイトで使用している画像なので上書きしてOKです。
  • 画像のファイル名やディレクトリー名については、画像の保存方法のページをご覧ください。

logo.svgファイル

ロゴファイルは、特に指定がない場合は.svgファイルとして保存してください。イラストレーターにてデータを開き、余分な余白を削除した状態でSVGに保存してください。以下のスクリーンショットのように、アートボードサイズを編集して、ロゴの余白をぎりぎりまで削ってください。（SVGでの出力が難しい場合はPNGで保存）

SVGデータの保存

ファイルの編集

SVGファイルをイラストレーターから書き出すと、不要なコードが含まれて保存されますので以下の通り編集をしてください。

不要なコードも書き出された初期のコード

例えば、これがイラストレーターから書き出される.svgのコードです。このコードを例にして説明します。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="595px" height="841px" viewBox="0 0 595 841" enable-background="new 0 0 595 841"
	 xml:space="preserve">
<rect x="150" y="170" width="301.563" height="301.563"/>
</svg>

ドキュメント宣言などを削除

冒頭部分の以下の3行は入替ではなく、そのまま全て削除してください。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

不要な表現の削除

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="595px" height="841px" viewBox="0 0 595 841" enable-background="new 0 0 595 841" xml:space="preserve">

上記を以下のとおりに編集してください。追記をしている記述はありません。不要な部分を削除するのみです。また、数値（viewBox="0 0 595 841）は以下の通りにするのではなく、元のファイルの数値を変更せずにそのままの状態にしてください。手動で数値を変更すると、svgファイルの表示が崩れてしまいます。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 595 841">

SVGファイル書き出し＆編集方法の解説動画

logo.pngファイル

グラデーションが入っていたり、複雑な形のロゴデータを出力する際に、svgファイルでは正常に出力されないことがあります。そのような場合は、背景が透明のpngファイルとして書き出してください。

  • 本来のロゴデータ
  • SVGファイル失敗例
  • 透明背景のpngファイル