Flash Game Design  
Tutorials Articles
  Step 3.
  This is the 2nd part of the Photoshop tutorial to create a colorful web layout. Make a smaller rounded rectangle using light blue (EDF9FF) for the color. Next we're going to create the header graphic, so create a new layer. Use the polygonal lasso tool to create the shape, shown in image b), in the center and at the top of the light blue rectangle. Use orange (FFB227)for the 1st shape and dark yellow (FFD327) for the 2nd one.
   
 
a) Click to enlarge   b) Click to enlarge   c) Click to enlarge
   
Step 4.
Use the transform tool (edit > transform > rotate) to rotate the yellow shape so that it's in line with the side of the orange one. Duplicate the yellow layer and the flip it horizontally (edit > transform > flip horizontal). Line it up with the left hand side of the orange shape. You may need to rotate a bit more to line it up properly. Continue to duplicate the shapes, making as many as it takes to cover the light blue shape horizontally.
a) Click to enlarge   b) Click to enlarge   c) Click to enlarge
Step 5.
After duplicating all the shapes, the layout should look something like in the images below. As you can see, as more duplicates were made the shapes were moved higher up. Next, merge all the striped shapes together and then use a rectangular selection to delete the bottom part of the shape (image b), making it flat. Use a selection of the light blue rectangle to cut out (layer via cut) the area of the striped shape covering the light blue layer.
a) Click to enlarge   b) Click to enlarge   c) Click to enlarge
Step 6.
You should have something as shown below. Then go to Layout Photoshop Tutorial Part 3
Click to enlarge
 
 
   
   
Site Copyright © 2008 Nick DS. All rights reserved.