Minggu, 08 Juli 2012

Photoshop Web Design Tutorial [webdesign4tutorial.blogspot.com]

Photoshop Web Design Tutorial [webdesign4tutorial.blogspot.com]

Question by jseifert1984: What is a good web design tutorial? I have been learning the basics for web site design. I work about 60 hours a week, and this leaves little room to actually take classes for such. What is the BEST web tutorial that fully teaches html, xml, java, css, etc.. Best answer for What is a good web design tutorial?:

Answer by madhav_2308
For tutorials: http://www.kirupa.com http://www.cbtcafe.com/dreamweaver/index.htm http://www.sitebuilder.ws/dreamweaver/tutorials/ http://www.tutorialized.com/tutorials/Dreamweaver/1 http://www.wellesley.edu/Computing/Dreamweaver/CSS/cssExternal.html http://www.uwec.edu/help/Dreamweaver04/css-create.htm http://www.csszengarden.com

Answer by Better Life
a recently launched website is http://webpaged.googlepages.com they have few articles so far but they say they will be delivering tutorials about every part of web design.

Answer by ExpressWebDesigns.com
The best Hands down would be http://www.w3schools.com/ I learned my basic skills there before going on to school to get a degree, my first year was so easy because I knew everything from them!!

[web designing tutorial]

In this HTML website design tutorial I will teach you how to write and format your very first web page using HTML. Difficulty Level: Easy/Beginner If you have any problems or need help with any of this tutorial please leave a comment below or message me on YouTube.

http://mgaray.com HTML Tutorial 1 - Designing A Website In Notepad - Basics and Beginnings

I'm often asked about ways to create eye popping web sites. Fortunately, it's actually pretty easy BUT you have to know how to use Photoshop. The basic steps are simple and I'll outline them for you.

Most people don't know that you can use Photoshop to do web design. They just think of it as a graphics editor and that it is for working on images that would display inside a web site. The fact is though, you can create the whole website with Photoshop.

First, you have to split the site up into three main components. The header, the content, and the footer. The reason you do this will become evident eventually.

You then think about the size you want for the site. A good rule of thumb is around 600-700 pixels wide. The length of the site (vertically) will change depending on your content, which is why you create the header, content area, and footer separately.

Using the enormous amount of tools available in Photoshop, you create the actual graphics of how you want the site to look.

Add images to the header, create dazzling text, all of that.

Make sure you leave a nice empty section in the content area. The initial Photoshop file will be around 400-500 pixels high, to allow space for a header and footer, and an area in the middle for content.

You then use the Slice Tool (located in the flyout for the crop tool) to draw slices on the finished Photoshop composition. This lets you specify how the images should be sliced and lets you pick the area for content.

If you cut it right, the content area will grow as your content grows, meaning the template you're making will work for any amount of content.

Then you will save the file in the native PSD format, so that you can edit it later, and then save it again using the option Save for Web and Devices...

This will bring up a dialog that allows you to make selections based on quality and image type.

You want JPEG and at least 80 on the quality.

Pick your location for the files and Photoshop will cut your graphic into pieces, based on your slices, and assemble those pieces with an HTML file.

All that is left is to open the HTML file in an HTML editor and add your content in the appropriate section. You will then have a beautiful, eye popping web design, done almost entirely in Photoshop.

Here's a tip: When you open the HTML page, make sure to center the layout and change the background color to match that of your new website.

Recommend Photoshop Web Design Tutorial Topics

1 komentar:

LinkWithin