How to Create Your Own Splash Page & Freebie PSD Splash Page

You can create your own splash page with Photoshop and an HTML editor. I’ll walk you through here and include a freebie PSD for you to edit:

1. Start with a new Photoshop file by going to File > New. I’ve created mine at 1000×800. Press OK.

2. Start creating a layout ¬†of what you want your splash page to look like. Add photographs and text. You can download the splash page I created here. If you use the one I created, replace your photographs over each “Photo” layer and then go to Layer > Create Clipping Mask to add your photographs.

3. Next, use your Slice tool and create slices over each separate section that you want to become clickable. I have 4 sections: one for weddings, one for babies, one for blog, and one for client login.

4. Now, go to File > Save for Web. Make sure that you are saving as a JPEG and the quality is at least 80. Click “Save.”

5. On the dialog on the bottom, make sure you change the setting to “HTML and Images.”

6. I created a folder called “splash” and changed the name to “index.html.” Hit “Save.”

7. Photoshop should have created “index.html” and an images folder. Open the index.html file in an HTML editor. I am using Dreamweaver. CoffeeCup has a free HTML editor for Windows 7 and Vista.

8. In your HTML editor, select each photo slice and create a link to each. For example for the weddings slice, you will have a link that will point to your wedding gallery. For your babies slice, you will have a link that points to your baby gallery. Your blog will have a link to your blog. Do this for each slice and hit save.

9. You have now created your own splash page. This is where it gets tricky and it’s pretty much impossible for me to give you instructions without seeing how your website is set up. Basically, you will need to upload the “index.html” and “images” folder onto your web server. *** BE CAREFUL*** not to REPLACE OR DELETE the old “index” file! You should rename the old index file to “index_old” or something similar so that you can revert back to it if you need to. Please ask your web admin for help if you don’t know what you’re looking at.

10. Please e-mail me if you need help!

Related Posts with Thumbnails