Build Me A Fab Website » Photoshop

1,000 Free Floral Photoshop Brushes

RSSFeed — Wed, 20 Jan 2010 16:22:03 +0000

Floral and Ornate patterns are very popular in the design world, their vintage yet elegant and modern feel makes them perfect to use for so many different projects.

To make your life easier, we’ve collected over 60 brush sets, in total including over 1,000 single brushes! What are you favorites sets? We’d love to know!

Flower Petals by Brush This (12 Brushes)

Floral Brushes by SummerAIR (9 Brushes)

Floral Brushes 2 by Yana Stock (20 Brushes)

Floral Brushes by Hawksmont (9 Brushes)

Flower Brushes by Xnienke (5 Brushes)

Flower Brushes by Danny Hinde (12 Brushes)

Ultra Leaf Brushes by Snap 2 Objects (32 Brushes)

Garden Plants by Photoshop Free Brushes (12 Brushes)

Abstract Flowers by Web Designer Lab (10 Brushes)

Floral Deco Brushes 2 by Ro-Stock (20 Brushes)

Flower Brushes by Cozy Comfy Couch (8 Brushes)

Only Lonely by Desperate Deceit (87 Brushes)

Artistic Floral by Hottiee (6 Brushes)

In Bloom by Sleep Walker Fish (19 Brushes)

Floral Brushes by Miss Fairy Taled (2 Brushes)

Floral Brushes by Soul DJ (12 Brushes)

Brushes Pack 1 by Atenaispd (15 Brushes)

Grunge and Smooth Floral Brushes by Keep Waiting (67 Brushes)

Floral Swirl Brushes by Aka Joe (20 Brushes)

Floral Ornaments by Lileya (16 Brushes)

Floral Photoshop Brushes by Lileya (5 Brushes)

Floral Brushes Pack 1 by Elena Sham (14 Brushes)

Floral Brushes by Murderdoll (10 Brushes)

Floral Brushes by Solenero (9 Brushes)

Suddenly Spring by Gvalkyie (10 Brushes)

Sleepless by Sleepwalker Fish (20 Brushes)

Trad Oriental Flower Brushes by Photoshop Addict (10 Brushes)

Floral Brushes by GM Para (5 Brushes)

Floral Deco Brushes by Ro Stock (19 Brushes)

Floral Swirls by Szuia (12 Brushes)

Fantasy Floral Brushes 1 by Graphic Identity (4 Brushes)

Fantasy Floral Brushes 2 by Graphic Identity (3 Brushes)

Fantasy Floral Brushes 3 by Graphic Identity (3 Brushes)

Fantasy Floral Brushes 4 by Graphic Identity (3 Brushes)

Fantasy Floral Brushes 5 by Graphic Identity (3 Brushes)

Flower Brushes by Redhead Stock (29 Brushes)

Flower Brush Set 1 by Gvalkyrie (20 Brushes)

Flower Frames by Generosa (5 Brushes)

Flower Sketches Brushes by Redhead Stock (36 Brushes)

Flower Brushes by Man Upstairs (15 Brushes)

Hand-Drawn Ornaments by Bianca Yvonne (7 Brushes)

February Swirls by Pixels & Ice Cream (11 Brushes)

Hand Drawn Floral Patterns by Room122 (8 Brushes)

Vintage Floral Illustration by Streetcar Circus (14 Brushes)

Flowers First by Pixels & Ice Cream (5 Brushes)

Leaves and Foliage by Obsidian Dawn (36 Brushes)

Paisley Brush by Obsidian Dawn (37 Brushes)

Flowers and Petals by Diego Botello (22 Brushes)

Flower Prints by Lonely Lass (5 Brushes)

Messy Flora by Angelina Resource (20 Brushes)

Jakandara by Lady Oscar (17 Brushes)

Flowers Mega Pack by Hawks Mont (28 Brushes)

Barbarja Floral 01 by Barbarja (15 Brushes)

Nature Brushes by Confused Stock (10 Brushes)

Floral Deco by Petticoat Row (72 Brushes)

Curly Floral by Aramisdream (3 Brushes)

Swirls and Flowers by Coby17 (15 Brushes)

Vector Flowers by Yasny Chan (19 Brushes)

Floral Brush 2 by Barbarja (13 Brushes)

Fantasy Floral by Graphic Identity (4 Brushes)

Floral Brushes by Rawox (11 Brushes)

Florals Brush by Melemel (27 Brushes)

This post was generated by an RSS Feed from PSDTutsYou may also like to read:

1,000 Free Floral Photoshop Brushes is a post from: Build Me A Fab Website

