Designing Your Own Website
A guest post by Victoria Rose Martin
Hopefully as you’ve been keeping up with me and creating one of a kind marketing pieces for yourself. Last month I walked you through the steps of creating a postcard. This month I am going to walk you through creating a web page for yourself.
Once again you’re going to need Photoshop and you’ll also need an html editing program like Dreamweaver if you’re going to want to edit the page afterwards. Next month I will show you how to add links and build a basic site. Or if you don’t want to try your hand at being a web master than you could give your file to a designer and they could easily do it for you. They might even knock a little off the price since you’ve done a little of the leg work for them because trust me, sometimes the hardest part about being a graphic designer is getting verbiage, images and information from your clients. They’ll love you for it.
We’re starting this month just as we did last month with Adobe Photoshop. You also might want to check out last month’s blog post for affordable suggestions on getting your hands on the software. I’d have to say one of my favorite programs is Photoshop, it takes years to really master the software but when and if you do you won’t have to hire a person to do the work for you. Just to walk you through the process, first we’re going to set up a wire frame or a web page template. Then we’ll slice and save the image for the web.
With websites you need the actual web site files, a domain name and hosting to make it live on the Internet. It’s easiest to think of web sites as a series of individual pages all connected by links. Usually the header (the top) and the navigation stay static page to page and the content in the main body section changes from page to page. Plan ahead, make an outline and figure out how many pages you’ll want. And in web design there exists something called the rule of 3's.
• If it takes longer than 3 seconds for your page to load, people hit the back button. Make your pages “light” or not too large in file size.
• It should never take a person more than 3 clicks to find what they’re looking for, if it does they hit the back button.
• And lastly, look at the layout of your page. If you consider the rule of thirds you should have a header, navigation, and body or content section. Don’t add too much. People won’t have a focal point and might find your site too hard to view. Keep it simple and clean and let your art be the star attraction.
Image 1. Demonstrating page layout based on the rule of thirds.
Create a new web document in Photoshop. The first thing you should notice is that web documents are much smaller than print documents. That’s because in web design size does matter. If you click on the toggle which reads Presets you can toggle between print and web sizes. I chose 1024 x 768 pixels as my document size.
Image 2. Dialogue box showing page size when a new page is created.
Begin designing your page. You should have planned ahead and thought about the look of your page. Do you want it clean and modern or edgy? Go to menu option FILE/PLACE and bring in your first image. Make it one of your favorites because first impressions are everything. For this demo I placed a favorite image where I had already trimmed away the background using the Lasso tool in Photoshop. (Image 3) Scale the image up or down as needed.
Image 3. Image placed into the Photoshop document.
Select the Eyedropper tool and sample a color from somewhere on your image. I chose the blue of the shirt for my color. That is going to be the color of your header text. Select the type too, click the cursor on the stage and type your name or your companies name in a clear and easy to ready typeface.
Image 4. Using the eyedropper, sample a color from the image and type your verbiage.
Select the Move tool and move the text until it’s in a good position. You can also adjust the size of the text by going to menu option EDIT/TRANSFORM/SCALE.
Pick another color from your image using the Eyedropper tool. This time I selected a color from the bird and got a nice shade of blue-gray. Next select the Type tool and click anywhere on the stage and type the name of your proposed pages.
Image 5. Type the names of your pages. This will become your navigation.
With the type set for the navigation go to menu option WINDOW/CHARACTER and open the Character panel. Highlight the text with the Type tool and in the Character panel increase the number for more line spacing. Adjust until you you’re happy with the spacing.
Image 6. Adjusting the leading or the space between your lines of text in the Character panel.
Take a look at your composition. Do all of the parts (text and image) relate well to one another? If not adjust them. I decided that the header text looked too small in mine so I bumped up the scale by going to menu option EDIT/TRANSFORM/SCALE.
Image 7. I like the way my page looks. Next I am going to slice and save for the web.
Remember back to image 1 in this tutorial where I mentioned the rule of thirds. We are going to slice the image so it’s in smaller pieces and thus loads faster in browsers. Try to slice your document like I am slicing mine. If you don’t slice your future web page it won’t load quickly in a browser. Not slicing would be akin to not cutting a steak into bite-sized pieces. You would choke on the large pieces. The same thing happens to browsers when you give them massive images to download.
Hiding underneath the Crop tool in the Photoshop tool bar is the Slice tool. The icon looks like a small craft knife. Click your mouse on the Crop tool and hold. The third option under the Crop tool is the Slice tool, the fourth is the Slice Selection tool. The slice too is for slicing up your document into bite-sized pieces. The Slice Select tool allows you to adjust the width and height of slices already drawn.
Image 8. You find the Slice tool hiding under the crop tool in the toolbar.
Image 9. Slices drawn over the future header and navigation. Notice the gray slice where the image is.
With the Slice tool selected draw a box over what will become your web pages header. Then draw another slice over the area that will become your navigation. Notice Photoshop has created slice over the image because eventually everything will have to be converted into a table. In Photoshop slices you draw by hand have Blue number squares while ones created by default in Photoshop are Gray. (Image 10)
Image 10. Detail of slices.
Saving for the Web allows us to convert a simple Photoshop document into an html or web ready document. So go under menu option FILE/SAVE FOR WEB. Notice you get a preview of your page with slices.
Double click on the header. Name the upper part of the page header. Don’t use caps. Web files don’t like uppercase, spaces or special characters like &%$#@. Keep the file names short and sweet.
Image 11. After clicking Save for Web, double click on each slice to name it.
Repeat Step 12 by double clicking on the navigation area and naming it. And then double click on the image or body area and give it a name. I called my three parts of my page: header, nav and body.
Make sure all of your images are saved as JPGs so we avoid weird color shifts by selecting the toggle under presets. And then click Save.
Image 12. Make sure all of your slices are JPGs.
When asked where to save your sliced web file create a new folder. This will be your Root folder for your entire website.
When building a website it’s important that your home page be called either index.html or default.html. This allows a browser to open your page. If the browser doesn’t find a document by that name your page will not load. Remember, no capital letters and no spaces and don’t ditch the .html extension.
Image 13. Save your home page as index.html and be sure to save html and images.
Also make sure you’ve chosen the option to save HTML and Images. This option creates an html document that will open in a browser and creates a folder with all of your slices inside of it.
Open your beautiful first web page and ogle it for awhile. In this tutorial you’ve learned how Photoshop can be used to create a web site. If you followed along you just built your very first html page. Good job.
Next month I am going to show you how to create additional pages and create hyper links to connect your pages.
Victoria Rose Martin is an artist and designer currently living in South Florida. She is the Department Chair for Fine Art and Graphic Design at Palm Beach State College in Lake Worth, Florida. You can visit her website at: VictoriaRoseMartin.com.
Image 14. Double click on your index.html and it should open by default in a browser.
For more about marketing your art, check out the 2013 Artist’s & Graphic Designer’s Market
MORE RESOURCES FOR MIXED MEDIA ARTISTS
• Improve your mixed media art with books, DVDs, downloads & from the North Light Shop
• Sign up for your FREE Create Mixed Media email newsletter for great tips, projects & more
• Get unlimited access to mixed media art instruction ebooks
• Download free mixed media desktop wallpapers
You may also like these articles: