Lets get started

1. The first thing we need to do is create a new document with the dimensions of 700×200.

2. On your background layer, add the following blending options:

3. Next we want to start by creating the base for our twitter box. Using your Rounded Rectangle Tool with a radius of 10px, create two separate rectangles that look similar to the following:

4. Since we don’t want to loose the edibility of our layers, we want to convert our two rectangles into a smart object. To do so select both your rectangles layers and then right click. Choose “Convert to Smart Object” from the drop down menu. It will appear as if your rectangles have been merged into one layer.

5. We now want to add some details to our smart object, so right click your smart objects layer and choose Edit Contents from the drop down menu. We then want to use our Pen Tool (P) to add some curves to the bottom of our tab:

6. Once you have one side complete, duplicate your layer (CMD+J), and then go to Edit>Flip Horizontally and move it to the other side. You can then save your smart object file and return to your document with it looking something like this:

7. Back on your document, we now want to change the blend mode of our smart object layer to Overlay.

8. Next we want to add some blending options to our finished smart object. To do so right click your layer and choose blending options from the drop down menu and insert the following:

9. Your file will look something like the following:

10. We now need our Rounded Rectangle Tool again. With a radius of 10px, create a rectangle similar to the following below your smart objects layer. Name this layer “non-active”:

11. You can see we need to mask out the overlapping rectangles. To do this we will CMD+CLICK our smart object’s thumbnail in the layers palette. With your selection active we now need to invert it by going to Select>Invert. Return to your “non-active” layer, and then click the layer mask icon at the bottom of the layers palette.

12. Now add the following blending options to your “non-active” layer:

13. With the tabs nearly complete, lets add our text. Add the following Character Settings in your type window.

14. We need a slight drop shadow on our “what are you doing?” text to make it stand out on our light background. Add the following blending options to fix that problem:

14. The last bit of text we need is our “share it!” text at the top left hand side of our box. You the same text options as before, except lower your font size to 10pt, and change your anti-alias to italic. Set the blend mode to overlay and then add the following blending options to your text layer:

15. Your box will look something like this:

16. To split up our links a bit, we want to add a divider between our “@reply” and our “direct messages”. Using your Rectangle Marquee Tool create a 2px wide section and fill it with #FFFFFF.

17. Lower your layers opacity to around 22%, and then add the following blending options to your dividers layer:

18. Then we need to soften the bottom of it a little. To do so we want to add a layer mask to our dividers layer and then brush with a white soft brush until it looks something like this:

19. We are almost finished! Using your favorite rectangle tool create a white square that looks like the following to act as a thumbnail:

20. Next add the following blending options to its layer:

21. The last step is to add our input field. To do this, I used a Rounded Rectangle Tool with a radius of 10px.

22. On our newly created input field layer, add the following blending options to liven it up:

23. Using your Polygonal Lasso Tool we then want to make a arrow selection similar to the following:

24. Now go to Select>Invert. Make sure your input layer is selected, and then choose the add layer mask icon from the bottom of your layers palette with your selection active.

25. All that is left now is to add some text to share and your twitter box is complete!

After a couple months without much activity on the site, I decided to go ahead and gear back up by giving away a free XHTML/CSS theme that includes a few goodies for you, the reader.  On the homepage we have a stylish JQuery nivo slider to display your portfolio pieces.  We also use the unique nivo zoom script for a extra special light box.  If you have any questions about the theme, please drop us a comment at the bottom of this page.

• Easily customizable background
• Nivo Slider Slideshow
• Nivo Zoom on Portfolio
• Cross Browser Compatible
• and more!

Download the Theme for Free!

• live demo
• documentation page
• download the theme (.zip, 2.7 Mb)
• download the PSD’s (.zip, 24.4 Mb)

Preview Images

Live Demo Homepage

Live Demo About Page

Live Demo Portfolio Page

Live Demo of Blog Page

Live Demo Contact Page

Thank you for your support!

