designerbooster » Templates http://www.designerbooster.com designerbooster.com: boost your creativity with the right design resources at hand. Tue, 19 Mar 2013 07:10:19 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 14 Premium WordPress Themes for Real Estate and Brokers http://www.designerbooster.com/featured/14-premium-wordpress-themes-real-estate-brokers/ http://www.designerbooster.com/featured/14-premium-wordpress-themes-real-estate-brokers/#comments Sun, 25 Mar 2012 02:37:04 +0000 designerbooster http://www.designerbooster.com/?p=4204 14 Premium WordPress Themes for Real Estate and Brokers
The Real Estate Business is one of those booming business today. Due to the high demand of housing needs with good quality, many families prefers to get in touch with brokers to help them choose there future homes. One great way in advertising is of course through the net since the world wide web is [...] Related posts:
  1. Magazin3.com WordPress Themes: 40% Off Coupon Code
  2. 50+ Best Affordable Magazine WordPress Themes
  3. Retropress – a premium business wordpress theme at a crazy price!
]]> 14 Premium WordPress Themes for Real Estate and Brokers
The Real Estate Business is one of those booming business today. Due to the high demand of housing needs with good quality, many families prefers to get in touch with brokers to help them choose there future homes. One great way in advertising is of course through the net since the world wide web is considered to be a one-stop shop. Though of course, housing presentation is essential in ensuring that the prospect buyers are enticed and encouraged to avail the service. Since most real estate companies now have their own websites/ blogs to attract customers, it is important that the theme and template chosen to present the company is encouraging enough and would make the viewers want to get in touch. Today, we bring you several premium WordPress themes that brokers and real estate companies may want to look into. The themes are ensured to have great quality in addition to its wonderful features as presented in this compilation. Check out these 14 Premium WP Themes for Real Estae and Brokers collection and see if these themes will cater to your needs!!!

WP Pro Real Estate 3 Responsive WordPress Theme

WP Pro Real Estate 3 Responsive WordPress Theme Features: • WordPress 3.2+ & 3.3+. • Unbranded AJAX Powered Admin Options Panel. • Flex Slider with Touch Support. • owerful Custom Built Listing Mapping. Visit Source

Openhouse Real Estate & Automotiv car dealership

Openhouse Real Estate & Automotiv car dealership Features: • Option to have plain photos in slideshow, with no property information.. • Powerful Property Listing Search (no plugin needed). Search by location, beds, baths, min/max price, and property type.. • Optional Login form for people to post their own listings (Agents, home sellers, etc.). • Contact form on each listing page. Optionally have form sent to specific Agent. (if Agent is specified for a listing). Visit Source

WP Pro Real Estate

WP Pro Real Estate Features: • Custom Theme Administration Panel. • Custom Write Post Panel. • Multiple images Per Listing. • Utilizes Clean and Semantic XHTML and CSS. Visit Source

Real Estate Theme

Features: • Supports wordpress 3.0 menus. • Three separate colour schemes. • Automatic thumbnails resizing using timthumb.php script. • Add status to posts like New, Reduced Price, Rented and Sold. Visit Source

Villa Grande – Real Estate

Villa Grande - Real Estate Features: • Featured properties in a Jquery slideshow. • Just upload a photo in a post, and you’re done. No need to specify a url for the uploaded photo. • Advanced Google maps. • Customize the site for your currency in the admin section. Visit Source

Elegant Real Estate

Elegant Real Estate Features: • Supports WordPress 3.0 menus. • Basic filtering functionality. • Powered by jQuery. • Backend options to customize the theme. Visit Source

Locality – Real Estate Theme

Locality - Real Estate Theme Features: • Clean and Modern Design. • Agent / Single Property. • General Elements and Fullwidth Page. • Propertly Listing. Visit Source

Real Estate Gold

Real Estate Gold Features: • Supports WordPress 3.0 menus. • Backend options to customize the theme. • Readymade custom fields in a post. • Google analytics integration. Visit Source

Quickstart Real Estate

Quickstart Real Estate Features: • Supports WordPress 3.0 menus. • Basic filtering functionality. • Automatic thumbnails resizing using timthumb.php script. • Tested in all major browsers including IE6 (png transparency fix included). Visit Source

WP Pro Real Estate 2 WordPress Theme

WP Pro Real Estate 2 WordPress Theme Features: • WordPress 3.0, 3.1+, 3.2+, 3.3+. • Cross Browser Compatible. • Fully Localized & Translation Ready. • Google Maps API v.3 use full address or optional lat/long. Visit Source

Light House – Clean Real Estate WordPress Theme

Light House - Clean Real Estate WordPress Theme Features: • Ability to show property as slider. • WordPress 3.1. • Property Post Type. • jQuery PrettyPhoto. Visit Source

RT-Theme 15 Premium WordPress Theme

RT-Theme 15 Premium WordPress Theme Features: • WordPress 3.3 Ready!. • Two Slider Options for home page. • jQuery Improved. • ummy Content included. Visit Source

Stylo – Premium Realestate WordPress Theme

Stylo - Premium Realestate WordPress Theme Features: • jQuery Evolution Lightbox. • jQuery Ajax Contact Form. • SEO (Search Engine Optimized). • WordPress MU Compatible. Visit Source

Architectura WordPress Theme (CMS)

Architectura WordPress Theme (CMS) Features: • HTML /CSS theme version included. • Clean validated and W3C compliant xHTML/CSS markup. • Gravatar ready. • Extensive theme options (HD panel). Visit Source blueblots.com]]> http://www.designerbooster.com/featured/14-premium-wordpress-themes-real-estate-brokers/feed/ 0 Parallaxr – A horizontal parallax based wordpress theme http://www.designerbooster.com/featured/parallaxr-horizontal-parallax-based-wordpress-theme/ http://www.designerbooster.com/featured/parallaxr-horizontal-parallax-based-wordpress-theme/#comments Fri, 24 Feb 2012 02:38:02 +0000 designerbooster http://www.designerbooster.com/?p=3798 Parallaxr – A horizontal parallax based wordpress theme
I’ve been receiving many queries on how to develop a site like indofolio.com, and here is the answer for you – Parallaxr, a premium wordpress theme with which you can create a horizontal parallax base website in minutes. All you have to do is upload the images and adjust the speed from the admin panel. [...] Related posts:
  1. Retropress – a premium business wordpress theme at a crazy price!
  2. How To Create Your Own Custom WordPress Theme
  3. Giveaway 5 Copies of Lightspeed Premium WordPress Theme
]]> Parallaxr – A horizontal parallax based wordpress theme
I’ve been receiving many queries on how to develop a site like indofolio.com, and here is the answer for you – Parallaxr, a premium wordpress theme with which you can create a horizontal parallax base website in minutes. All you have to do is upload the images and adjust the speed from the admin panel. To know more about parallax and parallax based sites, check out my previous post Retropress was a huge success and this has encouraged us to come up with Parallaxr – our second premium wordpress theme. The cost of parallaxr is just $ 30.
download Preview Documentation

Features of Parallaxr

