初回のテーマは「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への変換がうまくいかない場合や、その他の機能、ご購入に関するご質問などは、以下のフォームにて承っております。お気軽にお問い合わせください。