はてなブックマーク

タイトルまんまですが、Fireworksでテキストボックスの幅をカーソルで伸ばしたり、コマンド「固定の幅を切り替え」の操作を行うと、選択中のテキストのベースラインがずれるという現象が起きます。今回は、そんな場合の直し方をご紹介。 テキストボックスをカーソルで伸ばすと、ずれます。 「コマンド」→「テキスト」から選べる操作「固定の幅を切り替え」は、テキストボックスの幅をテキスト量ぴったりに合わせる事ができる便利なコマンドなのですが、やはり同時に、文字のベースラインが、ずれます。およそ4pxほど。なんで。 バージョン8やCS3では、ずれてなかったと思ったんですけどね。 おそらく、テキストのレンダリングエンジンが変更になった、CS4以降から発生したバグだと思います。 未だに直ってないので、もしかしたら、このずれにはなにか意味があるのかもしれませんが…。（んなわけねー） 直し方 ずれた場合の直し方は

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ Fireworks Lover Advent Calendar 2013の9日目です。みなさん「共有ライブラリ」は使ってますか！？共有ライブラリとは、シンボル化したオブジェクトを共有ライブラリの中に登録しておくことで、別のファイル上でも、いつでも登録したシンボルを呼び出すことができるという、便利なFireworksの機能です。 共有ライブラリには、自分で作成したオブジェクトを登録することも出来ますが、実は、既にデフォルトの状態で、数多くのオブジェクトが登録されています。 アイコンの素材など、初期登録といえど点数もなかなか多いので、「最初から入ってるアイコンの一覧があったらいいのになー。」と思い、折角だったので中身をざ

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ 前回までの記事はこちら。 初めてサイトのデザインをする際の手順と操作（骨組み作成編）その2 前回、ワイヤーフレームを作りましょうという感じで終わりましたが、実際にどういったものを置いていけばよいか、迷ってしまう人もいると思います。なので、今回は、実際にワイヤーフレームに置く要素や項目について、見ていきたいと思います。 下記に、例として、サイト上に配置される項目をざっくりとリストにしてみましたので、眺めてみましょう！ サイト上の項目リスト例 ヘッダー サイトタイトル/ロゴ プライマリナビゲーション ※1 グローバルナビゲーション ※2 検索窓 文字サイズ変更 言語変更 コンテンツ タイトル 見出し 更新日 SNSボタン

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ AdobeからFireworksの新規開発の終了が発表されました。このニュースを受け、国内でも海外でも大きな騒ぎとなっておりますね。現行のCS6を最終とし、今後のCreative Cloudへの移行や、メジャーアップデートは行わない予定とのことです。が…まだ慌てるような時間じゃないですよ！ ただ、感想だけ言わせて戴きますと、 だいぶショック受けてます。 こ、これが悲しまずにいられましょうか。 Adobe、Web画像ツール「Fireworks」終了へ といってもまだまだFireworksは活躍するかと ただ、開発終了とはいっても、現行バージョンのバグフィックスやセキュリティ改善、新しいOSヘの対応などは継続して対応して

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ Fireworksを使っていると、動作が重くなったりした時に警告で「内部エラーです」なんて言われて操作不能となり、泣く泣く強制終了させられる場合があります。その時はFireworksを再起動すれば直るのですが、とある状況になると、起動した毎にその警告が出て、何度起動し直しても一切操作できなくなってしまうんです！そんな時の解決法です。 ちょっと前に実際に起こったので、簡単にまとめておきたいと思います。 Fireworksが全く起動できなくなる主な原因 フォントが不具合を起こしている 環境設定ファイルが破損している フォントが不具合を起こしている 1のフォントの不具合については、該当のフォントファイルを削除することで解決

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ Fireworks Lover Advent Calendar 2012の17日目です。Fireworks使いで有名な方々による素敵な記事がてんこもりなので、こいつは要チェックですよッ！ 17日目は、あまり使われてないような気がするようなしないような気がしないでもない、ホットスポットの使い方です！ 実際にボタンにリンクを貼ったりする作業は、htmlコーディングの際に行うものです。が、例えばクライアントにサイトイメージを見せる場合、各ページデザインの静止画を何枚も見せるだけでなく、実際のサイトのようにブラウザ上でページ間を移動できたら、よりサイトの完成イメージが湧きやすいですよね。Fireworksの機能を使うと、簡易

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ Fireworksの「パスパネル」を使うと、パスに関するほとんどの操作をワンクリックで行うことができます。そんな中にある「パスの操作」の項目に、オブジェクトをユニークな形に編集できる機能があるので、その使い方と効果をご紹介します！ ※Fireworks CS3以前のバージョンだと、今回ご紹介する項目は無いかと思いますのでご了承下さい。 パスの押し出し パスをなんか押し出すというか、立体的な形にしてくれます。適用の際には、「間隔」「角度」「テイバー」「ツイスト」のつまみを調整することで様々な形にすることが可能です。それぞれのつまみの効果は、たぶん説明するより触ってプレビューされるのを見た方がてっとり早いかと思います。（

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ Fireworksには、Photoshopでいう「アクション」と同様の機能として、「コマンド」という機能が搭載されています。この機能を利用すると、ある一連の操作を記憶しておき、いつでも呼び出してオブジェクトに対して実行する事ができるので、大変効率アップに繋がります。それでは、使い方についてご紹介します！ 一連の操作を「コマンド」として記録する まず、Photoshopの場合ですと「記録を開始」→「記録を中止」→「アクションを保存」といった流れで操作の記録を行いますが、Fireworksの「コマンド」には「記録を開始」に相当する操作はありません。 ちなみに、コマンドの記録には「ヒストリーパネル」を使います。 コマンドを

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ 以前、当サイトでもご紹介した無料の音楽ラジオサイト「Jango」。そのiPhone/Android版のアプリは長らく海外版のみで、日本ではダウンロードすら出来なかったのですが、遂にこの度、日本対応版がリリースされました！早速ご紹介します！ 前回の記事はこちら。 無料音楽ラジオサイト「Jango」の使い方について 「Jango Radio Mobile」をダウンロード まずはAppStore（Androidマーケット）より、アプリをダウンロードします。無料でございます。 Jango Radio Mobile （AppStore） アカウント情報入力 ダウンロードが完了し、アプリを起動したら、自分の持っているJangoの

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ コピーやペーストなど、よく使う操作はショートカットキーを使うことで、非常に効率が上がります。ただ、中にはそもそもショートカットキーが割り当てられていない操作もあります。Fireworksでは、ほぼ全ての操作に対し、ショートカットキーを設定出来るので、ぜひショートカットの設定を覚えてみましょう。簡単ですよ！ はじめにショートカットセットを作成する まずはメニューの「Fireworks」→「キーボードショートカット」に進みます。 デフォルトで用意されているセットは編集できないため、「セットを複製」を選び、編集可能な新しいセットを作成します。 ショートカットキーの設定を行う 次に、ショートカットキーを割り当てたい項目を選択

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ Fireworks CS6が発売されて1ヶ月が過ぎましたが、未だに購入を迷っている人も多いのではないでしょうか。さて、今回はCS6の機能「CSSプロパティ」パネルの使い方について簡単にご紹介します！（正確にはCS6からの新機能ではないですが…）未だCS6購入を迷っている方も、ご参考にどうぞ！ 「CSSプロパティ」パネルの使い方 CSSプロパティパネルを使うと、その名の通り、選択したオブジェクトのCSSプロパティを表示したり、CSSのコードを確認・コピーすることが出来ます。 つまり、Fireworks上で自分が作ったボタンなどを選択し、「CSSプロパティ」パネルで表示されたコードをコピーし、html（CSSファイル）に

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ 既にほかのブログ様で既にご紹介されたりもしてますが、カンバス上にコーディングをする上で便利な情報を表示してくれるFireworksの拡張機能「Specctr」が、評判通り、いやそれ以上に便利だったのでご紹介します。コーディングを効率化できることは間違いないかと。無料版もあるのでぜひお試しあれ！ まずはSpecctrの公式サイトから拡張機能をダウンロードしましょう。（無料版でもメールアドレスの入力が必要です） Specctr ダウンロードできるのは3種類 Specctr Pro 有料（$49）。Specctrの全ての機能が使えます。 Specctr TRIAL 無料。機能はProと同等。ただし利用できるのは試用期間（1

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ Fireworksでテキストや図形の大きさを変える場合、プロパティから数値を入力する以外に、「拡大・縮小ツール」等でキャンバス上でドラッグし、大きさを変更する事もできます。その際、テキストを他オブジェクトと一緒に選択していたり、変形後の図形に角丸を付けようとすると表示がおかしくなる場合があるので注意が必要です。 ※Twitterにて、テキストの現象の対処法についてご質問を受けました。ついでに角丸部分の直し方も合わせ、情報共有のため記事にしておきます！ まずはテキストの文字サイズがおかしくなる場合の、実証と対処法です。 テキストを選択し「拡大・縮小ツール」で縮小する この場合、何も問題なくテキストを小さくできますよね。

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ FireworksをCS5にしてから「メモリ不足」と画面に表示される事が度々起こります。メモリもそこそこ積んでるのになぜ…？CS3の時は全然起こらなかったのに…。そんなFireworksのメモリ不足現象の対処法についてご説明します。 なんといっても、最悪の場合、作業したデータが飛んでしまうので恐ろしいです。 1.一応、アップデートで修正されてるのでアップデートする まずはじめに、Fireworks CS5.1のアップデートでメモリ不足問題の改善（ver 11.0.2〜）がされていますので、アップデートをしてない人はまずそれを完了させておきましょう。 ただアップデートしても、実際毎日使っている身としては、まだまだ頻発す

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ FireworksをCS5にしてから、画像を書き出すとファイル名のおしりに「_s1」や「_s2」といった接尾辞が毎回付いてしまい、困ってました。そんな時の対処法および、書き出し時のスライス名のルールを設定する方法をご説明します。 下記と通り、たとえWebレイヤーにスライス名を指定していても、書き出し後のファイル名にステートの晩後が付いてきてしまいます。CS3を使ってた時はならなかったんですけど…。 対処法 スライス名の付け方を設定できる項目があるので、そこで設定を変更します。 「ファイル」→「HTMLの設定」→「ドキュメントの詳細」に進み、スライス時のファイル名の付け方ルールを変更します。 ステート番号をファイル名に

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ 引き続き、Fireworksに用意されているツールの使い方・説明について簡単にまとめていきます！これを読めば、初心者の人でもFireworksの操作で出来ることがなんとなく分かりますよ！ 関連記事はこちら。 「選択系ツール」の使い方と出来ること 「ビットマップ系ツール」の使い方と出来ること 「ベクター系ツール」の使い方と出来ること 「Web系ツール」の使い方と出来ること 「画面表示系ツール」の使い方と出来ること 今回はツールパネルの下段の所にある、「カラー系ツール」についてご紹介します。 スポイトツール バケツツール グラデーションツール 線のカラー／塗りのカラー デフォルトのストロークと塗りのカラー ストロークと塗

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ Fireworksでデザイン作業を行なっている時はいいんですが、いざhtmlコーディングをした時にたまに起こるのが、デザイン上で見た時と、htmlにしてブラウザ上で見た時の、若干の表示の違い。例えばサイズが思っていたよりも大きく出てしまい、本当は3行でキレイに収めるたかったのに、4行目まで文章が続いてしまっていた時の絶望感といったらありません。 そんな時に、というわけではありませんが、CSSでフォントサイズの調整行う時って「あれ？デザイン上でこの大きさだった場合、font-sizeを○%（○em）にしたらいいんだ？」と手が止まる事がありませんか。ありますよね。そんな時に役立つのが「PXtoEM.com」です！ PXt

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ Fireworksを使って、写真に映っている人物を切り抜いて、色々な用途に使えるようにしてみましょう！Fireworksでどのように人物の切り抜きを行なっていくのか、その手順についてご説明いたします！ 人物に沿ってパスを作成する 「ペンツール」を使って、写真の人物をなぞったパスを作成します。下記の写真の場合、両腕の内側の領域のパスも取っておく必要がありますね。切り抜き作業は、一番最初のこの作業が、最も面倒くさいです。 ちなみに、アンカーポイントが少ないほど美しいパスと言われる場合もありますが、特に気にせずパパパッとパスを作成しちゃいましょう。慣れないうちは、時間をかけないのが一番です。目的はパスを作る事ではないので！

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ 今回はFireworksで歯車のパーツを作成する手順についてご紹介します！Illustratorでは歯車作成にうってつけの機能とかがあったりしますが、残念ながらFireworksにはありませんので（ちくしょー！）Fireworksらしい作り方でパパッといきたいと思います。慣れればIllustratorより速い！ 楕円ツールで円形を作成 はじめに、楕円ツールを使い円形を作成します。あまり小さくなり過ぎないように、そこそこの大きさで作りましょう。小さく使いたい場合は、完成後に縮小すれば大丈夫です。 星型ツールでウニ型の図形を作成 いきなりですが、ここが一番のポイントとなる工程です。星型ツールでウニ型（下記のようにトゲトゲ

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ 複数人で作業を行う場合、データのやりとり上で「フォントが無い問題」は、必ずといっていいほど起こります。自分が持っていないフォントを使われたデータを受け取った場合、中身を扱えばよいのか。その基本的な部分についてご紹介します！ ファイルを開く際の「外観を保持」 Fireworksでpngファイルを開く際、自分のPCに入っていないフォントがファイル内で使われている場合、下記のような警告ダイアログが出てきます。 「外観を保持」を選ぶと、とりあえず対応するフォントがPCに入っていなくても元のフォントの形として表示されます。（他のソフトだと中々こうはいかない…！） ただし、外観が保持されたテキストは、編集しようとダブルクリックす

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ Webデザインを行うことで最も大事なことに一つに、配色があります。配色といってもなかなかどの色を使ったらよいのか悩むところですが、Fireworksに最初から付いている「Adobe kuler」というサービスのエクステンションを使えば、豊富な配色テーマを使う事が出来ます。 「kuler」（クーラー）は元々オンライン上にあるサービスです。それをFireworksの一パネルに読み込んで使っちゃうわけです。 kuler では、「kuler」（クーラー）の使い方についてご説明します。非常に簡単です。 「kuler」のエクステンションを表示する まずはkulerのエクステンションのパネルをFireworks上で表示させます。「

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ Fireworksでボタンなどの画像を書き出す際、背景を透明にしたい場合があると思います。今回はそんな「透過gif（透過png）」を作成するための手順をご説明しまです。Fireworksを使えば、いとも簡単に透過画像を作成することが出来ますよ！ 前提として、透過させる事ができるのはgifまたはpng形式のみです。jpg形式で書きだす際は透過を行う事はできませんのでご注意を。 では、まず透過させる元の画像を作成します。今回は、下記の矢印ボタンを例に進めていきます。 オブジェクトをスライスする 最初に、作成したオブジェクト（今回の場合は矢印ボタン）を、スライスツールを使ってスライスします。その際、今回は下地の背景色を白色