1. Works with wordpress 3.3.1 2. Coded in HTML5 & CSS3 3. Cross Browser Compatible (Mozilla, Safari, Opera, Chrome and IE7+) 4. Simplified admin panel 5. Supports post thumbnails 6. Built-in widgets – Recent Projects and Social Networks 7. Jquery based custom scrollbar 8. Ability to add Google Map location 9. Custom post types – Projects and FAQ 10. Widgetized sidebar with show/hide 11. Fancybox pop-ups 12. Custom contact page 13. Recent Projects shortcode 14. Google web fonts 15. Adjustable parallax speed 16. Optimized CSS and images 17. Easy to set-up theme options For more information on the features, read the documentation.   Productivedreams.com]]> http://www.designerbooster.com/featured/parallaxr-horizontal-parallax-based-wordpress-theme/feed/ 0 25 Free Minimal and Clean Style XHTML CSS Website Templates http://www.designerbooster.com/featured/25-free-minimal-clean-style-xhtml-css-website-templates/ http://www.designerbooster.com/featured/25-free-minimal-clean-style-xhtml-css-website-templates/#comments Mon, 20 Feb 2012 08:42:06 +0000 designerbooster http://www.designerbooster.com/?p=3749 25 Free Minimal and Clean Style XHTML CSS Website Templates
If you want to build a website fast and easy then the solution is free website templates.Free CSS/XHtml templates are designed to save your time and money and there are hundreds of website templates available online for free which are collected by CSS/XHTML template galleries and you can definetely find a good one that matches [...] Related posts:
  1. Design a Clean and Minimal Portfolio/Business Website Template in Photoshop
  2. 35 Quality Business Card Design Templates for Free!
  3. 10+ Free HTML5-CSS3 Website Templates
]]> 25 Free Minimal and Clean Style XHTML CSS Website Templates
If you want to build a website fast and easy then the solution is free website templates.Free CSS/XHtml templates are designed to save your time and money and there are hundreds of website templates available online for free which are collected by CSS/XHTML template galleries and you can definetely find a good one that matches your industry. As a minimal and clean style fan,i bring together totally free minimal and clean style CSS/XHTML website templates.Here is the collection.

YIW Minimal

CSS-XHTML website templatesDemo | Download Source    

Designa

CSS-XHTML website templatesDemo | Download Source  

MiniCon

CSS-XHTML website templatesDemo | Download Source  

Olimpo

CSS-XHTML website templatesDemo | Download Source  

Effe

CSS-XHTML website templatesDemo | Download Source  

CleanInterface

CSS-XHTML website templatesDemo | Download Source  

The Arialist

CSS-XHTML website templatesDemo | Download Source  

Megan

CSS-XHTML website templatesDemo | Download Source  

Platinum

CSS-XHTML website templatesDemo | Download Source  

Sand Paper

CSS-XHTML website templatesDemo | Download Source  

Tomato

CSS-XHTML website templatesDemo | Download Source  

Chrome

Demo | Download Source  

Connection

CSS-XHTML website templatesDemo | Download Source  

General

CSS-XHTML website templatesDemo | Download Source  

Gadget

CSS-XHTML website templatesDemo | Download Source  

Default Theme

CSS-XHTML website templatesDemo | Download Source  

ProdView

CSS-XHTML website templatesDemo | Download Source  

Minimalistic

CSS-XHTML website templatesDemo | Download Source  

Big Business

CSS-XHTML website templatesDemo | Download Source  

SimplyMinimal

CSS-XHTML website templatesDemo | Download Source  

Basic Presentation

CSS-XHTML website templatesDemo | Download Source  

Natural Spa

CSS-XHTML website templatesDemo | Download Source  

Business

CSS-XHTML website templatesDemo | Download Source  

GreenPeace

CSS-XHTML website templatesDemo | Download Source  

Steak House

CSS-XHTML website templates   Demo | Download Source Queness]]> http://www.designerbooster.com/featured/25-free-minimal-clean-style-xhtml-css-website-templates/feed/ 0 Design a Clean and Minimal Portfolio/Business Website Template in Photoshop http://www.designerbooster.com/web-design/design-clean-minimal-portfoliobusiness-website-template-photoshop/ http://www.designerbooster.com/web-design/design-clean-minimal-portfoliobusiness-website-template-photoshop/#comments Sun, 15 Jan 2012 08:37:08 +0000 designerbooster http://www.designerbooster.com/?p=3273 Design a Clean and Minimal Portfolio/Business Website Template in Photoshop
In this tutorial, I`m going to show you how to design a clean, clear and minimal template which can be used for a portfolio, personal or for a business website. This tutorial can be a good start for you to build websites. The template is free for download and can be easily transformed into HTML [...] Related posts:
  1. Fresh Goodies on Designtnt.com: Simplio Business Theme html Template & Photoshop Pencil Drawing Action
  2. Design a Modern, Textured Portfolio Website
  3. Sleek and Stylish Portfolio Design Website
]]> Design a Clean and Minimal Portfolio/Business Website Template in Photoshop
In this tutorial, I`m going to show you how to design a clean, clear and minimal template which can be used for a portfolio, personal or for a business website. This tutorial can be a good start for you to build websites. The template is free for download and can be easily transformed into HTML or even a CMS like Wordpress. image-600

download

