Noise Texture in Photoshop | Design Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanaka
Latest Word » Tutorials » Noise Texture in Photoshop Jul.25.2010 Noise Texture in Photoshop Tags: Beginner, Photoshop I wanted to switch it up this week to do a quick tip on how to create noise (grainy) textures with Photoshop to add subtle detail to your next project. A lot of times I feel that its the small and subtle details that really makes a project shine. Let’s get started. 1. Fill Base Lay
Super Stripes
Supawhat? Stripes are undoubtly very popular graphical element these days. They are used in many ways in web design, mostly as background patterns of various layout parts or block elements. Here is a fresh tip that could save your time. Solid and transparent When i match colors for some web site, i find it very easy if i use one small .GIF image, which has one stripe transparent and others are sol
jmblog.jp - FireworksでWeb2.0デザインしてみる - Part.5
斜線の背景も最近のWebデザインの特徴の一つです。Background Image Maker を使えばカンタンに斜線の背景画像を作ることが出来ます。が、もっと便利でかつ汎用的な斜線の背景画像の作り方が Super Stripes で紹介されていたので試してみました。 まずは Fireworks で 4 x 4 ピクセルの新規ドキュメントを作成します。このままだと編集しにくいので、表示比率を 3200% にしておきます。 ラインツールで 1px の「硬い線」を斜めに引きます。 最適化パネルで書き出すファイル形式を GIF にし、さらに「透明化するカラーの追加」で線のカラーを選択します。 書き出しをすれば画像は完成です。 あとは、css で背景画像と背景色を同時に指定します。
jmblog.jp - FireworksでWeb2.0デザインしてみる - Part.4
今回は、Mac OS X のDashboard っぽいバーを作ってみます。（ちなみに、私は根っからのWindowsユーザーで、Dashboard を触ったことはありません・・・） まず、角の丸みが100%の角丸矩形を描きます。塗りの色は#000000、ストロークは「なし」にしておきます。 描画した矩形をコピー＆ペーストで複製します。（下の図ではわかりやすいように複製したほうの塗りの色を変えています。）元の矩形を「base」、複製したほうを「gradation」とします。 次に「gradation」の大きさを変えておきます。幅と高さをそれぞれ2pxずつ小さくしてください。 矩形ツールで「gradation」の半分の高さの長方形を描き、「gradation」の上辺と揃えます。長方形の塗りの色を#000000、透明度を50%ぐらいにすると、重なり部分が見えるので調整しやすいです。 ここで、Par
jmblog.jp - FireworksでWeb2.0デザインしてみる - Part.3
FireworksでWeb2.0デザインしてみる - Part.3 そろそろネタが尽きてきましたが、第三弾です。今回はバッジに挑戦！ 星型で適当な大きさの星を描きます。 画像を選択すると黄色のポインタが5つ現れると思います。これらのうち、「頂点」というのを動かして頂点の数を24ぐらいにします。さらに、「半径2」も動かして、下の図のようにします。 次は塗りを調整します。「塗りの種類」で[グラデーション]-[線形]を選び、左右の色を調整します。 さらに、グラデーションの方向を縦にします。shiftキーを押しながらだときれいに90度回転させることができます。 ドロップシャドウをかけます。各設定値はキャプチャのとおりです。 完成！これは簡単に出来ました。 ちなみに、PingMag - 東京発 「デザイン＆ものづくり」 マガジン » Archive » ウェブデザインのトレンド：死の宣告にもあるよ
jmblog.jp - FireworksでWeb2.0デザインしてみる - Part.2
FireworksでWeb2.0っぽいデザインを試みるこのコーナー。第二弾はMacのAqua風ボタンを作ってみましょう。 下の図のような感じの角丸矩形（「くけい」って読むのね。）を描きます。角の丸みは20-30%程度。塗りの色は淡い色に、ストローク（線）の色はなしにしておきます。 次に描画した矩形を2回コピー＆ペーストして複製を作ります。（つまり全部で3つが重なっている状態。）便宜上、上から順番に「base」「100% round」「temp」という名前をつけます。下の2つはしばらく使わないのでロックをかけておくとよいでしょう。 一番上の「base」を編集していきます。まず、ストローク（線）の色をつけます。「塗り」よりも濃い目の色にすると見栄えが良いです。（例では塗りの色を#DDFF88、ストロークの色を#99CC00、ストロークの種類は1pxの柔らかい線にしてみました。） 次に「シャドウ
jmblog.jp - FireworksでWeb2.0デザインしてみる - Part.1
先日、勢いで Macromedia Fireworks 8 を購入しました。私はどうも Photoshop や Illustrator が苦手、というか使いこなせません。メニューが豊富すぎてわけがわかんない。が、Fireworks はバージョン2 ぐらいから会社で使っていて、相性がいいのです。 で、せっかく買ったので、Web2.0っぽいデザインにチャレンジしてみました。まずは第一弾。「mirror reflection（反射）」です。 こういうやつ。 反射させたいオブジェクト（A）をコピー＆ペーストで複製（B）します。 複製したオブジェクト（B）を選択して、[修正]-[変形]-[縦反転]で反転させます。 反転させたオブジェクト（B）を元のオブジェクト（A）の下に移動させます。 反転させたオブジェクト（B）を選択して、[コマンド]-[クリエイティブ]-[イメージのフェード]を選び、メニューか
11 Great Resources And Inspirations Of Current Design Trends - SmashingApps.com
SmashingApps.com digital world, life skills, point of views & lifestyle Getting an idea and inspiration is sometimes really hard and when you are planning to start your new web design project and you are curiously finding for a mind blowing web design inspiration so you don’t want to spend too much time and want to get start something as soon as you can. But most of the time, your mouse is not mov
27 Best Places You Should Visit To Get Incredible Web Design Inspiration! - SmashingApps.com
Click here to buy secure, speedy, and reliable Web hosting, Cloud hosting, Agency hosting, VPS hosting, Website builder, Business email, Reach email marketing at 20% discount from our Gold Partner Hostinger You can also read 12 Top Reasons to Choose Hostinger’s Best Web Hosting Where do you go normally when you are planning to start your new web design project and you are curiously finding for a
Twitter Background Design How-To and Best Practices
This post was originally published in 2009 The tips and techniques explained may be outdated. With Twitter quickly becoming the hottest site to be seen on, everyone wants to stand out from the crowd. There has already been a range of quality designs showcased on various sites, which has shown an emergence of trends such as the ‘sidebar’. Let’s take a look at some of the best practices around Twitt
43 Really Useful Photoshop Tutorials For Excellent 3d Effects - SmashingApps.com
Designers love all of those tutorials that can help them to learn more and more everyday and give them direction to design more beautiful and attractive creative works. We know this very well and SmashingApps is all about to feature all those smashing stuffs that are free and useful for designers. Today, we are going to list down 43 Brilliant Photoshop Tutorials For Excellent 3d Effects. We hope y
70 Excellent Logo Design Tutorials and Resources
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for RevenueCloudFX and other key research and development projects at WebFX. An effective logo sets the tone and publ
40 Logo Design Tutorials | Envato Tuts+
Get every type of asset for any type of project, and access to AI tools From $16.50/m
45 Apple-Inspired Photoshop Tutorials — Smashing Magazine
For years, Apple has had a huge impact on designers and graphic artists across the globe. The simplicity and sharpness of the Aqua interface in Mac OS X strongly influenced the way new products were being presented and designed. It’s not only the design of products that makes Apple’s products different, it’s also their appearance on the Web and in print. No other company has managed to come up wit
Plastic Tabs | Photoshop Tutorials | Absolute Cross
In this tutorial you’ll learn to create the smooth clear plastic tab buttons first seen on Apple.com. Over the years plastic tabs like these have become incredibly popular—try using them in a horizontal top menu for your site, along with the sliding doors technique for a great usable menu system. Step 1 Start with a new image about 400x400px with a white background. Create a new layer and using th
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fireworks チュートリアル＆記事
noupe - THE magazine for webworkers and site owners
Free Web Hosting - Your Website need to be migrated
Pegaweb : Photoshop Tutorials
Rounded Edges | Photoshop Tutorials | Absolute Cross