WEBデザインはAdobe Photoshop一択だったのですが、 最近はすっかりAdobe XDにはまってます。 今まで、食わず嫌いでなかなか試すことが出来なかったのですが、 いざ使ってみると、その簡単さに驚愕せざるを得ません。。 パッと長所を上げただけでも ・とっても軽量で使いやすい ・リピートグリッドで繰り返し要素も簡単 ・プレビュー機能で、クライアントや外部プログラマーとの共有も楽々 ・コンポーネント化することで、アートボードをまたがって共通部分の修正も楽々 ・プロトタイプ機能でページの変遷イメージも簡単作成 と、良いことづくめのXD。 使ってみて気になったところは ・画像系の処理はPhotoshopとの併用が必須 ・pngなどのオブジェクトなどの色変更は結構厄介 ・レイヤー効果でやっていたようなことがしづらい といったところでしょうか。 それも、慣れてくれば問題ないかなという感じ
Illustratorのパターンの扱いは、Illustrator CS6以降、劇的に改善されています。しかし、従来からある機能の組み合わせによる、デフォルトのパターンスウォッチの応用についてご紹介します。 「ベーシック」パターンを開く ［スウォッチ］パネルメニューの［スウォッチライブラリを開く］→［パターン］→［ベーシック］のサブメニューには「ベーシック_テクスチャ」「ベーシック_ライン」「ベーシック_点」の3つのライブラリが入っています。 ドットやライン、そして、テクスチャのパターンスウォッチが入っています（パネルメニューでスウォッチの大きさを変更）。 図形を変形せずに、パターンのみ（拡大）縮小する 四角形にラインのパターンを適用します。 ［拡大・縮小］ダイアログボックスを開き、［オブジェクトの変形］オプションをオフにして、［拡大・縮小］を「50%」に設定します。 オブジェクトの大きさは
2015年7月11日、追記。このページ、いまだによくアクセスされているようですが、その全員が「なんだよ2011年の記事かよ、クソが！」と不信感を抱くことと存じます。あらためて確認しますと、CC2015でも通用する内容ですのでクソとかいわずにご一読ください。 本編ここから釣り気味のタイトルですみません。中身も釣りなのでご査収のほどよろしくお願いいたします。さて、この記事↓にリスペクトかつインスパイアされ、勢いで記事投下してみる。 Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ Webデザインをするにあたって、巷ではPhotoshopを使う人が多いようなのだが、ベクターデータの軽快さや自由自在の拡大縮小の便利さもあって、私はIllustratorを使っているため、日頃から虐げられている。ことWebに関しては、Photoshopがたけのこの里なら、Illustra
2017年の追記（CC2017向け） 次の点に留意して作業すればOK。基本的にイラレのピクセル周りの扱いはモリモリ改善されているのでだいぶ楽になった。 次セクション「2016年の追記」との違いだけを列挙する。 変形パネルの「ピクセルグリッドに整合」と「新規オブジェクトをピクセルグリッドに整合」が廃止され、あらたに「コントロール」バーの一番右に「ピクセルのスナップオプション」が追加された。これをオンにする。またその中の詳細項目にも全部チェックをつけておく。 それでも作業中に何かのはずみであるオブジェクトが整数ピクセルじゃない状態になったら、「ピクセルのスナップオプション」の隣にある「選択したアートをピクセルグリッドに整合」ボタンをポチして位置調整する。私は今までコントロールバーは邪魔なので非表示にしていたが今はこのボタンのためだけに表示している（スクリプトでなんとかなりそうな気もするが調べて
繊細なテクスチャ、透明感のあるパネル、充実したフッタ、光源を模したグラデーション、1ピクラインにこだわったディテールなど最近のウェブデザインのトレンドを取り入れた、ウェブサイトのレイアウトを作成するPhotoshopのチュートリアルを紹介します。
Fireworks ショートカットコンボ(追記有) あまりにも放置気味なので何か更新しようかな、ということで、よく使うFireworksのショートカットコンボでも。 >>080912：パスパネルについて追記しました。 最前面のオブジェクトでマスクするショートカットコンボ 例えばこんなん。適当な背景の上にオブジェクトを乗せてマスクする時。 テキストにフチ線がついてるのは白背景だと分かりにくいからつけただけ。とりあえず重ねる。 いくよっ！ 「Alt+M」→「M」→「G」 （「修正」→「マスク」→「マスクとしてグループ化」） さぁ！みんな声を出して覚えて！ (n'∀')η＜オルト エム エム ジー！ 最前面のオブジェクトでマスクの小ネタ え？こんなの誰でも知ってるって？ んじゃ･･･これを合わせて知ってると便利だよ！ 最前面のオブジェクトでマスクする時はオブジェクトを半透明にして合わせる位置を確
Pro Blog Desginのエントリーで、WordPressを利用している際、サーバーへの負荷軽減のために、テーマファイルでよく使用されるテンプレートタグの中から修正・削除した方がいいテンプレートタグというのがありました。 Delete WordPress Tags to Decrease Server Load 配布されているWordPressのテーマファイルのほとんどには、あらゆる環境で簡単に利用できるように「テンプレートタグ」が使用されています。 例：<?php bloginfo('name'); ?>は「ブログの名前」を表示します。 そして、そのテンプレートタグのほとんどはサーバー上で処理されるため、サーバーに負荷がかかります。 サーバー負荷が軽減されると、ページの表示も早くなります。 そこで、テンプレートタグを静的なテキストに書き換えたり(ブログの名前を記述)、不要だったりす
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 サンプルは透過PNG。テキストの上に、透明度36%の矩形を重ねてある。IE6とFirefoxでは見え方が違うことが解るだろうか？ 左がIEで見た場合、右がFirefoxで見た場合。バージョン６までのIEはPNGのアルファチャンネル（半透明）に対応していないので、普通に使うと透過部分が灰色っぽくなり、期待はずれな結果に終わる。IE6でも透過PNGを表示するには、次のように記述する。 #overlay { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./overlay.png", sizi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く