What we`ll be doing today(Click to see a bigger preview): image-600 First step, open Photoshop and create a new document of 1300×1550px. The template will be 960px in width so, for your help(and I always suggest you do this every time you can) drag 2 Vertical Smart Guides at 170px and 1130px.Now, the content is centered and is 960px in width. Paint the first layer with white. This will be the background. We`ll start with the header, which will be 150px high. At the bottom of the header, draw a 1px line with the #efefef color. This line will be the delimitation between header and content. The logo I made is just some simple text, but you can add your own logo. logo Let`s build the navigation menu. Grab the Horizontal Type Tool(T) and type in a navigation menu using #666666 color combined with the Arial font-family(font-weight: bold; font-size: 13px). Make sure to leave a distance between the words of 40px. nav For the header, I thought it would be nice to add a search form too, just above the main nav. So, grab the Rectangle Tool(U) and draw a rectangle of 200×32px. Double click the new layer created to open the layer styles pallete. Color the background with white and add a gray stroke(#efefef) of 1px. Then import a search icon or use the Custom Shape Tool(U) and draw a search icon like mine and color it with the same #efefef. search The header is done. It looks minimal, is clear and very clean. header Every portfolio website has to have slider to show off the artworks you made. I found a nice typography wallpaper on Deviantart called History by ~ebturner and I integrated it into my design after resizing it up to 960×350px. I left a top-margin of 40px to make the design more airy. slider If you`re thinking to convert this design to HTML, I`m suggesting you use a very popular jQuery Slider nowadays which is called Nivo Slider. When I see a slider I know it is nivo by the navigation made of small dots. I added 3 small dots(8×8px) using the Rounded Rectangle Tool(U) just under the big image to reproduce the real slider. dots Under the slider, I thought it would be nice to have a “Recent Works” widget. To separate the slider from the rest of the content, type in “Recent Works”, center it with the main layout and draw 2 horizontal lines on the left and right sides of it. recent For the recent works area, split the content width in 4 columns of 210px and 40px margin between them. Then add in each column a thumbnail image of 210×160px, a title, a description and a link. item Now create 3 more boxes following the same steps involved when making the first one. To make the things moving faster, duplicate the layers and arrange them one after each other, but make sure to leave 40px between columns. works Under the “Latest Works” widget, let`s add another widget which presents what services your company can offer. Reproduce the title you just did on latest works widget but write this time something like “What we do” or “Our Services”. what Create 3 columns this time of 293px in width and a margin between them of 40px. Before adding content, download the IconSweets2 icon set which is in my opinion the best icon set from the internet and choose 3 suggestive icons of 64×64px from the set. In the first column, add an icon, a title and some descriptive text of a service. For the icon, change that purple gradient with a gray one and reduce the opacity of the layer until you obtain a light gray icon. They look better if are lighter. box Now build 2 more boxes following the same steps. Just replace the icon with another one and make sure to leave a space of 40px between columns. boxes Now let`s build a footer. Draw a horizontal line like you did at header and position it at 40px under the “Services” boxes. This line will be the separator between content and footer. The footer will be divided in 3 boxes, exactly like “What We Do” widget. The first one will display latest tweets, the second one latest news and the last one some links. Select the Horizontal Type Tool(T) and type in a title and some content which imitates a tweet. Duplicate the tweet in order to have 2 tweets. You can add as many as you want. tweets Now build the second column by adding a title, a small post thumbnail, a post title, some metadata(date, author). news Split the last column into 2 small columns. For each one add a title and some links. I set the line-height of the links to 24px, to give them some space. links The final touch will be represented by the copyright details. Add again a separator line, leave 40px at the top and 20-25px at the bottom of the line and type in some copyright text like “Copyright © 2011 – Template. All Rights Reserved”. Make sure to center the text after adding it. copyright With this final touch, the design of the template is finished and ready to be converted into HTML. If you read this line this means that you covered the tutorial and I thank you! If you have any questions, drop us a line and we`ll be happy to reply to you! Until then, take a look at what we`ve done today!(Click for bigger preview). image-600 Web Design Blog, Web Designer Resources]]> http://www.designerbooster.com/web-design/design-clean-minimal-portfoliobusiness-website-template-photoshop/feed/ 0 Showcase of New Joomla Templates http://www.designerbooster.com/featured/showcase-new-joomla-templates/ http://www.designerbooster.com/featured/showcase-new-joomla-templates/#comments Wed, 11 Jan 2012 02:40:29 +0000 designerbooster http://www.designerbooster.com/?p=3211 Showcase of New Joomla Templates
Joomla- is an easy for usage, free and open source content management system (CMS) for publishing content on the World Wide Web that will be able to simplify your working process, using object-oriented programming techniques and software design patterns. The benefits of Joomla are:relatively easy-to-use, +6,000 extensions, fairly scalable, strong tech community. Joomla adds greater [...] Related posts:
  1. 39 Beautiful Email Newsletter Templates
  2. Win 1×3 Flash Templates Powered By MotoCMS
  3. 5 Beautifuly Designed Premium Christmas Email Templates
]]> Showcase of New Joomla Templates
Joomla- is an easy for usage, free and open source content management system (CMS) for publishing content on the World Wide Web that will be able to simplify your working process, using object-oriented programming techniques and software design patterns. The benefits of Joomla are:relatively easy-to-use, +6,000 extensions, fairly scalable, strong tech community. Joomla adds greater flexibility, extensibility and scalability. A Joomla Template is the 'look and feel' of your website. Typically it is designed and constructed in the way most other web pages are built, using HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets) and a number of graphics. I've gathered our complete collection of them, including the themes made for different Joomla versions as well as Joomla templates made with various technologies (such as Flash or jQuery for example, you all seem to really love these extra features). Take a look at this Joomla templates from TemplateMonster.com Author: Elza Sources Available: .PSD;.PHP Software Required: Adobe Photoshop CS+; Adobe Dreamweaver 8+ (or any php-editor); For uncompressing a template ZIP package: WinZip 9+ (Windows); Stuffit Expander 10+ (Mac); Joomla! 1.7.3 Width: 1680px img Author: Cowboy Sources Available: .PSD;.PHP Software Required: Adobe Photoshop CS+; Adobe Dreamweaver 8+ (or any php-editor); For uncompressing a template ZIP package: WinZip 9+ (Windows); Stuffit Expander 10+ (Mac); Joomla! 1.7.3 Width: 1800px img Author: Astra Sources Available: .PSD;.PHP Software Required: Adobe Photoshop CS+; Adobe Dreamweaver 8+ (or any php-editor); For uncompressing a template ZIP package: WinZip 9+ (Windows); Stuffit Expander 10+ (Mac); Joomla! 1.7.3 Width: 1920px img Author: Astra Sources Available: .PSD;.PHP Software Required: Adobe Photoshop CS+; Adobe Dreamweaver 8+ (or any php-editor); For uncompressing a template ZIP package: WinZip 9+ (Windows); Stuffit Expander 10+ (Mac); Joomla! 1.7.3 Width: 1400px img Author: Hugo Sources Available: .PSD;.PHP Software Required: Adobe Photoshop CS+; Adobe Dreamweaver 8+ (or any php-editor); For uncompressing a template ZIP package: WinZip 9+ (Windows); Stuffit Expander 10+ (Mac); Joomla! 1.7.3 Width: 1920px img Author: Mercury Sources Available: .PSD;.PHP Software Required: Adobe Photoshop CS+; Adobe Dreamweaver 8+ (or any php-editor); For uncompressing a template ZIP package: WinZip 9+ (Windows); Stuffit Expander 10+ (Mac); Joomla! 1.7.3 Width: 1980px img Author: Svelte Sources Available: .PSD;.PHP Software Required: Adobe Photoshop CS+; Adobe Dreamweaver 8+ (or any php-editor); For uncompressing a template ZIP package: WinZip 9+ (Windows); Stuffit Expander 10+ (Mac); Joomla! 1.7.3 Width: 1200px img Author: Hugo Sources Available: .PSD;.PHP Software Required: Adobe Photoshop CS+; Adobe Dreamweaver 8+ (or any php-editor); For uncompressing a template ZIP package: WinZip 9+ (Windows); Stuffit Expander 10+ (Mac); Joomla! 1.6.5 Width: 1980px Author: Delta Sources Available: .PSD;.PHP Software Required: Adobe Photoshop CS+; Adobe Dreamweaver 8+ (or any php-editor); For uncompressing a template ZIP package: WinZip 9+ (Windows); Stuffit Expander 10+ (Mac); Joomla! 1.6.5 Width: 1362px img Author: Astra Sources Available: .PSD;.PHP Software Required: Adobe Photoshop CS+; Adobe Dreamweaver 8+ (or any php-editor); For uncompressing a template ZIP package: WinZip 9+ (Windows); Stuffit Expander 10+ (Mac); Joomla! 1.6.3 Width: 1920px img Author: Glenn Sources Available: .PSD;.PHP Software Required: Adobe Photoshop CS+; Adobe Dreamweaver 8+ (or any php-editor); For uncompressing a template ZIP package: WinZip 9+ (Windows); Stuffit Expander 10+ (Mac); Joomla! 1.5.x Width: 1200px img Photoshop Lady]]> http://www.designerbooster.com/featured/showcase-new-joomla-templates/feed/ 0 The Top 25 WordPress Themes Of 2011 http://www.designerbooster.com/featured/top-25-wordpress-themes-2011/ http://www.designerbooster.com/featured/top-25-wordpress-themes-2011/#comments Sat, 07 Jan 2012 02:39:48 +0000 designerbooster http://www.designerbooster.com/?p=3193 The Top 25 WordPress Themes Of 2011
One could argue that every year the WordPress platform gets better and better, and 2011 was no different with the release of three major updates: WordPress 3.1, 3.2 and 3.3. We have seen the addition of post formats, advanced taxonomy and custom fields queries, an improved import and export system, the introduction of an admin [...] Related posts:
  1. 50+ Best Affordable Magazine WordPress Themes
  2. Giveaway 5 Copies of Lightspeed Premium WordPress Theme
  3. Web Design Resources – November 2011
]]> The Top 25 WordPress Themes Of 2011
One could argue that every year the WordPress platform gets better and better, and 2011 was no different with the release of three major updates: WordPress 3.1, 3.2 and 3.3. We have seen the addition of post formats, advanced taxonomy and custom fields queries, an improved import and export system, the introduction of an admin bar, distraction-free writing mode, revised dashboard interface, drag and drop uploader and much more. As always, it’s theme developers who are taking advantage of these new features and pushing WordPress to do things that no one expected it to do. Today we would like to share with you 25 more of our favourite WordPress themes from the last 12 months. Included in the list are themes for personal blogs, photography websites, businesses and communities. There have been so many great designs released this year that this list could have extended to over 200, so please don’t be offended if your favourite design didn’t make the final 25 :)

