• home
  • forum
  • my
  • kt
  • download
  • Stylish content box with Photoshop

    Author: 2008-06-05 09:48:33 From:

    I made this small tutorial for a new content box as part of a bigger web project, and I want to share the tutorial with you so you can make one of your own.

    So here is how to make a custom stylish web content box.

    photoshop web content box

    First start by making a big rounded rectangle on the stage as I did.

    photoshop web content box

    Then go to the layers panel, right click the shape layer and choose rasterize layer, and double click the shape layer to get into the layers styles panel and give it settings as below.

    photoshop web content box

    photoshop web content box

    photoshop web content box

    Now here is a bit tricky part, but try to follow anyway.

    Hold down ctrl and click the shape layer to load the selection, then choose the polygonal lasso tool and set the selection mode to intersect with selection.

    Now click around the left part of the shape selection as I did below to make a selection for the content box title.

    photoshop web content box

    photoshop web content box

    Make a new layer and fill the selection with a random color (we will change it later).

    photoshop web content box

    Now in the layers panel double click the new layer to get to the layers styles panel and give it settings as below.

    photoshop web content box

    photoshop web content box

    photoshop web content box

    Now type in some text and rotate it 90 degrees and put in on top of the green bar.

    The last thing we will do is to add a bit of reflection to make the green bar look a bit like glass.

    So hold down ctrl and click the layer containing the green bar to load the selection then with the elliptical selection tool, make sure to use intersect with selection and drag half across the selection as shown below.

    photoshop web content box

    Give the selection a gradient from white to transparent horizontal

    discuss this topic to forum

    relation tutorial

    No relevant information

    Category

      Abstracts (88)
      Effects (463)
      Animation (135)
      Photo Effects (682)
      Automation (15)
      Photo Retouch (268)
      Basics (339)
      Photography (298)
      Brushes (44)
      Scripting (5)
      Buttons (177)
      Text Effects (676)
      Color (71)
      Textures and Patterns (167)
      Digital Art (141)
      Web Graphics (693)
      Drawing (735)
      Web Layouts (175)

    New

    Hot