How to Make a Sketch Into a Design for the Web
The first step in web design is developing a concept. A sketch can provide the visualization needed in order to turn your concept into reality. Adobe manufactures a program called Fireworks that can aid in turning your sketch into a fully functioning website with a few clicks. As long as you have some working knowledge of design principles and graphics software, you can quickly put together a CSS and HTML-based web layout with ease.
Other People Are Reading
Instructions
-
Develop your Artwork
-
1
Start Fireworks and open a new document. Size the document appropriately. A screen resolution of 1024-by-768 is appropriate for 2011 standards.
-
2
Transfer your sketch to the Fireworks document. Recreate your sketch exactly as it appears on your rough layout, using the tools provided. Fireworks provides a layout and design toolset that is sufficient for transferring over any hand-drawn concept.
-
-
3
Save your file in a meaningful location. Consider saving the layout in or next to the file system where your website is located.
Slice and Export
-
4
Select the "slice" tool from the tool bar once your design is complete, to turn your layout into slices. It is located in the "Web" section and looks like a razor in front of a box. The slice tool will break your document into manageable pieces. With the slice tool, make a box around the different design elements. Place a slice around your header, individual images, layout objects and text.
-
5
Choose "File," then "Export" after making all of your slices. A dialog box will appear. Select "CSS and Images" from the drop-down menu. Adjust the HTML page properties and choose how you would like to display your website's images. Click "OK" and save the document in the appropriate location to complete the processes.
-
6
Create a new HTML page and import the CSS file you just created, using an HTML editor like Adobe Dreamweaver to complete your website. The CSS file will instruct your HTML page to display your slices in the proper location. It recreates your Fireworks layout in a web-based format.
-
1
Tips & Warnings
Slicing is one of the most important steps in the process. Ensuring you have made appropriate cuts is crucial for this process to work well. Before making your cuts, step back and take a look at your document. Put a plan in place before you start slicing.
Consider browser compatibility when designing your web page. Test the final product on multiple browsers to make sure it displays properly. You may need to adjust the CSS and HTML files for your web page to appear the way it did in Fireworks before the export.
References
- Photo Credit Ablestock.com/AbleStock.com/Getty Images