The Best Photoshop Tutorials of 2009

RSSFeed — Sat, 16 Jan 2010 12:59:30 +0000

With every year comes a large wave of great art, new techniques, and new artists on the scene, and this year was no different. In 2009 a lot of new trends emerged and a lot of new tutorials were made to show how to create awesome artwork.

So this roundup focuses on the fifteen best tutorials that were given to us in 2009. Five of these tutorials are the best of Psdtuts+, and the other ten are from other sources around the net. So lets check these amazing tutorials out and hope 2010 will be filled with even better ones.

Best Psdtuts+ Photoshop Tutorials for 2009

The Making of “Constant Slip”

Wojciech Pijecki made a great visual piece using a simple 3D render and some amazing use of blending techniques. The final product is visually exciting, and the tutorial gives more guidance than procedural command to create this type of illustration. So this great tutorial is one of the best featured this year.

Visit Tutorial
Create a Funky Perspective of a Model Riding Digital Volume

Here we have another amazing photo manipulation tutorial that boasts a great final product. Marcel Pirosca shows us in great detail how to prepare the images and then shows unique ways of introducing different elements onto the illustration. The also featured instruction on how to create 3D shapes, which was a very big trend in this years tutorials. So this is another great tutorial featured on Psdtuts+ that everyone should have a second look at.

Visit Tutorial
Create a Steam Powered Typographic Treatment

Alex Beltechi delivers one of the best if not the best typographic tutorial we have seen this year. The sheer amount of detail in this typographic illustration is stunning and once again the result looks amazing. This is a difficult technique to master, but Alex gives you all the necessary knowledge to create your own steam punk typography. The popular mix of 3D and 2D objects is used in this illustration and it is explained in great detail in this tutorial.

Visit Tutorial
How to Turn Humdrum Photos into Cinematic Portraits

The next tutorial on our list shows how to take a standard stock photograph and add some drama and cinematic effect to it. The reason this tutorial is featured on the list is the dramatic before and after of the average photograph, the amount of detail added is stunning, and the transition from boring to dramatic is fantastic. The fact that it only requires some simple techniques makes it all that better. Some simple restoration, addition of stocks, and a few adjustment layers can really touch up a dull photo.

Visit Tutorial
Create Destructive Black and White Lettering with a Dramatic Splash Effect

Our last tutorial featured in the top five from Psdtuts in 2009 is another fantastic typography tutorial, this one was created by Wojciech Pijecki. Influenced by black and white artwork Wojciech took to creating a variation of a very popular style of typography. This destructive lettering technique was achieved in a crafty way by taking paint stocks and manipulating them onto the regular text. This great idea led to adding some scenery to the back to make everything blend together making for a great piece of art in the end.

Visit Tutorial

Best Tutorials from the Web for 2009

Explore and Combine New Textures

Now we are onto the best tutorials of the rest of the web, and kicking it off is a amazing tutorial that shows how manipulating textures can bring some great results to your art. The tutorial gives a simple explanation on how to get a certain look by mixing different textures with other simple techniques, such as the Burn tool, or Layer adjustments.

Visit Download Site
Transform Your Doodles into Art

Our next best tutorial of the year focuses on taking your drawings, or doodles and incorporating them into your photo manipulation art. Craig Shields gives us a phenomenal looking final product and the necessary tools to create something similar to that. All you need is a nice stock to start out with, then the rest of the items you will be using will come directly from you. Draw up some of your own work, scan them onto the computer, and see how you can incorporate them into your work.

Visit Download Site
Creating a Super Detailed Illustration

The title says it all for this one, the tutorial shows you how to create your own amazingly detailed scene with Photoshop and your drawing abilities. Now this is kind of a waste if you cant draw at all. For those who are handy with a pencil though can take some of your drawings and follow this great tutorial that shows you how to bring a simple drawing to life and add some amazing detail onto it.

Visit Download Site
Create A Glossy Volt Icon

Our next tutorial featured is probably one of the best icon tutorials featured this year. The final result looks very appealing with a nice glossy finish, and the great part is that all this could be achieved in Photoshop. What’s even better than that is that this can be applied to any other type of icon. The base structure is decided by you, whether you choose to make it a lightning bolt or something else its up to you. The tutorial doesn’t go into heavy detail because it doesn’t need to, as very simple techniques are used to create this cool icon.

Visit Download Site
Create Frozen Liquid Effects

Our next tutorial is another submission from ComputerArts. This great tutorial focuses on showing you how to manipulate an image to give it the look of it being frozen. The creator of this tutorial discovered this technique when he was pressed for time and needed to use Photoshop instead of a 3D alternative. This tutorial show you how to get the frozen look down. So everyone should check this out and maybe with a twist or two you can develop something new yourself.