Next Day Flyers is an online printing company that delivers top-quality printed marketing materials with one of the fastest turnaround times in the industry. We specialize in full color printing of custom business cards, brochures, greeting cards, postcards, as well as specialty die cuts and other marketing materials. We believe all businesses, no matter their size, deserve easy access to custom promotional and direct mail material.

Submission Instructions

• Entering couldn’t be easier.  Tell us what you would do with your printing credit in the comments, and the best submission will be chosen as the winner.
• Submissions close Friday August 20th

Tutorial Resources

• Starburst Brush Set
• Heart Logo
• NIXUS Icon Pack
• Androgyne Font

Lets Get Started

1. Open up Photoshop and create a new document with the dimensions of 1200×1000.

Background

2. The first area we will start with is our background. Using your Paint Bucket Tool (G), fill your background layer with #FD6E8A.

3. We want to create a polka dot pattern we can add to our background. To do this we need to create a new document with the dimensions of 45×53.

4. Create a new transparent layer and delete your background layer. Next add two circles in the following manner with your favorite Ellipse Tool. I used the Elliptical Marquee (M).

5. Go to “Edit>Define Pattern” and then insert the name Polka Dot for your pattern name. You can then close out of this document and return to your template where we will be using our newly created pattern.

6. In your layers palette create a new blank layer and name it dots. Using your Pattern Stamp (S), find your Polka Dot brush in the drop down menu. Then proceed to brush with a large soft brush until you have results that look similar to the following:

7. Then lower the opacity of your dots layer to about 2%. This will keep it very subtle in our background.

8. Now using your Ellipse Tool, create a circle that looks like the following:

9. Then we want to use our Pen Tool (P) to create a shape on top of our circle that looks like the following:

10. Once you are happen with your results, select both layers and then right click and choose Merge Layers to put them onto one layer. Lower the opacity of your layer to around 19%. We then want to duplicate this layer twice by hitting Command+J. Move your shapes in the following manner. Make your second copy 24% opacity, and then make your third 42%.

11. The last touch we will add to our background is by adding a Starburst Effect. We will use one of the brushes from this brush pack. With a foreground of #FD6E8A, place it in the following manner. I lowered the opacity to around 22%.

Header

12. For the logo I have prepared a “Candy Cane Heart” by modifying a candy cane icon found here. Using the font Androgyne, place your logo text on two separate text layers.

13. On your “Rachel’s” layer, insert the following blending options:

14. On your “Candyland” layer, use the same drop shadow you used on the “Rachel’s” text layer. You will have something that looks like this:

15. Now we will move onto our user account bar that will float to the right. Using your Rounded Rectangle Tool (U) with a radius of 10px, and a foreground of #BC3D56, make a rectangle that is similar to the following:

16. We want to add a highlight around our Rounded Rectangle next. To do so we want to Command+Click our thumbnail of our Rounded Rectangle in our Layers Palette to make it an active selection. Then go to “Select>Modify>Contract” and input 1 in the dialog box. Fill your selection with #FFFFFF on a new layer, and then contract it by 1 again and go to “Edit>Clear”. You will be left with a white line that looks like this:

17. Change the blend mode to Soft Light on this layer, and then lower the opacity to around 38%. Now add the following blending options to your highlight layer:

18. Add some text to symbolize links with the color #FDDCE3, and you’ll have something that looks like this:

19. Now we need to create a search field. Using your Pen Tool, create a shape that looks like the following with a foreground of #72A0E5.

20. Use Command+J to duplicate your shape and then go to Edit>Transform>Flip Horizontal and align it in the following way. Once you have it like you want it, select both layers and right click. Choose Merge Layers from the drop down menu:

21. Now add the following blending options to your search box:

22. All that is left for the search box is to add an input field with your Rounded Rectangle Tool with a 5px radius. I then used a magnifying glass icon from the NIXUS icon pack.

23. The last area of our header is our main site navigation. Using your favorite Rectangle Tool, make a black rectangle that looks like the following for the back of your navigational menu. Our first link “Candy” is going to be #FFFFFF, while our non-active links will be #FDDCE3.  The font used for the links is called “Chalkboard”.

