Now: Tutorial for Web and Software Design > Photoshop > Web Layout > Photoshop Content
> Nice Content Boxes [Bookmark it]
Nice Content Boxes

1. Create a new canvas

Size: 160x160,
Background: white
Resolution: 72 pixels/inch

2. Set your foreground color to #F2F2F2. Radius: 15 px

Paths (see second image below)

Exclude to overlapping areas (see image below)

3. Now drag out a rounded rectangle that takes up most of the canvas, and it should look like mine to the left (if not, make sure you have the same settings as I used above).

image 1

4. Then, go to the paths tab (windows--paths if its not already viewable) and double click on the path, giving it a name as shown to the left.

image 2

5. You will now have something like the image shown to the left.

image 3

6. Now, select the new layer on the layers tab, and double click on it to bring up the layer styles box (or select the layer and go layer--layer styles).

Next, enter the settings I have above for outer glow.

image 4

7. Now you will have something like that shown to the left, and if you like you can keep it like this, and finish the tutorial here, however, I will now show how to add a nice highlight to it.

image 5

8. Create a new layer now, and then press ctrl and click on the layer with the box on it, as shown to the left.

image 6

Next, with the selection tool selected, nudge the selection up 5 pixels by pressing the up key on your keyboard 5 times.

image 7

9. Now hold alt, then ctrl + click on the color fill layer, and you should (hopefully) get the selection shown to the left.

Now, again with the selection tool selected, nudge the selection down 8 times, and fill it in white.

image 8

10. Next, feather the selection by 3 pixels (select--feather) and then inverse the selection (ctrl + i) and press delete, you should have something similar to that shown to the left.

image 9

11. This looks alright, but I don't think that highlight looks right, so lets make it a bit narrower.

Press ctrl + t and then, whilst holding alt move the left or right anchors a little toward the center, as shown.

image 10

Conclusion

Now it is finished! You should now have something along the lines of the image shown below. ( I blurred the highlight slightly as well - filter--blur--gaussian blue)Media 2004 (C)

Nice Content Boxes Tutorial: Final Result


[Bookmark][Print] [Close][To Top]
  • Prev Article-Photoshop:

  • Next Article-Photoshop:
  • Related Materias
    Re-paint Your Picture
    Cloning Stamp Magic
    Realistic Spotlight Effect
    Layout Slicing
    Turning A Sliced Image Int
    Mosaic Header
    Realistic Microphone in Ph
    Creating A Basic Web Layou
    Tenticle Background
    Creating a Micro Button
    Topics
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Graphic Design Tutorial
     

    Coreldraw Tutorial

      Illustrator Tutorial
      3D Graphics Articles
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial&Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial&Articles
     

    XML Style Tutorial

      AJAX Tutorial
      XML Mobile
    Flash Tutorial&Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial&Articles
     

    Linux Tutorial

      Symbian Tutorial
      MacOS Tutorial