Designing WebPages in Photoshop
By ramakrishna | December 19, 2006
Designing webpages in Photoshop
What elements are responsible for a website to look professional?.
Its minimal use of colors and tones from same family and the balanced layout of the page. It is best practice to make a rough layout on paper before you start designing on computer. Try how you can design differently.Refer some eye catching designs of websites. Analyze what elements are reflecting the website’s look and feel rich. Note down the Hexadecimal color codes of the site. Apply those colors in your own layout and check how the final design appears.
Slicing the Design in Photoshop
You need to slice the final design in order to insert sliced graphics and gradients in to html pages. Colors can be filled with the help of Cascading Style Sheet (CSS). For rounded corner page elements and gradients you need to slice and place them in the html pages.
Following tutorials are designed based on Photoshop CS. The step by step procedure may same for lower version of Photoshop. The menu and tool options mentioned may differ slightly with lower/higher version of Photoshop. However the tutorial will give you clear idea about slicing your design in photoshop.
Open your Photoshop. If you are first time to photoshop, please go through Step 1 to 3 below.
(1) Start Photoshop.
(2) Go to File >> New (Keyboard shotcut Ctrl+N).
(3) In New dialogue window change the following settings:
- Type Width :780 pixel, Height : 600 pixel (or any measurement you wish).
- Resolution:72 pixels/inch. (Resolution 72 widely used and it is web standards).
- Color Mode:RGB 8 bit. (do not go for 16bit. 16 bit will double the file size).
- Background Contents: White (Also see other options Background and Transparent by clicking small arroww right side).
When you select Background option, the color selected at “Set background color” color box in tools will be applyed and for knowing about how the Transparent background look like?, please go through Transparent Background tutorials on this site.
Leave all other options as is and click OK to get new photoshop Document.
Playing with Tools.
The easy why to learn and understand any Graphic tutorials is to play with tools for some time to understand the tool behaviors. Play whatever why you want. Nothing will happen to software or computer. Devote some time to know about the tools. Iam going to tell about only for few tools those are required for slicing the design. Start playing with the following tools mentioned below. I explained required steps to understand the behaviour of the tool in right manner.
Slice Tool
Slice tool is used to slice the images, buttons, logos, banners and other required small minute parts that are existing on photoshop document (.psd format). Finish playing with tools section. Iam going to discuss in details about document formats in Layers in Design Section.
When you click and hold mouse on slice tool in tool box (from top third row right) you can see two tools. One is slice tool and another is slice selection tool. (A Small triangle icon at the lower right of a tool icon indicates hidden tools.)Slice tool is used for slicing the graphics and the other tool is for obviously for selecting the sliced images.
Practice this:
There is no need of any graphic included in document. Let the document you opened be blank.
(1) Select Slice Tool.
(2) Click and draw a rectangele without realeasing the mouse. You will see this:
Move mouse inside the selection, the slice tool turns to slice selection tool with an arrow pointing on top. You can toggle between Slice Tool and Slice Selection Tool by holding Ctrl Key.
(3) Double click inside the selection to see slice option dialogue box. Here you can see width and lenghth of the sllice. Change the width and the length and click ok. The slice you draw on document will change to new sizes. This way you can increase and decrease the size of the slices pixel by pixel.
Tip:
You can measure any graphic’s width and height on design with slice tool by adpoting method explained in Sl.No.(3) above.
(4) Continue to draw more slices side by side. when you draw new slice, previous slices will get automatically deselected. To select previous slice hold down Ctrl key and click inside the slice.
Tip:
You can toggle visibility of slices by pressing Ctrl+H
(5) Double click inside any slice.
You will see slice option widow. By default the slice names will appear as Untitled-1_01/02..you can change this default title settings with descriptive image names to identify them when you insert the slices in HTML pages.
Tip:
You can duplicate slice by holding Alt key and dragging the selected slice.
To delete a slice, select the slice with selection tool and press Delete Key.
To adjust the slice width and height move the slice selection tool to the selection edges. When mouse turns to horizontal arrow drag the handles to required size.
For adjusting from corners of the slice, hold down Ctrl Key and move curser to the corners. When cursor get slanted direction drag the handle.
Topics: Graphic Tutorials | 12 Comments »
Simple Html Structure
By ramakrishna | December 19, 2006
Before proceeding to read “Simple Html Structure” please go through Introduction first.
Simple Html Structure
———————————————————————————————————————
———————————————————————————————————————
<html>
<head>
<title> Your site title goes here </title>
</head>
<body>
(your text, tables, and images goes here)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra posuere ante. Morbi mauris. Suspendisse suscipit bibendum tellus. Curabitur vulputate congue diam. Vestibulum condimentum. Maecenas sagittis imperdiet magna. Fusce aliquam mi eget turpis. Praesent non tellus. Morbi in mi. Cras mi ipsum, tincidunt id, tempus vel, molestie vitae, sem. Integer consequat luctus lorem. Nam quam lorem, consequat blandit, malesuada at, vulputate nec, erat. Phasellus enim. Curabitur nisi nisi, sollicitudin a, lacinia a, semper a, libero. Mauris vel urna. Integer libero enim, rutrum eget, aliquet ac, molestie et, nibh. Sed id sapien. Maecenas egestas.
</body>
</html>
———————————————————————————————————————
Copy above code (from <html> to </html>) and paste into notepad and save it as test.html on Desktop. Open test.html from Desktop. You only can see the text typed in between <body> and </body>This is how html code and output looks like.Html page can be created with the help of notepad if you are confident with hand coding.
Dreamweaver is one of the WYSWYG html editors Software. While you are designing in Designing window, at the same time you can see the code generated by Dreamweaver in Code window. Before proceeding to slice the design in Photoshop, understand the basic html structure. Remember the above code and try to type it in notepad from memory and save the files with .html extension to see it in browser.
Next proceed to Designing Webpages in Photoshop
Topics: Graphic Tutorials | 2 Comments »
Introduction
By ramakrishna | December 19, 2006
As an Illustrator, Animator and Cartoonist Iam here to share whatever I know better. Many Cartoonist friends asked me how to make drawings and Caricature on Computer using mouse and with Graphic software and how to align them in html pages.
Before I go for how to draw, scan and color the drawings using Graphic Software, I would like to mention how to slice the images in Photoshop meant for HTML pages through simple tutorials. These tutorials not only benefit my Artist friends but also people I know on different discussion/web forums on net.
I placed few tutorials on Sketching, Drawing and coloring in Photoshop and also explained in simple steps how to make Avatars from photograph. Please visit the following links to have glance at them before you proceed further. They are here:
1. Rough Sketching, Inking, Scanning and Coloring.
2. Designing Avatars from photos.
All the following tutorials are designed and written for beginners, and someone new to html pages. There are plenty of tutorials available on net. But before proceeding to Slicing and placing the images into WebPages, it is good idea to get a basic Idea of html coding.
Next tutorial >> Simple Html Structure
Topics: Graphic Tutorials | No Comments »