2011′s Top 25 Themes

1. Daily Post FREE A simple yet beautiful free design from WPLook that was created for personal blogs. It was designed using HTML5 and CSS3 and due to its responsive design it looks great on portable devices such as phones and tablets too. Post formats are supported and through the theme options area you can define your social media profile URLs and modify some basic SEO options. Daily Post Info & Download | Demo 2. Pink Touch 2 FREE Designed by WordPress developers Automattic, Pink Touch 2 is a great looking single column blog design with beautiful typography, unique designs for post formats and custom header and background. Although the blog doesn’t have a sidebar, there are three widget areas in the footer. This simplicity is what sets the design apart from many alternatives. Pink Touch 2 Info & Download | Demo 3. PhotoClick FREE | $ 4.99 For Premium Version A feature rich design that was created for photography websites and personal blogs. It has great typography, shortcodes for styling content and its one column design is perfect for displaying large images. The theme is free to download however for only $ 4.99 you can get an additional colour scheme (grey), custom widgets, banner integration, more theme options and the original layered Photoshop PSD file. PhotoClick Info & Download | Demo 4. ProReviewTheme Single License: $ 37, Multisite License: $ 67, Developer License: $ 127 An advanced WordPress theme that allows you to create an Amazon or Clickbank affiliate review site in seconds. All products can be rated using the popular 5 star rating system and the theme helps push traffic to affiliate sites by prominently displaying links to the product website. It has been optimised for use on mobile devices such as tablets and through the theme settings area you can change basic style settings and modify the header. Arguably the best affiliate design for WordPress released in 2011. ProReviewTheme Info & Download | Demo 5. FaultPress Regular License: $ 100 Working in a similar way to their help desk theme SupportPress, WooThemes FaultPress design turns WordPress into a fully functional bug tracking system. It allows you and your team to monitor the progress of your project through milestones. Tickets can be raised by users to allow you to track what needs to be addressed. It also features a great messaging system to allow users and developers to communicate with each other effectively and it has been optimised for use on mobile phones and tablets. FaultPress Info & Download | Demo 6. The Navigator Regular License: $ 40 The perfect theme for a travel website. Utilising Google Maps, The Navigator shows a map of the world in full screen. Every trip (post) is noted on the map using a pin. Details of each location are displayed in a content box at the left hand side of the page whilst an image of the location is displayed in the background in full screen. The Navigator Info & Download | Demo 7. Delicioso Regular License: $ 35 Perfect for restaurants, Delicioso displays a large image slider on the home page to showcase your dishes. It comes with 6 colour schemes and its own unique shortcodes to help style your content. There are also dedicated blog, gallery and menu templates. Delicioso Info & Download | Demo 8. PixelPower Regular License: $ 35 A responsive WordPress theme that has a clean minimal styled design. With support for all post formats, PixelPower is one of the best options available for personal blogs. It also comes with 1, 2 and 4 column portfolio templates so should prove popular with photographers and designers too. It is optimised for use on mobile devices and it includes dark and no-CSS child themes too. PixelPower Info & Download | Demo 9. Continuum Regular License: $ 40 Boasting over 200 theme options, Continuum is one of the most feature rich designs released in 2011. It comes with 5 custom sliders, 11 custom widgets, 19 unique sidebars, 68 custom shortcodes, 6 colour schemes and 28 pre-selected backgrounds and 8 page templates. It also has an in built ratings system that supports 5 review types: movies, music, video games, books and products. Continuum Info & Download | Demo 10. Grido Regular License: $ 39 A responsive Tumblr style theme from Themify that supports all WordPress post formats. The sidebar can be placed on the left or right or be removed altogether. You can also set 1, 2, 3 or 4 columns of posts to be displayed. Coded using HTML5 and CSS3, it comes with a lightbox gallery, 9 post gradient colours and 7 colour schemes. It also has child theme support. Grido Info & Download | Demo 11. Rockwell Regular License: $ 35 Packaged with one of the best looking theme options areas we have seen, Rockwell is a versatile design that is suitable for portfolios, business websites or blogs. In total there are 43 category templates, 20 single page templates, 10 page templates, 30 shortcodes and 6 colour schemes. There are also 3 different home page sliders, 3 different styles of top navigation menus, a slider manager and much more. RockWell Info & Download | Demo 12. Announcement Standard License: $ 70, Developer License: $ 150 It’s becoming very common for couples and families to create websites to celebrate important events such as weddings, graduations or the arrival of a baby in the family. The Announcement theme was created specifically for events such as these. Everything is displayed on one page. When a user clicks on a section in the top navigation menu the page scrolls to the appropriate area on the page. Visitors can also leave comments at the bottom of the page. It also includes a photograph slider and you can choose between 1 and 3 columns for your content. There are several preset layouts for evens such as births, graduations and website launches. A baby statistics grid is also included. Announcement Info & Download | Demo 13. Sofa Shoppr Regular License: $ 40 A cool eCommerce design that works with PayPal, 2CheckOut and Authorize.net. Orders and stock inventory can be tracked in the back end and featured products can be rotated at the top of the home page. There are 8 built-in widgets and 3 different layouts for the home page. Sofa Shoppr Info & Download | Demo 14. Studio8 Regular License: $ 35 A minimalist photography design that comes in white and black colour schemes. Images are displayed in the background in full screen and it is optimised for use on tablets. Videos are also supported though what many photographers will love is the ability to upload hundreds of photos at once using the themes built-in gallery management system. Studio8 Info & Download | Demo 15. Stereotype Regular License: $ 32 A clean looking one page portfolio design that was created using HTML5 and CSS3. It comes with 4 colour schemes and is optimised for use on mobile phones and tablet devices. Featured images, videos and galleries are all supported and the contact area has Google maps integration. Stereotype Info & Download | Demo 16. Daily Deal Standard License: $ 89.95, Developer License: $ 179 Given the success of daily deal websites such as Groupon and Living Social, it isn’t surprising that a lot of imitation scripts and templates have been released. Daily Deal is one of the best available. The design turns your WordPress website into a full functional daily deal service. Each deal shows the length of time left before the deal expires, the savings you can make and the number of items sold. Several payment gateways are supported to allow sellers to upload their deals directly with no fuss, and there is a newsletter form built into the home page design that supports MailChimp and Feedburner. Daily Deal Info & Download | Demo 17. Morning Regular License: $ 69 A visually impressive magazine theme that comes with blue, dark and light colour schemes. Posts and pages can be shown in full width or have a sidebar placed on the left or right hand side of the page. It has fantastic video support and images are automatically resized so that they fit into the design correctly. One of the best looking magazine designs released this year. Morning Info & Download | Demo 18. Handmade Regular License: $ 30 ($ 50 on Obox website) A warm theme that was designed with arts and crafts, cooking and clothing websites in mind. It has a great looking home page that displays large featured images of your latest blog posts. The included gallery makes it a good choice for anyone who wants a welcoming blog design. Handmade Info & Download | Demo 19. Lucky Times Regular License: $ 30 A responsive design for blogs, portfolios and online magazines. The developer allows you to download the Photoshop PSD file for free before you buy to see if the template is suitable for your project. It sports a unique columned menu design at the top of the page and bizarrely no home page template. Instead, users of the theme can build a homepage design using short codes. The theme has great typgography with Google Fonts support and it a great options panel that lets you customise the header, footer, colour scheme and blog and portfolio templates. Lucky Times Info & Download | Demo 20. Me Gusta Regular License: $ 35 The self proclaimed ‘user driven content sharing system’ uses a Facebook-like system that allows visitors to vote for the posts that they like. Posts that get a lot of votes are deemed ‘Hot’ and can be listed in your sidebar or your home page (instead of new posts). You can also make posts ‘Not Safe For Work’ for adult related content. Me Gusta has great Facebook integration too. Users can register and login using their Facebook account and you can replace the default WordPress commenting system with Facebook comments directly from the options area. With good support for post formats, Me Gusta is great for a content sharing website or a personal blog. Me Gusta! Info & Download | Demo 21. Huddle Regular License: $ 50 A community design for users of the popular BuddyPress and bbPress plugins. It features 6 custom page templates, 9 custom widgets and a blog template that supports featured images. Even though BuddyPress and bbPress had major updates during 2011, support for the plugins has been lukewarm at best from developers. Huddle is certainly one of the best options available if you want to create a community website using WordPress. Huddle Info & Download | Demo 22. SocialLike Regular License: $ 30 Another Tumblr style blog design that has support for all post formats. It could also be used as a portfolio as it has 4 great looking gallery templates. It includes 22 background images, unlimited colour options for text using a colour picker, 25 fonts for headings and 9 for body text and an unlimited number of colour options for your post icons. Content can be styled using over 40 included shortcodes and you can publish any type of post directly from your iPhone using the Express App. SocialLike Info & Download | Demo 23. DK For Photography Regular License: $ 35 Another versatile photography theme that supports a full screen rotating image gallery in the background. There are 4 home page layouts to choose from, 10 page templates, 6 gallery templates, 7 custom widgets, lots of shortcodes and support for password protecting your galleries. Whilst some photography designs consider the blog template unimportant, DK For Photography has a beautiful blog design that integrates Facebook and Twitter voting buttons into the post area perfectly. DK For Photography Info & Download | Demo 24. Humble Regular License: $ 35 A powerful WordPress theme that can be used for just about anything. The first thing that you will notice about the theme is the unique polaroid style slider on the home page. It’s a great change from standard featured post sliders. The homepage can be styled using shortcodes which allows you to create a near unlimited number of layouts. Additionally the theme includes support for 19 fonts, 5 custom widgets, over 80 shortcodes and 4 portfolio layout designs. You can also change CSS settings directly via the options area without having to touch the style.css stylesheet file itself. Humble Info & Download | Demo 25. Lightning Regular License: $ 35 A beautiful business and portfolio WordPress theme that allows you to create an unlimited number of layouts using a visual drag and drop interface (this costs $ 25 if you buy it separately as a WordPress plugin). This allows you to create portfolio pages, columns, sliders, tabs, galleries and much more. Lightning Info & Download | Demo We hope you enjoyed this list of further theme faves from the year we just left. As always, we would love to hear what your favourite WordPress theme from 2011 was. Feel free to let us know about it in the comments, or leave your opinions on some of the featured themes that you may have used yourself. (rb) Noupe]]> http://www.designerbooster.com/featured/top-25-wordpress-themes-2011/feed/ 0 Weekly Design Inspiration #45 http://www.designerbooster.com/web-design/weekly-design-inspiration-45/ http://www.designerbooster.com/web-design/weekly-design-inspiration-45/#comments Wed, 04 Jan 2012 02:48:46 +0000 designerbooster http://www.designerbooster.com/?p=3147 Weekly Design Inspiration #45
This article is part of our “Weekly Design Inspiration” series. We are showcasing  once a week cool and inspirational designs submitted that week in the CrazyLeaf Web Gallery. If you think your website belongs here, you can submit it for review (nw). Pierrick Calvez   Lee Jeans Joyful Giftcard Pixanimal Studios Visionssuche Pixillion Identyme Toc-Toc Mike Precious [...] Related posts:
  1. Weekly Design Inspiration
  2. Weekly Vector Inspiration
  3. Weekly Vector Inspiration
]]> Weekly Design Inspiration #45
This article is part of our “Weekly Design Inspiration” series. We are showcasing  once a week cool and inspirational designs submitted that week in the CrazyLeaf Web Gallery. If you think your website belongs here, you can submit it for review (nw).

