選択されているタグ : ホームページ作成

タグを絞り込む : a-blog_cms CMS CSS CSSNite Dreamweaver Fireworks JavaScript TalkNote Webデザイン Web戦略 WordPress みんビズ アクセシビリティ セミナー マークアップ マーケティング 広告 情報デザイン 集客

FireworksはPSDファイルのスライスデータを読み込めます

Fireworks Lover Advent Calendar 2012の9日目の記事です。

こんにちは。hamnalyの矢部と申します。静岡県在住、個人でWeb制作を行なっています。主にフロントエンドの実装(下請け、約60%)と、地元の企業や個人商店さんのサイト構築(直受け、約30%)が業務です。以上、「Fireworks Lover Advent Calendar 2012」向けの自己紹介でした。


Fireworksの「スライス」「書き出し」機能は非常に便利


いきなりぶっちゃけますが、あんまりFireworksが得意じゃないです。ですのでデザインをFireworksで行うことはまずありません。そんな私ですが、スライスと書き出しはFireworksで行なっています。PhotoshopやIllustratorにはないメリットがあると感じているからです。こんな感じです。

  • スライスを重ねることができる(あまり使わないけど)。
  • ページ機能が便利。背景用・ホバー画像用など、ステート的に使ってます。
  • ホットスポットを目的外利用して、余白のサイズを測る・データに残せる。
  • 書き出し時の最適化が、PSなどよりも若干細かい設定ができる。

実際のデータをお見せできないが残念ですが、スライスほかにホットスポットの水色の枠がいっぱいできるのが特徴です。

しかし、支給されるデザインデータはPSDファイル…

残念なことに多くの場合、デザインはPhotoshopで行われています。前述の通り下請けの仕事も多いなかで、支給されるデータのほとんどはPSDファイル(Photoshop)です。

Photoshopのスライスにも便利な機能があります。「レイヤーに基づく新規スライス」です。レイヤー単位で簡単にスライス領域を生成できます。この時にレイヤー効果も含めてエリアを計算してくれます。光彩(外側)やドロップシャドウといった、エフェクトの終端がわかりにくいときに、特に効果的です。

FireworksはPSDファイルのスライスデータを認識できます

さて、デザインデータがPSDファイルで支給された場合、スライスをどうするかは悩みどころです。Photoshop・Fireworksそれぞれに良さがあります。可能なら「合わせ技」をしたいとこです。Fireworksは賢いので、Photoshopで設定したスライスを含むPSDを読み込み、スライスを引き継ぐことができます。

そんなわけで、最近の私のワークフローは「まずPhotoshop上でざっくりスライス → PSDファイルをFireworksで開く → スライスの調整・最適化設定 → 書き出し」という流れで行なっています。PSDファイルをFireworksで開く際に「Photoshopレイヤーを1つの画像に統合」を選びます。あまり複雑なPSDデータはFireworks上で再現されないためです。

ちなみに、CSS3の値で取り出したい時は…

Fireworks CS6は「CSS プロパティ」パネルが非常に便利です。オブジェクトの状態(色やサイズ、枠線、シャドウなど)をCSSの値として書き出せます。もちろんCSS3にも対応しています。これだけでもFireworksっていいなぁと思うわけです。

ではPhotoshopでは…。CSS Hatというプラグインがあります。29.99US$です。こちらはLESSやSaSSなどのCSSプリプロセッサーにも対応しているのがポイントです。

まとめ

Fireworksはスライス以降の作業のためだけに使っても便利です。また、PSDファイルのスライスデータを読み込めるのもポイント高いです。ぜひ使ってみてください。


(2012.12.10 追記)
Fireworks Lover Jの丸山 章さんから、下記のご報告をいただきました。ありがとうございます。

CS5.1のpsdからFireworks CS6で試してみましたが、各スライスの属性は取り込まれなかったので、あくまで範囲選択のみようです。

こちらでもPhotoshop CS6 → Fireworks CS6で検証しました。Photoshopの「スライスオプション」で設定した内容は引き継がれます(「メッセージテキスト」のみ不明…)。しかし「Web用に保存」で設定した書き出しの設定は引き継がれませんでした。

ご参考になれば幸いです。


このページはお役に立ちましたでしょうか。よろしければシェアしてください。

このエントリーをはてなブックマークに追加
LINEで送る

NPO法人創業塾OB会定例会で「ホームページの考え方」をプレゼンしました

2012年1月14日に三島市民活動センターで行われた、NPO法人創業塾OB会の定例会に参加しました。15名ほどの方が参加されたかと思います。その席で「ホームページの考え方」というプレゼンをしました。

NPO法人創業塾OB会とは

NPO法人創業塾OB会は、三島商工会議所主催の創業塾(起業支援セミナー)に参加された方が中心となり設立されたNPO法人です。創業者支援と地域活性化を目指して活動されています。私自身は創業塾に参加していませんが、縁あってプレゼンの機会をいただきました。

NPO法人 創業塾OB会の目的は、新たに創業する者もしくは既に創業している者に対して、創業支援や経営支援および経済活動の活性化に関する事業を行い、地域経済に寄与することです。
NPO法人創業塾OB会ホームページより

このページはお役に立ちましたでしょうか。よろしければシェアしてください。

このエントリーをはてなブックマークに追加
LINEで送る

