Oktigh’ın Web Tasarım Blog’u

Clean Green Content Box

Posted on: Nisan 6, 2009

Step 1

Create a new document and set the dimensions of content which you like. (mine dimensions are 300x231px).

For background color set white color.

Step 2

Take the Rounded Rectangle Tool, under Foreground color set #9AB82E, and create the main shape for content box.

Using the Rectangle Tool, create the shape for content. See the picture below.

Step 3

On a new made shape, we will apply the following styles:

Drop Shadow

Inner Glow

Gradient overlay

Stroke

Step 4

Now, we will create another shape inside the existing shape. To do that, you must to duplicate the existing shape and after that using the Free Transfrorm Tool, to decrease it. So, click right click on the shape layer and chooe “Duplicate Layer”…

Step 5

After that, press Ctrl+T (Free Transform Tool), and under width and height set 97% . See the picture below.

Step 6

Then, decrease a little the top part like it is shown on the picture below.

Now, our content box looks like this:

Step 7

Remove the current drop shadow, inner glow, gradient and stroke for our duplicate shape, and apply on it the following styles:

Inner glow

Gradient overlay

Our content box now looks like this:

Step 8

Add the heading on the top of content and some icon if you want🙂

I have used Ms Trebucht Bold font, 12px, Strong.
I have also add a stroke 1px size, this color #7E991D.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s


  • Hiçbiri
  • Gaziantep Web Tasarım: Teşekkürler Çok Güzel Bir Paylaşım...
  • Brandon: Great blog its very helpful and easy to understand. For more ideas or just to add links check out http://www.mofikiworldwide.com/blog.php There are b
  • alstontyer: So how do you post a poll?

Kategoriler

Arşivler

%d blogcu bunu beğendi: