第1回「PSDを開いてHTML5へ変換する」

初回のテーマは「PSDを開いてHTML5へ変換する」です。最初にサンプルPSDを利用してHTML5 に変換し、その後お手元のPSDをHTML5 に変換してみましょう。合わせてPSDを作成する際のTips も紹介いたします。

サンプルPSDをOPTPiX CrossPSD でHTML5に変換して出力する

1. サンプルをダウンロード

まずはチュートリアルで使用するサンプルファイルをダウンロードしてください。

サンプルコンテンツには以下のデータが格納されています。

  • SampleContents
    • SampleContents.psd
    • javascript
      • jquery-1.11.0.min.js
      • pub.js
      • insert_lines.txt

2. サンプルファイルを開く

サンプルファイルを開く『メニューバーから、[ファイル(F) ]-[開く(O)] を選択し、先ほどダウンロードしたファイル内の『SampleContents.psd』 を開いてください。
 
Photoshop 上でのレイヤー構造及びフォルダ構成は、OPTPiX CrossPSD for Hybridcast の『レイヤーパネル』にそのまま再現されます。

*注:Photoshop上で非表示としているレイヤーは OPTPiX CrossPSD for Hybridcastに非表示として取り込まれますので、そのままでは出力されません。出力したい箇所のレイヤー構造上の上位から順に、チェックがついているか確認してください。

3. 静的なページの出力と確認

先ずはこの状態で出力してみましょう。『メニューバー』から[出力(E)]-[出力(E)] を実行してください。

メニューバー[出力]読み込んだPSDと同じディレクトリにHTML5が出力されます(出力先は設定で変更できます)。『メニューバー』から[ツール(T)]-[コンテンツを表示(C)] を実行してください。普段お使いのブラウザで確認できます。

 

お手元のPSDファイルをOPTPiX CrossPSD でHTML5 に変換して出力する。

同様の手順で、お手元のPSDファイルを試しにCrossPSD へ読み込み、HTML5に変換して出力してみてください。お手軽にHTML5への変換が実現できると思います。
ただし、うまく変換できるファイルもあれば、うまく変換できないファイルもあります。そんな時は、以下のページを参考にして、お手元のPSDデータを調整してみてください。

また、今回使用したサンプルPSDは CrossPSD でHTML5変換しやすいように最適化をしてあります。PSDを編集する際は、ぜひ参考にしてみてください。

 

お問い合わせ

HTML5への変換がうまくいかない場合や、その他の機能、ご購入に関するご質問などは、以下のフォームにて承っております。お気軽にお問い合わせください。