Pierrick Calvez

Pierrick Calvez  

Lee Jeans

Joyful Giftcard

Joyful Giftcard

Pixanimal Studios

Pixanimal Studios

Visionssuche

Visionssuche

Pixillion

Pixillion

Identyme

Identyme

Toc-Toc

Toc-Toc

Mike Precious

Mike Precious

Troyca

Troyca CrazyLeaf Design Blog]]> http://www.designerbooster.com/web-design/weekly-design-inspiration-45/feed/ 0 Create a Web Hosting Landing Page in Adobe Photoshop http://www.designerbooster.com/web-design/create-web-hosting-landing-page-adobe-photoshop/ http://www.designerbooster.com/web-design/create-web-hosting-landing-page-adobe-photoshop/#comments Fri, 30 Dec 2011 08:41:05 +0000 designerbooster http://www.designerbooster.com/?p=3091 Create a Web Hosting Landing Page in Adobe Photoshop
In this week’s tutorial we are going to create a Web Hosting Landing Page layout for Besthost as an example. The template will have a simple logo, navigation, slider gallery, package, about us, services, testimonials and footer. Let’s combine these all together to make an awesome template. I will try my best to make it [...] Related posts:
  1. Create a Neat Ribbon in Adobe Illustrator
  2. Create a Hip Magazine Cover in Adobe InDesign
  3. How to Create a Clean Navigation Menu in Photoshop
]]> Create a Web Hosting Landing Page in Adobe Photoshop
In this week’s tutorial we are going to create a Web Hosting Landing Page layout for Besthost as an example. The template will have a simple logo, navigation, slider gallery, package, about us, services, testimonials and footer. Let’s combine these all together to make an awesome template. I will try my best to make it easy for you to follow this tutorial. So let’s get started! Here is what we will be making, click on the image for full preview:

Resources for this tutorial

Step 1: Setting up the Document

Start by creating a 1400px x 1470px document in Photoshop. Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.
  • Rulers: Ctrl + R
  • Guides: Ctrl + ;
Also one important thing when using Ruler Tool is the Info(Information) Panel. Use this when you are measuring using the ruler, the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to Windows – Info. The total width of this site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 220px. Create another guide and change the value to 1180px, this will make a total of 960px in the center of our canvas.

Step 2: Working on Background

Header and Slider

Starting at the top of the canvas select Rectangle Tool(U) and create a 100% by 470px fill it with #1560d5. Based on the screenshot, our background will contain grid patterns, so let’s create that. Open up a new window and create a 100px by 100px with a Transparent background. Select Pencil Tool(B) and set the size to 1px then, create an L shape as shown in the screenshot below. Then go to Edit – Define Pattern Create another pattern using the L shape, but this time make it 20px by 20px. Now that we have our pattern, create two new layers. For the first layer fill it with the Big Pattern using Paint Bucket Tool(G) and from the drop down list on the options panel set it to Pattern then select the Big Pattern. Then set the Layer Mode – Softlight 50%. On the second layer fill it with the smaller pattern, Softlight 20%. Result.

Newsletter

Using Rectangle Tool(U) create a 100% by 100px fill it with #111111.

Content & Copyright

Just fill the background layer with #ededed.

Footer

Using Rectangle Tool(U) create a 100% by 260px fill it with #1560d5. Place it 60px upwards starting from the bottom of the canvas.

Step 3: Working on Logo and Navigation

Create a 906px by 60px shape using Rounded Rectangle Tool(U), Radius 3px and fill it with #111111. Place it 50px starting from the top. Apply This Blending Option
  • Drop Shadow:
  • Inner Shadow:
  • Gradient Overlay:
  • Stroke:
Result!

Logo

We will make a temporary logo. Using Text Tool(T) put up the site name. For this example just use Arial 24pt.
  • Drop Shadow:
  • Bevel and Emboss:
Result! Add a slogan using the same tool. Font will be Museo 12pt color #777777. Result!

Navigation

Using Text Tool(T) add your links. Use Arial 14pt color #777777, the active link color will be #ffffff. Each link will have 21px distance on the left and right. Measure it using Ruler Tool(I). Next we will add a divider to make the links separate. Using Line Tool(U) create a 1px black Line. Place it at the center as shown in the screenshot below. Merge all the shapes and duplicate it. Apply a #393939 Color Overlay. Move the layer 1px from the right. Now apply a Mask by clicking the mask icon at the layers panel. Now using Gradient Tool(G) black and white. Fill the mask starting from the bottom of the shape towards at the middle. For the hover effect the font will be white, then it will have a bottom border 2px color #d8d50d.

Step 4: Working on Slider

Create a 10px guide to the right. Using Text Tool(T) put up a dummy heading and text. For the heading I used Oswald 30pt color #ffffff and #efef14. For the paragraph I used Arial 12pt color #e2defd. Select Rounded Rectangle Tool(U) Create a 180px by 50px rounded rectangle set the Radius to 3px and color to #eae70e. Apply This Blending Option
  • Drop Shadow:
  • Inner Shadow:
  • Gradient Overlay:
Result! Next we will add the arrow icon and the text. For the text I used Oswald 18pt color #ffffff and color #9a9603 for the bevel look. For the arrow icon find an arrow from the selection using Shape Tool(U). For the rounded circle just create a 30px by 30px using Ellipse Tool(U) set the Fill to 0% and apply a 3px stroke inside. For the bevel looking look just duplicate the layers and make the original layer color to #9a9603. Next adding the controls. Just create a 12px by 12px white circle and set the Opacity to 50%. For the active one just leave it white. For the cpu/servers just grab some stockphotos.

Step 5: Working on News Letter Sign Up

Grab a mail icon from wefunction icon set and place it as shown. For the Heading text I used Museo 500 18pt color #ffffff. For the Paragraph I used Arial 14pt color #777777. Next we will create the news letter input and button. To start create a 300px by 40px shape using Rounded Rectangle Tool(U) Radius 3px, set the fill color to #f2f2f2. Apply This Blending Option
  • Inner Shadow:
Label it with text Arial 12pt color #555555. Next using Rounded Rectangle Tool(U) with the same radius create a 90px by 40px shape. Fill color will be #1560d5. Once the shape is in place using Direct Selection Tool(U), Delete Anchor Point and Add Anchor Point create a shape as shown in the screenshot below. Apply This Blending Option
  • Inner Shadow:
  • Gradient Overlay:
  • Stroke: #0341a2, #1560d5
Label the button with “SIGNUP” using Text Tool(T) color white and for the bevel look color will be #0342a3. To finish this button using 150px Soft Brush color #ffffff. Click once in a separate layer and transform it as shown in the screenshot below. Then, set the Layer Mode – Softlight. Result

Step 6: Working on Main Content

The main content will contain Package Table & About Us. Let’s work first on Pricing Table.

Pricing Table

Using Rounded Rectangle Tool(U) with the same Radius, create a 690px by 330px shape and add a 1px stroke color #c3c3c3. Using the same tool create a 690px by 55px shape with a fill color of #1560d5. Make the bottom part not rounded, and also apply the same blending option as we did in our sign up button. Let’s divide our table into 3 columns 690 / 3 = 230px each column, so go ahead and measure it using Ruler Tool(I) then add a 1px line using Line Tool(U) color will be #c3c3c3. Now let’s add data in our table. Each table data will have a 40px of height, white for odd and #f5f5f5 for even. For the text I used Arial 12pt color #555555. Next let’s create a button for each column. Button size will be 100px by 30px, the same font but font size is 13pt. For the styles just copy what we applied on sign up button and add this blending option.
  • Drop Shadow:
Apply also the highlights effect that we did previously. Now let’s work on the header part. Using Line Tool(U) create a 1px line color will be #0341a3. Next, using Text Tool(T) add the heading text as shown in the screenshot below. Apply the highlights effect.

About Us

Using Text Tool(T) add the heading text and paragraph. For heading font will be Museo 18pt color #2c2c2c, and for the paragraph Arial 12pt color #555555.

Step 7: Working on Sidebar

The sidebar will contain a blocks. Let’s work first on the first block

Services

Using Rounded Rectangle Tool(U) create a 250px by 225px shape. Apply a 1px inside stroke color #c3c3c3. Next open up wefunction iconset and grab 3 icons resize it and align it as shown in the screenshot below.

Testimonials

Using the same tool create a 250px by 220px shape with a fill color of #111111. Apply a 1px inside stroke color #000000. Refer to the screenshot below for the text format and colors.

Step 8: Working on Footer

The Footer will be divided into 4 columns Quick Links, From the blog, Quick Contact, and Follow us. Each column will have a 20px distance from the right except for the last one.

Quick Links

The width will be 320px. The will contain two column of links each column will have a width of 150px and a distance of 20px.

From The Blog

The width will be 300px. Using Rectangle Tool(U) create a 49px by 49px shape. Beside it 20px from the right will be the post title and date published.

Quick Contact

Width will be 150px, the same text and spacing.

Follow Us

Width will be 130px and place the social icons as shown in the screenshot below. And lastly add the copyright text on the bottom left part and links on the bottom right part. Font will be Arial 11pt color #555555.

Finally We’re Done!

I hope you learn something from this tutorial and I hope this helps. If you have questions feel free to drop it below. Happy Holidays everyone. Godbless!
1stwebdesigner - Graphic and Web Design Blog]]> http://www.designerbooster.com/web-design/create-web-hosting-landing-page-adobe-photoshop/feed/ 0 35 Quality Business Card Design Templates for Free! http://www.designerbooster.com/featured/35-quality-business-card-design-templates-free/ http://www.designerbooster.com/featured/35-quality-business-card-design-templates-free/#comments Wed, 28 Dec 2011 14:37:28 +0000 designerbooster http://www.designerbooster.com/?p=3075 35 Quality Business Card Design Templates for Free!
Though gadgets exist these days with features that aim to replace this basic promotional medium, old school printed business cards are still relevant, even important, for branding and advertising your identity. A well-designed and effective business card can be an excellent marketing tool for any business of any size. Today we are showcasing 35 examples [...] Related posts:
  1. All That Goes Behind a Business Card Design
  2. Choosing And Finding A Business Card Template
  3. Business Card Software: How to Make Business Cards
]]> 35 Quality Business Card Design Templates for Free!
Though gadgets exist these days with features that aim to replace this basic promotional medium, old school printed business cards are still relevant, even important, for branding and advertising your identity. A well-designed and effective business card can be an excellent marketing tool for any business of any size. Today we are showcasing 35 examples of quality business cards and also giving you some links from where you can download these beautiful business card templates for free. If you’re in need of a business card for yourself or your client, you may be able to find a cool template that will meet your needs or at least serve as a starting guide that you can edit.   Direct download: transparent business card   Wood Industry Business Card Template Direct download: wood industry business card   Business Card Template with QR Code Direct download: QR Code Business Card   Blue Business Card Template Direct download: blue business card template   Direct download: Bokeh 2 Business Card   Personal Business Card Direct download: personal business card   Typography Business Card Direct download: typography business card   Creative Director Business Card Direct download: Creative Director Business Card   Template Direct download: Creative Business Card vol 3   Stylish Business Card Direct download: Stylish Business Card   Business Card Template Direct download: Dark Business Card Template   Corporate Business Card Direct download: Corporate Card vol 1   Direct download: Yellow/Black Business Card Template   Retro Business Card Template Direct download: Retro Business Card   Direct download: Photoshop Business Card   Direct download: Business Card Template   Download page: Chillen Chillen Card   Minimalistic Business Card Direct download: Minimalistic Business Card   Direct download: PSD Business Card Mock Up Vol 1   PSD Template Download: Creative Business Card vol 2   Business Card Templates Download page: Business Card Templates   Direct download: Metal Black Business Cards   Direct download: Bokeh Business Card vol 3   Direct download: Teacher Business Card   Teacher Business Card Direct download: Sex Instructor Business Card   GraphicFuel Direct download: GraphicFuel Business Card   Vector Business Card Direct download: Business Card   Standard Business Card Template Direct download: Standard Business Card   Clean Business Card Direct download: Clean Business Card   Simple Business Card Direct download: Simple Business Card   Direct download: Painter Business Card   Direct download: Minimal Business Card   Direct download: Bokeh Business Card   Direct download: Pink Business Card   Google Business Card Direct download: Google Business Card
Bartek Miszkiel

About the Author

Bartek is a freelance writer, blogger and social media enthusiast. He offers tutorials and web components on his blog Web Design Elements and can be found hanging out on Twitter talking about web design, freelancing, productivity.
  If you’ve got a design ready for printing, try the business cards card stock quality offered by UPrinting.com! We mention this because we heard they have a 20% discount on business card printing until January 31, 2012, and we thought that might help you save some. You The Designer]]> http://www.designerbooster.com/featured/35-quality-business-card-design-templates-free/feed/ 0 Design a Modern, Textured Portfolio Website http://www.designerbooster.com/web-design/design-modern-textured-portfolio-website/ http://www.designerbooster.com/web-design/design-modern-textured-portfolio-website/#comments Sun, 18 Dec 2011 14:42:48 +0000 designerbooster http://www.designerbooster.com/?p=2931 Design a Modern, Textured Portfolio Website
Resources Used In This Tutorial Leather Texture Apple Imac Final Image Here is a preview of the image that we are going to be creating: Step 1 Create a new document (1000X2000px). Start by pasting your leather texture into the top of your canvas: Apply a color overlay blending option to your texture layer. Color [...] Related posts:
  1. Sleek and Stylish Portfolio Design Website
  2. How to Make a Light Textured Web Design in Photoshop
  3. Light Textured Web Design
]]> Design a Modern, Textured Portfolio Website

Resources Used In This Tutorial

Final Image

Here is a preview of the image that we are going to be creating:

Step 1

Create a new document (1000X2000px). Start by pasting your leather texture into the top of your canvas: Apply a color overlay blending option to your texture layer. Color Overlay Blending Option Settings: Blend Mode: Normal Color: 585858 Opacity: 90% Apply a hue/saturation adjustment layer, creating a clipping mask so that your adjustments only effect your underlying texture layer: Hue/Saturation Adjustment Layer Settings: Hue: 0 Saturation: -100 Lightness: -30

Step 2

