The Very Worst Of Shaun Industry

How To Make A Neato-Logo And Header For Your Blog(s) And Profiles – Even If You Suck At Photoshop

May 10, 2008 · 4 Comments

I’ll admit it: I’m a nightmare at Photoshop. I have only the vaguest idea of what four buttons do and it took me a year to learn what layers are, much less use them. So, if I can figure out how to make a pretty darn good logo and header to be the banner for my personal blog, so can you!

Firstly, you’ll need a background with a large, patterned surface to make your logo and pictures on your header pop – so do a Google search for “desktop wallpaper” and select one that is simple (won’t overshadow your additions), but has a nice pattern – NOTE: if you are going to use the background for your page, do the webmaster supplying the image a favor and host it on your own server, i.e.: your own Photobucket or Snapfish account, etc. Go to the site you want to post the banner/header to and look for the height and width you need the header to fit (for example: my WordPress header is 770X140 pixels). Then, open a new image with a transparent background, like so:

 

 

 

 

 

 

Specify the pixels to be the exact height and width that you need for your header. Take the  square selection box tool and select an area from the image you have selected for your background. Don’t worry, any excess area will not show on your banner.

 

Next, proceed with vector graphics. Most vector graphics are created in Adobe Illustrator. Now, don’t worry if you don’t have Illustrator, ‘cause you don’t really need it. All you really need to do is a Google search for “free vector graphics.” Here’s a coolio little page that is used by a lot of people for their vectors – I recognize three or four of the graphics from Myspace background sites, other headers on social networking sites and popular blogs. If that fails, iStock has a large collection of vector graphics for sale as low as $3 each. Now, I know I said that you didn’t need Illustrator and I stand behind that, but to download some of these graphics in a useable format, you will need it – never fear, some of the best come with a

 

 

 

 

graphic you can access in Photoshop and use the  wand tool to select the image you want and Crtl+X to cut it from the image.

 

 

 

 

 

 

Next, go to the image you want and press Ctrl+V to paste the selected vector in. Then use the 

movement selection tool in Photoshop to move the image you have just pasted in to the place you would like it to appear in the new image.

 

You can also used the  text tool to create writing for your logo/header – you can select the font you wish to use on the tool bar which appears when you select the text tool and you can also bold or italicize certain text (depending on the font you select). If you need to move the text, you can do so by using the move selection tool.

You’ll probably also want to include some pictures (of you, your interests, or the bulk of the blog’s subject matter). You can do so by opening the image with Photoshop – smaller images work better, because they won’t need much resizing. You can make an image smaller by selecting the ‘Image’ button on the task bar and clicking on ‘Image Size’. This will open a  window like this:

 
 
 
 

 

 

This will allow you to change the images pixel size – the default is to have the proportions of the image constrained – this means that if you change either the height or width of the image, the other changes automatically to stay in proportion to the original image shape.  

 

 

You’ll probably want to use only part of the image; therefore you’ll need to get rid of whatever is in the background (the sky, trees, the walls of your room, etc.) To do so, you can try to use the wand tool and cut the sections out, but that may be a bit tedious as the tool might select part of the image you wish to stay visable, so the best option is to enlarge the view of the image (you can do this by selecting the box size button on the task bar in the upper right-hand corner of the screen – the blue one, not the black one and roll your mouses’ scroll-wheel up and the image will be enlarged in Photoshop – this doesn’t increase the pixel

 

 

 

 

size of the file, only the view in Photoshop so that you may better manipulate the image). Then, choose the eraser tool to erase any area you don’t want – this should erase to a transparent background. If it doesn’t erase to a transparent background, you can always use the square selection box tool to select the entire image, cut it and paste it into a new image that will erase to transparent. It might even be easier if it erases to a solid color, because then you can use the selection wand to cut the background while leaving the image you want to be visible intact. Once you are done with your erasing, you can use the wand feature to select an area that is transparent then go to ‘Select’ on the task bar and click on ‘Select Inverse’. This will select the area of the image you wish to keep visible. You can either past the image into your header/logo now, or if you have more erasing to do, you can paste it into a new window and continue. If you follow the later route, all you’ll need to do when you’re finished is use the move selection tool to ‘drag and drop’ the image into the header that you have already created, then just move it to where you would like it to appear in the image.

 

   

 

You’ll see that with every new image you have created, you’ve also created a new layer like this:

 

 

 

 

 

 

 

This is how you will be able to move one line of text or image without manipulating the images underneath. So you can simply choose the layer you’d like to work with, even erase part of it, and then move to another layer without causing more work for yourself. A little trick: if you left some areas a little rough from erasing the backgrounds, you can click on ‘Layers’ in the taskbar at the top and then place your mouse on ‘Layer Style’ – from the pop-up menu there, you can add a ‘glow’ or a ‘shadow’ to the edges of the layer that will not only make the image pop, but it’ll help hide any roughness. You can also do some other neat things with ‘Layer Style’, so experiment a little!

 

 

After all that, all you need to do is go to ‘Layers’ and ‘Merge Visible’, this will merge all the layers into one image and then save the new header/logo/banner as a JPEG (most sites won’t accept a Photoshop image). From then on, if you need to resize it, you can do so by opening the image in Photoshop, clicking ‘Image’ and then selecting ‘Image Size’ and inputting the new dimensions.   

 

Congratulations! You just made your first header!

 

 

Categories: Gay
Tagged: , , , ,

4 responses so far ↓

  • Jeff // June 7, 2008 at 3:55 am

    Very cool

  • shaunindustry // June 7, 2008 at 7:30 am

    Thanks Jeff!

  • Jason // June 10, 2008 at 8:02 pm

    I do a lot of work designing logos and doing website designs/headers for bands and companies. I must say that this is a quality tutorial for basic headers. It takes a series of complicated steps and makes them easy for everyone to understand.

    When I say basic headers, I just mean using vectors and text you can get a hold of without having Illustrator to create some for you.

    Good work mate!

  • shaunindustry // June 11, 2008 at 10:13 pm

    Thank you, Jason. I just wanted to make something for those of us that don’t have or don’t know how to use Illustrator. I’m far from a graphic designer, but I can figure my way around programs if I tinker with them enough.

Leave a Comment