Make your own hand lettered blog header: design tutorial in Photoshop
Hey guys! A unique blog header is a must for your blog design. It's one of the most important elements of your 8 must-have's blog graphics for your blog's visual branding, simply because it's one of the first things people see when they first land on your blog.
I LOVE LOVE LOVE hand lettered blog headers especially, because they help your blog stand out even more than if you chose a pretty script font and mocked something up in Photoshop.
Creating your own hand lettered blog header is a lot easier than it sounds. Plus, it's fun! There's something super rewarding in getting your hands dirty and creating your own blog graphics.
There are a lot of hand lettering styles you can try to create your blog header. For this tutorial, I'll be working with the popular handwritten style, because I think it's a great personalized option for lifestyle blogs.
Materials Needed
- A Sharpie…
- … or if you wanted to try a fancier method like using a brush pen, you can go for something like the Tombow Dual Brush Pen or a Sharpie Brush-Tip Marker
- Paper
- A scanner, or your phone and bright even daylight
- Photoshop (Get a 30-day free trial)
Check out my resources page for more of my favorite lettering supplies and equipment.
Step 1: Determine Your Blog Header Size and Aspect Ratio
This step is really optional, but it can be a pain to find our your current blog design can only handle a certain size or shape blog header when you've drawn the exact opposite.
Depending on how technical or orderly you're feeling, you can get an exact measurement of your blog header by right-clicking on your current blog's header, then clicking Inspect Element. For example, in the example below, you can see the blog header width can accommodate an image up to 1080px wide (which is quite huge). Even though the height says 75px, you can play around with heights depending on your blog's theme. It will take some playing.
If you're feeling more in an eyeball-y type of mood, you can take a guess at the size or aspect ratio of your blog header area and try to draw your blog header to accommodate that size and shape.
Step 2: Draw and Hand Letter Your Blog Header
Grab your paper and markers. You're ready to go!
Keep in mind that hand lettering takes practice. You may need to practice your handwriting a little, or learn more about brush calligraphy if you want to go with something fancier than your own handwriting. If you need help with writing along a straight line, put some lined paper behind your page to help guide you.
Write your phrase over and over again until you have a version you really like. Try different styles and different markers. Experiment with letter connections and looks.
Step 3: Scan In Your Work (or take a picture)
Once you're happy with one of your iterations, go ahead and scan in your work.
While I love the saturation of some of the versions done with Sharpie, the brushy texture of the dried-out Tombow marker really speak to me. I'm going to continue with this version!
If you decide to take a picture of your work instead of scanning, make sure to get a nice bright and even light. Hold your phone right above your work so you don't get any weird skewing of your image.
Step 4: Choose Your Favorite Hand Lettering Version
Once you've put your image onto your computer via scanning or taking a photo, bring your image into Photoshop.
With the lasso tool (L) or the marquee tool (M), draw a shape around your final lettering.
Then, hit (C) for crop, and hit enter. This will automatically crop your image to the borders you selected.
Step 5: Clean Up Your Artwork
Just like in my other tutorials, it's time to adjust the levels of your artwork. Adjust the Levels by hitting CMD+L. Click on the white eyedropper, then click around on the background of your artwork until the background is white.
If you want to darken your writing, click on the black eye dropper and select part of your writing.
Then, clean up any unwanted handwriting or smudges with the eraser tool (E).
Step 5: Save Your File For Web
When you're ready, you can save your file!
Now, don't just Save-As your file as a JPEG. Your file size will be much larger than it needs to be, which can slow down your blog's load time. Yuck!
Instead, go to File > Save For Web… (or hit CMD+OPT+Shift+S on your keyboard). This will bring up a dialog box.
In this dialog box, the top image is your original file. The bottom image is a preview of the compressed image. In the circled areas, you can see the difference in the file size. 21.83K is much more manageable than 408K!
Also, take note of the file size. You took a measurement of your blog image size in Step 1. Make sure your final image will fit properly in your blog's header area. Adjust the width or height as necessary in this dialog box. Photoshop will automatically calculate the other measurement so it stays the same aspect-ratio.
Bonus Step: Add Color to Your Hand Written Blog Header!
Want to add some color to your blog header so your handwriting isn't black? Easy peasy.
Open up the color picker dialog box (by double-clicking on the foreground swatch in your toolbar). Choose the color you wish your text to be. For example, the Briolette theme demo uses hex code #d95768.
Then, select the paint bucket tool (G) and dump the color onto a new layer.
Finally, change the blend mode of your color layer to Lighten, Screen, or Linear Dodge.
Each blend mode will have a slightly different feel to it, depending on what color you're working with.
Here's Lighten:
Here's Screen:
Here's Linear Dodge:
Once you have your color and blend mode set up, go ahead and Save For Web like we did in Step 5. Then, install your new handmade blog header. Good job, you!
Extra CSS code tip: If your blog header isn't centering correctly once you upload the image, you can center it using CSS by finding the ID class on the header image, then adding margin: 0 auto. For example, on my Briolette blog theme demo, the CSS would be
header img {
margin: 0 auto;
}
This is much safer (and better) for your blog loading time (as opposed to making your JPEG super wide to accommodate the spacing).