Place your texture layer and adjustment layer in a layer group and then duplicate this layer group. Move your duplicate texture area down to fill the bottom area of your canvas. If you notice a harsh seam between your two textures, simply mask the top off your duplicate texture off using a soft black paintbrush. This should connect them seamlessly:

Step 3

Create a new layer called ‘darker bottom’. Select the bottom of your canvas (from 350px downwards). Fill this area with black. Then change this layer’s opacity to 30%:

Step 4

Apply some text to the top center of your canvas. Type out a huge letter ‘f’ using the text settings below: Text Settings: Font Face: PT Banana Split Font Size: 480pt Kerning: -50 Color: 000000 Now reduce this layer’s FILL opacity (not actual opacity) to 15%. Apply an inner shadow, to give an indented look: Inner Shadow Blending Option Settings: Blend Mode: Multiply Color: 000000 Opacity: 10% Angle: 90 Distance: 5px Choke: 0% Size: 5px

Step 5

Duplicate your ‘f’ layer and move the duplicate to the bottom right of your canvas.

Step 6

Create a new layer called ‘header highlight’. Apply a large, soft white paintbrush to the top center of your canvas. Reduce this layer’s opacity to 40% and change it’s layer blend mode to ‘overlay’ to make the effect more subtle: Repeat this technique, applying a second light spot over the top left of your header (where you’re going to place your logo):

Step 7

Time to apply some layer guides to help setup our layout. Apply the following guides to your layer: Vertical Guides: 50px, 100px, 150px, 600px, 650px, 850px, 900px, 950px Horizontal Guides: 200px, 900px

Step 8

Using your layout guides, create a main content area using a white rounded rectangle (20px radius). Apply an outer glow and stroke blending option. This is to give definition to your content area: Outer Glow Blending Option Settings: Blend Mode: Normal Opacity: 15% Noise: 0% Color: 000000 Spread: 0% Size: 13px Stroke Blending Option Settings: Size: 4px Position: Inside Blend Mode: Normal Opacity: 100% Fill Type: Color Color: d4d4d4

Step 9

Create a new layer, beneath your content area layer. Call this layer ‘sketchy lines’. Use a rough Photoshop brush to brush around a subtle messy outline around your content area. Reduce this layer until the effect is suitably subtle (I used a 20% layer opacity).

Step 10

Apply some logo text to your header. Logo Text Settings: Font Face: Proxima Nova Size: 48pt Kerning: -50 Color: ffffff Styling: Italics Apply a subtle drop shadow blending option to your text layer. Drop Shadow Blending Option Settings: Blend Mode: Multiply Color: 000000 Opacity: 50% Angle: 90 Distance: 1px Spread: 0% Size: 2px

Step 11

Time to work on our logo icon! Start by drawing out a basic icon shape. I actually used the shield default custom shape available in Photoshop. This shape can be any color you want: Apply a drop shadow and gradient overlay blending option to this layer. Drop Shadow Blending Option Settings: Blend Mode: Multiply Color: 000000 Opacity: 25% Angle: 90 Distance: 5px Spread: 0% Size: 5px Gradient Overlay Blending Option Settings: Blend Mode: Normal Opacity: 100% Gradient: 0d77d0 to 38a3ff Style: Linear Angle: 90 Now option+click on your shield icon layer to select your shield shape. With your selection in place create a new layer called ‘logo icon lighting’. Drag out a white to transparent radial gradient from the top center of your icon. Due to your active selection this gradient shouldn’t exceed the bounds of your icon shape: Change this lighting layer’s opacity to 50% and it’s blend mode to ‘overlay’ to make the effect more subtle:

Step 12

Type out some menu text in the top right of your canvas. Menu Text Settings: Font Face: Arial Color: ffffff Size: 18 Kerning: -50

Step 13

Create a new layer beneath your menu text layer called ‘menu hover’. Use your pen tool to create a cool hover shape and fill this with black. Then reduce this layer’s opacity to 60%:z

Step 14

I’m going to be unconventional and jump straight down to applying our footer text. This is just so that we’ve covered every part of our layout except the content area. Footer Text Settings: Font Face: Arial Size: 14pt Kerning: -50 Color: a3a3a3

Step 15

Download your Imac image and paste it into the top right of your content area:

Step 16

Type out some welcome text to the left of your Imac. Heading Text Settings: Font Face: Arial Styling: Bold Size: 48px Kerning: -50 Color: 3a3a3a Smaller Text Settings: Font Face: Arial Styling: Regular Size: 18pt Kerning: -50 Color: 7a7a7a

Step 17

Create a learn more button under your welcome text. Use the same gradient overlay settings as your logo icon, but then also apply a drop shadow and inner shadow blending option. Inner Shadow Blending Option Settings: Blend Mode: Multiply Color: 000000 Opacity: 10% Angle: 90 Distance: 4px Choke: 0% Size: 3px Drop Shadow Blending Option Settings: Blend Mode: Multiply Color: 000000 Opacity: 10% Angle: 90 Distance: 4px Spread: 0% Size: 0px Just like with your logo icon also apply a lighting layer (using a radial gradient for subtle lighting):

Step 18

Using your paintbrush tool, brush out a faint gray divider line underneath your welcome area:

Step 19

In the center of your content area, underneath your sketchy divider, type out ‘FEATURED WORK’ as a subheading. Sub Heading Text Settings: Font Face: Arial Size: 14 Kerning: +100 Color: 6e6e6e Using your guides, paste in three thumbnails of your design work. Each thumbnail should be 200X150px. Apply a stroke blending option to each thumbnail layer: Stroke Blending Option Settings: Size: 7px Position: Outside Blend Mode: Normal Opacity: 5% Fill Type: Color Color: 000000

Step 20

Add a further area to the bottom of your content area called ‘featured clients’. Rather than using thumbnails, paste in logos of clients you’ve worked with:

Step 21

Between your featured work and featured clients area add a light gray rectangle (color: f3f3f3). This rectangle should jut out past the edges of your content area by about 15px either side: Now apply a drop shadow, inner shadow and bevel/emboss blending option to this rectangle layer: Drop Shadow Blending Option Settings: Blend Mode: Multiply Color: 000000 Opacity: 10% Angle: 90 Distance: 5px Spread: 0% Size: 5px Inner Shadow Blending Option Settings: Blend Mode: Multiply Color: d4d4d4 Angle: 90 Distance: 1px Choke: 0% Size: 0px Bevel and Emboss Blending Option Settings: Style: Inner Bevel Technique: Smooth Depth: 1000% Direction: Up Size: 0px Angle: 90 Altitude: 1 Highlight Opacity: 0% Shadow Opacity: 20%

Step 22

Create a new layer called ’3D area’. Using your lasso tool, create a little black triangle under the area of your light gray rectangle that juts out past your content area:

Step 23

Finally, to finish your layout apply a final call to action button in the center of your gray rectangle. Simply duplicate your learn more button for this new button area:

And We’re Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome. PSDFan]]> http://www.designerbooster.com/web-design/design-modern-textured-portfolio-website/feed/ 0