Logo as Website/Blog Header

If you have a website or a blog, you may want your logo to appear as the website/blog header. While in some cases it is possible to just upload your logo .PNG file to the header area with a good looking result, in a lot of other cases the website header area has a completely different size and shape than the logo and just uploading the logo file will leave your website or blog looking less than pretty. So how to solve this?


>>> FIND OUT THE SIZE OF YOUR WEBSITE/BLOG HEADER AREA

Before you turn to your image editing program to create your own website header image, you have to find out what the exact size is of the header area on your website/blog. This is different for each website, there is no standard size.

There are a couple of ways to figure out the size of your website header area:

• if you hired a designer to design your website/blog you can ask him/her about the size
• if you bought/use a premade website template you can contact either the designer to ask about the size or read up on the template details to see if the size is mentioned in it
• if you can not contact the designer or read up on template details, you need to find out yourself, and this is how you do it:

- visit your website, just go to www.....com (or whatever your website name is)
- once you are on your website, click on your header area with your right mouse button
- in most cases you will get an option that says 'inspect element' - select it
- you will see a section open at the bottom of the screen with coding info
- if you can find coding text that refers to the header area, see if you can find a size amongst that coding
- you can also move your mouse over the header area until dashed lines appear around the area
- once the dashed lines appear you will also see the pixel size of the area - in the demo image below you can see that the header area is 1000 x 300 pixels - now you know your size





>>> CREATE YOUR WEBSITE HEADER WITH ADOBE PHOTOSHOP

Now that you know the size of the header area, you can create your own website/blog header with your logo on it.

• open Adobe Photoshop and click on 'File'
• select option 'create new file'
• now create a white canvas in the size you need for your header
• I am using the size from the demo images above - 1000 x 300 pixels
• set the resolution of the new file to 300 dpi
• choose a white or a transparent background, depending on your needs for the website
• the background for your website header has now been created




How to add your logo to the empty header:

• select 'File' again
• and choose option 'insert' (right beneath option 'Search in Adobe Stock)
• this will give you the option to upload your logo image into the design




How to adjust the size of your logo on the header:

• if you are not happy with the size in which the logo appears on the header you can adjust the size
• go to the percentage numbers of the width and height of the logo on top of the screen
• enlarge the logo or make it smaller by adjusting the percentage numbers
• once you are satisfied with the size of the logo make sure it is centered on the header - you can drag it to any position on the banner with your mouse
• then save the header image by selecting 'File' and then 'Save as'
• make sure to save as a JPEG file - your header is now ready to upload to your website header area
• in case you created a transparent background for your header image, you should save it as a .PNG file to keep the transparency