In this episode, we take a very simple Photoshop design, and convert it to pure CSS. It's not a full website, but it shows you how simple it is to go from a photo-editing software straight to code. My editor: panic.com My host: dreamhost.com (Use coupon code ILOVEKNOWYOURMAC for off a yearly plan plus a free domain!)
Many people new to web design are confused by slices and Javascript rollovers and end up abandoning their projects out of frustration. The point of this web Photoshop tutorial is to keep things simple by creating a web page that uses only 2 graphics.
Start off by creating a banner and place it in the top row of a table that will contain 5rows and 1 column. The next row of the table will hold the text for your site along with photos you would like to incorporate into your site. Row 3 will hold a separator, row 4 will contain text links plus a copyright notice, ending with row 5 being a second separator.
For this example we'll name this site My Site. Now we need to find a graphic for the banner. You can find professional level images at sites such as the iStockPhoto galleries and at only $ 3 or so for most images they are affordable. Free stock photo sites are also available for perfectly good quality images.
One tip is to choose one color from your graphic and utilize various shades of this color for your banner for a clean, coordinating look. For the sake of naming a color for this example, we'll go with green in a dark, medium and then light shade.
I find that by using the opacity slider on a sampled color you can create a nice variation. Open a new document and copy and paste the main graphic you've chosen into it.
With this done, open another new document and in the Background Contents select White and Click OK. With this document open, create a new layer by going Layer- New- Layer. Then go Edit- Fill and select Contents, Use: Foreground Color. This will fill your document with the color you just sampled. A valuable tip is to reduce the opacity with the slider and to basically adjust it until reaching the desired color hue. Once you find one you like, flatten the image by going Layer- Flatten Image. Again use the eyedropper tool, to change the foreground color square in your toolbox only now it will be the same as your newly created color. Click on the color square and the color picker will come up, and you can make note of the numbers of the color you had just created.
Scroll through your fonts to find one that appeals to you. Once you come across the one that you feel is right, play around with it a little. Adjust the tracking, the leading and the scale, or even a combination of these. Small adjustments can go a long way in making it much more personal and ensuring your site will stand out among others.
To select a font in Photoshop go Window- Character. In the palette you'll see a list of your installed fonts. To tweak the settings you'll need to bring up the Paragraph palette. You can do this by going Window- Paragraph.
If you are looking for new fonts, you have many options. Free font resources are available to you online.
For our example, create a new document that is 600 x 300 pixels. You can adjust this size according to your own design when you choose your own stock photo and plan the layout.
Now lets make a new layer by Layer- New Layer and call it Designer Pro. I'll position the image on this layer and shrink it to fit. You shrink your graphic with Edit- Transform- Scale. The bounding box will have handles. Use the Shift Key to constrain proportions, and shrink your image by selecting the top left handle and pulling towards the bottom right. Drag inside the bounding box to move the graphic. Once it is to your liking, click OK.
Let's go with a tinted background. Here we will go with a light green.
I select the background layer, Layer 1, and I fill it with the light pink by going Select- All, then Edit- Fill, and in the dialog box in Contents, I select Use: Color and in the Color Picker I enter FBE0EC.
The result is a 600 x 300 banner with a gentle background color and with the art placed on the left. We're getting there.
I've chosen to apply a thick stroke to the background layer to make for a more bold design. First make sure the Layer 1 background layer is active, and make a copy with steps Layer- New- Layer Via Copy. Next double-click next to the layer name. Blending Options in the Layers Style dialog box will appear.
Select and then click on the word Stroke in the Styles options on the left side. I changed the settings to Size: 7px, Position: Inside, Blend Mode: Normal, Opacity: 100%, Fill Type: Color, and I clicked the color swatch and entered D04E8C in the color picker. Click OK.
The border is just to balance out the design. Feel free to make changes and get creative with your own ideas.
Let's place the names of the major sections directly on the banner. These will be the website links. We will be using image maps since it will be only one graphic.
Create a new layer for your words. Use the type tool to create the section names and then use the move tool to position them exactly to where you want on the banner. Remember to pick a color for your text that is darker than your background color to avoid finding yourself screaming obscenities and suffering major hair loss! Do this by going Window- Character. In the Character palette you'll find a color square. Click on it to change colors.
You'll need an HTML editor like GoLive or Dreamweaver to automate this process. This is really very easy. You create little "maps" over each word and enter the link destination. You'll need to do a Google search on image maps to find a tutorial if you don't have an HTML editor, or invest in a book like Elizabeth Castro's HTML Quickstart Guide for help.
Create a new document. The width should be 600 pixels, and the height should be about 12 pixels. Fill this with your background color. Then, using the text tool and a dark color, type some periods, like this:........... and place them in the file, centering them. Change the size and the spacing until it looks perfect. Now save this as a GIF file.
With your HTML editor of choice build a simple table that contains 5 rows and 1 column. If you're going to use text link navigation below the banner instead of image maps on the banner, create an extra row so you end up with 6 rows in your table. Place your elements into the individual rows of the table and that's it!
If you are on deadline and can't cope with learning any more Photoshop techniques or HTML, here's another solution. You can buy a ready-made template from Template Monster that you can use as a base to create web pages in Photoshop.
On the front page of Template Monster you'll find a pulldown menu where you can select options and then carry out a search for a template. The templates are reasonably priced and pretty easy to manage in GoLive or Dreamweaver. In the past I've purchased a template solely for the color scheme and the images. On certain projects I found this was less expensive than buying stock photos. Visit Template Monster to see the wide variety of website templates that they offer.
I hope this Adobe Photoshop tutorial will help you create a really cool looking site, and I wish your new website a thousand years of good luck!
Recommend Web Design Photoshop Tutorial Topics
Question by ihatechunli: Web Design } Photoshop } Leather Background download? Can anyone name some good sites to go to for free photoshop downloads? (i.e. brushes, gradients, patterns, TEXTURES) Thanks! Best answer for Web Design } Photoshop } Leather Background download?:
Answer by Len
http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=16&loc=en_us
Very nice post. You have covered a good topic. Thanks for sharing.
BalasHapusWeb designing certification