Tutorial: Create a Webpage With Photoshop part 1

This is how I created my webpage. It took some trial and error and at times I
was seriously Bent Out Of Shape. There was was no one tutorial with all the steps I needed to do. I thought I’d share what I learned so that other struggling DIYers could avoid the frustration! This tutorial just covers your basic landing page with active links. Anything with fancy bells and whistles you’d better get someone else to show you or, if you can afford it, do it for you. There are
a lot of steps but they are not hard steps.

1. I am assuming that you already have a domain name and a webhost already. Some
companies will even offer free, basic web hosting if you buy your domain through them. (Sometimes the catch is they slap their big dumb logo on top of your page, though. Not cool, Go Daddy.) Some hosting companies, like iPage, will offer free website building software that you can drag and drop your pictures and links into a template and it’s super easy to use. The downside is that their templates cannot be altered. I wanted things my way so I did it the hard way. It’s not too hard though! You can do it too!

2. Open a new document in Photoshop. It should be 1040 pixels by 768 pixels. This is the standard size of most computer screens.

3. Name your document exactly the name of your website. If your website’s name is ILuvDoodling.com then that should be the name of the document. The reason for this is that later, when your page is live online, this name will appear on the search engine tabs. If you name it something like Webpage Design.jpg then that name will appear on the tabs and that’s confusing.

4. In your Photoshop document create a background. For now I suggest that you make our background white. When you get your page online, on some computers there will show a large white chunk on the side if the screen resolution is larger than 1040 pixels wide. I have not figured out how to avoid this. If you know, or find out, post the solution in comments!*

5. Add your logo, a banner with the name of your website and some text that will ater be made into clickable links such as: Etsy Shop, My Blog, Gallery etc. and space them out a bit.

6. Once you have your page looking the way you want it, flatten any layers, and save. (You
should probably also save a PSD file with the layers intact if you want to update things later.)

7. Now comes the web-pagey part! Over in your toolbar there is a tool called “Slice Tool.” Select it. Use it to drag boxes around anything that you’d like to be a clickable link.

8. Once you have a slice box around everything thatyou want to be a link, go back over to the tool bar and right click on Slice Tool. From the little drop down box, click “Slice Select Tool.” Each of your slice boxes has a little blue square with a number in it. Double click this and a dialogue box pops up. Where it says “Name” type the name of your link. It should be the same as
whatever the text on the page says i.e. “My Blog.” Where it says “URL” type the exact web
address of where you want that link to go. Click OK when you’re done. Repeat this step for each of the slice boxes.

9. Okay, now comes a tricky bit. Save your document, Ctrl>S. Now, go to File>Save>Save for Web & Devices. This big complicated looking box pops up but don’t be alarmed, all you have to do is click save BUT, and this is the tricky part, when you save it, you need to save it as a new file called Index.html. It doesn’t matter what your page’s name is. It MUST be named Index.html. The reason is that when you upload to your webhost, this is the standard name that every server uses to understand ‘hey, this means it’s a webpage.’ You name it anything else, it’s not going to know what you’re talking about and your page will not show up.


10. Find the document on your computer that you named “Index.html”
and click on it. Ta-da! This is what your webpage is going to look like online. You can see it but nobody else can…yet! Take this opportunity to fix or move anything that you don’t like. Click on and test all of your links to see if they’re going to the right places. Notice up in the tab it’ll have
the name of that original document, even though you named it ‘html’ clever huh? I don’t know how it knows, it just does!

Part 2 tomorrow: Getting your webdesign online!

* I DID find out how to fix this but it's tricky and involves tinkering around with your page's HTML code. I found this tutorial by Dave Kristula that shows what code to write and where to put it.