SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Photoshop Photoshop CS5 Tutorials How to Create eCards Themed Website Design Using Photoshop CS5

How to Create eCards Themed Website Design Using Photoshop CS5

With this "How to Create eCards Themed Website Design Using Photoshop CS" you will learn that how can we make design a clean and update trendy festive website for your desired festive or redesign it. We design in Adobe Photoshop which is really helpful for this kind of designing and we help those who want to design own website as a latest trend web 2.0 designs. You may get even free source file for both your personal and commercial use, if you have any question in your mind about this eCard themed website design you may ask in the comments.

Step #1 - New Photoshop CS5 Document

First we need to create new Adobe Photoshop CS5 document to start work on web design layout, we're using dimensions of 1024x1024 pixels.

img

img

Step #2 - Web design layout background

Let's create a creative background in this web design layout with three colors Start by filling the background using gradient (G) with three color nodes, first node on dark green #4c5a00, second node in center of the gradient color bar as we showing below as color #9fbc00 and now fill end node in this same gradient bar with color #edff8a then blending out background color.

img

Step #3 - Apply gradient background vertically

In this step we will apply this created gradient vertically from top to bottom and get result as we showing below:

img

Step #4 - Downloading Texture and Design Modifications

Now we try to make more festive this design because this is belong to eCards themed web design layout so we're downloading a texture red yellow victorian pattern and applying "Hue/Saturation" CTRL + U as we showing below the path of this menu (Image ->  Adjustment  ->  Hue/Saturation).

img

Step #5 - Hue/Saturation Settings

We want to produce desired color scheme so we're applying some specific setting in "Hue/Saturation" as we showing below in sample image:

img

after this apply opacity 15% and result will be:

img

Step #5 - Top Header Area & Content Area

In this step we're applying black color on 110px height on top as "top header area" also apply grids on content area where we limit our all content (central area of total size "850px wide).

img

Step #6 - Create a logo for eCards website

This is identity of any website, let's guide you how we create this below logo:

First - using a famous resource iconfinder.com (these beautiful candle logo icon we using for logo, you must read license agreement before use as commercial) for Christmas inspired icon as logo because this is festive season so we're working with respect of "Merry Christmas".

Second - write company name with logo icon as easy identify website name, as we need some creativity in logo name "Smashing" as word where we're using font "Baar Sophia" free download and second word "eCards" where we using font "Banana" you can download free from our archive folder to get same result as we showing in below image.

img

Step #7 - Top Navigations with tabbed view

Using the rounded rectangle tool, create a rounded rectangle, then using your desired cutting tool cut off the bottom of rectangle as we showing below in image:

img

Step #8 - Top Tab Gradients

we've some creative settings to show our top navigation tab as more prominent as you can get results follow the following settings below:

img

Step #9 - Top Navigations with tabbed view

Using the rounded rectangle tool, create a rounded rectangle, then using your desired cutting tool cut off the bottom of rectangle as we showing below in image:

img

Step #9 - Facebook Login Button and Member Area

In this area we're placing Facebook login icon and also place two more links with "Arial" font and font color #bebebe (underline) for login using "Smashing eCards" or Become a Member functionality area, sample image below:

img

Step #10 - Top Banner Area (Images)

This is major area of any website design where we attract to visitors to keep intact regularly, we using square rectangles as present eCard examples in tilted form with some blending options "drop shadow" as follow in below image:

img

Step #11 - Top Banner Area (Images Blending Option)

In this step we're getting images from Google search and put in tilted square rectangle and add "drop shadow" on rectangle layer as follow as:

img

in below image we sharing blending options:

img

Step #12 - Top Banner Area (Repeat Images)

Now we're adding different images in square rectangle as we showing below as an sample view:

img

Step #12 - Top Banner Area (headings and shadow effects)

We still on top banner area where we now adding a heading as "Send Unlimited eCards to worldwide" using font "Myriad Pro" with white color #ffffff and thankful to cufonfonts.com for free download and after that we duplicate same layer with black color #000000 and move as you want to show as best presentation, one more slogan we're adding as "Smashing eCards for every occasion all year - Let's Choose" with color #ffe400, we've an sample image below:

img

Step #13 - Top Banner Area (Register Now Button)

In this rounded rectangle button we're using gradient colors as color #cccccc and second color #eeeeee also showing an image with gradient editors.

img

one remaining setting we're showing below as "stroke".

img

after completion of top banner we are on:

img

Step #15 - Three column category listings background

Now go ahead on body content area with single color background # 4c6800 and set opacity 40% to get background victorian pattern below categories.

img

Step #16 - first column with Photo Card

For the "Photo Card" column we using a beautiful icon from iconfinder.com "gallery, photos, images icon" for get more user interest as UI presentation and drop sample text from lorem-ipsum.info using while color #ffffff.

interface button, its more useful and interesting we would like to share "365psd free download" for button, this is a creative resource where hundreds of free UI kit available for design inspiration, we just want to share this useful resource to you audience (Note: if you want to use this as commercial you should ask to author on 365psd.com and follow license).

img

Step #17 - second and third column

In second column we are using same setting as we shared in "Photo Cards" column but in here we getting an icon for "holiday" from iconfinder free download.

Third column we also have same settings and "celebrate" beautiful icon free download also from same resource as iconfinder.com.

img

Step #18 - Footer section one

Now a days in website design, footer is also an important part where we list down useful and ultimate links with privacy links, we're adding 3 sections into footer area, with an heading and links under each heading.

We using same arrow which we're using in content columns in "Learn More" buttons but under footer headings we're using color #3e3e3e in arrow and page links.

img

Step #19 - Footer section (Free Newsletter)

Another part of website which we're designing with same settings as we using on heading and text colors, in this area we're using "rectangle tool" to draw for your email address with stroke color #828282 and beside using a button with name "Go!" this is also belong to 365psd free download for button, only resizing according to input area size.

img

Step #20 - iOS App Icon as present having website app

In this advanced era almost every website going to be design app for next generation mobiles which most using worldwide as iPhone, iPad and iPod touch, so we adding an iTune App Store image to identify this website also exist on apple itunes.

img

Final Result

img

Click on Image for Large View

   
subscribe to newsletter