Visit Download Site
Create Mile-High Type Art

This tutorial is another great typographic tutorial featured this year. The tutorial shows you how to create 3D text and then incorporate it with great photo manipulation techniques. Once again the techniques used are fairly easy but will take some practice to master.

Visit Download Site
Bamboo Tablet Icon Tutorial

For those who wish to learn how to create icons of objects, this is the perfect tutorial to show you. The techniques learned here can be applied to create a realistic icon of pretty much any object you can find. The detail incorporated in the making of this icon is stunning and the tutorial is as thorough as it can get. There are ten pages of steps. Learn to make realistic icons with this tutorial.

Visit Download Site
3D Text Shatter Effect

This typographic piece is made by creating text in C4D and then adding the final touches in Photoshop. The result looks great and can be manipulated to the designers needs to create something even better. Learn both the details of creating the 3D shatter effects and then polishing in Photoshop.

Visit Article
Create A Slow Motion Bullet Shot Effect

This is one of the best tutorials featured in this roundup because of the
craftiness of the designer, and hopefully some of that crafty nature rubs off on the readers who try to create this effect. The resourcefulness of the designer led the artist to take a picture of a simple intact remote and with a little bit of Photoshop magic, shatter it with a bullet. The tutorial is also very detailed and should be read by everyone.

Visit Article
Iphone Gift Ribbon Tutorial

Our last tutorial is a great rendition of Apples marketing ad for the iPhone. This tutorial shows you how to take a picture of an iPhone and gift wrap it with little icons. The tutorial isn’t detailed, but the result looks great and it can be applied to a lot of other designs with a bit of ingenuity.

Visit Article

This post was generated by an RSS Feed from PSDTutsYou may also like to read:

The Best Photoshop Tutorials of 2009 is a post from: Build Me A Fab Website

How to Create an Envelope Icon in Photoshop

RSSFeed — Mon, 28 Dec 2009 22:49:59 +0000

In this tutorial, you’ll go through easy steps for creating a nice envelope icon. There’s a light use of the Pen Tool in the tutorial, but most of it uses Selection Tools to create this icon. The stamp is also explained in a simple manner. I am sure you’ll get familiar with some useful techniques as you go through!

Final Image Preview

Take a look at the icon we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.

Tutorial Details

Program: Photoshop and newer
Difficulty: Basic
Estimated Completion Time: 25-45 minutes

Step 1

Create a new 512 pixel by 512 pixel document with either a white or transparent background. Since the envelope is going to be white, it’d be helpful to fill the background (Alt + BackSpace) with a shade of gray (9D9D9D). Drag a horizontal and a vertical guide at the center of the canvas for convenience.

You need to press Command + R to reveal rulers bar (if it’s hidden) from where you can grab guides.

Step 2

Create a new layer set named “envelope.” Select the Rectangular Marquee Tool (M) and on a new layer, fill a selection with white as shown. Name this layer as “body.”

Step 3

Double-click the new layer thumbnail in the layers palette and give it a Gradient Overlay.

Step 4

Create a new layer and name it “pattern.” Using the Rectangular Marquee Tool, fill selections alternately with the colors: #6092BD and #E8414. Make sure that the distance between all the sections is the same.

Step 5

Move the pattern towards the left so that it touches the end of the envelope’s body. Go to Edit > Transform > Skew and skew the pattern downward from its right end. Move it a few pixels up and remove the part that flows outside the envelope’s body using the Eraser Tool (E).

Step 6

Create a new layer and name it “shade.” Command-click on the “body” layer and stretch a black to white gradient as shown. Set the layer mode of the layer to Multiply and reduce its Opacity to 30%.

Step 7

You now need to put a similar pattern and shade on the opposite side of the body. To do so, first duplicate the “pattern” layer (Command + J). With the duplicate layer selected, go to Edit > Transform > Flip Horizontal and move it exactly to the right edge of the body. Do the same for the “shade” layer.

Step 8

Select Pen Tool and make a shape like one below. Name the shape layer as “lower.”

You can use further guides for exact alignment.

Step 9

Give the “lower” layer the following layer styles.

Step 10

Make a copy of the “pattern” layer (the one on left) and place the duplicate layer above the “lower” layer in the layers palette. Go to Edit > Transform > Rotate 90deg CCW. Move the pattern layer to the position shown.