24. For our active tab, we want to make a Rectangle in a similar shape as the following. The color doesn’t matter as we will be adding a gradient to it later:

25. Now on your tab layer, add the following blending options to give it a nice gradient.

26. To add a little extra detail to our tab, we want to cut out a little chunk on the top. Using your Polygonal Lasso Tool (L), make a selection similar to the following and then choose “Select>Inverse”. Then hit the layer mask icon in the layers palette with your tab layer selected.

27. The final touch will be to add a white highlight around the edge like we did for our account links section in step 16. We will then set it to Soft Light, and then lower the opacity to about 62%.

28. The last step for our header is to add our Candy Cane effect under the navigation. Using your favorite Rectangle Tool again make a rectangle that looks like the following:

29. Now add the following blending options to your layer:

30. To achieve our candy cane lines, we want to create another pattern. So to do so we want to create a new document with the dimensions of 600×600. Create a new layer and delete your background layer so you are left with a transparent document. Then add a bunch of rectangles in the following manner (I made my background black so you can see better, but yours will be transparent):

31. Then go to “Edit>Define Pattern” and name it stripes. Close out of your stripes file, and then go back to your template now. Command+Click your Candy Canes background to make it an active selection, and then use your Pattern Stamp Tool to brush your newly created pattern on a layer above:

32. Change the blend mode to Overlay, and the lower the opacity to 28% and your completed header will look like the following:

Content Area

33. The content area will rely mostly on placement of images and text, and keep things simple. We will have a white background, and use the color #28140D for our body text, #AF3F55 for headings, and #5987CB for our links.

Footer

34. The last step is adding a footer. Using your Rounded Rectangle Tool with a radius of 15px, make a shape that looks like the following under your content layers:

35. Now add the following blending options to your newly created Rounded Rectangle layer:

36. I then proceeded to use the same candy cane effect we used in the navigation to add stripes to our footer. I changed the blend mode to Soft Light, and lowered the opacity to 15% this time.

37. All that is left now is to add some text and any icons in your footer and your final result will look something like the following:

As I See It

Bacardi Elixr

Bazooka

Chevrolet Summer

Chrysler – Paper City

Jane

Joe

Iouboutin’s Stories

Motorokr i856 by Nextel

Open Your Eyes

Portfolio – Burjuman

Portfolio

Pringles Pepper

Quicksilver

Ray Ban

Silk

Silk

Surfrider

UNHCR / ACNUR: Stockings

Vote Red

War…It’s only a game

Your Singapore

Tutorial Resources

• Blackout Font
• Mono Icon Pack
• Twitter Bird Icon

Lets Get Started

1. The first thing we need to do is create a new document with the dimensions of 1020×1200.

2. Using your Paint Bucket Tool (G), fill your background layer with #AED6EE.

3. Next, we want to add a little gradient at the top of our background. While we could do this on our background layer, I want to go ahead and make a new layer and make a white rectangle that looks similar to the following. I do this because it makes things more precise for when you go to code:

4. Now insert the following blending options by right clicking your layer in the layers palette and choosing blending options from the drop down menu.

5. Starting with our header, we want to create our logo. Using your favorite rectangle tool, create a rectangle similar to the following with a fill of #D4EF9F:

6. Add the following blending options to your newly created rectangle layer:

7. Next we need to add the text for our logo. For our design we will be using the font face Blackout, with #FFFFFF as its color. On your text layer add the following blending options:

8. Using your favorite Rectangle tool again, make a rectangle similar to the following and fill it with #416073.

9. Now add the following blending options to your newly created rectangle:

10. Our navigation will keep with the simple theme. Using Helvetica, and icons from the pack listed above lay your links out in a similar fashion. Our active link will have a #2D4655 rectangle. Our links colors will be #99CAEA, and our icons colors will be #AED6EE.

