How to Create your Custom WordPress Login Image from Scratch

Although I agree that WordPress deserves all the publicity they can get, I want my site logo to show on the login screen, and not WordPress because it’s my site, and I want people to know that they are logging into my site. In this how to article, I am going to explain step-by-step how to create a WordPress login screen like the one I have in place.

This tutorial is going to be using the Gimp. If you don’t have it, I recommend you go to GIMP’s website and get yourself a copy – it’s free. Since most of you are probably using Windows, go on over to the Windows Installer page to get an easy-to-install bundle.

  1. Create a new blank image with the size of 390×700 (390px wide by 700px high). Be sure that you create it with a white background.
    Step 1
  2. We want to make sure that we have the entire image selected, so click on Select > All.
  3. Click on Select > Shrink. Insert 2, and click OK.
    This will shrink your selection by 2 pixels.
  4. Now, let’s round the corners. Click on Select > Rounded Rectangle. Insert a radius of 8, and leave Concave unchecked. Click OK.
  5. Fill in that entire selected area with a gray that suits you. This will be the border.
    Step 5
  6. Now we are going to shrink the selection again. Click on Select > Shrink. Insert 2, and click OK.
  7. Now fill the selection with white. Your image will now look like this.
    Step 7
  8. Click on Select > Shrink. Insert 4, and click OK.
  9. Use the gradient tool to make your favorite background in the currently selected area. Because the whole image won’t be displayed, don’t gradient fill the whole thing. In other words, only make the top 1/4th or so gradient. Here is what mine looked at this point:
    Step 9
  10. Once you are happy with the background, you can clear the selection, and add your text header and logo if preferred. Once I did that, my image looked like this:
    Step 10
  11. Now, we are done with that image. Save it as “login-bkg-tile.xcf”. Then save a copy as “login-bkg-tile.gif”.
  12. Now, open a new image that is 390×25.
  13. Copy the bottom 25 pixels from the first image, and paste it into this image.
    If you copy more than 25px high, that’s OK. Just make the bottom of the pasted layer flush with the bottom of the image, and let the top overflow.
    Step 14
  14. We are done with that image. Save it as “login-bkg-bottom.xcf”. Then save a copy as “login-bkg-bottom.gif”.
  15. Now, go to your server and open the (wordpress_dir)/wp-admin/images directory.
  16. Backup login-bkg-tile.gif and login-bkg-bottom.gif by saving them to your local computer.
  17. Upload the new images to that location.
  18. Your done! You may have to clear your browser’s cache to view the new page.
    Be sure to keep a local copy of these images! You will have to re-upload them every time you upgrade WordPress.

Here are my original .xcf files of my login images.

wordpress-images.zip

Posted in: Internet

This entry was posted on Thursday, August 23rd, 2007 at 12:28 pm and is filed under Internet. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply