Treceți la conținutul principal

Postări

Se afișează postări din octombrie, 2012

Design a Fun Professional WordPress Layout in Photoshop

In this tutorial we’ll design a Fun, Professional WordPress Layout in Photoshop. 1. Firstly open a new document that’s 900×1150, create a rough of where you want the menu/s, banner, content, footer and sidebar will be in Photoshop. 2. Put the rough placements into a seperate folder, click on the eye to make it not viewable. Create a new layer, go into Blending Options > Gradient Overlay and out in the colors of your choice. Here’s the colors I’m using: 3. Next put in your menu on the top bar, and place your logo in the banner area on the left side. I’m using the font Verdana, size 12 and coor #8eb2dc. 4. Since this layout will be turned into a WordPress Theme for my Tutorial website, I’ve placed Adobe icons and put a dark outer glow around them. 5. Next I want to create a glow on top of logo. Get the circle tool and create a oval shape. Go into Blending Options on the layer and create an outer glow with these settings. Then move the circle so it’s out of view and the glow i

PSD to HTML/CSS Design, Slice and Code

Learn how to design, slice and code your own Photoshop layout in Photoshop and Dreamweaver. Design Follow this tutorial to design the layout for this lesson. Slice 1. Open up the design in photoshop and remove the text (eg. Menu text, content text, sidebar text). We will be saving these sections of the layout: 2. Grab the slice tool and slice the sections of the sections I have highlighted above. Next go into File > Save for Web & Devices. Once in the web & Devices new window double-click on each sliced image and name them to make it easy when you start coding. Next save the images as a PNG-24 3. Next hide all the layers on the layout (by the eye icon on the layers) and leave the background. Grab the crop tool and crop the background and save an bg.gif. 4. Next hide the background layer so it’s transparent and click on the category header. 5. I’ve decided to add an extra bits to the bottom of the category box using pen tool and color #598305. Next