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.
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.
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:
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).
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:
after this apply opacity 15% and result will be:
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).
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.
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:
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:
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:
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:
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:
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:
in below image we sharing blending options:
Step #12 - Top Banner Area (Repeat Images)
Now we're adding different images in square rectangle as we showing below as an sample view:
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:
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.
one remaining setting we're showing below as "stroke".
after completion of top banner we are on:
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.
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).
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.
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.
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.
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.
Final Result
Click on Image for Large View
