Web Design Graphics

I am regularly asked about methods to create eye popping sites. Luckily, it’s essentially fairly straightforward BUT you have got to understand how to use Photoshop for web designed graphics. The steps are straightforward and I should outline them for you. The majority have no idea that you may use Photoshop to do web design. They just regard it as a graphics editor and that it is for working on photographs that would display within a site. The truth is though , you can create the entire web site with Photoshop. First, you have got to split the site up into 3 main elements. The header, the content, and the footer.

The reason why you do this could become clear at some point. You then consider the size you would like for the site.

Using the great quantity of tools available in Photoshop, you create the graphics of how you would like the site to look. Add pictures to the header, create blinding text, all of that. A good guideline is around 600-700 pixels wide. The length of the site ( vertically ) will change depending on your content, explaining why you create the header, content area, and footer separately.

Ensure you leave a pleasant empty section in the content area. The opening Photoshop file will be around 400-500 pixels high, to permit space for a header and footer, and an area in the middle for content. You then use the Cut Tool ( located in the flyout for the crop tool ) to draw slices on the completed Photoshop composition. This allows you to explain how the pictures should be cut and permits you to pick the area for content. If you cut it right, the content area will grow as your content grows, meaning the template you are making will work for any quantity of content. Then you will save the file in the local PSD format, so you can edit it later, and then reserve it again using the option Save for Web and Devices. This could bring up a dialog that lets you make selections based primarily on quality and image type. You need JPEG and at least 80 on the quality. Pick your location for the files and Photoshop will cut your graphic into pieces, based primarily on your slices, and assemble those pieces with an HTML file. All that’s left is to open the HTML file in an HTML editor and add your content in the acceptable section. You may then have a pretty, eye popping website design, done nearly completely in Photoshop.

Here is a suggestion – When you open the HTML page, make efforts to center the layout and change the background color to match that of your new site.

Leave a reply

Recent Articles

Recent Comments

Categories


Photoshop Tutorials

Archives

© 2009 Photoshop Tutors