「Fireworksにはどんなツールが用意されてるの？そして、それらのツールの使い方は？」といった疑問を解決すべく、Fireworksに用意されているツールの使い方・説明について一通りまとめてみました。これを読めば、初心者の人でもFireworksの操作で出来ることがなんとなく分かりますよ！ 「選択系ツール」の使い方と出来ること 「ビットマップ系ツール」の使い方と出来ること 「ベクター系ツール」の使い方と出来ること 「Web系ツール」の使い方と出来ること 「カラー系ツール」の使い方と出来ること 「表示画面系ツール」の使い方と出来ること

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ Fireworksで違うページのデザインや、マウスオーバー時の画像を作成する際は、別の「ステート」や「ページ」に分けて作成するかと思います。ただ、ステートをいくつも作った後で、全ステートに共通している部分（サイトの外枠部分など）に修正が入ったりすると、全ステートを直すのは非常に面倒です。そんな時はこの機能を使いましょう！ レイヤーを共有する Fireworksには、指定したレイヤーの内容を、全ステート（またはページ）で共有させる機能があります。この機能を使う事で、どれか一つのステートの内容を修正するだけで、他の全てのステートにも修正内容が反映されます。これはかなり便利です。 やり方は非常に簡単です。 共有化させたいレ

管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ 今回は、Fireworksを使って実際にコンテンツの一部をデザインする際、どのような過程で制作を行なうのか、その流れをまとめてみました。「まず何から手を付けて、最終的にどう完成させればよいのかわからない…」という方の参考になれば幸いです。 それでは2つの例を元に、ご紹介していきたいと思います。 1-1 「休日におすすめな施設の紹介」の作成 とりあえず見出し、小見出し、本文、リンク文を配置しました。家族で出掛けようというような内容が書いてありますが、このままでは、イマイチ楽しい雰囲気が伝わってきませんし、どんなものなのかイメージも湧きにくいですね。 1-2 要素内のレイアウトを決めていく では、もう少し楽しい雰囲気が出