カレンダー

<< April 2018 >>
SunMonTueWedThuFriSat
1234567
891011121314
15161718192021
22232425262728
2930     

comment

記事検索

favorite



にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
にほんブログ村


★Yuu*Style〜フリーランスのあれこれブログ♪

Fireworks オリジナルショートカットキーの作成方法

[ウェブデザイン:Tips]  2014.01.24 Friday
普段、わたしがサイト制作していく時に使用するソフトは、Adobeの

「Photoshop cc」「Fireworks cs6」「Illustrator cc」「Dreamweaver cc」
などで、そのうち画像(写真)のトリミングや細かい補正をする時はPhotoshop。
イラストを作成する時は、Illustrator 。
全体デザインを作成・レイアウトしていく際は、Fireworks。
HTMLタグの打ち込みは、Dreamweaver(もしくは、テキストエディタ)…
っというふうに使用している。

全体デザインをしていく時に使用する、Fireworksは、
画像のサイズ変更などにも利用するので、
わたしにとっては、使用頻度がすご〜く高いソフト。

作業中ショーカットキーは、やはりかかせないけれど、
キーが割り当てられていないコマンドなどは、自分でオリジナルショートカットキーを
作成すると便利♪

『Fireworks cs6 オリジナルショートカットキーの作成』

メニューから「編集」>「キーボードショートカット」を選択。


現在のセットがWeb Standardになっていると思うので、
オリジナルのセットを作成するために、複製します。
メニューコマンドから、作成したいコマンドを選択して、
「+」を押した後に、登録するキーを押します。
(もうすでに割り当てられている場合は、「既に使われています」と警告文が出ます)
OKを押して設定完了です♪

わたしは、頻繁に利用する「カンバスサイズ」に「Ctrl+M」を割り当てました。
大量の写真サイズを変更しなければ、いけない時など、
これがあるのとないのとじゃ、作業のしやすさが格段に違いますグー

*よく使うショートカットキー
Ctrl+s 保存
Ctrl+c コピー
Ctrl+v ペースト
Ctrl+x カット
Ctrl+z 取り消し
Ctrl+j 画像サイズ
Ctrl+Shift+x 画像プレビュー
など…

主要なショートカットキーは、だいたい各ソフト同じです〜


Fireworksレッスンブック Fireworks CS6/CS5/CS4対応 (-)



今日もありがとう♪

 
スポンサーリンク

Photoshop CC新機能:Web用の画像書き出しが楽になりました〜♪

[ウェブデザイン:Tips]  2013.10.18 Friday
今までは、画像を書き出すのには、
デザインした画像を一つ一つスライスして、
「Web用に保存」をしていたのが、この新機能で、格段に楽になったわーい

●手順
・編集>環境設定>プラグインより、Generatorを有効にするにチェック。
・ファイル>生成>画像アセットを選択。
・書き出したいレイヤーの名前の最後に 「.jpg」や「.png」などの拡張子を付けます。(グループなどにも使用可)
・保存をすると、保存先に「-assets」フォルダが作成され、 その中に、自動的にレイヤー名のファイルが作成されます。

とっても簡単で楽チンになりました〜♪

参考:新搭載「Generator(生成)」について

今日もありがとう♪

デザインのカラーで迷ったら〜配色パターンおすすめサイト

[ウェブデザイン:Tips]  2013.10.03 Thursday
ウェブデザインの配色で迷ったら、ジェネレーターなどを利用すると便利♪
色の組み合わせ(配色パターン)を調べたり、参考にしたりとお役たちサイトです。やったv



Color Scheme Designer



Color of Book
本や雑誌の表紙からカラーチャートを作成


わたしがまだ、この仕事を始めたばかりの頃(インターネットが普及し始めた頃)
ウェブカラー、配色パターンを勉強しながらデザインしていました。
今のように、上記のようなツールもなく、本も少なかったけど、
↓このサイトは、いつも見ていました
「Mariのいろえんぴつ」
かなりお世話になりました〜きらきら
今日もありがとう♪

font-family(フォント)指定の見直し

[ウェブデザイン:Tips]  2013.08.23 Friday
あまり普段、意識することが少ない、またはず〜っと同じスタイルを使用している…
ということも多いかもしれないフォントの指定。

機械(OS)の進歩に伴い、たまに見直しするのもよいかも?ニコ

いろんなサイトやブログなどを見てみると、
そのページによって、フォント(文字)がけっこう違って見えたりするのは、このfont-family指定の違いによるもの。

今は、
windowsだと、メイリオ
Macだとヒラギノが綺麗に見えますね(^-^*)
(日本語の場合)

★CSSで指定するfont-family(参考)
font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴProN W3","Hiragino Kaku Gothic ProN","MS Pゴシック",sans-serif;

のように記述するのですが、
フォント名は、左に書いたものから優先的に適用されます。
上記の記述だと、windowsでメイリオが入っていないマシンの場合、
和文はMS Pゴシックになります。(但し、ヒラギノをマシンに入れている場合は、ヒラギノ)
OSによって表示されるフォントが変わってくるので、順番はちょっと考えながらの記述が必要。

欧文フォントと和文フォントの順番も考えます。
和文フォントを先に書くと、英数字(半角)も和文フォントのものが適用。
欧文フォントを先に書くと、英数字(半角)は欧文フォントのものが適用。
(英数字は欧文フォントの方が綺麗かな?)

後は、MacとWinの関係で、
メイリオを先に記入するか、ヒラギノが先かという問題もありますが、
わたしは、とりあえず現在は、上記のように書いています〜

近頃は、Webフォント(機種に依存しないネット上のフォント)もけっこう出てきているけれど、
日本語フォントが利用しやすくなるのは、まだまだこれからかな?

今日もありがとう♪

jQueryプラグイン(レスポンシブ)ピックアップ

[ウェブデザイン:Tips]  2013.08.21 Wednesday
前回、「レスポンシブWebデザインピックアップ」で見る環境によって、表示が崩れないデザインが主流になってきている…と書きましたが、
それに伴い、必須となってきているjQueryプラグイン。

今は、動きもダイナミックになってきていて、FLASHを使用しない魅せるページも増えてきました。

レスポンシブに連動した、jQueryをいくつかピックアップしますサキ


Quicksand
パネル式のデザイン。リストのソートや絞り込みを滑らかにアニメーション。

Sidr
クリック(タップ)でスライドイン表示するメニュー。

Freetile
Pinterest風のグリッドレイアウト。

MeanMenu
簡単レスポンシブメニュー(メディアクエリなし)。

今日もありがとう♪