The Old School Way of Creating a Website!

Designing a web page with Photoshop isn't as hard as I thought it was going to be; it surely isn't brain surgery :-)

With the help of my dear friend, Eloise Pasteur, I was able to design an attractive webpage on my Mac from scratch using just Photoshop 7. To make it into a webpage, I used Smultron to write the CSS/HTML and CyberDuck to load files onto my server.

Windows users can use Photoshop, Notepad and WinFTP to complete this project.

This How-To article only focuses on the design of the site in Photoshop 7. As you will see, there are lots of benefits to using Photoshop instead of pre-created CSS templates. If you would like to learn the next step of this process, how to create CSS style sheets, click here.

While it may seem pointless to design a website with a photo program, there are lots of good reasons to do so. Many free CSS resources give you templates that all look pretty much the same (blog format, one, two or three columns, etc.). Designing in Photoshop allows you to articulate a stunning visual website that is unique.

Planning

As always, it helps to plan your ideas out ahead of time and to think clearly about what you want the end site to look like. Web design requires that we think about the user and any of the possible browsers he or she might use on any of the platforms.

In working with Eloise, I was able to identify the parts that my website MUST have and was able to think about what I wanted the website to "feel" like to the end user. I sketched out my ideas on paper.

Working with Images

Select or create images for your site (background, buttons, etc.). If you are creating original work, you can just skip this part and go to the next section. If you are using images created by others, read on!

The trick in using images found on the web is that you need to make sure you have permission to use them. Images licensed under Creative Commons can be used if their license allows for modification and/or commercial use. Flickr offers a pretty easy process for finding out which images allow for various kinds of uses.

To find an image, go to flickr and type in your search term. Once you get the results, click on ADVANCED SEARCH (next to the search box).



Scroll all the way to the bottom of the page and check off the box next to Creative Commons and modify. If your site is going to be commercial, you will need to check off that box, too.



If you prefer, you can also create buttons with programs like Buttonator. I created my own buttons using this image.



If you decide to use a background picture for your web page, you will need to find one that is not too distracting and works with your theme. You can use an existing picture or use the guidelines above to find one that is licensed under an appropriate Creative Commons license.

Building the Dream

Once you have all the ingredients picked out, you are ready to start building your dream. Start with the background layer first. You will want to think about the users and how their browsers will display your website. Since there are so many different sized screens and so many browser choices, it is good to use the industry standard.

In this example, I am using a background image of a book and flowers as bullet points.



Normally, a background image should be between 670px-1000px wide. There isn't really an industry standard, but Blogger uses 740px wide. Buttons and icons can range from 1px on up depending on the look you are trying to achieve. I used 25px by 25px because I wanted to sustain some of the flower's detail. You will want to check your site in different browsers to check the overall look.

The Layout Process

Once you have a rough idea about how big you want your images, you are ready to start laying out your work in Photoshop. This part is really fun because it is like table where you can just spread everything out and see what fits together nicely. Don't worry too much about the size of your images because you can always adjust them as you go along.

Step 1: Save your Background as Layer 0

Open up the Layer Palette (F7) (if it is hidden), and double click on "background." It will ask you if you want to rename it Layer 0; click OK.

Step 2: Create a Title

Using the text tool (the T on the toolbar), create a title for your web page. Play around with the color and font and where you want it located on your site. Just remember that not everyone has crazy fonts, so it is best to stick to standard fonts.



Once you have written what you want, click on the "move" tool (the little arrow at the top of the toolbar) and move the text where you want it.

Step 3: Adding Buttons, Bullets, and Icons

Each button, bullet, or icon will need its very own layer. You should definitely label each one as you create it to avoid confusion later. For example, the first flower in my project was named "flower" and when I copied it, it defaulted the name to "flower copy 1" and then "flower copy 2" and so on. Be sure to name each copy as you create it, so you are sure to match each image with the correct content.

Getting Ready for Publication

Once you have your image and text where you want it, you might want to add in some "space savers" as I did with the black boxes. These black boxes will be replaced with video screens that will be coded into the HTML. The black boxes help me visualize what the final website will look like.

The PSD file you generate is the design document that you (or another person) will use to guide them in creating the HTML and CSS files that go to make up the webpage. In addition, some of the layers may be used to create image files in a web-friendly format such as jpg or png. In my design, the flowers and the book background wereused in this way.

There are no free tools that directly convert the PSD design template into CSS and HTML, but there are some that aren't free. I used Smultron (a text editor) to create both, but you can use tools such as CSS Creator (http://csscreator.com/version2/pagelayout.php) if you prefer, to try and generate the CSS automatically if you are unsure.

Finally you will want to FTP your files (HTML, CSS and jpg/png files, not the PSD) onto your server space so it is available on the web.

Your work in Photoshop is complete! You now have a unique webpage that looks nothing like the same-old stuff out of the web! Do you have any tips to add?

Image by Paukrus