これからのWebデザインはIllustrator派が増えてくるのでは？ | 5 LOG
個人的に、今はWebデザインはイラレでやります。Photoshopは画像の調整にしか使いません。 これからは、徐々にDesigning in the browserにシフトして、ワイヤー、ラフ、パーツ制作にイラレを使用していくつもりです。 ただ、まだまだデザインカンプの作成が必須となっていて、なかなかシフト出来ないのが現状です。 なぜIllustratorか？ そもそもイラレの方がレイアウトが組みやすい。 これが一番の理由なんですが。。。 いや、これ以外にも、いろいろとあって、 以前は、とにかく画像画像だったパーツ（ナビゲーションとかボタンとか見出しとか）が、CSS3で表現出来るようになり、Webフォントやアイコンフォントが主流になってきて、画像で書き出すパーツが大幅に減った。 さらに、Retina等、解像度の違うディスプレイが登場して、今後も増えてくる事を考えるとSVGの使用も増えてくる
MacRabbit was here
Here hopped MacRabbit. Makers of some damn good software. Apps that shone bright and some that never saw the light. Norbert the magical rabbit was never real, but the magic was. Espresso and CSSEdit acquired by, alive and kicking at Kangacode Fifteen Crazy Years: A Toast to Life What a wild space carrot ride... Thanks for all the memories, lovely people. Signing off, Jan (this guy, also on Twitter
【オリジナル制作】Photoshopでの作業を効率化できるいい感じのJSXスクリプト | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。「とりあえずタイトルに興味を持ったけどいまいちピンとこなかった」という方もいるのではないでしょうか。 ずばり、Photoshopのスクリプト機能を利用して、表題の作業を自動的に処理させるということです。僕みたいな怠け者で楽をしたい人にはぴったり！ 今回主に紹介したいのは自作のスクリプトで、Webに特化した作業を簡単にしてくれます。 ダウンロードはこちら（ダウンロードが開始されます）： https://liginc.co.jp/demo/2012/09/PhotoshopScripts.zip スクリプトを使うには？ まずはスクリプトの使い方について説明していきます。 スクリプトをダウンロードし解凍したら、拡張子が「jsx」のファイルが幾つか入っていると思います。それらを下記のフォルダにコピーし、PCを再起動させます。 Windows：PhotoshopPre
PNG画像をより美しく、より軽量に最適化するテクニック | コリス
先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記：2009/07/27 本エントリには続きがあります。 続：PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop（あるいは他の画
プロレベルでクオリティの高いWEBサイトレイアウト作成Photoshopチュートリアル集:phpspot開発日誌
25 Excellent Photoshop Web Design Layout Tutorials プロレベルでクオリティの高いWEBサイトレイアウト作成Photoshopチュートリアル集。 かなりクオリティが高くて、１つの仕事としてうけちゃったほうがよいぐらいのチュートリアルが沢山です。 本などでこうしたチュートリアル集を買うと千円以上したりしますから、なんとも有り難いですね。 英語で書かれていますが、英語力も同時に向上させちゃえるという意味では本当にいい教材です。 関連エントリ 立体感がうまく出たWEBサイトデザイン作成Photoshopチュートリアル スタイリッシュなWEBレイアウト作成Photoshopチュートリアル フレッシュなPhotoshop用WEBレイアウトチュートリアル２５ 3Dエフェクトを使った綺麗なグラフィックを作るPhotoshopチュートリアル集
細部にこだわったUIエレメントをPhotoshopで作成するポイント
ウェブデザインをワンランクアップさせる、リアリスティックなユーザインターフェイスエレメントをPhotoshopで作成するポイントを紹介します。 Crafting Subtle & Realistic User Interfaces [ad#ad-2] 少し古い記事ですが、現在でも役立つ情報なのでご紹介。 下記は各ポイントを意訳したものです。 オブジェクトを想像する 光沢 vs つや消し 制作に役立つTips リアリティは繊細に オブジェクトを想像する リアリスティックなUIエレメントを設計する時には、そのオブジェクトが実世界でどのように見えるか想像する必要があります。それを実現する一番簡単な方法は、そのオブジェクトをモニターの横からどのように見えるか想像することです。 これは最近のウェブデザインでもよく見かける微妙な凸型のパネルで、その外周には小さいエッジを持っています。光源は上部にあり、
Photoshopのビギナーでもできるディテールにこだわったボタンを作成するチュートリアル
Photoshopの標準機能だけで、グラデーションやレイヤースタイルをつかった美しいボタンを作成するチュートリアルを紹介します。 Photoshop For Beginners: Creating buttons for web part 1 Photoshop For Beginners: Creating buttons for web part 2 [ad#ad-2] 上記、四つのボタンのチュートリアルはPart 1, 2に分かれており、それぞれ二つずつのチュートリアルが掲載されています。 各チュートリアルはPhotoshopのキャプチャ付きなので、英語が苦手な方でもどのようなフローですすめるか理解できると思います。 ボタンはグラデーションやレイヤースタイルといった王道のテクニックだけでなく、ノイズをのせたりライトをくわえたりと細部までしっかり手がはいった作りになっています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
新着記事
商用利用も無料、細部まで美しく作り込まれたUIエレメントが揃ったPSD素材 -Vue UI Kit