Blog Header with Brushes (Photoshop Tutorial)

Blog Header with Brushes (Photoshop Tutorial)

A while ago I remember seeing this wordpress theme (sorry can’t remember where) with this type of header, the grass and vines creep in from the black darkness. I liked the idea and thought it would be nice to make a tutorial for it.

Getting Started

Of course this tutorial wouldn’t be so simple with out the use of pre-made photoshop brushes i downloaded, so here they are

Sun Burst brush -by JavierZhX

you can try other floral brushes if you wish but i liked these two the best.

Suddenly Spring set 1

Suddenly Spring set 2

i also used the Grass brush that comes by default with photoshop cs3, but if you don’t have CS3 you can use this Photoshop Grass Brush set

Step 1

ok lets start with creating a new document. mine is 769×235. i suggest you chose something suitable if your going to use it as your blog header.

Step 2

With the gradient tool draw a linear gradient down using these two colours: #ff6c00 to #ffc662.

Step 3

Create a new layer. Draw an oval shape using the ellipse tool then go to Select>mofifie>Feather enter 20px for the radius. finally fill the selection with white.

We want to create different shades of orange so will repeat this technique a few times.

Step 4

new layer. this time draw a bigger oval shape and using 40px for feathering.

Step 5

again create a new layer and draw a bigger oval shape then the one in step 4 and feather at 80px. then change the layer mode to overlay and opacity to 60%.

Step 6

Now you should have the Sunburst brush i mentioned before. if not, go download them and select “Pincel muestreado 49″ and place it at the bottom just so we get the ray coming out from the centre. once you have it placed set mode to Softlight.

Step 7

Time to use our Brushes :) first will use the Grass brush. make sure your foreground and background is set to the colour black then paint some grass randomly at the bottom.

photoshop brushes

Step 8

Now change your brush to a Big soft brush and apply at the bottom

Step 9

Time to add those cool floral brushes, i mostly used brushes from the Suddenly Spring 1, but its up to is what i came up with.

Step 10

finally add your blog name and your done ! preferably try using a very thin font, i used the font named “Steiner”.

Here was my 2nd try which i like better, in the example you can see how its nicely fits in with a black layout. Click on the image to enlarge.

photoshop tutorial

Digg  Digg

Related Posts

mike ~ May 9, 2008 at 9:57 am

neat effect :)

footface ~ May 9, 2008 at 9:58 am

simple outcome but still nice thanks

XeroBlog – Blogging, Recursos, Internet y Geeks » Blog Archive » Qbrushes – Brushes de Calidad para Photoshop

[...] Cuentan también con un blog propio donde muestran noticias del sitio o tutoriales sobre como usar los brushes para crear diferentes cosas, como headers para blogs. [...]

Permana Jayanta
Permana Jayanta ~ May 16, 2008 at 2:24 am

Nice, i like the combination color of black and orange …

admin ~ May 16, 2008 at 3:27 am

thanks for the comments :)

Ahmed ~ May 16, 2008 at 4:18 am

wow its so sweet i like it so much and i wait more and more thank you so much

Alex ~ May 16, 2008 at 7:05 am

Very nice! Could you make a tutorial aswell on how to do the homepage? =) I’m very new at this, thanks!

Ivano ~ May 16, 2008 at 3:47 pm

I dont find those grass brushes, i wonder if you might could tell me the name of the file or if i can get a download link? thanks for the good turtorial!

admin ~ May 16, 2008 at 7:44 pm

@ Ivano: here is a good set of Grass Brushes you can use

veebi ~ May 17, 2008 at 11:19 pm

i love…. u r tallent :)
veri2 nice ..

KD Rulez
KD Rulez ~ May 18, 2008 at 12:44 pm


Maxman ~ May 19, 2008 at 6:06 am

Simple but Superb way out…

Bharath ~ May 20, 2008 at 1:24 am

can I get some cool fonts 4 download pls……..

can U send dat link 2 my mail….

KZ ~ May 20, 2008 at 10:23 am

Sweet tutorial. This is what I got;

admin ~ May 22, 2008 at 4:56 am

looking good KZ

Blog-Header ~ May 22, 2008 at 6:01 pm

[...] Workshop Blog-Header with Brushes wird genau das beschrieben und zwar wie eine Grafik für eine Website (muss ja nicht zwingend ein [...]

hooray ~ May 23, 2008 at 8:59 am

cheers dude, awesome tut ;)

Tobbi ~ May 23, 2008 at 9:40 am

I like it, very nice :D

Pari ~ May 31, 2008 at 1:56 pm

really cool effect, and really simple too!

morri ~ Jun 1, 2008 at 5:05 pm

it’s simple, and simple is nice! ^_^

20 Linktipps
20 Linktipps ~ Jun 4, 2008 at 6:23 am

[...] Eine Anleitung (inkl. Brushes) für solche Sonnenstrahlen findet man bei “qbrushes“. [...]

LongyZ ~ Jun 20, 2008 at 6:01 am

simple but nice. Great tutorial!

Diseña un header con brushes en Photoshop

[...] en blog.qbrushes un tutorial para hacer el header de tu blog utilizando los brushes en Photoshop, en realidad es la forma más sencilla que he visto para hacer un header creativo y preciso, si no [...]

TheDude ~ Jun 24, 2008 at 10:27 am

This tutorial is awesome

Corinne ~ Jul 10, 2008 at 8:23 pm

I love this header tutorial. I draw the oval and when go to select>modify>feather…It won’t let me modify anything.. If anybody know what im doing wrong,your help will be much appreciated 8) Thanks

user ~ Jul 10, 2008 at 8:49 pm

@ Corinne

make sure you have the layer selected correctly.