11. Under our navigation, we want to display our recent tweet. To do so we want to create a cloud using our Elliptical Marquee tool (M). Hold SHIFT to add to your selection and make something that looks like this and fill it with #FFFFFF:

12. Next, add a slight drop shadow to your cloud.

13. After adding some filler text, and the twitter icon, your header will look something like this:

14. For our content area we want to make it looks like there are a couple pieces of paper stacked on top of each other to give it a unique look. First make a white rectangle that looks like the following:

15. Next, duplicate this layer and move your duplicated layer (Command+J) under your original. Hit Command+T to make your duplicated layer transformable and rotate it to the right until it looks something like the following:

16. Go back to your original layer now and add the following blending options:

17. For each project, we want to add a thumbnail preview with the name and category of our portfolio piece. Using your favorite rectangle tool, create a rectangle that looks similar to the following and make sure it had a fill of #FFFFFF:

18. Now add the following blending options to its layer:

19. All you need to do now is add a preview image, and some text with the color #416073, and then repeat the process until you get something that looks like this:

20. The last step for our content area is to add our back and next buttons. For our button we will be using the same effect we used in step 14 for our background. Your top rectangle will be #D4EF9F, and the one below it will be #AFD465.

21. Add the following blending options to the rectangle on top:

22. All you need to do now is add an arrow icon, and your text. Your text and icon should be the color #2D4655. The icon used is from the Mono Icon Pack.

23. Do the same thing for a back button, and add some text showing how many pages you have and you’ll have something that looks like this:

24. The last step is adding our footer. We want to make it feel as if we are in the clouds, so using your Elliptical Marquee Tool (M) make a selection and then hold SHIFT to add to your selection and fill it with #FFFFFF. Keep adding to your selection until you get something that looks like this:

25. All that is left is to add some text in your footer for your links and your copyright and your final Photoshop template will look like this:

Sign up for JN0-100 web designing course and learn how to create interesting images in photoshop using our HP0-Y23 tutorials and 642-426 videos.

Barcelonda

HMF

I’m Super

Illustrated Type 3

ISTD Brief 2010

Kilogram

Letterform for the Ephemeral

Monteith’s Brewing Co.

MTV BLOOM

Mundos dos Crepes

Nike Air Force 1 Sculpture

Nuzzles

Type

Types

Typographic Work #2

Unleash / 2010

VAL Stencil

The winners were chosen at random through a  sql query to make things fair.  Below is the proof for all of you who would like to see for yourselves.

Winners

• Charlie
• ZiO
• Zack Esgar

Thanks for everyone who participated in the contest, and be sure to check back for future contests and giveaways.  We would also like to thank Deposit Photos for making this possible.  For the winners, you will be emailed with directions on how to claim your winnings.

Tutorial Resources

• Create a Chalkboard Style WordPress Layout in Photoshop

Lets Get Started

1. The first thing we need to do is set up our folders. Create a folder called “xhtml”, and then create another folder inside it named “images”. The xhtml folder is where we will be saving our html and css files. So next open up Dreamweaver and create a new html document. Choose XHTML 1.0 Strict.dtd from the doc type option – then save it as index.html.

2. Next create a CSS file in the same fashion, and save it to your xhtml folder with the name “style.css”. You could save it to a separate folder, but for this tutorial it will be easiest to keep in the same directory as your html file.

3. So far your file structure will look something like the following:

4. We want the CSS file to link to our index file, so we need to add the following link tag in our header before the closing head tag.

5. Before we get into the coding, lets go ahead and get all our images ready for the design. Open up your template in Photoshop and then proceed to crop or slice the following images in your design.  Images that are saved with “.png” need to be transparent, so hide all layers under given item.  Filenames are above each image.

“home.jpg”

“home_active.jpg”

“about.jpg”

“about_active.jpg”

“contact.jpg”

“contact_active.jpg”

“background_pattern.jpg”

“border.jpg”

“category_hover.png”

“comment.png”

“date_back.jpg”

“facebook_icon.jpg”

“flickr_icon.jpg”