Clear the extreme two incomplete sections of the pattern using the Eraser Tool (E). There’s room for one complete section in the pattern below. Select the Polygonal Lasso Tool (L) and make a selection covering one of the blue parts of the pattern. Right-click on it and select “Layer via copy” from the menu. Move it rightward so that you get a desirable result.

Step 11

Command-click on the “lower” layer, and on a new layer stretch a black to white gradient as you did in Step 6. The only difference is that this time, you stretch the gradient vertically up. After that, change the Blending Mode of the layer to Multiply and reduce its Opacity to 50%.

Step 12

Create a new layer and place it under the “lower” layer in the layers palette. Command-click on the “lower” layer and fill the selection with black on the new layer. Press Command + T and increase its height to 102%. Now go to Filter > Blur > Gaussian Blur, type 0.7px and click OK. Reduce its Opacity to 40% and clear out its portion that flows outside the envelope’s body.

Step 13

Using the Pen Tool, make another shape like the one below and name it “upper.”

Step 14

Give these layer styles to the “upper” layer.

Step 15

Just like you added shade and shadow to the “lower” layer in Step 11 and Step 12, do the same for the “upper” layer. However, you should make these changes.

While repeating Step 11, reduce the Opacity to 10%. While repeating Step 12, increase the height to 103%, apply a Gaussian Blur of 1.2px and reduce the Opacity to 70%.

You’ll have something like this by now.

Step 16

It’s time to add a shadow at the bottom of the envelope. To do so, create a new layer and place it below all the layers constituting the envelope. Fill a rectangular selection with black on it. Apply Filter > Blur > Gaussian Blur and then Filter > Blur > Motion Blur. Finally, reduce the Opacity of the shadow to 75%.

The envelope is done. Now you can add a stamp to it. You can find a lot of them on the web, but if you want to make a custom stamp, then follow these steps.

Step 17

Create a new 180 pixel by 180 pixel document with a white background. Select the Ellipse Tool (U) and make a circle of any color. Reduce the fill of the shape layer to 0% and give it a red stroke.

Step 18

Duplicate the shape layer and reduce its size to half.

Step 19

Click on “Vector mask thumbnail” of the smaller circle in the layers palette to reveal its path. Select the Type Tool (T) and move the cursor over the path. As the cursor changes, click and write whatever you want. If you want to increase the space between the text and the inner circle’s stroke, simply increase the size of the text using Command + T. You need to make suitable adjustments in the Character window for a desirable outcome, mine are shown below. Finalize the stamp by adding your logo at the center.

Step 20

When you’re done with the stamp, hide the background layer (click the eye aside its name in the layers palette) and press Shift + Command + E to merge all visible layers. For a more realistic result, the stamp needs a bit more work.

Select the merged “stamp” layer, then go to Layer > Add Layer Mask > Reveal All. Now open this image and place it over the stamp (name the layer as “fade”) so that it covers the stamp completely. Command-click on the “fade” layer and go to Select > Color Range, click OK after making the settings as shown below. By doing this, only the white part of the image will be selected.

With the selection loaded, make the “fade” layer invisible and click on the “stamp” layer’s Layer Mask Thumbnail in the layers palette. Fill the selection with black. Finally, right-click on the Layer mask thumbnail and select Apply Layer Mask from the menu.

Step 21

Grab the finalized stamp and place it into the “envelope.psd” main document. Reduce its Opacity to 35%.

Step 22

This step is optional, follow it for blending the stamp further with the envelope. With the “stamp” layer selected, Command-click the “upper” layer, then right-click anywhere on the canvas and select Layer Via Cut. This will cut the part of the stamp that’s inside the selection and will split the single layer into two layers.

Move the remaining part of the “stamp” layer below the “upper” layer’s shadow in the layers palette and reduce it’s Opacity to 30%. Delete the background layer and save the file as PNG.

Conclusion

You can reduce the size of the final image, if you want smaller sizes. The icon keeps its meaning even if you resize it to 32px by 32px, that’s 6.25% of the original size. However, for smaller versions like 24px by 24px or 16px by 16px, you will have to remake the icon specifically for those sizes.

This post was generated by an RSS Feed from PSDTutsYou may also like to read:

How to Create an Envelope Icon in Photoshop is a post from: Build Me A Fab Website

110+ Free Vector Letter-Pressed Icons

RSSFeed — Sun, 27 Dec 2009 21:02:12 +0000

Creative Nerds, a blog focused on design inspiration, is sharing 100+ free letter pressed icons in PSD format.

This beautiful set comes in 3 different styles. It includes icons of social bookmarking, actions & other various shapes.

They are free to be used in both personal & commercial projects.

This post was generated by an RSS Feed from Web Resource DepotYou may also like to read:

