1
Create an image at least 327px wide. As far as width goes, it shouldn't matter very much since we are making a panel & when coding is in place, the image may vary. But on the contrary, my canvas is 159px in height. On the background, begin by selecting the Paint Bucket tool, painting the background #BADBBE.


2
Now we will begin the process of building the panel itself. Since we are near Christmas time, it's decided that we go with Christmas themed colors.(Make a new Layer Set & Layer, Layer>New>Layer Set & Layer>New>Layer) So selecting the Rounded Rectangle Tool, draw a rounded rectangle colored #FF5454, filling much of the empty space as shown below.


3
Now we are going to add 3 Layer Styles to this layer. Use the following settings below.





4
Now, go to the path tab, select the rounded corner path you just created, and turn it into a selection. Now once you have this selection, Contract (Select>Moify>Contract) it. When done, create a new layer, and Stroke (Edit>Stroke) it using the color #FF3B3B.


5
Now we are going to add 1px white diagonal lines using the Paint Bucket Tool but, first you must make sure you have made this pattern. You may want to refer to http://www.biorust.com/tutorials/detail/169/en/ to create thin diagonal lines. When you have finished this, set the layer Blend Mode to Overlay & turn the layers Opacity to 39%.


6
Now we will begin on the panel's header. Make a new layer set & layer. On the new layer, with your selection still active, choose the Rectangular Marquee tool. Holding Alt, cut a reasonable amount of the bottom selection off. You should have something similar to what's below.


7
With the selection active, select the Gradient Tool. Set the foreground to #C72020 and background to #F14A4A Within the selection, pull the gradient from bottom to top, making sure the darker color is on the bottom. Be sure to set the Layer's opacity to 38%.


8
Deselect (Ctrl+D) the current selection and select the Rectangular Marquee Tool. (Create a New Layer) Right below the Gradient you just made, fill a 1px tall line, running from the beginning of the gradient to the end of the gradient horizontally. Set layer opacity to 16%.


9
Now to add a little bit of decoration to show Christmas Spirit. We pulled a 16X16 from ndesign's free Christmas Icon Collection located at http://www.ndesign-studio.com/resources/christmas-holiday-icons/. You probably could choose any of those icons from that collection but we thought the bow would fit well. So, download this pack, copy a 16X16 PNG of your choosing from the folder. When done, open the file into Photoshop, Select it (Ctrl+A),Copy (Ctrl+C) and Paste (Ctrl+V) it onto your main file. Then using Move Tool, move the icon onto the right middle area of your header.


10
Now to add a header title. Using the Horizontal Type Tool (color:343434,font:Arial,size:17px,weight:Regular,style:Strong), type out the header of your choosing. Then Below, type a subheader but, change the color to white, size to 10px, and type to none.


11
Now, we will add mini-content boxes to your panel. Create a new layer set & layer. Select the Rounded Rectangle Tool and set the radius to 3px. Now, go to the Paths tab and make the path a selection. When done, select the Gradient Tool. Using Black&White as Foreground & Background; starting with white, pull the gradient down to create a gradient similar to the one below. As you can see, this gradient is not preportional. Set the layer's opacity to 61%.


12
Create a new layer. Using white as our foreground, Stroke (set on center) the current layer. Set the layer's opacity to 86%.


13
Create another new layer. Contract the selection 1px. Using #C2C2C2 as your foreground, Stroke the current layer. Then set the layer's opacity to 29%. This may vary slightly depending upon what version of Photoshop you use.


14
It's time to fill it up with text! You can do this however you may wish, in this example, I used Arial as the font of choice. The subheader's color is #ABF999, header is white, replies is black, and views is #700000. However this will vary depending upon personal decision.


15
Now, we must create another min-content box for mouseover purposes. Duplicate the current Layer Set. Drag this layer down to a spot of your choosing. Going back to the gradient-background layer within the layer set, set the layer's opacity up to something similar to below. It may vary depending upon choice as well.


16
Finally, the footer (Create a new Layer Set & Layer). Go back to the path of the entire bounding box within the Paths tab, select it. Turn this path into a selection and thrust the selection upwards once (hold Shift+Up). You should have something similar to what's below.


17
Now, this is a very tricky stage where we are going to try and get the inverse of the panel. First, select the Inverse (Select>Inverse) of your selection. Then, using the Rectangle Marquee Tool, cut the selection (hold Alt when selecting) as close as you can to the beginning of the bottom rounded corners of the bounding selection.


18
To perfect this, select the Magic Wand Tool. Be sure to check "Use All Layers". Now, (holding Alt) select the outer edges where Green is located. You should have a suitable area for use as a footer.


19
With the selection active, select the Gradient Tool. Also, set your foreground as #E25757 and background as #C92626. Within the selection, pull the gradient from the bottom end of the selection to the top. Set the layer's opacity to 66%. You should have something similar to below.


20
Now we must add a border on the top end of the gradient so that it blends well into our panel. Change your foreground color to #FF4242. (Create a New Layer) Stroke the curent layer using this color. Now, select the Eraser Tool using a small brush (3-5px, opacity&flow:100%), and erase all sides of the stroke except for the top side. You should have something similar to what's below.


21
Duplicate the last layer. Then using the Move Tool, push the layer up 1px. When done, Brighten the layer using Contrast (Image>Adjustments>Brightness/Contrast) until the stroke on the layer is fully white. Finally, set the layer's blend mode to Overlay.


22
Lastly, adding text. It may very from person-to-person but we decided to go with Arial again here since we used it as the header. You could also go with arrows, which may look a bit more effective.


Here's one that's a little bit more filled, Enjoy!