暑い時こそ肉が食べたい。夏バテとは無縁の肉食系女...子(笑) seki です。 毎日発狂しそうなくらい暑い日々が続きますが、皆様いかがお過ごしでしょうか？ 人間様がこんなに暑さに苦しんでいるというのに、バシャログが涼しい顔（？）をしている...！これはいかん！と、夏らしい記事を書きたくなり、Fireworksに相談。 今回は、海、砂浜、ビーチといった、夏らしいデザインには持って来い！な、「砂」の描き方を、作ったブラシを使ってご紹介、とともに、スタイルデータの配布をしたいと思います。 誰でも作れるストロークの簡単な設定ですが、毎回作るにはちょっと面倒、あると便利な「砂ブラシ」のご紹介です。 ダウンロード タイトルバナーにあるような、木目の素材なんかと相性抜群！です！ まずはコチラのリンクを右クリックで保存してください。（.stl） 保存したら、Fireworksのスタイルより「スタイルを読

今週の木曜日はやはり早く寝て夜中に起き出すかないか！toyama です。金曜日は結構な割合で寝不足な人が多そうですね。 大きな写真イメージの上にキャッチコピーを書いてサイトの目立つところに表示、というデザインは割と多いパターンですが、画像の書き出し圧縮率は毎度悩ましいです。 写真の書き出しは jpg がセオリーですが、キャッチコピーの文字がひどく劣化してしまうことがあります。かといって gif で書き出すには色数が多くてディザでもちょっと辛いし重い！ そんなときは Fireworks さんにおまかせです。さすが web 制作の申し子！ 1. こんな感じの画像があるとします。 写真の上にテキストで文字が置かれています。 2. jpg で書き出してみます。普段はこんなに低画質で書き出すことはないですが、分かりやすく圧縮の品質を 50 にしてみます。 背景の画像はともかく、もう文字のまわりがグニ

メリークリスマスです、toyama です。クリスマスも大切ですが、なにより病院の年末診察がいつまでやっているのかも重要に思える年頃です。 最近存在を知った Fireworks の破線機能をご紹介します。 オブジェクトを用意。 おなじみバシャログのロゴです。 こいつを破線で作ってみます。 ラインだけにします。 グラデーションの塗りをなしにして、ストロークだけに変更します。 ストロークの「ストロークオプション」の「詳細設定」ボタンをクリック。 詳細を設定 でかい設定ボックスが出てきます。 最近までこの存在をないことにして作業していました。ちゃんと見よう！ 「ストロークの編集」として「破線」のプルダウンを設定します。今回は「破線（シングル）」をえらびました。 オン･オフでそれぞれ数値を設定してあげます。オンが線の色がつくサイズ、オフが線の消えるサイズです。 できあがり。 曲線にも破線が適応されて

台風に対する JR の弱さはなんなんでしょう、火属性でもついてんのかしら。toyama です。 相変わらず Fireworks の小技です。 Fireworks でテキストを打って、色やらフォントやら行間を設定して、これと同じスタイルでもう1ブロック書こうと思ったら、テキストブロックそのままコピペしてテキストを上書きするのが人情ってもんですよね。楽だし確実だし。 よくあるのが、[1]みたいな長文のテキストブロックそのままコピペして[2]を書いたら、[2]の文章が思いのほか短くてテキストボックスの端があまってしまったりする状態。 こんなアンバランスな状態でも、整列コマンドなどはテキストの部分だけを見て働いてくれるのでなんら問題ないと思っていたのですが「こういうのキライ！」と社内のデザイナーに言われてしまったので（名前は伏せます）、これを解消する方法をご紹介します。 1. テキストボックスを選

ドットインストール代表のライフハックブログ

ドットインストール代表のライフハックブログ

突然雨がアホみたいに強く降ってきたりして困ります。シーブレインの toyama です。 STOP！熱帯雨林化！ WEB サイトをデザインするときに避けて通れないのが矢印イメージの作成です。 テキストの頭に、ボタンの中にと、使いどころ満載。 普段 toyama がよく作る矢印の作り方をご紹介します。 1. しっぽ付き矢印 正方形を矩形ツールで書いて[修正]→[変形]→[数値を入力して変形]で回転を選択し、45°回転させます。 [数値を入力して変形]はサイズ変更、拡大縮小、回転のダイヤログボックスが一度に表示されてとっても便利です。 ダイレクト選択ツールで頂点のひとつを選択し、Delete で三角形に変形。 最初に書いた正方形が奇数×奇数の場合は三角形の頂点が 1 ピクセルになりますが、偶数×偶数の場合は 2 ピクセルの三角形になります。 パスが切れたままで気持ち悪い人は、ペンツールでパスを閉

例えば Web サイトのリニューアル案件では「ロゴのデータはありません。現サイトで使っている gif 画像を使ってください」というケースがよくあります。 「ロゴを白抜きにしたデザインパターンを作りたいんだけど…」という場合には、ロゴをトレース→パス化して使い勝手の良い素材を用意するのがベストな方法ではありますが、トレースする時間が取れない時は以下の方法がお手軽でオススメです。 使用した画像加工ソフトは Fireworks です。 ↑支給された（というか Web サイトからコピーした）ロゴの例。透明化もされていないし、切り抜くのも面倒。 STEP 1 ロゴ画像をグレースケールで保存します。 STEP 2 グレースケール化したロゴ画像を背景の上に配置。 STEP 3 ロゴ画像を選択して「フィルタ」→「カラー調整」→「カラーの塗り」を設定。 カラーは何色でも良いですが、ブレンドモードは「反転」に

シーブレインでは、Webサイトのデザインをもっぱら Fireworks で行っています。 世の中のWeb制作会社の大半は Fireworks を使っているんじゃないかと思いますが、 それゆえに弊害もあるわけです。 Fireworks にはオブジェクトにテクスチャを簡単につける便利な機能が搭載されていて そのテクスチャ数も充実しているのですが、実際使用頻度が高いのは この辺の「垂直線」とか「水平線」「対角線」。 他の制作会社でも Fireworks を使っているとなると、あーこのサイトのこのパーツは 「対角線1」だなあー、みたいな事態に陥ります。 なので、最近は自分でテクスチャを作っちゃったりします。 作り方は案外簡単です。 [1] ちょっと細かい対角線を作ってみます。 こんな感じで作りたいテクスチャを白と黒でつくります。 繰り返し模様になるので、その辺は考えながら。 [2] png や g