110+ Free Vector Letter-Pressed Icons is a post from: Build Me A Fab Website

Create a Watercolor-Themed Website Design with Photoshop

RSSFeed — Wed, 16 Dec 2009 12:00:52 +0000

This post was generated by an RSS Feed from PSDTuts

Watercolor in graphic design has become very trendy the last couple of years, many websites and incredible designers are using this style and taking it to another level. Even knowing the technique is important in this kind of design, is more about creativity and experimentation. You will learn how to use the Art History Brush and combine it with watercolor custom brushes to create a nice background header image and more. Let’s get it started!

Final Image Preview

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.

Tutorial Details

Program: Adobe Photoshop CS4
Difficulty: Intermediate – Advanced
Estimated Completion Time: 4 hours

Video Tutorial

Our video editor Gavin Steele has created this video tutorial to compliment this text + image tutorial.

Before Getting Started

This tutorial should not be followed as a step by step guide, many of the steps are descriptions of the creative process involved on the making of this particular design style. Even though this isn’t a basic tutorial, it can be easily followed by any level of Photoshop user, but I’ll skip the explanation of very basic instructions like adding a Guide or creating a Layer mask.

As a full time web designer I have experience dealing with clients which need a design finished in a matter of days or even hours, and when you’re running out of time every minute is precious gold, so I’ll try to give you some time saving tips that will come in handy later.

Not all designers knows CSS, if you’re one of them you must know from the very beginning that you’re designing something that will be sliced and put into pieces; repeating backgrounds, text layers, and large image backgrounds must be perfectly placed into the design to avoid undesired changes.

Imagine What You Want to Achieve

It’s a good practice to start with a sketch or a wireframe in order to have an idea of where to put the elements in the canvas. Here is my rough draft:

For this design I’ll go for a fixed width and center aligned elements. Let’s start designing!

Step 1 – Setting Up the Template

We will download a PSD template from 960 Grid System, open the 12 columns template. This isn’t mandatory, you can start creating a 960px width document and draw some guides on it, but downloading the template will save a couple of minutes. Open it and Save it with any name you want.

You’ll need to expand the image’s width in order to see how your design looks on wider resolutions, for this go to Image > Canvas size and set the width value to 1420 pixels, from the center to the sides. I’m putting all the template’s built-in layers into a folder named “Template.”

Step 2 – Main Repeating Background

Find a good paper texture, I’m using this one. This image will repeat all across the page background but it needs some previous editing. Select a square from the paper texture using the Rectangular Marquee Tool, Copy the area and paste it into a new document (You can chose Clipboard from the Preset dropdown). Then, go to Filter > Other > Offset and there change the Horizontal and Vertical values in order to put the borders’ offset close to the center. Next using the Clone Tool fix the hard lines in the middle. Once you have finished the cloning, Select All (Command + A) and copy the edited image on the clipboard.

Step 3 – Set up the Repeating Background

Paste the piece of paper and paste it into the main document. Using the Free Transform Controls paste the right side of the image over the middle Guide and the left side over the first Guide from the left and the Top border matching the top of the document.

Once you’ve perfectly place the first piece of paper, duplicate it and place it to the right, this way you’ll be covering the actual 960px area. Then duplicate the Paper pieces twice to the left and right of the 960px bounds in order to cover the entire canvas surface, then grab the 4 paper layers and duplicate them vertically and place them below the existing ones, do it as many times as needed until you cover all the canvas. Finally put all the Paper layers into a folder named “Background Texture,” and if you want it for easier manipulation duplicate it and Merge the Group then hide the original folder.

Step 4 – Header Background

Now let’s add the header’s background, for this I’m using this image of a mountain landscape. Using the Marquee Tool select a wide portion of the image and paste it into the main document and name the layer something like “Landscape.”

Now we will give this picture a fake HDR style, that will make it look more like a painting than a photography. Duplicate it and hit Command + I to invert the colors, set the Saturation to -100 in the Hue/Saturation panel (Command + U) and then change its Blending Mode to Overlay. Finally Select both layers “Landscape” and “Landscape copy” into one.

Step 5 – Using the Art History Brush

Now we will use the Art History Brush to make our picture look like a painting, select the Art History Brush by Clicking and holding over the History Brush Tool (Y) in the Tools Panel. To make this wonderful feature work, you will need to create a Snapshot first to work with, for this go to Window > History to show the History Panel, and click over the New Snapshot button at the bottom. Then in the Options Panel, chose any irregular Brush Tip (I’m using a 36px Chalk tip) set Mode to Normal, Opacity to 25% Style Tight Short, Area 25px and Tolerance 0%. Then paint over the “Landscape” layer, you will see how the image turns into a painting fairly easily.

