[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary
これはもう何年も前から気になってることなのですが。 何故、昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。 私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もないのがずっと気になっています。 私は以前、ファッション雑誌やビジネス誌の組版（MacのInDesignやQuarkXPressを使って印刷用のデータを作る仕事。DTPとも言う）の仕事をしていて、見出しは言うまでもなく、本文の文字詰めが少し甘いだけでもものすごく怒られたものですが、Webデザインの世界ではそういうのはあまり怒られることがないのでしょうか。 私は、見出しやタイトル画像における文字組み
![[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6e22153e1233d79c8da8733fc112f935fe5ee4a/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Ftypographic-1-1.png%3Ffit%3D500%252C250%26ssl%3D1)
Webデザインや配色をサポートする新サービス「Croppy」をリリースしました | Stocker.jp / diary
Webデザイン Webデザインや配色をサポートする新サービス「Croppy」をリリースしました Wednesday, October 26th, 2011 WordCamp KOBE で私の講演をご覧になった方はご存知かと思いますが、Webデザインや配色をサポートする新サービス Croppy（クロッピィ） をようやくリリースしました。 Croppy にアクセスすると、このようなページが見れます。 色々なサイトのパーツが「ヘッダー」や「サイドバー」「ボタン」などカテゴリ毎に並んでおり、ブブンデザインアーカイブ のように見えるかもしれません。 しかし、Croppy は集められたパーツを見るだけではなく「今見ているWebページをブラウザ上で切り抜き、手軽にスクラップできる」のです。 Twitter または Facebook アカウントで Croppy にログインしたあと、気になるデザインのサイト
Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ
色んな Webサイトを見ていると、1px にこだわって作られたキレイなデザインがたくさんあります。私は Photoshop を使っているので、Photoshop のレイヤースタイルを使って、1px の細かい所を作る Tips をまとめてみました。基本的な操作ばかりなので、これから Photoshop で Webデザインをやってみたいなーという人向けの記事です。 色んな素敵なデザインの Webサイトを観察していると、1px の細かいところまでこだわって作られてるデザインってとても多いですよね。1px … Webデザインでは一番小さいサイズ。「神は細部に宿る」という言葉もあるけれど、1px までしっかり作られたグラフィックはとても美しいですね！ 今回は Photoshop を使って、いろんな 1px を作ってみました。とは言っても難しいグラフィックデザインを作るわけではなくて、レイヤースタイル
【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを
2013年3月23日 Photoshop 「少しの手間で大きく変わる、細部にこだわったWebデザインを」で紹介した「わずかな」加工を使ってボタンのデザインをかっこよくしよう！というチュートリアル記事です。前回の記事内にPhotoshopでの作成チュートリアルも載せたかったのですが、あまりにも長くなりそうだったので別記事にする事に。合わせて見てみてください！ ↑私が10年以上利用している会計ソフト！
細部にこだわったUIエレメントをPhotoshopで作成するポイント
ウェブデザインをワンランクアップさせる、リアリスティックなユーザインターフェイスエレメントをPhotoshopで作成するポイントを紹介します。 Crafting Subtle & Realistic User Interfaces [ad#ad-2] 少し古い記事ですが、現在でも役立つ情報なのでご紹介。 下記は各ポイントを意訳したものです。 オブジェクトを想像する 光沢 vs つや消し 制作に役立つTips リアリティは繊細に オブジェクトを想像する リアリスティックなUIエレメントを設計する時には、そのオブジェクトが実世界でどのように見えるか想像する必要があります。それを実現する一番簡単な方法は、そのオブジェクトをモニターの横からどのように見えるか想像することです。 これは最近のウェブデザインでもよく見かける微妙な凸型のパネルで、その外周には小さいエッジを持っています。光源は上部にあり、
覚えて嬉しい＆使って楽しい！B級ショートカット集【Photoshop版】
Photoshopの秋 時短の秋 ひぶたポケモンが進化しておおひぶたポケモンて。セキネです。 みなさんショートカットは好きですか？ぼくはどっちかというと好きです。 そこで、今回は王道ショートカットではなく、知っておくと実は使える／知っていても使うまでいかない／ボタン押した方が早いじゃないかというようなちょっとB級臭のするショートカットや小ネタを紹介します。ちなみにB級かそうでないかは独断と偏見で選んでます。そのへんよろしくお願いします。 目指せ、カンバス以外非表示系男子。 ※Macキーボードでの記載となります。Windowsの方はCommand→Ctrl／option→altへと脳内変換をお願いします。 ※OSやバージョン違いによって差異があるかもしれません。 ツール まずは意外と使いこなせていない人が多いツール切り替えショートカット。 ツールパレットまで移動する時間を省ければ全体で大きな
透過性をウェブデザインに取り入れる方法
CSSや画像などを使用して、透過性をウェブデザインに取り入れる方法をCSS-Tricksから紹介します。 Spectrum Theme どんなウェブデザインでも最終形では基本的に目の錯覚を巧みに利用しています。Photoshopをはじめ他のグラフィック用のアプリケーションで透過性のエフェクトを作成し、フラットな画像として書き出すことができます。 Photoshopで透過性のある画像を作成するには、レイヤーの不透明度、塗りの度合い、ブレンドモードなどで可能です。 Opacity <textarea name="code" class="css" cols="60" rows="5"> transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } </te
WEBデザインをプロっぽく仕上げるPhotoshopのグラデーションファイルの厳選まとめ | 日刊ウェブログ式
フォトショップのグラデーションファイルは作業を早めるのに役立ちますし、テンプレートだと色の参考にもなります。PhotoshopやGIMPの色合いが美しいグラデーションを厳選してまとめました。 追記: 2010/12/04 グラデーション追加/リンク切れチェック Photoshop Gradients Nice photoshop gradient set Download Source Web 2.0 Photoshop gradients Download Source Ultimate Web 2.0 Gradients - FREE Download Download Source 黄金比グラデーション・白銀比グラデーション | DesignWalker Download Source 日本の伝統色グラデーションファイル | DesignWalker Download Source
Photoshop関連まとめ - かちびと.net
Photoshop関連のまとめです。 ブラシやパターン、シェイプ チュートリアルを書いている ブログ、プラグイン、アクション などなどのまとめ、というか 個人的なリンク集です。シェア したいと思ってエントリします。 おそらく抜けてる有益サイトもありそうなので参考程度になさってください。海外サイトが殆どにどうしてもなってしまいますが、殆どは図解入りなので、英語が読めなくてもある程度分かるかと思います。バージョン、ライセンスに関しては表記し切れませんので個々でお確かめ下さい。 配布サイトはフリーをメインにしています。あと、カテゴリ分けはしていますが、結構適当です。 配布サイト ブラシ・シェイプ・パターン ブラシや、カスタムシェイプ、パターンの配布サイト WeGraphics / フリーブラシカテゴリ。11セットほど配布 Brushesdownload / ブラシ配布専門のサイト Gfxfeve
光が超カッコいいPhotoshopのブラシ色々まとめ:phpspot開発日誌
光が超カッコいいPhotoshopのブラシを色々とまとめてみました。 次のような、サイトに入れると迫力満点の光のブラシ集です。 Abstract Brushset X - Free Photoshop Brushes at Brusheezy! Abstract Brushset XI | Qbrushes - Photoshop Brushes ABSTRACT BUTTERFLY BRUSHES Abstract Brushes Vol 2 - Free Photoshop Brushes at Brusheezy! Abstract ps brushes for Photoshop | Qbrushes - Photoshop Brushes BRUSHES PACK 3 CS4 BRUSHES ECOL BRUSHES Exclusive - Galactic Brushes -
商用無料、クレジット表記不要のパターン配布サイト – creamu
すごいサイトを見つけました。 商用無料、クレジット表記不要のパターン配布サイトです。 ↑のようなパターンが、jpgだけでなくpatも配布されています。Photoshopで開けばパターンとして読み込むことができて、継ぎ目なしのパターンになっています。 Terms of Use All royalty free stock icons, clip art, images, brushes, custom shapes, layer styles, layered PSD’s, patterns, textures, themes and other design resources on this website are free for use in both personal and commercial projects. You may freely use them in softw
光のエフェクトが絶妙に上手いサイトデザイン集:phpspot開発日誌
光のエフェクトが絶妙に上手いサイトデザイン集２５。 個人的に、光を使ったサイトが好きなのですが、その使い方が非常に上手く、まとめエントリは色々あるといえど、なかなかいい感じでしたので、ご紹介。 グランジな感じやダークな感じもクールでいいのですが、こうしたデザインも素敵ですね。 是非とも参考に似たようなものを作ってみたいという思いになります。 リンク先は以下より参照してください。パート１〜３まであります。 25 Websites with Lighting Effects Part 3 25 Websites with Lighting Effects Part 2 25 Websites with Lighting Effects 関連エントリ デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集 韓国のすごいデザインサイト集 グラデーションをうまく使って立体感を出したサイトデザ
PNG画像をより美しく、より軽量に最適化するテクニック | コリス
先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記：2009/07/27 本エントリには続きがあります。 続：PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop（あるいは他の画
JPEG画像をより美しく、より軽量に最適化するテクニック
JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。 この8x8ピクセルを利用して、JPEG画像を最適化します。 画質10で作成したサンプル 二つの正方形は同じ大きさ（8x8ピクセル）です。左上のはきれいに見え、右下のは汚く見えると思います。 これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。 保存する際に画像は、8x8ピクセルのブロックに分けられるため
45の光を表現するphotoshopブラシ集[記事紹介]
高速でブックマークして、時間がないからそのままスルーしようとしたんだけど、余りにもクオリティが高いまとめだったのでさらっとご紹介。 光のブラシセットのダウンロード かなり各種photoshopブラシがそろっております。 中でもネタ帳がお勧めする7点をピックアップしてご紹介いたします。 円ライン 光と円のブラシ。 光のコア 中心に集まるような光とライン。 輝く光の粒と欠片 数本のラインを取り巻く光の欠片。 光の胞子 雪と言われたら雪にも見えなく無い。 光が舞うイメージであったり、遠方の町の光などに利用されたりする。 宝石の光 宝石の光に使われそうな光の反射。 光の中心から伸びる光のライン 中心からラインが力強く伸び、優しい光で包んである。 光の炎 まるで炎のような強い光色を乗せる事が出来る。 その他、たくさんありますので、興味のある人は是非とも抑えておくといいかもしれないですね。 45+ B
![45の光を表現するphotoshopブラシ集[記事紹介]](https://cdn-ak-scissors.b.st-hatena.com/image/square/4d9f677e05121b5693fe73bf7249473457a1f8bb/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-26.fc2.com%2Fe%2F0%2F1%2Fe0166%2F200905300000.jpg)
Tutorial Magazine - The Best Photoshop, Illustrator, Flash and Design tutorials on the web
Want your own website or email address? PRO ISP covers all your needs! Place web pages and emails on web hosting with top rated support on the highest quality servers where you can easily: Create as many email addresses as you want at no extra cost Access webmail wherever you are from state of the art webmail client Recover files and databases from backup should the accident occur Choose which PHP
繊細なゴシック柄やオリエンタル柄が美しいシームレスなパターン素材
商用サイトでもフリーで利用できる、繊細なゴシック柄やオリエンタル柄が美しいシームレスなPhotoshopのパターン素材をEmma Alvarezから紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/07/photoshop-scratch.html
http://gerenuk.crazyphoto.org/2009/06/15/714/
Dearps