SOFTWARE

Css Javascript

Simplest Way To Create XHTML, CSS, javascript Websites With Visual Design Created in Photoshop Tool

It is no easy task to actually build a working site that matches a visual design created in a tool like Photoshop. Photoshop is designed to give total freedom to the artist. The web, on the other hand, is built on top of many confusing technologies and standards that place other concerns ahead of preserving visual design integrity.

The programming languages that are necessary to create visually pleasing web sites such as XHTML, CSS, javascript, etc., can take months or even years to learn. Understandably this situation has intimidated many users who are good at Photoshop but don't want to spend months or years learning the gory details of the internet.

An easy to use program has been created to work alongside Photoshop. SiteGrinder 2 successfully turns Adobe Photoshop into a powerful website design and production tool. To be sure, SiteGrinder is not aimed solely at the web beginner, a SiteGrinder-equipped designer with no prior web design experience can use only their Photoshop skills to go from initial concept to a full deployment of a professional, standards-compliant site in a few hours.

The difficulty of this task is invisible to the user as SiteGrinder builds graphics, text, and interactivity using modern web standard technologies and takes into account tricky requirements like cross-platform browser compatibility.

You know Photoshop, SiteGrinder knows CSS, HTML, and web image formats. It is simply a matter of you telling SiteGrinder about special layers, like buttons, by adding "hints" to the layer names.

Often times the only things required to create interactivity such as "button", "rollover", and "popup" can be easily created using "hints". Once you've added a few hints in Photoshop you can simply open SiteGrinder and create your page with a simple mouse-click.

This unique system works the way you do, turning web design into a more creatively satisfying activity. Enable your web site's functionality as you design it, quickly testing it out live in a web browser whenever you feel like it.

This flexible program even allows you to make major last minute design changes, such as selecting a new background image, without headaches! SiteGrinder

You may wonder how SiteGrinder can make many web pages from a single Photoshop document. The answer is easy! Photoshop has a little-used but powerful tool called the "layer comps palette". This palette allows you to save and name particular document states, including the position and visibility of every layer.

You simply need to make the document look the way you want a a page on your site to look and then make a layer comp. You then set up the next page and repeat. SiteGrinder uses these comps to decide what to include on the web pages it produces. Even better: if your layer comp names match your button names then SiteGrinder will automatically link them. You don't even have to provide links!

Click Here To Master Adobe Photoshop In Just 2 Hours With David Peters Photoshop CS4 Video Tutorials – Guaranteed (Even If You're A Total Newbie)

Did you like this article? Curious about learning photoshop fast? Well now you can started, what are you waiting for?

Sign up for free photoshop e-course

About the Author

Started out in design and then moved into digital photography. I have worked for Adobe in the Photoshop department and now create on line tutorials to help users understand this very seemingly complicated piece of software.Visit :http://learnphotoshop2.blogspot.com/

Applying a CSS rule to Javascript rollover?

I've just started out learning javascript and have learnt how to write an easy rollover image, i was wondering if i could use a CSS div tag to control the height and width of the two images within the javascript rollover without having to crop the two images into the same size every time through photoshop. If it is possible, how?

Thanks for any help,

Hi. You asked your question in a very confusing way, so let me see if I can help clear things up for you.

First of all, you should get the roles of web languages straight.
- HTML is for adding structure to content. (for example: putting text into paragraphs, headings, lists, or tables)
- CSS is for adding style and design to content. (for example: changing text colors, fonts, or adding background images)
- Javascript is for adding interactivity to content. (for example: reversing the order of a list, loading new content onto a page, or controlling a music player)

It is possible to use one of these languages for things other than their role (for example, styling a page with HTML elements or organizing content with JavaScript) it's usually best to use each language for it's intended purpose (html for content, css for style, and javascript for actions)

For sizing the images, and changing the size during a rollover, I think it's best to do it all with css.
Here is an example of how to do it.

In this example, I'm setting the size of all images to 200px wide. I can set a height too, but by only changing the width I'm letting the height change automatically so the images won't looked stretched.

When hovering over an image, the width is set to double (400px). Again, I'm not setting the height, but it will change size automatically to match the width. As for the margin, I'm creating an extra space around the smaller images, so it has room to double in size without moving other elements on the page. You might have to play with the margin to get that just right.

While it is possible to do this with javascript rollovers, I think it's easier and makes more sense to do it with CSS :hover since it is a style / presentation thing instead of real interactivity.

Build Native iPhone Apps with HTML, CSS, JavaScript and PhoneGap