“rss_icon.jpg”

“footer.jpg”

“frame_btm.jpg”

“frame_top.jpg”

“green_board.jpg”

“latest_articles.jpg”

“logo.jpg”

“search.png”

“search_field.jpg”

“sponsors.png”

“title_back.png”

“twitter_icon.jpg”

6. Now that you have your images prepared and ready, we want to get into the code. Starting with the header, copy and paste the following CSS into your CSS file.

body {
 font: 11pt Arial, Helvetica, sans-serif;
 background: url(images/background_pattern.jpg) repeat;
 margin: 0;
 padding: 0;
}

img {
 border: 0;
}

#wrapper {
 width: 940px;
 margin: auto;
}

#logo {
 display: inline-block;
 float: left;
 width: 272px;
 height: 171px;
 text-indent: -999999px;
 background: url(images/logo.jpg) no-repeat;
}

#header {
 height: 112px;
 margin: 20px 0 0 0;
 overflow: hidden;
}

#header ul{
 float: right;
 margin-top: 22px;
}

#header ul li{
 display: inline-block;
 float: left;
 height: 48px;
 margin: 0px 0px 0px 5px;
}

#home_btn a {
 display: block;
 width: 102px;
 height: 48px;
 text-indent: -999999px;
 background: url(images/home.jpg) no-repeat;
}

#home_btn a:hover {
 background: url(images/home_active.jpg) no-repeat;
}

#about_btn a {
 display: block;
 width: 102px;
 height: 48px;
 text-indent: -999999px;
 background: url(images/about.jpg) no-repeat;
}

#about_btn a:hover {
 background: url(images/about_active.jpg) no-repeat;
}

#contact_btn a {
 display: block;
 width: 102px;
 height: 48px;
 text-indent: -999999px;
 background: url(images/contact.jpg) no-repeat;
}

#contact_btn a:hover {
 background: url(images/contact_active.jpg) no-repeat;
}

.replace{
 position:relative;
 /* \*/
 overflow:hidden;
 /* */
}

.replace span{
 display:block;
 position:absolute;
 top:0;
 left:0;
 z-index:1;
}

7. Then in your HTML File you will have something that looks like the following:

8. Next we want to set up our chalkboard. Add the following chunk of code to your CSS file. You will notice an “@media screen” option in this stylesheet. What this does is gives a different set of styles for users using Safari in order to make it look the same across all browsers.

#content {
 display: block;
}

#categories {
 height: 58px;
 width: 940px;
 background: url(images/frame_top.jpg) no-repeat;
}

#categories li {
 display: inline-block;
 margin: 20px 0 0 5px;
}

#categories li a {
 display: inline;
 color: #d8c0a8;
 padding: 7px 17px 15px 13px;
 text-decoration: none;
}

#categories li a:hover {
 height: 31px;
 width: 87px;
 padding: 7px 17px 15px 13px;
 background:url(images/category_hover.png) no-repeat;
}

#content_frame {
 display: block;
 position: relative;
 height: 850px;
 margin: -13px 0 0 0;
 background: url(images/border.jpg) repeat-y;
}

#content_area {
 display: block;
 height: 100%;
 width: 875px;
 margin-left: 33px;
 padding: 20px;
 background: url(images/green_board.jpg) repeat-y;
}

#latest_articles {
 display: block;
 width: 183px;
 height: 38px;
 background:url(images/latest_articles.jpg) no-repeat;
}

/* LEFT COLUMN */

.left {
 float: left;
 width: 560px;
}

.left ul {
 position: relative;
 margin: 0 0 0 -30px;

}

.left ul li {
 display: inline-block;
 list-style: none;
 margin: 10px 20px 20px 0;
}

.left ul .comment {
 position: relative;
 float: right;
 margin: -3px 0 0 -25px;
 width: 29px;
 height: 32px;
 background:url(images/comment.png) no-repeat;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
/*These are alternate styles for Safari */

.left ul .comment {
 position: relative;
 float: right;
 margin: -243px 0 0 -25px;
 width: 29px;
 height: 32px;
 background:url(images/comment.png) no-repeat;
}

}

