WordPressブログはじめてみる?

Fireworksの基本的な操作プロパティツールで正確な大きさの四角形を作る方法

地味に便利だが、かなり地味な記事になりそうな予感・・・
何をいまさら…と言われそうだが、地味に便利なFireworksの標準機能。
これはFireworksの基本中の基本だが、web製作にとってかなり重要。

・・・だけど、記事としては一瞬で終わっちゃうので、よーーーーーぉく聞いてくださいね。

Fireworksのプロパティツールを駆使する!

プロパティツールを駆使!?
なんだか難しそうですが。そんなことはない。ただ数字を記入するだけ。
まず500×500pxのキャンバスを作製(サイズは適当)
キャンバスの下(デフォルトの場合)にある「プロパティ」の W、H、X、Y をみてみる。それぞれ下記の意味だ。
横=width(オブジェクトの横幅)
縦=height(オブジェクトの高さ)
X=左上から見た x軸の位置
Y=X=左上から見た y軸の位置

といった具合です。

200×200の四角形を正確な位置に描く

200×200の四角形をキャンパスの左上から100px右、100px下のところに配置したい場合、プロパティのサイズ表記がある場所に数値を入力するだけ。
property-3
property02-2

リアルタイムでプレビューが変更されるので、とんでもない数値を入力してしまった場合はとんでもないところに表示されたりするので、間違いにもすぐに気付けますヽ(´ー`)ノ

まとめ

写真のように数値を入力するだけで1px単位まで間違いのないデザインを作製できるので、複数人のプロジェクトでデザイナーとコーダーが違う場合もトラブルを防げて良いかもしれませんね。
最近1pxがデザインに与える重要性にようやく気づいてきましたので、1px単位で調整できるFireworksのプロパティを使った時は、なんでこんな便利なものに気づかなかったんだ・・・と思ったものです。ずっと表示されてるのに気づかないものですねw
他にも気づいていない方がいたらと思い、共有させていただきました。が、ほとんどの方は知っていますかね〜。かなり基本的なところだからな。。では。

シェアしてくれたらうれしー。
ABOUT US
アバター画像
矢野キチ
フリーランスのWEB屋です。このブログでは「自由に生きる」をテーマに生活の中で思ったことをザクザク書いていきます。身体的特徴としては目が細いので、ゴミがあまり目に入らないので人生得しています。

このサイトで使っているWordPressテーマ
「STORK19」

当ブログはWordPressを使用して作られています。そしてデザインテンプレートはSTORK19を使用しています。

2件のコメント

この間はありがとう~!Photoshop派でしたが、これをよしき君から教えてもらって、Fireworksを使おうって気になりました。これからのFireworks関連の記事も期待してます!

どういたしまして!Fireworksは独学なので、間違いも多いかもしれませんが、また書かせて頂きます!