After that, you just need to change the Opacity, Area and Brush Tip values according your needs, e.g. I’m using a larger Brush Tip and increasing its area to paint over the borders.

Step 6 – Watercolor Layer Mask

Create a Layer Mask > Reveal All to the “Landscape” layer, now we will try to merge the image better with the repeating background using some watercolor Brushes. I’m using this Watercolor brushes set by mcbadshoes. Keep this brush set handy since we will use it during the entire process.

Grab any of the brushes, set the foreground color to Black and paint some marks directly over the Layer Mask, which is important. These brushes have different opacities so you can play with them; in case you’re using another brush set, you must change the Brush Opacity and Flow values every time you paint a mark. The idea of this step is to melt down the image’s borders with the paper background, try to place your watercolor marks all across the border with some spots inside the image.

It doesn’t matter if the landscape is out of the template Guides, you can slice the header as a large background image when coding.

Step 7 – Add a Top Gradient

Just to make the coding a little bit more difficult (just kidding) we will add a vertical Gradient Fill Layer (#96AFCE – #FFFFFF) and set its Blend Mode to Linear Burn.

Step 8 – Content Background

Using the Rounded Rectangle Tool, set the Corner Radius to 15px in the Options panel and draw a rectangle from the second Guide from the left to the penultimate Guide at the Right side. I often use those guides just in case I need to add a drop shadow or some other effect to the background later. In this case we will leave the Rounded Rectangle as is, just changing its Fill value to 35% and adding a 1px Inside Stroke style. Changing the Fill Opacity makes the Layer Effects retain plenty of color so the stroke look really good and you can still allow some watercolor background through the fill. You can name this layer “Content Bg.”

It’s important to set every stroke effect Inside the object, adding a stroke outside will increase the element’s dimension and we don’t want that.

Step 9 – Think Like a Coder

Even our translucent background looks pretty good, coding it will be a little bit hard, yet not impossible. It’s easier to code a plain color background than a transparent one, so duplicate the Rounded Rectangle and place the copy above it. Set the Fill to 100% again and hide the Stroke Style. Now add Layer Mask > Hide All to it and fill it with a Linear Black to White gradient in order to hide the top of the new Rounded Rectangle. You can help yourself with a couple of extra Horizontal Guides.

How does it work? This content must be vertically scrollable, so the repeating white background should be easy to expand to the bottom; let’s try it!. Grab the Direct Selection Tool (A) and select the bottom points of the Vector Rectangle, then using the Cursors move the points a few pixels down, it should work fine.

Step 10 – Pages Navigation

Using the Rounded Rectangle Tool, add a blue (#3F5060) rectangle at the top of the design, set its Fill value to 50% and add a 1px blue (#3F5060) Stroke layer style to it. Using the Type Tool, type the pages over the navigation background layer, I’m using “Futura Std” typeface this time, but feel free to change it.

Next, paint a small white watercolor mark behind the text as a hover effect and change the selected word’s color into dark blue (#223A54).

Step 11 – Melting Backgrounds

Next rasterize the “Content Bg” layer or convert it into a Smart Object, add a Layer Mask > Reveal All to it and using a black, soft Brush paint some spots over the Layer Mask. This process will melt down the “Content Bg” with the Watercolor landscape giving the design a polished look.

Step 12 – Page Title

Let’s add the Page Title. I’m using the “Futura Std” Typeface. I’m using these colors for the type: #F2F6FC and #E1EDFF. Now for the background, paint a single blue (#112C37) watercolor mark into a layer below the logo layers and change its Blend Mode to Soft Light. It’s a good idea to organize our layers into folders, so we will put all the involved layers into a folder named “Logo.”

Step 13 – More Watercolor Marks

In order to increase the visual impact of the background, add more watercolor marks using several colors, place them all across the top border just above the “Landscape” layer. Then change its Blending Mode to Overlay. Finally add a big sky blue (#51D3D3) watercolor mark into a new layer just above “Landscape” and below “Content B.g” Then change its Blend Mode to Overlay as well.

Step 14 – How About Adding an Actual Paintbrush?

Using real life objects in web design is very trendy, we will add an actual paint brush image to our design. Open this picture extract a part of the paint brush and paste it into the main design across the header with its tip close to the watercolor mark created in the previous step. You can use a Layer Mask and a little, soft, black brush to feather the brush tip.

Step 15 – Add a Realistic Drop Shadow

Duplicate the “Brush” layer, name the copy “Bush shadow” and put it behind the original, then go to the Hue/Saturation panel and change its Lightness value to -100. Now apply a 4px radius Gaussian Blur, next change its Opacity to 50%.

Step 16 – Dodge and Burn

I always leave Dodge and Burn after extracting and placing the shadow.

Step 17 – About Us Box

Start adding the text, I’m using Futura Std for the title, Tahoma (11px, Sharpen: None) for the body text, and a gray Line as a divider (use the Line Tool to draw it).

Let’s add a box for the brief text. Draw a 15px radius Rounded Rectangle and fill it with green (#434726), then apply a Stroke Effect with the same color and change its Fill value to 50%. Next convert the Rounded Rectangle into a Smart object and add a Layer Mask > Reveal All to it. Use a big, black, soft brush and paint on the mask in order to hide some parts of the background melting it with the watercolor landscape just like in the Step 11.

Finally you can add further details, like a watercolor mark behind the “About us” Text, as shown at the bottom of the image below.

Step 18 – Some Details

This is absolutely optional step, you can add some layer styles to the logo and the titles, just to increase the contrast between them and the background. I’ll keep it simple this time by just adding a really small Drop Shadow. Plus, I didn’t like how the paint brush looks behind the navigation bar, so I’ll arrange it forward, as that looks better to me, but you can follow your instinct and work this as you prefer.

Step 19 – Main Ajax Banner

Often it’s necessary to show more than a single relevant piece of information on the homepage, that’s why we’ll take hand of Ajax and create an image slider. It’s very important to keep in mind that not every design can be coded easily, start doing research through some sites listing ajax libraries to see which one can work good with your design.

In this case we’ll add a big image as an active banner placed around eight columns of the template’s guides. Below are four to five square thumbnails of the rest of the banners. Finally add a blue (#5D8CB6) triangle (you can draw it by using the Polygon Tool) that points to the active banner.

Tip: Do use real pictures and not only image placeholders.

Banner Text (Optional)

Some existing libraries enable the option of adding some text over the changing banner, in this case I’ll use Futura Std Light Condensed for the title and Tahoma 11px for the content. Use a White rectangle, Fill 50% and 1px white stroke as a background.

Step 20 – Sidebar Background

Let’s move forward, most of the difficult parts of the process are already finished, but there are still some important areas left, like the sidebar. We will start with a simple background, using the Rounded Rectangle tool (5px radius) draw a white rectangle covering the empty 4 columns at the right side of the main banner.

Notice that I’m separating the sidebar background 20 pixels from the main banner and 20 pixels from the “Content Bg” layer. Change its Fill layer to 25% and add a 1px white Stroke Layer Style. No further editing is necessary since it seems to melt down pretty good with the “Content Bg” layer.

Step 21 – Featured Posts Background

We have plenty of space below the banner area, we’ll put some featured posts there. But first let’s add some pastel watercolor marks into a new layer obviously above the content background. Any color is fine, but it must be really light, close to white.

Step 22 – A Post

Now we will add a single post. Use Futura Std Condensed Light for the title, Tahoma for the brief and the meta and a 1px height line as a divider, this isn’t difficult at all. Following into a new layer draw a single blue mark using a watercolor brush as the comments’ background, type the comments number using Futura and the word “comments” with Tahoma.

This is really easy and quick, some tips though:

For the body text never use Black (#000000) because of difficult readability, you can help yourself by adding some color guides for the text’s colors (I’m including them in the source file) or using the Swatches panel, even you can help yourself with some add-on like Kuler.
Always place your layers into Layer Groups (Folders) or Smart Objects, since they are easier to change and duplicate. We will do it now, duplicate the folder where you put your featured post content (I named it “Post”) and duplicate it three times, then place the copies in their respective places following a two column layout using the template guides as reference.

Step 24 – RSS Icon

It’s time to add content to the sidebar, and we will start with the RSS button. First download these Social Icons Hand Drawn by TheG-Force. Open the RSS icon, copy and paste it into the design, add the RSS related text: email, feed subscription, number of readers and a 1px height line as a divider.

Step 25 – Search Form

First add some watercolor marks as a background. Above that, draw a Rounded Rectangle (5px radius) filled with this color: #1D1D1D. Add a 1px white Stroke, set its Fill value to 50%; this will be our search input background. Using the Type Tool and Tahoma typeface type searching instructions over the search box. Finally download this Watercolor Icon Pack thanks to Tutorial9 and paste the magnifier icon as a search button. Put all this into a Group named “Search” or something and move on to the next step.

Step 26 – 125 by 125 Ads

The standard format for creative ads is 125 by 125 pixels, so we will add some of those in the sidebar.

Tip: To save time, you can create a 125 by 125 px document and design a nice advertisement placeholder, then convert it into a Smart object and save it somewhere. You can use it for many designs without having to redesign it every time. If you have enough time, here is a list with most of the standard ad sizes (via Google’s ad sense). Consider working on a PSD with some placeholders for them?.

Step 27 – Twitter

As a huge fan of Twitter, I decided to put a prominent link just below the ads. Add some watercolor background, copy/paste the Twitter icon from the library discussed in the Step 24. Type some text related to the little blue bird like “Follow me” or your followers and updates number. Put all these layers into a Group named “Twitter.”

Step 28 – A Tabbed Pane on the Sidebar

Using the Rounded Rectangle Tool, draw a white rectangle with a 1px gray (#979797) Stroke just below the “Twitter” area. Now draw three smaller rectangles behind them, these will be the tabs. Draw a little white rectangle between one of the tabs and the background to design a selected tab.

Step 29 – Adding Some Content to the Tabs

Change the unselected tabs’ background colors. Add some titles to the tabs, I’m using a bolder version of the Futura typeface. For the content I’ll add a couple of Recent Posts on the first tab. Then if you want to, design the content for the other tabs, put each one into a folder to keep your design organized.

Step 30 – Finally the Footer

This footer will be really simple, just paint some random watercolor marks with some pastel colors, then repeating the process of Steps 8 – 9, draw a couple of Rounded Rectangles and melt them down with the watercolor background. Finally add the footer text, a small navigation bar and the copyright information fits perfect there, besides I add a 1px Line as a divider and applied a Reflected Gradient Layer mask to it.

Feel free to design an advanced footer if you want to.

Conclusion

Hope you liked it! Of course this tutorial is just a small sample of what you can do with this style in webdesign, feel free to experiment with the technique and amaze us with something new!

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.

This post was generated by an RSS Feed from PSDTutsYou may also like to read:

Create a Watercolor-Themed Website Design with Photoshop is a post from: Build Me A Fab Website

Free Textures – 21 High-Res Texas Snow Textures

RSSFeed — Sat, 12 Dec 2009 10:36:07 +0000

This post was generated by an RSS Feed from Think Design

Some lovely snowy Photoshop Textures for FREE from Think Design. Attached are a preview of a couple of the textures, but there are 21 total to download at the download link. Visit Think Design for more Freebies. Enjoy!

This post was generated by an RSS Feed from Think DesignYou may also like to read:

Free Textures – 21 High-Res Texas Snow Textures is a post from: Build Me A Fab Website

Free Vectors – Social Networking Icons (10 Colors/2 Styles)

RSSFeed — Sat, 12 Dec 2009 10:35:45 +0000

This post was generated by an RSS Feed from Think Design

Some very cool Vector Social Networking Icons for you FREE from Think Design. They include 21 social networking icons, in 2 different styles, with 10 color variations total. So in short, it’s a lot of icons! One of the styles is more glossy/gradient-y, and one of the styles is flat. This way you can use them for a bunch of different projects. The flat icons are super easy to change colors, so customization should be pretty easy. Also, the download includes both CS & CS3 files. Below is a preview of a couple of the colors, and the 2 different styles. Enjoy and visit Think Design for more cool stuff!

This post was generated by an RSS Feed from Think DesignYou may also like to read:

Free Vectors – Social Networking Icons (10 Colors/2 Styles) is a post from: Build Me A Fab Website

66 Excellent Photoshop Web Design Layout Tutorials

RSSFeed — Thu, 10 Dec 2009 21:02:02 +0000

This post was generated by an RSS Feed from Instant Shift

When it comes to Image editing or photo enhancement, Adobe Photoshop is usually the primary option to consider. However, the software package itself is a quite hard to learn — and extremely hard to master.

Display beautiful images is a potent element in web and graphic design, where there is less concern for readability and more potential for using images in an artistic manner. Photoshop is useful for both creating and editing images to be used in print or online. Not too easy to use, but full of high-quality features, Photoshop is the best choice for any image manipulation job.

Below, you’ll find some of the Best Adobe Photoshop Web Design Layout Tutorials which might help you to get inspired and learned a tip or two by the end of this presentation.

Excellent Photoshop Web Design Layout Tutorials

The demand for Photoshop tutorials are too much in these days and finding the best tutorials from the pool with tens of thousands of tutorials is not a easy job to perform. Designers love all kind of Photoshop tutorials that can help them to easily learn more and more everyday and give them ideas and directions to design more beautiful and attractive creative works. This list contains some of the best handpicked photoshop tutorials for designing website layouts.