Create a subtle, yet stylish content area in 10 minutes
This tutorial won’t take you longer than 10 minutes and you’ll find out how to create a really nice simple, sleek and stylish box, perfect for a content area on your next web layout. This technique works best on darker backgrounds and involves using a subtle gradient, a stroke and some feathering - thats all there is to it. Lets get started!
Setting up the background
1) Open up Photoshop and create a new document what ever size you like.
2) Fill the background colour with a nice dark blue. I have used #151719. If your not sure how to do this, simply go to ‘Layer > New Fill Layer’ in the menu at the top of your screen in Photoshop.
The Gradient
1) Grab the ‘Rectangular marquee tool’ and drag out a selection as wide as you want your content area to be.
2) Create a new layer, and set your foreground colour to white. If you didn’t know, pressing ‘D’ on your keyboard will reset your colours, and then pressing ‘X’ will reverse them, there for setting your foreground colour to white!
3) Take the gradient tool (making sure its set to ‘Linear Gradient’) and whilst holding shift click and drag downwards.
4) Now lets turn the opactity of this gradient layer down a little to make it more subtle. I’ve gone for 9%.
Adding the stroke
1) Take the ‘Rectangular Marquee’ tool and draw a selection the same width as your gradient layer, and slightly taller. It needs to be taller as we’ll feather this excess height away in the next steps.
2) Now create a new layer and at the top of the screen choose ‘Edit > Stroke’.
3) Set the stroke colour to white, and size to 1px.
4) Finally set the opacity of this layer to 8%. You should have something that looks like this:
Blending/Feathering the stroke
1) Select the ‘Rectangular Marquee’ and towards the top of your screen, set the ‘feather’ to 20px.
2) Now for the fun part! Draw out a selection with the ‘Rectangular Marquee’ that is wider than your content area. When you release the mouse you’ll notice that the edges of your selection have been softened - thats due to the 20px feather we’ve set.
3) Now press ‘Backspace’ or ‘Delete’ to blend the 1px white stroke we applied earlier.
We’re done! Almost…
Now all thats left if for you to add some content. You can see what I’ve done below…
So there we have it. A nice simple and stylish content area created in about 10 minutes! Please let me know what you thought of this tutorial in the comments below. I might try to write a few more over the coming weeks…
Did you enjoy this post?
If you did please feel free to subscribe to my full RSS feed to make sure you don't miss out on any other upcoming articles on evoart. Thank you very much!
Loading ...
May 25th, 2008 at 8:11 pm
I always find that looking at how other people create things helps me think of ideas of my own.
I would like to see more tutorials. Maybe one about choosing the right colors or perhaps one on texture. Just a thought.
May 26th, 2008 at 6:03 am
always like your tutorials, simplicity is the key.
I agree with Graham, an extended tutorial about colour and texture would be nice to see.
May 26th, 2008 at 6:25 am
I would like to know how the box is sliced. Sorry for the basic question.
May 26th, 2008 at 9:22 am
@Paulo: If I were using this on a website I would probably use the image below as a background image. Its relatively small, and would load nice and quick…
http://www.evoart.info/wp-content/themes/evoart_new/images/tutorials/contentarea/slice.jpg
Then use this CSS:
#contentarea {
background-image:url(../images/backgrounds/background.gif);
background-repeat:repeat-x;
width:370px;
}
@Gerry and Graham: Could you explain in a bit more detail about the kind of tutorial your after and I’ll see what I can do!
May 26th, 2008 at 2:29 pm
I’ve seen some color tutorials that refer to color generators like adobe’s kuler or ones that involve choosing colours based on the theme of the website.
The main problem I allways have is that the colours used on the web site allthough they fit the theme of site, they don’t blend in correctly or give site a balenced feel.
This effect is very noticable in some of the websites I did when I was still in school ( binxtrone.110mb.com/hlwarzone/ ). Notice how it has an unfinished feel to it. The oranges and whites jump out at you in certain areas while the headings feel pretty faded.
Sorry if this seems like jibberish. If the worst comes to the worst and I don’t make sense, I’m sure the flaws in that site will inspire a topic for the next tutorial.
May 31st, 2008 at 5:00 pm
Hi,
In my limited experience choosing colours has/is the hardest part. Sometimes a logo will give you a starting point, but choosing a colour palette can be pain.
I understand where Graham is coming from, though i don’t think it’s an easy task in explaining the details of colour, texture, composition, etc.
For example binxtrone.110mb.com/hlwarzone/ i think needs some texture to break the design up, it’s way too shiny.
I realize now that this a very expansive request were asking, so same here, don’t worry if i’m not making sense either.
July 19th, 2008 at 7:11 pm
lcgdvr
July 19th, 2008 at 7:35 pm
rtuq fxplqda voynd
July 19th, 2008 at 9:06 pm
lwdxq
July 20th, 2008 at 3:29 am
veglymc igwlkce bejpw imuf