Ashok Kasti
Ashok Kasti ~ Jul 30, 2008 at 10:34 am

Thanks dude… nice tutorials….

TheRasmus ~ Jul 31, 2008 at 5:11 pm

really great! thanks a lot!

shevi ~ Aug 1, 2008 at 2:30 am

@ Corinne
I had the same problem. But then i used the Rectangular Marquee Tool (it turns Ovel when you set the feather to 20px) instead of the Ellipse Tool ;)

Rollaz ~ Aug 25, 2008 at 4:04 am

Simple and very nice ;]
good tutorials ;]

alohafrance ~ Aug 27, 2008 at 7:37 am

super great tutorial! thanks a lot!!

Dew ~ Sep 11, 2008 at 3:51 pm

I have the same problem as Corinne! Help me?

André ~ Sep 15, 2008 at 4:56 pm

Mioto Bom

photoshop free tutorials
photoshop free tutorials ~ Sep 21, 2008 at 12:58 am

great tutorial

ghawyy ~ Oct 19, 2008 at 8:12 pm

its really great man thank you so much i love it

Ricky ~ Nov 27, 2008 at 6:14 am

I had the same problem of not being able to apply the feather after using the eliptical shape tool. I found that instead of the shape tool if you use the eliptical marquee tool you can then apply the feather.

Rahul ~ Jan 24, 2009 at 1:30 pm

A really tough looking work explained very simply.

Rohaid ~ Feb 9, 2009 at 6:08 am

Can i get the HTML code to the bakground ?

gfxdude ~ Feb 16, 2009 at 11:37 am

I don

starlight86 ~ Mar 7, 2009 at 3:58 pm

very nice tutorial.:)

parikh ~ Apr 7, 2009 at 2:40 pm


I wiil say U GUYS are too good!

Thanks a lot.

Parikh India-Mumbai

sexylady ~ Apr 14, 2009 at 8:14 am

its my blog color theme…
hmm,its time to get new header…

Antanas ~ Apr 25, 2009 at 1:58 am

Very simple, but very nice. Sometimes less is more.

paola ~ Apr 27, 2009 at 3:45 pm

ayuda.. no he podido descargar el efecto de los rayos.. por favor ayuda. y tampoco me sale la opcion de pluma.. me sale es borde, suavizar, expandir y contraer. estoy usando el elipse..

sean potter
sean potter ~ May 9, 2009 at 8:42 am

Hey , you have a very good blog, its excellent information in its field. You have done a great job, keep doing it for to help, people like Myself.

10 der besten Ressourcen für kostenlose Photoshop Brushes + Tutorials | hpvorlagen24 Webdesign Magazin

[...] BlogHeader mit “Floral” Brushes [...]

18 Photoshop Header Tutorials | The Roxor | Design blog for resources and inspiration

[...] Blog Header With Brushes [...]

Stefab ~ Jul 2, 2009 at 1:49 pm

Thank you, you are the best !

shining ~ Jul 10, 2009 at 3:12 pm


Very Good Tutorial
Very Good Tutorial ~ Aug 5, 2009 at 6:50 am

We all have access to free brushes but the trick is to know what to do with it.


Candy A
Candy A ~ Aug 24, 2009 at 2:47 pm

Step 6 doesnt make any sense. What is “Pincel Minsereado 49″ or whatever????

adreeeew ~ Sep 6, 2009 at 7:44 am

“Candy A Says:
August 24th, 2009 at 2:47 pm
Step 6 doesnt make any sense. What is “Pincel Minsereado 49″ or whatever????”

It’s the name of the brush, and the brushset is called Risingsun brushes.

sandrar ~ Sep 10, 2009 at 7:52 am

Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

angelina jolie
angelina jolie ~ Sep 10, 2009 at 11:13 am

I love your site. :) Love design!!! I just came across your blog and wanted to say that I

megan fox
megan fox ~ Sep 11, 2009 at 10:41 am

Sign: umsun Hello!!! rcuwwymhyw and 827ssgfhphzye and 9215Cooooool blog really

vidyaputra ~ Nov 22, 2009 at 1:28 am

great tutorial, thanks alot…

Dravalley Support Community
Dravalley Support Community ~ Dec 13, 2009 at 4:10 pm

awesome tutorial. very easy to follow. i’ll try it tonight. just hope the outcome will be as great as this one.

Elly ~ Dec 22, 2009 at 2:05 pm

Gosh, now I am a brush Addict…… *hugs

urbandesire» Blogarchiv » links for 2010-02-21

[...] Photoshop Tutorial Using Brushes to Create a Header | Qbrushes Blog Kleines Tutorial um einen schnieken Header für eine Website zu erstellen. (tags: tutorial photoshop photoshop_tutorials design diy webdesign website wordpress) [...]

yahaya ~ Jul 5, 2010 at 9:33 pm

grrrrr8 posting

Tut, tut
Tut, tut ~ Mar 16, 2011 at 6:33 pm

[...] (#) > Da draußen Themen: Photoshop « WordPress, ich komm mit Dir Hier klicken, um die Antwort abzubrechen. [...]

Andezit Taşı
Andezit Taşı ~ Aug 8, 2011 at 2:42 pm

nice work.thank you so much

ryan ~ Nov 15, 2011 at 1:08 am

i am trying to do the circle thing and it is just not working, i can make my ovals but when i click feather it does nothing except alter the shape a little bit i dont get the transparent effect, any help please even a step by step how to and what i should be clicking, i am pretty new to all the photoshop stuff
Thanks in advance

Anonymous ~ Jan 26, 2012 at 9:29 am

very good work thank you

dzień 10. herbaty.
dzień 10. herbaty. ~ Feb 25, 2012 at 8:13 am

[...] Sunrise header [...]

Comments are disbaled.