a-blog cmsのサブドメイン拡張ライセンス設定

このサイトはa-blog cmsを利用して構築されています。ブログを増やすにあたり、a-blog cmsのサブドメイン拡張ライセンスの設定をしたので、設定方法をシェアします。

a-blog cmsのサブドメイン拡張ライセンス

a-blog cmsのサブドメイン拡張ライセンスは、「メインでライセンスを登録するドメイン以外で、個々のブログに対して、メインドメインのサブドメインを設定できるライセンス」です。

通常のライセンスは、「hoge.com」など一つのドメインでのみ利用できる形態です。この場合「hoge.com」と「www.hoge.com」や「aaa.hoge.com」は別ドメイン扱いになり、a-blog cmsに登録したものでしか利用できません。サブドメイン拡張ライセンスを導入すると、「hoge.com」も「www.hoge.com」も「aaa.hoge.com」でもa-blog cmsで運用できるようになります。


このページはお役に立ちましたでしょうか。よろしければシェアしてください。

このエントリーをはてなブックマークに追加
LINEで送る

第1回 WordBenchしずおか に参加しました

2011年12月17日に静岡市・静岡県コンベンションアーツセンター グランシップ 906会議室で開催された、第1回 WordBenchしずおか に参加しました。(ブログエントリーが遅くなり申し訳ありません)

プラグインについてグループディスカッション

今回は初回ということもあってか、オススメのプラグイン(機能を追加するミニプログラム)についてのグループディスカッション形式で開催されました。こういったイベントはスクール形式で行われることが多く、おもしろい試みだったと思います。

グループディスカッションは「初級」と「中級〜」の2グループに別れて行われました。私は初級で参加。「お前が初級か?」というツッコミもありましたが、ことプラグインの利用については間違いなく初級です。実はあまり使わないのです(それが必要ないような仕事も多く…)。不動産プラグインなど興味深くどこかで使ってみたいプラグインを紹介していただきました。

プラグインの功罪

印象的だったのは、WordPressにおけるプラグイン文化の根深さです。WordPressにはプラグインが非常に多く存在します。同じような機能でも、数種類のプラグインが複数の開発者から提供されているものもあり、好みのものを選んで使うことができます。

プログラムが苦手なWebデザイナー/コーダーにとって、プラグインで容易に機能が追加できるのはありがたい事です。それを便利と思う反面、プラグインに依存する怖さも感じます。「プラグインでできること」という枠を作ってしまうような気がしてなりません。

WordPressのプラグインに頼らないという選択肢

プラグインと一口に言っても多種多様です。WordPressに深く関連するサーバサイド処理の機能拡張(SEO関連や検索機能など)から、ちょっとした「振る舞い」を制御するもの(モーダルボックスなど)まで多くの種類があります。前者はPHPプログラムやデータベースが求められるものが多いのですが、後者の多くはJavaScriptやjQueryによる実装が比較的容易に可能です。

もちろんWordPress特有の難しさもあります。jQueryにしても、ほかのJavaScriptライブラリーとのコンフリクトを防ぐための仕組みがあり、使用するにはひと工夫必要です。それを差し引いてもWordPressプラグインを利用する以上の便利さがあると感じます。ちょっとしたカスタマイズができると尚更に感じることでしょう。

私自身は、あまりプラグインを利用しないと言いますか、プラグインでなくてもできることはほかの方法で実装する傾向のようです。そういう方法も検討されると幅が広がると思います。このあたりのノウハウはKachibito.netさんの記事に詳しいので参考にされると良いかと思います。

イベントを通して

2011年は静岡でも多くの勉強会が開催された年となりました。この勢いが継続することを期待します。WordBenchしずおかも2回目以降の開催を心待ちにしております。運営のみなさま、おつかれ様でした&ありがとうございました。


このページはお役に立ちましたでしょうか。よろしければシェアしてください。

このエントリーをはてなブックマークに追加
LINEで送る

CSS Nite LP, Disk 20:Webデザイン行く年来る年(Shift5) に参加しました

2011年12月10日に東京・ベルサール神保町 ルーム1-2で開催された、CSS Nite LP, Disk 20:Webデザイン行く年来る年(Shift5)に参加しました。今年は過去2年とは異なり、LP(ロングバージョン)として拡大開催されました。

このイベントはCSS Niteの年末恒例イベントで、その年のWeb制作環境を振り返りつつ来年を展望するものです。公式サイトには下記のようにあります。

マークアップ、アクセシビリティ、ツール、デザイントレンドに加え、スマートフォンの5ジャンルで、今年のWeb制作シーンを振り返ります(RIAは廃止)。
さらに、「地方のWeb制作ビジネス」、「“みんビズ”で変わる!?今後のWeb制作ビジネス」の2セッションを今年のみの企画の企画として追加します。

このページはお役に立ちましたでしょうか。よろしければシェアしてください。

このエントリーをはてなブックマークに追加
LINEで送る

プロフィール

矢部 靖人(hamnaly)

いくつかの制作会社でWeb制作やDTPから営業まで経験し、2010年に独立。現在はhamnaly(ハンナリィ)という屋号で、Web制作を中心に地元企業のWeb活用を応援する事業を模索中。理想は高く現実は厳しく、下請け制作を中心に生きています。Knock! Knock! 主催。

エントリーリスト

カテゴリーリスト

タグ