タグ

ブックマーク / blog.fenrir-inc.com (5)

  • Fireworks の “ページ機能” でスライスなどの作業効率が 3.5 倍アップ! (フェンリル | デベロッパーズブログ)

    こんにちは!デザイナーの長谷川(ヒロユキ)です。 僕は Fireworks 大好きっ子なのですが、残念ながらフェンリルのデザイナーは殆ど Illustrator や Photoshop でデザインしているので、今日は僕が Fireworks を手放せない理由のひとつであるページ機能を紹介したいと思います。 ●動的なコンテンツや背景などのスライス書き出しがメッチャ楽 Fireworks CS3 で実装されてしばらく使わずにいたページ機能は今では無くてはならない機能です。 こういうデザインの場合、メニューの背景の画像とボタンの画像をそれぞれスライスしたいのですが、レイヤーのみで管理しているとスライスを重ねるしかなく、必要な画像をスライスする時に他のスライスを非表示にして背景レイヤーを消して…などと非常に面倒です。 ここでページ機能が威力を発揮します。 デザインができたら、ページを複製します。複

    Fireworks の “ページ機能” でスライスなどの作業効率が 3.5 倍アップ! (フェンリル | デベロッパーズブログ)
  • リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)

    こんにちは、イメージ担当の長谷川です。 今回は Apple がデザインしている iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。 アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。 ぜひ Web や UI デザインの参考にしていただければと思います。 1. ベースのテクスチャを設定する まずグラデーションの設定をします。 長方形ツールで作成するボタンなどのサイズより少し大きいサイズの四角を描き、グラデーションの塗りを円錐にします。 以下のように白とグレーを交互に設定します。右端と左端を同じ色にしないとグラデーションに線が出来てしまいますのでご注意ください。 ここでは濃いグレーを #666666、両端の薄いグレーを #999999 に設定しています。 次にノイズを適用量:10で追加します。これが同心円状のヘアラ

    リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)
  • 【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。

    こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード(ヒント付き) こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記: ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--

    【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
  • 高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ

    こんにちは、イメージ担当の長谷川です。 「品質を上げれば速度が落ちるし、速度を上げれば品質が…」 デザイナーにとってはこの品質と速度が非常に悩ましいですよね。 今回は UI や Web デザインのモックアップなどを、品質を保ったままサクっとデザインするときに役立つ Fireworks の拡張機能をご紹介します。 1. 作ったデザインを崩さずにまとめて縮小できる「Smart Resize」 Web ページのデザインデータを使ってスマートフォン用など異なったサイズのデザインを作りたいときなどに最適です。 【使い方】 インストールするとコマンドに「Smart Resize」が追加されます。 サイズ調整をしたいデザインを選択して コマンド> Smart Resize > Attach を選択します。 後は黄色のコントロールポイントでサイズを調整するだけでテキストの改行などデザインを保ったまま自動的

    高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ
  • 【保存版】これを見たら、あなたの財布は確実に緩むであろう素敵すぎるネットショップ 101選

    こんにちわ。坪内です。 突然ですが、この2年ほどで集めた素敵なネットショップを一挙公開しちゃいます。はっきり言って、この記事書いてるだけで、何度もポチリかけたくらい、素敵なアイテムがてんこ盛りです。既に知っているショップも多いと思いますが、知らないショップがあったら是非チェックしてみてください。 ちなみに、数が多すぎて説明文書くのは断念しました。カテゴリ毎には分かれているので、実際にご自身の目で確認してみることをオススメします。

    【保存版】これを見たら、あなたの財布は確実に緩むであろう素敵すぎるネットショップ 101選
    an3n
    an3n 2011/07/29
  • 1