.left ul li .comment a {
 color: #000;
 font-weight: bold;
 text-align: center;
 text-decoration: none;
 margin: 0px 6px 0px;
}

.left ul li img {
 float: left;
}

.datetitle {
 float: left;
 position: relative;
 margin: 160px 0 0 -234px;
}

.title {
 width: 207px;
 height: 37px;
 background: url(images/title_back.png) no-repeat;
}

.title span {
 display: block;
 padding: 10px;
 font: 13pt Arial, Helvetica, sans-serif;
 color: #FFFFFF;
}

.date {
 width: 90px;
 height: 17px;
 background:url(images/date_back.png) no-repeat;
}

.date span {
 color: #FFFFFF;
 padding: 6px;
}

/* RIGHT SIDEBAR */

#right {
 width: 290px;
 height: 100%;
 float: left;
 padding: 12px;
 margin: -20px 1px 0 0;
 position: relative;
}

#sponsors {
 display: block;
 width: 167px;
 height: 52px;
 background:url(images/sponsors.png) no-repeat;
}

#search_title {
 display: block;
 width: 127px;
 height: 32px;
 margin: 15px 0 10px 0;
 background:url(images/search.png) no-repeat;
}

#search_field {
 width: 283px;
 height: 49px;
 margin: 0 0 0 -9px;
 postion: relative;
 background: url(images/search_field.jpg) no-repeat;
}

#search_field input {
 width: 170px;
 height: 20px;
 border: 0px;
 color: #515151;
 margin: 10px 0 0 50px;
}

.social ul {
 margin: 30px 0 0 -35px;
}

.social ul li {
 display: inline;
}

9. Now your HTML will look like the following for the chalkboard area of your design (the content area).

10. In our unordered list, each “li” tag will look like the following for each individual post.

11. The last thing we need to create is our footer. Add the following to your CSS file for your footer styles:

/* FOOTER AREA */

#frame_btm {
 height: 83px;
 background: url(images/frame_btm.jpg);
}

#footer {
 font: 10pt Arial, Helvetica, sans-serif;
 display: block;
 height: 84px;
 padding: 15px 0 0 0;
 background: url(images/footer.jpg) no-repeat;
}

#footer ul li {
 color: #D5D5D5;
 display: inline-block;
}

#footer ul li a {
 color: #D5D5D5;
 text-decoration: none;
}

#footer ul li a:hover {
 color: #D5D5D5;
 text-decoration: underline;
}

#footer ul li span {
 color: #D5D5D5;
 margin: 0 11px 0 11px;
}

#copyright {
 display: block;
 float: right;
 text-align: right;
 margin: 0 30px 0 0;

}

12. When your CSS is finished, you want your html to look something like the following:

Final Result

*Tested in IE8, FF3+, Safari 2.0+

Deposit Photos is your #1 resource for buying and selling Royalty-free photographs and vector images. Their vast library of imagestock coupled with a wide variety of flexible purchase options makes them the most convenient and profitable tool for designers, artists and photographers.

Their libraries are updated daily through contributor uploads that are closely scrutinized for quality and originality. Between the protections and the controls, you’re assured of finding the highest quality original artwork available anywhere.

Whether you’re a designer looking to buy images for a project or a photographer selling your stock, there is no other place that can offer you quality service and management other than Deposit Photos. Their increasingly low pricing and flexible purchase plans makes it easy to buy exactly what you need instead of just what you can afford, and their generous commission structures gives its contributors enormous earning potential. They are most certainly the best of both the worlds.

The Rules and Guidelines

Entering is fast, easy, and won’t take but a few moments of your time to enter.

• All you need to do is leave a comment below.  Make sure to use an email account that we can contact you at when leaving your comment.
• Only one entry per person
• The contest ends on Saturday May 29th.
• The winner will be chosen at random and announced next Monday.