Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

December 09 2011

18:02

Quick Tip: Create a Makeshift JavaScript Templating Solution

Sometimes, you don’t require a high-quality templating solution, but still need to keep from mixing lots of nasty HTML into your JavaScript. In these cases, a simple, makeshift templating system can go a long way.

Choose 720p for the best clarity.
Subscribe to our YouTube channel for more training.

Final Source

HTML

<!doctype html public 'ahh hell yeah'>
<html>
<head>
	<meta charset=utf-8>
	<title>Simple Templating</title>
</head>
<body>

  <div class="result"></div>

  <script type="template" id="template">
    <h2>
      <a href="{{href}}">
        {{title}}
      </a>
    </h2>
    <img src="{{imgSrc}}" alt="{{title}}">
  </script>

</body>
</html>

JavaScript

;(function() {
  // simulates AJAX request
  var data = [
    {
      title: "Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5",
      href: "http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/",
      imgSrc: "http://d2o0t5hpnwv4c1.cloudfront.net/771_sticky/sticky_notes.jpg"
    },
    {
      title: "Nettuts+ Quiz #8",
      href: "http://net.tutsplus.com/articles/quizzes/nettuts-quiz-8-abbreviations-darth-sidious-edition/",
      imgSrc: "http://d2o0t5hpnwv4c1.cloudfront.net/989_quiz2jquerybasics/quiz.jpg"
    },
    {
      title: "WordPress Plugin Development Essentials",
      href: "http://net.tutsplus.com/tutorials/wordpress/wordpress-plugin-development-essentials/",
      imgSrc: "http://d2o0t5hpnwv4c1.cloudfront.net/1101_wpPlugins/wpplugincourse.png"
    }
  ],
      template = document.querySelector('#template').innerHTML,
      result = document.querySelector('.result'),
      i = 0, len = data.length,
      fragment = '';

  for ( ; i < len; i++ ) {
    fragment += template
      .replace( /{{title}}/, data[i].title )
      .replace( /{{href}}/, data[i].href )
      .replace( /{{imgSrc}}/, data[i].imgSrc );
  }

  result.innerHTML = fragment;
})();

Alternative

The method outlined in the screencast is the most readable, however, if you’d prefer a more automated approach, we can apply the values and regular expressions dynamically, like so:

;(function () {
    // simulates AJAX request
    var data = [{
        title: "Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5",
        href: "http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/",
        imgSrc: "http://d2o0t5hpnwv4c1.cloudfront.net/771_sticky/sticky_notes.jpg"
    }, {
        title: "Nettuts+ Quiz #8",
        href: "http://net.tutsplus.com/articles/quizzes/nettuts-quiz-8-abbreviations-darth-sidious-edition/",
        imgSrc: "http://d2o0t5hpnwv4c1.cloudfront.net/989_quiz2jquerybasics/quiz.jpg"
    }, {
        title: "WordPress Plugin Development Essentials",
        href: "http://net.tutsplus.com/tutorials/wordpress/wordpress-plugin-development-essentials/",
        imgSrc: "http://d2o0t5hpnwv4c1.cloudfront.net/1101_wpPlugins/wpplugincourse.png"
    }],
        template = document.querySelector('#template').innerHTML,
        result = document.querySelector('.result'),
        attachTemplateToData;

    // Accepts a template and data. Searches through the
    // data, and replaces each key in the template, accordingly.
    attachTemplateToData = function(template, data) {
        var i = 0,
            len = data.length,
            fragment = '';

        // For each item in the object, make the necessary replacement
        function replace(obj) {
            var t, key, reg;

            for (key in obj) {
                reg = new RegExp('{{' + key + '}}', 'ig');
                t = (t || template).replace(reg, obj[key]);
            }

            return t;
        }

        for (; i < len; i++) {
            fragment += replace(data[i]);
        }

        return fragment;
    };

    result.innerHTML = attachTemplateToData(template, data);

})();

This is the method that I’m most likely to use.


Additional Tools

If you’d prefer a more flexible solution, any of the following should do the trick!


November 16 2011

21:00

50 Practical And Time Saving Premium Product Mockups From Graphicriver

Which is more important to you – the content or the package? No doubt, it’s a discussable question but the compromise we might agree on is that both are equally important. Package and product design plays a massive role in marketing and consumer alluring. Yet we shouldn’t forget about the web – product showcase is important here as well. And especially when consumers aren’t able to touch the goods – the design and presentation will be crucial.

As we continue our series of articles featuring items from Graphicriver today we’ve prepared yet another great array of items – product mockups. Although more suited for web than real world you’ll also find some print-ready items for your posters or packages. Items collected here range from simple business card mockups to clothe mockups and even a vinyl record template. Continue reading and check out these 50 outstanding and practical premium product mockups from Graphicriver.

1. Great Business Card Mock-up Pack ($6)

Business-card-pack-premium-product-mockups

Best way to present your business card in 4 fancy & different styles. All you have to do is copy and paste. Your flat graphic files magically turn into 3D (print simulation) with impressive angles and lighting. Best for print preview and advertising.

2. 3D Asymmetrical Web Page Display ($3)

Web-page-display-premium-product-mockups

Perfect for displaying templates, web pages, photos etc. Each image is a smart object so editing the images is super easy. No need to worry about placements and reflections, it’s all done automatically.

3. 5 Realistic Logo Mockups ($6)

Realistic-logo-premium-product-mockups

Create a realistic display for your logo in few seconds. These PSD files uses the Smart-Object feature, so you can replace the mockup content easily and quickly.

4. Mega Pack WEB Mock-Up 3 ($5)

Mega-pack-web-premium-product-mockups

This innovative package mock-ups is especially designed to show your web sites. in an elegant and attractive way, giving such a unique and real.

5. 3 Fold Brochure III ($6)

Fold-brochure-premium-product-mockups

A design that breaks the traditional tri-fold design for brochures, giving a truly modern and original style all your ideas. 11×8,5.

6. Magazine Mockups – Closely Version ($5)

Magazine-closely-premium-product-mockups

Magazine Mockups – Closely Version is a file, specially designed to create presentations of magazines designs, wanting to show these amazing designs an elegant, sophisticated and beautiful way.

7. Tee Mockup ($6)

Tee-mockup-premium-product-mockups

This t-shirt mock-up file can be easily used and opened in Adobe Photoshop CS or higher. Place any image/logo or whatever on the mock-up, and place it on your website or shop.

8. Smart 3D package box ($4)

Smart-3d-box-premium-product-mockups

Elegant 3D box elements that will enhance your graphic and web projects alike to make it further visually appealing. The boxes are Smart Objects that requires jus placing your image and the box will be updated automatically.

9. Poster Mock-up Templates ($4)

Poster-templates-premium-product-mockups

4 psd template files with 3 different poster sizes. Very easy to modify. All you have to do is copy and paste your image.

10. Sleek Screen Mockup ($5)

Sleek-screen-premium-product-mockups

Layered PSD file of a sleek display in 16:9. The file comes with four different screen resolutions to choose from.

11. Sleek Phone Mockup ($6)

Sleek-phone-premium-product-mockups

Layered PSD file of a sleek phone. The file comes with two different screen resolutions to choose from on three different groups of phones and 8 single phone layouts.

12. Corporate Design Mock-ups ($11)

Corporate-design-premium-product-mockups

A spectacular mock-ups collection unprecedented, with photo-realistic effects and high-definition, Designed especially for presenting branding on different promotional pieces.

13. Sleek Laptop Mockup ($6)

Sleek-laptop-premium-product-mockups

Pixel-perfect image that are perfect to show of your latest wallpaper or homepage layout. Works with any background.

14. Album Cover CD Mock-Ups ($3)

Album-cover-premium-product-mockups

Display your album cover design with these mock-up files. Simple to use with just a copy and past to edit both the cover art and background textures. Jewel case and digipack mock-ups included.

15. Set of 2 billboards ($4)

Billboards-premium-product-mockups

This is a set of two isolated billboards, with interchangeable backgrounds (3 included), smart objects for one-click editing and effects for a realistic photography look.

16. Mobilisimo Mobile Phone & Mobile Pad Mock-ups ($9)

Mobilessimo-premium-product-mockups

Perfect to show your latest wallpaper, website or app. Works with any background.

17. Hands on tablet ($3)

Hands-tablet-premium-product-mockups

4 hands templates which are holding the tablet, which can be easily applied with your application screenshot. The hands are the different layer, so you can move, rotate, combine them, or anything that gets on your mind.

18. Mega pack Brochure ($7)

Mega-pack-brochure-product-mockups

This innovative package mock-ups is especially designed to show your creations in brochures or three-fold. in an elegant and attractive way, giving such a unique and real, let your works be seen truly spectacular.

19. Shopping bag mockup ($4)

Shopping-bag-premium-product-mockups

Give your graphic creations another look by testing in real objects the design details which cannot be visualized from the initial drawings and sketches.

20. Bottles and Ice cool Mock-Up ($5)

Bottle-ice-premium-product-mockups

This very useful graphic template is a great showcase for drinks, cocktails, toothpaste and every product that needs to be showed on a frosty cool scenery.

21. Stand Display Mockup ($5)

Stand-display-premium-product-mockups

This PSD item uses the Smart-Object feature, so you can replace mockup’s content easily and quickly. The item includes a view from three different angles for optimal display.

22. 3D Google Map Mock-up ($5)

Google-map-premium-product-mockups

Quickly illustrate a stylish 3D arrival map mockup. Place your own map or a Google map. You can add any background or use transparent one.

23. Business card mockup display ($4)

Business-card-premium-product-mockups

You can use this file to display the front and back of your card or to show 2 different cards together. The PSD file uses the Smart-Object feature, so you can replace mock-up content easily and quickly.

24. AutoFrame ($2)

Autoframe-premium-product-mockups

This item automatically generates a frame of your image without action. Just edit and save the smart object. Frames can be resized.

25. Paint Can ($4)

Paint-can-premium-product-mockups

Layered PSD file of an paint can that uses Smart Objects to create the labels so they can be created in separate files.

26. Computer & Monitor Set ($4)

Computer-monitor-premium-product-mockups

All items are in resolution 2400×1680px and highest quality. Everything is able to change (color, resizeable shapes).

27. Trade Show Boot Mock-up ($6)

Trade-show-premium-product-mockups

Fully editable Booth PSD file. To generate your own Booth replace and adjust the corresponding Layers.

28. PRO 3d Web Showcase ($6)

Web-showcase-premium-product-mockups

Best for your web designs, pictures, artwork, portfolio etc. Full layered Photoshop .PSD Files (5 styles)

29. Professional Cap Mock-up ($4)

Cap-premium-product-mockups

Quickly illustrate A cap mock up. You can add any background, edit 3 areas of colors, add a pattern, image, or a design of your own.

30. Splash Bundle ($6)

Splash-premium-product-mockups

This awesome bundle contains 4 different juicy splashes with 4 different materials of which is: water, blood, milk & chocolate. It’s all high quality 3d rendered and fine tuned in Photoshop.

31. Paper Mock-Up (44)

Paper-premium-product-mockups

If you design a page and want to show or want to see how he could now printed in a magazine or book, this mock-up is perfect for presentation.

32. The Store Maker ($7)

Store-maker-premium-product-mockups

All elements have a very detailed design and they are all editable. All layers are named and well-organized.

33. Pixel Screen Mock-up ($6)

Pixel-screen-premium-product-mockups

Ultra realistic LCD pixel screen mock-ups. A unique way to display your images.

34. Premium Product Presentation ($5)

Presentation-premium-product-mockups

Premium product presentation can be used for any of your website project for showcasing your website,products etc. Full layered,named and editable.

35. Chocolate/Candy Bar Mock-Up ($4)

Chocolate-premium-product-mockups

The file you get is set up at 3222×1812px, preview ready.

36. 3D Box Mockup ($4)

3d-box-premium-product-mockups

6 Variations, Smart Layers, easily editable, 2560×1600px.

37. All-Star Shoes Mock-up ($4)

Shoes-premium-product-mockups

Quickly illustrate a shoes mock-up. You can add any background, choose the shoes color, place your own pattern design.

38. Piecemaker Mock-up (#3)

Piecemaker-premium-product-mockups

All elements have a very detailed design and they are all vector shapes (even shadows). Double-click easy image change (change one image and all pieces are updated).

39. Professional Trifold Brochure Mock-Up ($3)

Trifold-brochure-premium-product-mockups

Display your brochure design with this professional mock-up file. Simple and easy to use with smart-object feature and hue/saturation adjustment to change background color.

40. Cosmetic Packaging Mock Ups ($3)

Cosmetic-premium-product-mockups

Layered PSD files of beauty hand cream mock ups. Add some flair to your designs with these editable files.

41. Creative Book Shelves Including Icons ($7)

Book-shelves-premium-product-mockups

Uber high quality objects with insane amount of details arranged as shelf stuff. Design agency, photographer, travel company or any private blog can use this illustrations for about page design.

42. Food-Bag Product Mock-Up ($3)

Food-bag-premium-product-mockups

Simple and easy to edit graphic food-bag mock-up with smart objects for one-click editing.

43. Grungy Crumpled Paper Mock-up ($5)

Grungy-paper-premium-product-mockups

11 Grungy crumpled paper mock-up psd templates. It’s easy to edit. It is perfect for your product showcase, for your unique gallery, for print or any other awesome project.

44. Vinyl Records ($3)

Vinyl-records-premium-product-mockups

A set of cool Vinyl Records for your project fully editable PSD build in vector layers.

45. Red Wine Bottles and Grapes ($6)

Red-wine-premium-product-mockups

This mock-up consists of one bottle in two states: brand new and from the cellar – old and decayed. The bottle is very layered and each layer is vector smart object, so the whole thing is scalable.

46. Food Packaging Mock-Up ($4)

Food-premium-product-mockups

Simple and easy to edit graphic food packaging mock-up with smart objects for one-click editing.

47. Paper Bag Mock-Up ($8)

Paper-bag-premium-product-mockups

High resolution 2000×1500. Easily editable via smart object (automatically transforms two-dimensional images into realistic three-dimensional previews).

48. T-Shirt Mock ups ($5)

Tshirt-mockup-premium-product-mockups

Best professional t-Shirt mockup pack to present your t-Shirt design and organize your online store. Changeable shirt color and background.

49. Textures Business Card Mock-up ($5)

Textures-business-card-premium-product-mockups

1000×750px, 3 Styles.

50. Pie Chart Creator ($4)

Pie-chart-premium-product-mockups

Quickly illustrate a stylish 3D pie chart mock-up. Generate graphs within minutes, change the segments size as you wish x4 shaded graph styles, x8 different colors You can add any background or use transparent one.

Sponsored post
feedback2020-admin
20:51

September 26 2011

02:53

20 High Quality, Extraordinary & Free Web PSD Templates


  

No matter who you are or what your business may be, you will always want your website design to stand out. Having an extraordinary website allows you to stay on the mind of most of your visitors and can help translate how unique your product or service is to someone.

The problem with creating a standout site is sometimes you have no clue where to start. You may have the colors you want, and you may simply have an idea; but as far as it really being unique, you don’t have a single clue. It can sometimes be hard to start with absolutely nothing and try to make it into something that will stick with someone.

Fortunately, there are folks out there who help out by creating fabulous PSD templates to help anyone get started on making a website. The unfortunate truth however, is sometimes, most of these freebies aren’t worth even going through. So, today we’ve created a list of 20 amazing PSD templates to do the sorting work for you and get you inspired with your own website design.

The Templates

All of these PSD templates are free. Please read the license agreements carefully before using the PSD’s exclusively for commercial use.

Gallerise

This is a great place to start off this round-up as this template comes in 9 different colors and is absolutely free. The design is very clean and clear and leaves a lot of room for excess developments.

Template Features:

  • 16 PSD files; 9 different color schemes.
  • Doubles as a Photo Gallery.
  • Well organized for easy editing.
View | Download (Pay With a Tweet)

 

Sleeko

This is a one page template, made with most designers and creatives in mind. Showing off a very clean design and use of trendy elements, this is a no-brainer for any one looking to begin on a single page portfolio.

Template Features:

  • Uses 960 px grid system.
  • Designed contact form.
  • Comes with complimentary social media icons.

Ecommerce Web Template

When doing e-shops and e-commerce, it can be pretty challenging to think of new ways to reinvent it, but this template here has done great at making a welcoming and fun website. A great start for a creative, fun, or family product.

Template Features:

  • Fresh, bright, clean design.
  • Comes with necessary buttons and icons for a web shop.
  • Uses standard fonts (Arial and Rockwell).

Redux Business Website Template

Perfect for pretty much any product or service, this clean web PSD pretty much comes with everything you need. You can use it as is or put your own little spin on it.

Template Features:

  • Flawless design, easily customizable for all. 
  • Leaves room for lots of modern features (slide shows, video screen shots, etc.)
  • Well organized for easy editing.

3D Creative Layout

The navigation of this particular template is the star here–and when coded you’d probably use a script that makes it work similar to most Mac navigation. It’s a very creative concept and can be widely used.

Template Features:

  • Super unique layout.
  • Includes several icons.

Church Website Layout

This is a pretty self explanatory template, with a great layout and attention to detail. It doesn’t just make it look like you’re just going to ‘church’, but to an ‘experience.’ This template could work well with churches as well as bands and musicians.

Template Features:

  • Fully designed photo slider.
  • Social media icons included.

Agregado LifeStream Theme

This theme is not only a PSD, but it is also a WordPress theme. Fortunately, we all don’t use WordPress, so the PSD is available. This is another versatile template, with a wonderful color scheme.

Template Features:

  • WordPress theme is free as well.
  • Fully designed contact form, comments and tags.
  • Uses standard fonts.

Modern Design Studio Template

Textures can add that extra ‘umph’ to sites and this template demonstrates that well. Playing around with textures pretty well without crossing the line and over doing it.

Template Features:

  • Modern, usable design.
  • Uses standard fonts.

Creative Portfolio Template

This is a super crisp and clean template that utilizes a really fresh take on portfolio layouts, not to mention the design is pretty much impeccable. This is definitely a template to keep near by.

Template Features:

  • Resizing is easy with ‘Smart Objects’
  • Includes useful social media icons.
  • 6 PSDs; Home Page, About, Contact, Services, Blog Post, Blog Entries.

Events PSD Template

A one page website that is a great splash site or small site for upcoming events. You’re able to show off exhibits or performers/speakers as well as get your audience to purchase tickets. This is a nice, quick fix for many website needs.

Template Features:

  • Extremely unique design.
  • Uses 960 pixel grid system.
  • Fully customizable contact form and purchase buttons.
View | Download (must Re-Tweet)

Yellow! Minimalist Blog Template

Minimalism is a style that can work for almost any person or product. Here, we have a nice simple blog template, with a wonderful pop of color.

Template Features:

  • Unique one-column design.
  • 2 PSDs; Home Page and Inside Page.
  • Minimalist design

Crisp Presentation

A good mix of crisp, clean and beautiful work. This template uses a very sophisticated color palette, and also has a nicely thought out layout.

Template Features:

  • 2 PSD files; Home Page and Inside Page.
  • Includes useful icons.
  • Extremely versatile design.

oWire Template

This template brings a fresh look at websites, especially their headers. Boasting a colorful palette with clean design elements, this is a great site for agencies or designers.

Template Features:

  • 4 PSD files; Home Page, About, Contact, and Work.
  • Creative and grungy design.
  • Comes with icons and designed contact form.

Education Template

This template sports a very unorthodox layout and design for an education website, but in a very good way. It could use some help as far as the typography is concerned, in regards to making all that clearer; but this template is a great start.

Template Features:

  • 2PSD files; Home Page and Inside Page.
  • Unorthodox and fun layout.
  • Uses standard fonts.

Digital Rust Template

With seven different PSDs, and a very fresh look at website design, this template is nothing short of awesome, and is extremely high quality. This is a great template if you are looking to do something new without straying too far away from the basics.

Template Features:

  • 7 PSD files; Home Page, About, Work, Work Item, Contact, Blog Post and Blog Page.
  • Easy resizing using ‘Smart Objects’ and shapes.
  • Well organized for easy editing.

Inkfolio

This is a rather simple template, but the detail in the template’s design is extremely noteworthy. Great for small businesses and designers alike!

Template Features:

  • Uses stand fonts.
  • Versatile template.
  • Easily editable.

Creative Mass: One Page Portfolio

This is a wonderful one page site, with a dark theme–great for artists and small products. The detail here is amazing.

Template Features:

  • Uses 960 pixel grid system.
  • Includes complimentary icons and buttons.

Clean Tech

This template is great for businesses centered around technology. The design is exceptionally modern and serves as a great starting point or as a complete site.

Template Features:

  • 3 PSD files; Home page, Inside page and Contact.
  • Fully designed contact form.

Grunge Designer Portfolio

While this was made to be a web designer portfolio, one could easily extend the uses of this to work with businesses and products. This is a great template to get you started with your site.

Template Features:

  • Textures and Icons available on Template Webpage.
  • Customized image slider.

Cafe and Restaurant Template

This template has a very nice color scheme and is very well thought out as far as the layout for all things restaurant. It makes good sense and the design draws you in very easily.

Template Features:

  • Stylish design for restaurants.
  • Uses 960 pixel grid system.
  • Well organized for easy editing.

How’d You Like It?

Being creative is extremely important, so hopefully this collection of PSD’s can catapult you to an area of success. As mentioned, these are great starting points or even ending points depending on what you like (make sure you check the license). If we missed an excellent PSD template, feel free to let us know! Also, leave us a comment and tell us which one was your favorite.

(rb)

July 12 2011

11:00

20+ Best Marketplaces Where You Can Buy And Sell High Quality WordPress Themes

WordPress, undoubtedly, is the most popular blogging platform around the web. Hundreds of blog posts are being published every day and more and more people are choosing WordPress as their blogging solution. But what if you have no basic knowledge of HTML and no clue how to set up a WordPress theme? Don’t worry, there’s no need to be a coding guru to own a splendid and cutting edge WordPress blog.

This post examines the top WordPress theme marketplaces where you can get high quality, unique and professional WordPress themes for incredibly low prices. All the themes are easily customizable and come with free support. So whether you’re just a beginner and considering starting your own blog, an experienced user looking for a new theme, or a small business company that needs an inexpensive, yet efficient website for your business, continue reading to find the top places to purchase amazing, high-quality WordPress themes for unbelievably low prices.

1. Themeforest

Themeforest-marketplaces-buy-sell-wordpress-themes

ThemeForest is an Envato Marketplace. At ThemeForest you can buy and sell HTML templates as well as themes for popular CMS products like WordPress, Joomla and Drupal with prices ranging from just $5 up to $40. Items are priced on the complexity, quality and use of the file. The site is home to a bustling community of web designers and developers and is the biggest marketplace of its kind.

2. WooThemes

Woothemes-marketplaces-buy-sell-wordpress-themes

WooThemes deliver top quality, cutting edge WordPress themes and superior customer support. With WooThemes you get solid code framework, stunning designs, incredible support and new themes every month. You can either purchase particular themes or you can get a club subscription which gives you unlimited access to all their themes.

3. ElegantThemes

Elegantthemes-marketplaces-buy-sell-wordpress-themes

ElegantThemes is a premium WordPress theme marketplace which provides WordPress themes of quality and integrity. Each theme comes with a powerful set of tools that will spoil you with the improved functionality they provide. ElegantThemes provide a variety of features which are incredibly user-friendly and easily customizable.

4. StudioPress

Studiopress-marketplaces-buy-sell-wordpress-themes

StudioPress offers professionally designed WordPress themes at affordable prices. The Genesis Framework is their newest product. The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. You can get Genesis seperately or you can get access to all StudioPress themes for a fixed price.

5. WPZoom

Wpzoom-marketplaces-buy-sell-wordpress-themes

WPZoom provides top quality premium WordPress themes at amazing prices with excellent lifetime support included. The project started in 2008 and gained huge popularity in a short time. They offer about 30 themes which you can buy separately or you can choose membership for ridiculously low price.

6. MojoThemes

Mojothemes-marketplaces-buy-sell-wordpress-themes

MojoThemes is a marketplace for everyone to buy or sell themes and templates. They sell themes for the most commonly used CMS and e-commerce platforms on the web such as premium WordPress themes, Tumblr themes and more. Their templates range from basic Photoshop templates to complex premium WordPress plugins. Premium WordPress themes are their specialty, though. With a premium WordPress template from MojoThemes, your WordPress CMS or blog-based site will be transformed with a fresh, clean and professional look.

7. KreativeThemes

Kreativethemes-marketplaces-buy-sell-wordpress-themes

KreativeThemes is a place to find unique and distinguishable WordPress themes. They pour their heart into every design that they produce and that makes each of these themes unique and stand out from the crowd. KreativeThemes are really proud of the masterpieces they’ve ‘painted’. You can easily purchase themes as you go here, there are no subscription plans.

8. ThemeShift

Themeshift-marketplaces-buy-sell-wordpress-themes

ThemeShift WordPress themes are professional-looking and extremely well-coded. A lot of handy features let you turn your blogging software into a CMS. Due to the clean, well-structured and commented code you will have no trouble with customizing the ThemeShift code to your special needs. You can purchase themes individually or you can choose a pricing plan which allows you to download more themes.

9. FlexiThemes

Flexithemes-marketplaces-buy-sell-wordpress-themes

FlexiThemes offers high quality and professional WordPress themes that are easy to use, manage and customize. Their themes turn your great idea into a professionally designed, fully functional website for all the world to see. Their themes are made to be visually interesting and simple for you to use. All of FlexiThemes themes come packaged with easy to use theme options page where you can manage your site without the need for editing the code.

10. Press75

Press75-marketplaces-buy-sell-wordpress-themes

Press75 provides a wide variety of WordPress themes for every type of user and website. Every theme on Press75 has been built on a solid code framework which has been perfected over time. For designers and developers looking to customize, you will have absolutely no problem finding your way around. Similarly to other marketplaces you can purchase themes separately or choose a package which gives you access to all Press75 themes.

11. GraphPaperPress

Graphpaperpress-marketplaces-buy-sell-wordpress-themes

GraphPaperPress peddles minimalistic modular designs that can transform your blog from a tubular list of posts into an aesthetically-pleasing portfolio or news magazine website. Graph Paper Press focuses on creating graphically minimal, content-rich designs that provide your visitors with multiple entry points to access your content. Unfortunately, it’s not possible to purchase themes separately, you’ll have to choose from one of the memberships.

12. WPRemix 

Wpremix-marketplaces-buy-sell-wordpress-themes

WPRemix, a WordPress powered master theme, is completely customizable, quality coded and comes bundled with many layout options that allows anyone to create a custom website in minutes instead of days and weeks, while maintaining top notch cross-browser display consistency. It has over 45 templates to choose from. W3C compliant mark-up, multiple color schemes and flexible page layouts

13. WPArcade

Wparcade-marketplaces-buy-sell-wordpress-themes

WPArcade offers templates that focus on arcade and gaming. WPArcade will do a setup service for your arcade site for only 20$, if you buy one of their themes. In 24 hours you will have a ready to use arcade site with over 2000 games and automatic updating.

14. WPBundle

Wpbundle-marketplaces-buy-sell-wordpress-themes

WPBundle is a bundle of 10 handmade WordPress themes & other goodies, including a custom icon set, countless variations and free updates throughout the life of the project. It’s also possible to purchase themes separately, however it’s a great bargain if you but the whole bundle.

15. ThemeFoundry

Themefoundry-marketplaces-buy-sell-wordpress-themes

ThemeFoundry has been delivering handcrafted premium themes and providing professional support to thousands of awesome customers since 2008. At the core of every theme they create you will find five important ingredients: attention to detail, cleanliness, care, usability, and simplicity. Top it off with what we’re known for — fast and friendly customer support.

16. AppThemes

Appthemes-marketplaces-buy-sell-wordpress-themes

AppThemes was conceived in 2010 by a team of WordPress enthusiasts looking to make it easier for businesses to setup an online presence. Their full-featured themes are seamlessly integrated with WordPress and built with easy-to-manage features.

17. HeadwayThemes 

Headwaythemes-marketplaces-buy-sell-wordpress-themes

HeadwayThemes allows you to take full control of your website’s design with Headway for WordPress and its intuitive drag and drop layout creator. If you’re looking for a flexible WordPress theme that’s highly customizable and easy to use, Headway is your answer. It’s visual editor makes it the most advanced WP theme available.

18. OboxThemes

Obox-marketplaces-buy-sell-wordpress-themes

Obox offers gorgeous design and functionality that you would normally only be able to attain from expensive, professional agencies. Obox creates plug ‘n play themes, built across multiple platforms. Incredible design, attention to detail, quality coding and functionality and support are 4 elements defining Obox themes.

19. OrganicThemes

Organicthemes-marketplaces-buy-sell-wordpress-themes

Organic Themes offers a variety of premium WordPress themes for artists, businesses and bloggers. Their collection of themes is always growing to suit the needs of their customers. Organic Themes release new themes on a regular basis, provide continuous updates, new color options and layout designs for our existing themes.

20. OrganizedThemes

Organizedthemes-marketplaces-buy-sell-wordpress-themes

Organized Themes has been bringing customers quality WordPress themes for non-profits, businesses and churches since 2008. Their themes are visually stunning, and easy to use. Organized Themes also provide quality support that is quick and helpful, straight from an expert.

21. Templatic

Templatic-marketplaces-buy-sell-wordpress-themes

Templatic, officially launched on 10th of December 2009 is a place to get out of the box, premium and awesome WordPress themes to fulfill your needs in different areas of blogging and web design. From a simple blogging theme, to a complete e-commerce integrated WordPress theme, Templatic are releasing themes in diverse range so you can use WordPress as a CMS.

22. FrogsThemes

Frogsthemes-marketplaces-buy-sell-wordpress-themes

FrogsThemes is one-stop shop for next-generation WordPress themes and pro-level support. With multiple styles, custom theme options and cutting-edge design, FrogsThemes premium WordPress templates are the top choice for web professionals. Get your site up and running and looking fab in no time with a little help from FrogsThemes.

June 22 2011

15:57

60 Fresh and High Quality Free PSD Files

Advertisement in 60 Fresh and High Quality Free PSD Files
 in 60 Fresh and High Quality Free PSD Files  in 60 Fresh and High Quality Free PSD Files  in 60 Fresh and High Quality Free PSD Files

Adobe Photoshop ranks high among the ultimate tools used in graphic design and most designers wouldn’t even think of designing without Photoshop installed on their computer. Having high-quality PSD files can not only shave time from your workflow, but can also come handy for any rush jobs a client needs. PSD files allow designers to customize them according to their project needs and individual client tastes.

This is the reason almost all graphic designers keep a good collection of PSD files on hand that they can use in their future projects. This is also why they are constantly looking for new and exciting PSD files that are available for free to add to said collection. Here we have an awesome assortment of 60 high-quality PSD files that you can download and use for free. Enjoy!

Icons Related PSDs

3D Glossy Icon Set: 20 Free Icons

Psdfiles28 in 60 Fresh and High Quality Free PSD Files

USB Pen Drive PSD

Psdfiles23 in 60 Fresh and High Quality Free PSD Files

Modern office telephone icon

Psdfiles1 in 60 Fresh and High Quality Free PSD Files

SocialMate: 28 Free Social Media Icons

Psdfiles29 in 60 Fresh and High Quality Free PSD Files

iPad and Paper Stack Icon

Psdfiles25 in 60 Fresh and High Quality Free PSD Files

Plane free psd file

Psdfiles30 in 60 Fresh and High Quality Free PSD Files

Pie chart icon

Psdfiles3 in 60 Fresh and High Quality Free PSD Files

3D Box

Psdfiles22 in 60 Fresh and High Quality Free PSD Files

Portfolio slides template

Psdfiles4 in 60 Fresh and High Quality Free PSD Files

PSD Graphic of Retro Phone

Psdfiles19 in 60 Fresh and High Quality Free PSD Files

Quill pen and inkwell icon

Psdfiles5 in 60 Fresh and High Quality Free PSD Files

Drawing tools icon

Psdfiles6 in 60 Fresh and High Quality Free PSD Files

Fluorescent light bulb icon

Psdfiles7 in 60 Fresh and High Quality Free PSD Files

Settings, Weather, Phone iOS Icons

Psdfiles26 in 60 Fresh and High Quality Free PSD Files

Stylish business card template

Psdfiles2 in 60 Fresh and High Quality Free PSD Files

Color palette icon

Psdfiles8 in 60 Fresh and High Quality Free PSD Files

Traffic lights icon

Psdfiles9 in 60 Fresh and High Quality Free PSD Files

Notebook

Psdfiles60 in 60 Fresh and High Quality Free PSD Files

Silver laptop icon

Psdfiles10 in 60 Fresh and High Quality Free PSD Files

Battery icon

Psdfiles11 in 60 Fresh and High Quality Free PSD Files

Designer Brushes-Icon Set

Psdfiles21 in 60 Fresh and High Quality Free PSD Files

Round retro stickers, PSD template

Psdfiles12 in 60 Fresh and High Quality Free PSD Files

Stage spotlight icon (PSD)

Psdfiles13 in 60 Fresh and High Quality Free PSD Files

iPod nano Multi Touch

Psdfiles24 in 60 Fresh and High Quality Free PSD Files

Computer diagnostics icon

Psdfiles14 in 60 Fresh and High Quality Free PSD Files

Treasure Chest with Golden Coins

Psdfiles20 in 60 Fresh and High Quality Free PSD Files

Graphics processing unit, GPU icon

Psdfiles15 in 60 Fresh and High Quality Free PSD Files

Silver padlock, security icon

Psdfiles16 in 60 Fresh and High Quality Free PSD Files

Tablet PC, blank screen PSD template

Psdfiles17 in 60 Fresh and High Quality Free PSD Files

USB flash drive icon

Psdfiles18 in 60 Fresh and High Quality Free PSD Files

Music, Text, Videos iOS Icons

Psdfiles27 in 60 Fresh and High Quality Free PSD Files

Buttons Related PSDs

Big Buttons

Psdfiles32 in 60 Fresh and High Quality Free PSD Files

Web elements

Psdfiles37 in 60 Fresh and High Quality Free PSD Files

15 free web buttons

Psdfiles35 in 60 Fresh and High Quality Free PSD Files

Orange pack

Psdfiles36 in 60 Fresh and High Quality Free PSD Files

Pixel Perfect Buttons 1.0

Psdfiles34 in 60 Fresh and High Quality Free PSD Files

Glossy Bubble PSD Graphics

Psdfiles30b in 60 Fresh and High Quality Free PSD Files

Panel Buttons

Psdfiles31 in 60 Fresh and High Quality Free PSD Files

Greene Pack#3 – Switches

Psdfiles91 in 60 Fresh and High Quality Free PSD Files

Subscription buttons

Psdfiles38 in 60 Fresh and High Quality Free PSD Files

4 Web buttons

Psdfiles39 in 60 Fresh and High Quality Free PSD Files

5 Colorful web buttons

Psdfiles90 in 60 Fresh and High Quality Free PSD Files

Web Templates PSDs

Web electric v2 Template

Psdfiles53 in 60 Fresh and High Quality Free PSD Files

Software Layout PSD

Psdfiles41 in 60 Fresh and High Quality Free PSD Files

Blog Website

Psdfiles42 in 60 Fresh and High Quality Free PSD Files

Paper vCard: Free PSD Web Page Template

Psdfiles48 in 60 Fresh and High Quality Free PSD Files

Free WordPress 3.1 Theme: Splendio

Psdfiles49 in 60 Fresh and High Quality Free PSD Files

PSD Template of Under Construction Page

Psdfiles40 in 60 Fresh and High Quality Free PSD Files

SDT Webdesign

Psdfiles50 in 60 Fresh and High Quality Free PSD Files

Splendio WP Theme

Psdfiles51 in 60 Fresh and High Quality Free PSD Files

Designers Portfolio

Psdfiles52 in 60 Fresh and High Quality Free PSD Files

Twitter Background Template 1

Psdfiles54 in 60 Fresh and High Quality Free PSD Files

HTML5 Coming Soon Template

Psdfiles55 in 60 Fresh and High Quality Free PSD Files

Web UI Kit PSDs

Transparent Glass UI: Free PSD for User Interface Design

Psdfiles46 in 60 Fresh and High Quality Free PSD Files

UI Web Design Elements (UI)

Psdfiles43 in 60 Fresh and High Quality Free PSD Files

Pop-up Contact Form (UI)

Psdfiles45 in 60 Fresh and High Quality Free PSD Files

Search boxes

Psdfiles80 in 60 Fresh and High Quality Free PSD Files

Web User Interface Buttons

Psdfiles33 in 60 Fresh and High Quality Free PSD Files

Awesome Tooltips & Alerts

Psdfiles82 in 60 Fresh and High Quality Free PSD Files

Free video player interface

Psdfiles81 in 60 Fresh and High Quality Free PSD Files

Consider our previous posts:

(rb)

May 22 2011

10:00

20+ Useful CSS3 and HTML5 Frameworks, Tools and Templates

I hope you have heard a little about CSS3 and HTML5. And I’m sure you’ve used at least one of the cool features they offer. But now it is time to use them at their full (or almost full) power.

You may be asking yourself “It is time to change? Should I forget everything I know and dive into this new world?”. Well dear padawan, you don’t need to do so. We have a lot of tools that make our transition to new and better technologies safer (ultimately we can’t just crash our customer’s website, we have bills to pay :D).

Frameworks are helpful with this. They’ve already been tried, tested and proven. Of course, you can always make them better, but they are a really good starting point.

This time we will talk a little about frameworks and other tools, like generators and templates.

So, let’s rock.

HTML5 Boilerplate – Templating that fits all needs

This is the most useful for me. I usually have jobs that need easy setup, but a lot of optimizations tools (minifiers and more) and, at the same time, I’m quite familiar with CSS, so too much preset CSS is a waste of time to me (since I spend a few hours coding CSS, but much more to understand and re-utilize framework’s code).

Cool features:

  • Constantly improving – Last update says that they reduced the overall size of the published boilerplate by 50%
  • Build script – .js and .css minify, image optimization, html optimization, server configurations for caching…
  • Custom install setup – So you can choose what you want in “your” boilerplate
  • Cross-Browser compatible
  • HTML5 Ready
  • Print stylesheet ready to use

52framework – Supports almost anything

I am amazed by all the things you can do with this framework. It has a lot of resources that I thought would never work on IE. This is a good option when you want a somewhat styled template and  are planning to use almost all power of HTML5.

What do I like:

  • Almost anything you want with HTML – Local Storage, video player, canvas, forms…
  • A lot of CSS3 proprieties – As you can see in CSS demo, it has a good CSS3 support
  • Video Tutorials – Yeah, it makes even easier to understand 52′s workflow

G5 Framework – Good tools collection

Actually Greg Babula says that it meant to be just a personal project. But it is much powerful than he thinks.

As it was made from personal experience, it has a lot of tools that we already know how to use (Modernizr, CSS Reset, jQuery, Orbit Image Slider…), thus we don’t waste too much time learning.

Perkins – Lighweight and LESS

I must admit that I should use LESS much more than I do. If you think this way, Perkins may be a good option for you. It comes with a set of LESS stylesheets and mixins for common tasks such as creating navigation, rounded corners, gradients and much more.

Sprites.js – Animation framework (HTML5 support, of course)

Yeah, sometimes our customer wants some animations on their site. Why should you use flash when (almost every time) you can use HTML5?

Sprite.js provides a simple integration for canvas and HTML animations so you can do easily some animations, with maximum performance.

Lime.js – Gaming framework

Just take a look at the demo games, and tell me if it isn’t amazing.

Some features (HTML5) that you can use on it:

  • Optional install – For mobile users it is really good, just bookmark your game and you’re done
  • KeyFrame animations
  • Full support of sprite sheets
  • Stroke support – So you can draw a stroke around shapes
  • Good documentation – Just take a look at all classes you can use with it, pretty cool :D

HTML5 multimedia framework for WordPress

If you are a WordPress person, you will find it useful. With this plugin, you just have to add a shortcode and you have a HTML5 media player in your site.

The framework currently supports:

  • mp4 (h.264,aac)
  • ogg (theora,vorbis)
  • mp3 (audio only)
  • webm (vp8,vorbis).
  • wmv (via MediaElement.js)
  • flv (via MediaElement.js)
  • wma (via MediaElement.js)

Modernizr – HTML5 & CSS3 with fallbacks

Modernizr helps us to implement HTML5 and CSS3 for browsers that don’t natively support it. Actually many of the tools mentioned above use it.

Want to know more about its amazing features? Just read The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks.

It is really simple to use, when modernizr detects your browser’s features, it adds classes to you HTML, so you can easily switch to a valid fallback. Try to run the demo and see its results for a better comprehension.

Select[ivizr] – CSS3 Selectors for IE

IE (6-8 mainly) is surely the greatest barrier to CSS3 spread. CSS3 selectors are almost forgotten for some developers, that just know they exist because can use them with jQuery.

You just need one of the 7 supported JavaScript libraries and you are ready to install it (via conditional comments, so just IE will see it). And then you’re done, just write you pretty CSS3 selectors as you aways wanted.

CSS3 button framework

With this framework you have easily a lot of good buttons options. It is specially useful for back-end developers, that aways need some pretty buttons, but don’t have time (or budget) to do so.

They are all CSS3 ready, and can be easily customized.

Templates – General HTML5 and CSS3 samples

Coming Soon Template

Design Company

Real State

Free HTML5 & CSS3 theme

Create An Elegant Website With HTML 5 And CSS3

Starter Pack

Much more inspiration at HTML5 Gallery

Some useful tools

CSS3 Button Maker

CSS Transforms code generator

CSS3 Gradient generator

CSS3 Drop Shadow Generator

CSS Generator for radius, shadows, rgba, @font-face, columns and more

The best @font-face generator I’ve ever seen

HTML5 Visual Cheat Sheet

Ready to start experimenting with HTML5?

You may notice that I didn’t even mention any mobile frameworks. It is because they are so cool that they deserve a dedicated post.

I certainly have missed some other good resources. Why don’t you comment and share what you know?

May 04 2011

17:42

Useful Photoshop Tools and Techniques For Your Workflow

Advertisement in Useful Photoshop Tools and Techniques For Your Workflow
 in Useful Photoshop Tools and Techniques For Your Workflow  in Useful Photoshop Tools and Techniques For Your Workflow  in Useful Photoshop Tools and Techniques For Your Workflow

Productivity is a crucial asset of professional designers. Photoshop is an extremely powerful application for photo processing and image manipulation, and we can make it even more powerful by using handy tools, actions, plugins and templates to save time for solving mundane regular tasks. The better our professional tool set is, the more time we can spend to focus on the actual design process rather than the tool we are using to implement it on screen.

Here at Smashing Magazine, we’re continuously searching for recent time-saving, useful Photoshop resources for our readers, to make the search of these ever-growing techniques easier. We hope that these techniques will help you improve your design skills as well as your professional workflow when using Adobe Photoshop. A sincere thanks to all designers and developers whose articles are featured in this roundup. We respect and appreciate your contributions to the design community.

Useful Photoshop Tools

Mr. Stacks
A small Photoshop script that can quickly generate storyboards, stacks and PDFs for project CDs, client presentations or anything else — right from the Layers Comps in your Photoshop file. The script would be useful for a series of animations, storytelling elements in a design and advertising.

Mr-stack in Useful Photoshop Tools and Techniques For Your Workflow

Photoshop Tych Panel
Every photographer and Web designer who has spent time arranging images and photographs knows that scaling and resizing takes time. But even existing templates are unnecessary when you try out Reimund Trost’s latest little Tych Panel for Photoshop. It completely automates the n-Tych creation process, and it has a lot of layouts to choose from. The tool has been open sourced by Reimund Trost and can be freely used, modified and redistributed in any way.

Tych in Useful Photoshop Tools and Techniques For Your Workflow

Pixel Proliferation: A Toolset For Managing Screen Resolutions
This tool will help you to manage screens resolutions more easily. The toolset contains a collection of PS5 marquee-tool presets for common screen resolutions, covering fixed-screen resolution sizes, ratios for less common resolutions and standard ratios. Also, a collection of layered CS5 PSDs provides common devices for computing and design presentations. Finally, there is a reference chart for resolutions and design landscape. Useful.

Psd-106 in Useful Photoshop Tools and Techniques For Your Workflow

Generating CSS positions for Sprites
A Photoshop plug-in by Arnau March that generates sprites with your given CSS file. You can then add the sprite locations and also create hover and click effects with the help of jQuery. You might want to check out CSS Sprite: Photoshop Script Combines Two Images for CSS Hover as well: the article presents a simple JSX Photoshop script for creating image sprites, and you can also assign a keyboard shortcut to it.

Photoshop-126 in Useful Photoshop Tools and Techniques For Your Workflow

Golden Crop
Golden Crop is a Photoshop Script making cropping with respect to division rules (golden rule, 1/3 rule) very easy with visual guides. Requires installed Photoshop CS2, CS3, CS4 or CS5 (either x86 or amd64 version). Works on Windows and Mac.

Psd-103 in Useful Photoshop Tools and Techniques For Your Workflow

Browser UI
The Browser UI is an action that creates a browser window around any size Photoshop document you can throw at it. The free version includes only Internet Explorer 6 UI. The deluxe edition with current versions of Chrome, Safari and Firefox is not free ($3).

Psd-102 in Useful Photoshop Tools and Techniques For Your Workflow

Open With Photoshop 0.6
An add-on for Firefox that is a new companion for Web and graphic designers to open up any Web image with Adobe Photoshop via a single and quick mouse click. A useful time saver.

Photoshop-104 in Useful Photoshop Tools and Techniques For Your Workflow

foxGuide: Photoshop Guides Inside Firefox
A Firefox extension that displays horizontal and vertical guides. You can move or remove the floating guides on a webpage just the way you do it Photoshop with the help of foxGuide. Guides are useful for laying out elements symmetrically, structure a design and improving the overall layout.

Photoshop-137 in Useful Photoshop Tools and Techniques For Your Workflow

Modular Grid Pattern: create a modular grid in Photoshop, Fireworks and GIMP
Modular Grid Pattern is application for web designers, which helps you quickly and easily to create a modular grid in Adobe Photoshop, Adobe Fireworks, GIMP, Microsoft Expression Design and other applications. The extension requires Adobe Photoshop CS5

Modular in Useful Photoshop Tools and Techniques For Your Workflow

960gs ExtendScript for Photoshop CS5
The script is very raw and crashes easily with the wrong input or settings. However, it has some nice features such as disabling gutters by putting 0 for gutter width and optionally adding evenly-spaced horizontal guides.

Psd-104 in Useful Photoshop Tools and Techniques For Your Workflow

Workspace import/export script for Photoshop
John Nack has written a script to enable simple importing and exporting of Photoshop workspaces. It should work in both CS4 and CS5 (although it is a little more robust in CS5), so you can use it to migrate workspaces from CS4 to CS5 in addition to using it to enable easier sharing of CS5 workspaces between machines or people.

Psd-119 in Useful Photoshop Tools and Techniques For Your Workflow

Subpixel Hinted Font-Rendering
This technique is great for your concepts when you want to simulate actual text in your Photoshop file. Thomas Maier has saved his workflow as an action. You can download the subpixel-rendering technique and use it for free.

Photoshop-127 in Useful Photoshop Tools and Techniques For Your Workflow

GuideGuide 1.0
What actually started out as a script that drew guidelines at the middle of the document, turned out to become a quite helpful extension for Photoshop when working with columns, rows and midpoints in CS4 & CS5. You can download Cameron McEfee’s GuideGuide to help you find midpoints, make margins and create rows and columns much easier while working in Photoshop.

Photoshop-101 in Useful Photoshop Tools and Techniques For Your Workflow

Photoshop Animation to Sprite Sheet
This tool enables you to easily export a framed animation in Adobe Photoshop to a packed sprite sheet. The tool is available for Photoshop CS3 or higher. Developed by Peter Jones.

Automatic Tile Cutter
Some images are made of dozens to thousands of tile images, depending on the zoom level. At the distant zoom levels you only need a few images to cover a large area. Creating and then uniquely naming each of these images would be a daunting task if you had to do it by hand. Will James has solved this problem and released a batch processing script to use with Photoshop 7 or CS that will carve all the titles you need and name them exactly as you need them named.

The Image Processor Script
The Image Processor in Photoshop CS4 is a simple way to quickly resize and convert a bunch of images to JPEG, PSD or TIFF format. The modified script allows exporting CMYK JPEGs as CMYK, as well as support for exporting PNG images.

Further Resources

Adobe Photoshop Scripts
Trevor Morris provides more than a dozen of free scripts for Adobe Photoshop. All scripts are commented, making them easy to modify and/or learn from. Among other scripts, you’ll find Layers to Comps, Rename Layers, Sort Layers and Distribute Layers Vertically scripts.

Psd-112 in Useful Photoshop Tools and Techniques For Your Workflow

The Photoshop Scripting Community Forum
PS-Scripts is a community for Photoshop scripting and automation. The site contains articles Members of the community release their script on the site’s forum; for instance, you can find the Smart Object links panel, Listing fonts used in PSD files (alternative), Distribute Layers. Unfortunately, the forum’s activity is quite low, although the scripts are being released quite often.

Psd-114 in Useful Photoshop Tools and Techniques For Your Workflow

Russel Brown’s Scripts Page
Russel Brown provides a number of free useful Adobe Photoshop Scripts and Panels for CS4 and CS5. Among other things, Adobe Emailer Panel, Image Processor Pro and Edit Layers in ACR scripts are available.

Scriptopedia
Another community that helps to find scripts and scripters for Photoshop and other Adobe applications. The site is frequently updated; you’ll find various scripts as well as tutorials on the site.

Useful References and Articles

The Photoshop Etiquette Manifesto for Web Designers
The recently updated Photoshop Etiquette can be quite useful when wanting to improve the clarity of a PSD when transferred. This site provides you with rules that will show you examples and bonus points ranging from external as well as internal file organization to exporting and design practices.

Psd-107 in Useful Photoshop Tools and Techniques For Your Workflow

Photoshop Secret Shortcuts
This old, yet still very useful article by Nick La provides an overview of secret (i.e. not documented) Photoshop shortcuts that the author has learned from years of experience.

Psd-110 in Useful Photoshop Tools and Techniques For Your Workflow

Photoshop Tip: Organizing Layers
Daniel Mall has thought of a super handy Photoshop file organization trick that separates layer groups for different stages of a page within the same PSD. You can prefix your layer groups with a bullet to organize your PSDs but also using a hyphen will enable you to create a horizontal divider in the context menu.

Photoshop-110 in Useful Photoshop Tools and Techniques For Your Workflow

Photoshoptimize: Optimize Photoshop Performance
To improve the performance of Photoshop, this list of best tips will help any designer to optimize Adobe Photoshop for Mac as well as PC; from reducing cache levels to disabling export clipboard in Photoshop, and much more.

Photoshop-125 in Useful Photoshop Tools and Techniques For Your Workflow

Super Crisp Font Anti-Aliasing With Sub-Pixel Hinting
David Leggett shares with us the most useful technique in creating concepts in Photoshop, especially when you’re working on a website layout in Photoshop, and want an accurate representation of what a font is going to look like in your content body. This surely helps bring the frustrating times when working with small font using anti-aliasing in Adobe Photoshop to an end.

Freebies, Goodies

100+ Free HTML Email PSD Templates
CampaignMonitor has released a large collection of freely available high quality email templates which have been thoroughly tested in more than 20 of the most popular email clients like Outlook 2010, Gmail, Lotus Notes, Apple Mail and the iPhone. They are completely free. Every template contains a Photoshop document, HTML template and a Campaign Monitor Template. The complete packages with all templates is 320 Mb.

Email-newsletter in Useful Photoshop Tools and Techniques For Your Workflow

Bottles and Cans Photoshop CS4 Actions
3 exclusive Photoshop CS4 Actions that might save you some time when you are working on the next soda, wine or bottle label design.

Bottle in Useful Photoshop Tools and Techniques For Your Workflow

Pricing Table PSD Template
A free pricing table template with various button states.

Photoshop-112 in Useful Photoshop Tools and Techniques For Your Workflow

Search and Email Input Text PSD Template
A free template for search field and email input fields. You can find new freebies released every Friday on the site.

Search-email in Useful Photoshop Tools and Techniques For Your Workflow

Free PSD: Seven Tickets
Seven Tickets inspired by Seven Dribbble Shots.

Tickets in Useful Photoshop Tools and Techniques For Your Workflow

Free PSD: Simple Download Buttons
Orman Clark has released a set of simple download buttons in three different states: nroaml,normal, hover and active. These download buttons use a subtle icon to suggest the action of downloading. The download includes the editable PSD. You can download even more PSD buttons.

Photoshop-116 in Useful Photoshop Tools and Techniques For Your Workflow

Buttons-2 in Useful Photoshop Tools and Techniques For Your Workflow

Album Cover Art Carousel (PSD)
The download (PSD) includes styles for the covert art, the hover and/or active state, and the next/previous arrows. Try experimenting with the colour of the album cover hover state, a vivid orange looks great.

Cover-art in Useful Photoshop Tools and Techniques For Your Workflow

Flip-Clock Countdown (PSD)
A groovy little countdown flip-clock design: the perfect event/product launch companion.

Clock in Useful Photoshop Tools and Techniques For Your Workflow

Big Green Button (PSD)
This template is perfect for when a regular sized button just isn’t cutting it; this big fat round button should grab a visitors’ attention with ease. The download (PSD) displays a pricing plan as an example.

5-bucks in Useful Photoshop Tools and Techniques For Your Workflow

Free PSD: Tagtastic Tag Cloud
The topic of this article is a nice and simple little tag cloud – tagtastic!

Photoshop-117 in Useful Photoshop Tools and Techniques For Your Workflow

The Ultimate Free Master PSD File
The download features one master .PSD file with folders, assets, grid folders and layer comps ready to be used. The master file is using the best practice featured in Dan Rose’s Photoshop Etiquette.

Resource-ultimate in Useful Photoshop Tools and Techniques For Your Workflow

OS X Leopard GUI Freebie
A freebie including a GUI set for Mac’s OS X Leopard operative system for all Web developers who want to integrate great designs into their applications. This package includes fully editable vector Photoshop sources and a customizable Fireworks PNG file; the original fonts that were utilized for the making of the GUI are also included.

Photoshop-131 in Useful Photoshop Tools and Techniques For Your Workflow

Tabs Icons: Interface Icons for iOS & Designers
You can find free iPhone tab bar icons for Mac OSX Lion and iOS here which are specially designed and optimized for toolbars and tab bars. All these icons have been created for iPhone, iPhone 4 and iPad and are provided as fully editable and scalable Photoshop PSD files.

Photoshop-115 in Useful Photoshop Tools and Techniques For Your Workflow

Designmoo
Designmoo is a community for discovering and sharing free PSDs, vectors, textures, patterns and fonts.

Premum Pixels
Premium Pixels is Orman Clark’s remarkable resource with free design resources and tutorials.

Last Click

PSDcleanup
It’s very difficult for coders to work with someone else’s PSD files if they’re not organized correctly. This online service helps fixes that problem by organizing PSDs and polishing them for you. We aren’t advertising here, but it’s quite sad that services like this one exist at all.

Photoshop-105 in Useful Photoshop Tools and Techniques For Your Workflow

Method & Craft
Method & Craft features the stories behind the work and the techniques professionals have developed throughout their professional career. A very useful resource for designers permanently looking to improve their skills.

Psd-122 in Useful Photoshop Tools and Techniques For Your Workflow

Related Articles

Mastering Photoshop: Unknown Tricks and Time-Savers
Keyboard shortcuts can be very useful and are truly essential to our busy, daily workflow. Occasionally, we stumble upon a shortcut we wish we’d learned years ago. Please note that the shortcuts listed in this article are for Photoshop CS4 on OS X and can also be converted apposite to Windows.

Photoshop-133 in Useful Photoshop Tools and Techniques For Your Workflow

Pixel Perfection When Rotating, Pasting And Nudging In Photoshop
When creating Web and app interfaces, most designers slave over every single pixel, making sure it’s got exactly the right color, texture and position. If you’re not careful, though, some common functions like moving, rotating and pasting can undo your hard work, resulting in a blurry mess. But with some small changes to your workflow, you should be able to maintain the highest-quality artwork from the start to the end of the project.

Photoshop-145 in Useful Photoshop Tools and Techniques For Your Workflow

Compositing in Adobe Photoshop: Time-Saving Tips
Daniel Durrans shares his own time-saving tips for compositing in Photoshop with us and emphasizes on adapting a certain technique for each one of us to make our work more efficient and improve our workflow.

Photoshop-122 in Useful Photoshop Tools and Techniques For Your Workflow

Useful Photoshop Tips And Tricks For Photo Retouching
In case you’ve been searching for some insight on the most useful techniques tips and tricks when working in Photoshop, then this is the article you shouldn’t miss out on. Dirk Metzmacher shares with us even more tips and tricks to improve your workflow.

Photoshop-107 in Useful Photoshop Tools and Techniques For Your Workflow

Useful Adobe Photoshop Techniques, Tutorials and Tools
Our recent overview of useful Adobe Photoshop techniques and tutorials that we have found and collected over the last months.

Photoshop-144 in Useful Photoshop Tools and Techniques For Your Workflow

(vf) (ilj)


© Smashing Editorial for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: actions, photoshop, psd, scripts, templates

January 25 2011

10:00

Can Free Design Resources Be Exemplary?

As designers we’re always after some good resources for inspiration and even for design elements to help us when we have a mental block. But the thing is that there’s not very many GREAT resources out there that give FREE stuff away. You have inspiration sites like Dribbble and DeviantArt (deviant does give some things away) but there’s a new community emerging where the resources are not only free, but also outstanding. Let’s take a deeper look into this new community called DesignMoo.

First off, what I’d like to achieve with this article is to get your feedback not only these resources, but also your opinion on how you think these types of sites help or hurt our design community. So keep that in mind as you read through this and browse the site. Also feel free to offer other sites you’ve found that provide outstanding resources such as this one.

DesignMoo, according to their about page, is…

“a community of designers who think it’s best to share our design resources. That means we love to share fonts, brushes, textures, icons, illustrations, and more with anyone that might find them useful.”

And it’s true. It’s all free resources (but they just released a paid account with extras), contributed by some of the best designers around the world. It’s co-owned and operated by Chris Wallace and Rich Hemsley. Chris is owner of LiftUX, runs Chris-Wallace.com, tweets as @chriswallace and shoots on Dribbble of course. Rich Hemsley is the awesome community manager, tweets as @richhemsley and Dribbbles as well. The community is currently invite-only but growing very quickly and making a real wake in our design world. Check out some of the resources by a few of these amazing designers.

iPhone 4 Retina GUI
Rich HemsleyiPhone 4 Retina GUI

vCard Design Resource
Chris WallacevCard PSD

Abstract Tileable Design Patterns
Allison Grayce NoldAbstract Tileable Patterns

Logo Identity Guideline Template
Graham SmithLogo Identity Guideline Template

Clumsy Font Free
Kyle SteedClumsy

Invite Stamp Collection
Hillary HopperInvite Stamp Collection

It’s About Quality

So as you can see, we’re not talking about lame resources here. This isn’t clip art in a glorified form or anything. No, this is real stuff you can actually use and many times it will actually be better than what we ourselves can design. I’ve personally used several of these resources in my client’s work and it not only saves time, but looks awesome. The important thing to remember if you ever get into this community is to keep it awesome. Keep the elements you submit to a spectacular level. Give feedback, utilize what others offer, and contribute when you can.

What DesignMoo Offers

I recognize that there’s a million free resource sites out there. But like I mentioned, there’s none that I know of that provide the quality elements DesignMoo does. Here’s a breakdown of some elements for you to chew on and make a better, more informed opinion about this community.

Iconified

Sexy icons are always a must for sites these days. It adds personality and enhances the look of the site immensely, if used properly of course. Not everyone can be an icon designer, that’s why I’m very thankful for those people sharing their mad skills with those of us less fortunate in this area of design.

awesome-free-calendar-icon
Julien MartinLe Calendrier 2011

awesome-free-iphone-icons
Pontus JohanssoniPhone Icons

free-bookshelf-icon
Peter BurdetteBookshelf Icon

small-free-glyph-icons
Umar Irshad32px Glyphs

social-media-buttons-icons
Alfred PereiraSocial Buttons Vol2

UI Elements

And who could turn down some really sweet UI elements? These things are few and far between to look this good and take several hours to create. So I’m game for grabbing some to use that were made by some down right awesome people. Take a look.

free-user-interface-kit
Morgan Allan KnutsonChutzpah User Interface Kit

transparent-dropdown-menu-free
Rich HemsleyTransparent Menu

dark-user-interface-kit
Josh HemsleyDark Sexy UI Elements

Yummy Textures and Patterns

Ah yes, finally some great textures. I know you can find them lots of places but these are seriously some of the highest quality ones I’ve seen…and they’re more web-related than some other sites out there. Here’s a few pretty sweet ones to chew on.

free-argyle-texture-pattern
Hillary HopperArgyle Textures

free-grunge-brushes
Liam McKayFunction Subtle Grunge Brushes

free-bokeh-background
David LopezBokeh

Oh Glorious Fonts

We designers love some fonts. Whether we’re great typographers or not, we still like to have a plethora of them to choose from. And with the way CSS3 is breaking into the market and things like CuFon and such, we can utilize more of these fonts on our sites without the old “make an image” method. Here’s some fonts you may never have seen. Pretty nice, eh?

free-font-download
Brian CarrollFolly by Litchytype

free-font-download
Jed Bridges - Cerus Caps

free-font-download
A Visual IdiotNovak

So Does Free Raise Any Issues?

The simple answer is yes, but there’s also a no in there. Free can cause problems. Problems like overuse, looking cheap, and being misused in general. But DesignMoo is doing things a little bit differently. They are adhering to a level of quality that’s unmatched in the marketplace and making sure to keep that level of quality by allowing it to be invite only. It works similar to Dribbble‘s invite system, if you’re familiar with that, in that members get limited invites each month or so and the people they invite appear under them so everyone knows if you’re keeping the quality level up or just inviting your best buds. There’s nothing wrong with inviting friends, but make sure they know what they’re doing and can contribute great stuff.

In saying that, I don’t see problems for DesignMoo at this point, maybe in the future, but that bridge will be crossed when they come to it. Chris and Rich are infatuated with great design so I highly doubt it will ever turn into anything short of extraordinary.

Something to Recognize

If you’ve thoroughly read this far, you’ll know that I’ve mentioned there are other sites that provide similar services to what DesignMoo does. And I said none compare…and I still believe that. In fact, during my writing of this article, DesignMoo announced they have acquired 365psd.com. We’re not sure of the future of the two and how they will combine their resources (or if they will), but this just proves how great and powerful of a resource this site can and will be. You can read the full article on the “merger” over at Jon Notie’s blog.

My Take on This and That

I’m a design lover as well and I get irritated when there’s a site that could be great but has poor design features or usability. I realize that your design program is not everything for a website, but design itself entails a lot. It has a dash of user experience and a hint of personality among many other elements. Design is all around us and there’s nothing wrong with a site that provides resources and elements that can enhance the user experience of a site, especially when they are at no cost to use. Quality elements are great. An outstanding collection of them for us to choose from is even better. So with that, I want to encourage you to comment below and tell me what you think of design resource sites. What do you find helpful about them? Or hurtful about them? Do you have any ones other than DesignMoo? Let’s get conversing.

January 08 2011

10:00

Holiday Inspired Freebies: 50+ Templates, Fonts & Icons

Hello there in winter – it’s cold out there, icy and everybody needs to put on their warmest coat, but here comes bright side! People are decorating and beautifying their homes, stores, cars, hotels – just anything they own or walk into are inspired by the holidays. Especially on the internet where anything is possible and quickly can be implemented and changed.

People go crazy on Christmas inspired/related designs, where nothing is over done or too subtle. After all, Christmas is about love, peace & joy!

In this article, I will be sharing tons of resources & images to all the bloggers, readers and everybody who’s reading this with theme of Christmas and Holidays.  You may say it’s too late for this kind of article – but I am saying, while there is winter in the weather and people are still trying to get over New Year and start working – it’s not too late!

Christmas Templates

1. Merry Christmas

2. Christmas Eve

3. Metamorph Xmas

4. Metamorph Christmas

5. Christmas Website Template

6.Happy Holidays

7. Christmas

8. Gift Blog

Holiday Fonts

1. 4YeoXmas

2.Xmas Tyme

3. Xmas One

4.GE Christmas Joy

5. Christmas Wreath

6. Xmas Promotions Symbols

7. Typographers Holidayfont

8. Faux Snow

9. Xmas Batzz

10. Christmas Time

11. PC Snowballs

12. PF Wreath

13. JS Snowbiz

14. Mickey’s Merry Christmas

15. Santa’s Sleigh

16. Christmas on crack

17. Candy Cane

18. Bonnet

19. Santa’s Big Secret

20. Kringle

Christmas Icons

1. Archigraphs Christmas Dock Icons

2. Christmas Feed Icons

3. Free Christmas Icons for You

4. Christmas Icon Set

5. Santa’s Set

6. Christmas Buddy Icons

7. Christmas XP

8. Christmas Icons 2007

9. Christmas icons

10. Christmas Dock Icons

11. Christmas icons

12. Xtal Icons

13. Christmas Icons

14. Christmas pack

15. Christmas Icons

16. Xmas pack

17. Adobe CS3 Icons – xMas style

18. Christmas Dock Icons

19. Christmas Icons

20. Something For Christmas – Win

21. The Day before Christmas

22. Christmas Set

23. Christmas Holiday Icons

24. Happy Holidays 2005

25. Christmas icons

Christmas Photoshop Tutorials

1. Christmas Wallpaper

A nice glowing tree-top for the Christmas tree gives it a nice highlight to the image.

2. Merry Christmas Tree

This tutorial teaches how to make a Christmas tree made up of glowing stars.

3. Photoshop Christmas Tree

This Christmas tree is almost life-like, this tutorial is great for Christmas cards.


4.Christmas Tree Ornament

Add detail to your Christmas ball ornament images with this tutorial.

5. We Wish you a Merry Christmas

This tutorial makes a jolly image with snow and a bright-colored snowman.

6. Holiday Wreath

Make your own holiday wreath, this tutorial will show you how.

7. Christmas Shiny Background

Create that glossy background effect to your Christmas wallpaper to make the image pop-out.

8. A Great Holiday Wallpaper with Christmas Balls

Christmas balls completes a Christmas image. Just because they add that jolly feel and aura.

9. Night Before Christmas

A great combination of shapes, light & gradient effects. This tutorial would really help you create a very warm and calm Christmas wallpaper.

10. Christmas Ornaments Lights Balls

The lighted Christmas balls is an exquisite touch to the image. Make one yourself with this tutorial.

11. How to Create A Christmas Wreath

This tutorial will help you create a more realistic image of a traditional Christmas wreath.

12. New Year or Christmas Card

This tutorial will teach you how to make a simple greeting card, good for Christmas & New Year greetings.

13. Christmas Stars

Create a glowing Christmas star images with this tutorial. Make the brightest star possible!

14. How to Create A Christmas Card in Photoshop

This tutorial will teach you basic techniques on how to make your very own personalized greeting Christmas cards.

15. How to Create Xmas Balls in Photoshop

Create colorful and stunning Christmas balls to complete the Christmas touch to your greeting cards and wallpapers.

16. Xmas Tree Wallpaper in Photoshop

The glowing Christmas tree makes a great concept and the additional glittery highlights makes a perfect Christmas touch. Learn how to achieve this image with this tutorial.

17. Xmas Wrapped Text Effect

Learn how to create colorful gift-wrapped letters with this tutorial.

18. Make a Sketchy Wallpaper

Sketchy drawing effects never get old. Learn how to make one with a Christmas inspired theme with this tutorial.

19. Christmas Glass Ornaments

This tutorial will teach you how to create a realistic Christmas ball ornament with light effects.


20. Decorate with Colored Lights

Colored lights says everything about Christmas. It gives it the final touch to Christmas trees and lights up the town. Learn how to make one using Photoshop.



November 15 2010

21:00

40+ Free High Quality CSS/HTML Templates from 2010

Stylish, elegant, interactive and most of all it’s free. Free CSS/HTML templates that will put a great design on your website.  If you are creating your own website, you can consider using these free templates. There’s always that will suit your style, personality, work and the website you will be working on.

I’ll be presenting free CSS/HTML templates that you want to consider in your next project but be sure to read terms.

1. Blue Jeans

Stand out from the crowd with this cool, free template for a portfolio website based on blue jeans texture.


Demo | Download )

2. Portfolio

CSS Heaven Portfolio is yet another free HTML 5 and CSS based website template suitable for businesses. This template has a jQuery slide show in the home page header for displaying your latest work, featured contents or can also be used to tell your visitor what your web site is all about. All the fonts used for the template are included in a folder.


Demo | Download )

3. High Five

The style elements are in the CSS including styles for Blog, Comment Templates etc.


Demo | Download )

4. RS 18

This is designed mainly for business because of the blue color that looks professional.


Demo| Download )

5. Dandoot

DangDoot is a WordPress e-commerce theme that it is suitable mostly for major/indie music recording companies, bands, musicians, music products affiliates, music event organizers or simply online music stores.


Demo | Download )

6. Bamboo

Bamboo is a free CSS Template suitable for small business websites and blogs.


Demo| Download )

7. Acallia

If your into art, photography or anything related to designs it will fit on you.


Demo | Download )

8.Reinvent

One column layout that has ac lean and cool typography with minimal image design.


Demo | Download )

9. Alexx C

Elegant and professional looking design that match with cool icons.


Demo | Download )

10. RealOne

Real 1 is a free CSS Template suitable for Real Estate Templates.


Demo | Download )

11.The Radio Station

It is really for radio station website.


Demo | Download )

12. CSS Heaven 1

A contemporary look that is suited for design and style business.


Demo | Download )

13. Turrion

Business looking template that will lead your visitor to a right track.


Demo | Download )

14. Zen Design

It is a good template for article, blog or site that has a every now and then updates.


Demo | Download )

15. Urban Gear

Great free html template for on-line shop dedicated to the urban fashion industry. Easily replace the slides or just remove the slider area and use this template as a start point for your on line business.


Demo | Download )

16. ubly

Colorful, cheek style suited for blog sites.


Demo | Download )

17. beSMART

Simple corporate CSS/XHTML template ready to meet wide range of requirements for effective on line performance.


Demo | Download )

18. CSS Heaven 2

Suitable for business site.


Demo | Download )

19. Easy Slide

Easy Slide is a simple but cool css template based on the famous Coda Slider.


( Demo | Download )

20. StudioClick

Studio Click is a simple, well-structured portfolio theme that focuses on one thing: gorgeous photos, screenshots, and content.


( Demo | Download )

21. BizGroup

Simple corporate CSS/XHTML template ready to meet wide range of requirements for effective on line performance especially for solution business.


( Demo | Download )

22. Photo Pro css

Photo Pro is a simple css template for portfolios and photo sites and it’s very easy to edit.

( Demo | Download )

23. Treasure Hunter

This treasure hunting template is suited for photo galleries and blogs.

( Demo | Download )

24. Shop Around

Great free html template for on-line shop. Use it as a start point for your on line business. The template can be easily implemented in many open source eCommerce platforms.

( Demo | Download )

25.  Free Nova Studio

Nova Studio is a multi-purpose portfolio theme featuring a rich home page with a slider, a “From the Blog” widget, and multiple ways to beautifully display your work. A intuitive, unique design will make your site stand out from the crowd and solid markup will make it easy to edit.

( Demo | Download )

26. Mondays

Simple corporate CSS/XHTML template ready to meet wide range of requirements for effective on line performance.

( Demo | Download )

27. OWMX 1

Stylish and cool in the eyes. Great for professional businesses.

( Demo | Download )

28. Simple Solution

Clean and stylish that suits for businesses.


( Demo | Download )

29. Classic Luxury

Classic Luxury is great for portfolios and personal photo sites, and can be converted easily to a CMS theme as needed (such as Drupal or WordPress).


( Demo | Download )

30. Outliers

Dark corporate CSS/XHTML template ready to showcase your ideas.


( Demo | Download )

31. Portfolio Template

This is a clean and professional looking template for small portfolios or business sites. Very easy to edit if you have a basic understanding of html and css.


( Demo | Download )

32. Market  Leader

Light corporate CSS/XHTML template ready suits to showcase ideas to your clients.


( Demo | Download )

33. Clean-White

This is a simple but beautiful css template with lots of whitespace and a professional look. Perfect as a frontpage for small businesses or photographers.


( Demo | Download )

34. Ninja Assasin

Impress visitors to your site with a high-quality one-page portfolio site inspired by the Japanese ninja culture. The template is ready to use and will showcase your work in a unique fashion.


( Demo | Download )

35. Kelontong

Kelontong WordPress e-commerce theme is on board to simplify your life for our own online store now.


( Demo | Download )

36.  Small Business

This is suitable for small scale business websites that don’t need a lot of pages.


( Demo | Download )

37. RS 19

Stylish template with the combination of white and colorful taste.  It uses box shadows and text shadows techniques.


( Demo | Download )

38. Fruit Mix

As what the title suggest, good for healthy lifestyle website.


( Demo | Download )

39. School Education Template

Great for your school website. Publish school activities and announcements.


( Demo | Download )

40. Law Attorney

If you have a law firm, this is well suited for you.


( Demo | Download )

41. Film Blog

For film lover, this is a great template that will let you post your videos.


( Demo | Download )

42. Electronics

Cool coffee color that match on your electronics or appliances website.


( Demo | Download )

Free CSS/ HTML are really good to work on especially when you are about to start your new website and need to find something that will suit your business. Just try to explore more and learn about the free templates so that you can maximize the use of it.

September 06 2010

23:04

Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote

Smashing-magazine-advertisement in Keynotopia Wireframing Set: Free Wireframing Templates for Apple KeynoteSpacer in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote  in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote  in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote

Lately, Apple Keynote has been gaining popularity among designers as a wireframing and prototyping tool. Features like multiple slide masters, styles, grouping, animation and hyperlinks make it ideal for crafting interactive prototypes and UI narratives. Today’s freebie, Keynotopia, is a free set of interface elements for Keynote that makes it possible for anyone to create these prototypes in minutes. All elements are hand-crafted in Apple Keynote, and organized in nested groups for easier manipulation and customization. The templates can be used in Keynote 09 and 08 and are designed by Amir Khella.

Start with a blank presentation, and create a new slide for each application screen. Then copy/paste elements from the wireframe templates into your slides, and edit their labels, sizes and colors. To save time, group elements together, and use master slides to share common interface and navigation components across multiple screens. Finally, add hyperlinks to enable user interaction, and use slide transitions to create cool interface animations.

Voila! You now have an interactive prototype that you can test with users, share with team members, and present to stakeholders.

Keynote-release in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote

Download the set for free!

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed or rented. Please link to this article if you want to spread the word.

004 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Screenshots

001 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
Containers and Dialogs. Large view.

002 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
Controls. Large view.

003 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
Navigation. Large view.

005 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
Galleries. Large view.

006 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
Social Web. Large view.

007 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
Browser window. Large view.

008 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
Application window. Large view.

009 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
Lightbox. Large view.

010 in Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
Badges and icons. Large view.

Motivation behind the design

Here are some insights from the designer of the set:

“The first time I’ve used Apple Keynote for prototyping, I was helping a friend create a product pitch for his startup idea. He didn’t have design or development skills, and I wanted to show him how he can quickly put together a click-thru demo in less than an hour, using his favorite presentation tool. He was impressed by the outcome, and I was equally impressed by Keynote’s simplicity and efficiency. I never went back to my prototyping tool since.

Keynotopia was created so that anyone with an idea can quickly test its potential, without having to spend time and money on design and development resources. It’s a simple proof that having the right mindset for prototyping is more important than buying expensive tools.

I also wanted to find a way to avoid writing UI specs. Using Keynotopia templates, I created prototypes that I annotated and shared with development teams, and the response was phenomenal! Time was no longer spent reading, staring at screenshots and imagining interactions; developers and testers were actually having fun playing with the prototypes and providing feedback. Design was finally catching up with the lean and agile development process.

I am constantly updating the website with guides, tips, and new prototyping templates.

— Amir

Thank you very much, Amir! We appreciate your efforts.

Related Posts

You may be interested in the following related releases:


© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: downloads, Freebies, templates, wireframing

August 21 2010

10:00

40 Brilliant Under Construction / Coming Soon templates

Many websites will have found themselves in a position where they are making major changes, setting up a new website with a large profile, and so on. You want your users to be kept up-to-date with development, but don’t want them to see the site as it is being built. This is where an under construction page comes into play. It is basically a single page website that will keep your users aware of progress, as well as several other common functions during the building process of your site. Normal features include a newsletter sign up, some kind of percentage graph, and social media integration. Below is a round-up of free and premium templates which serve their purpose brilliantly as under construction pages. They are split into 4 categories; Html/CSS, CMS, PSD, and Flash.

Html/CSS

1. Vinta SS – $8

LinkDemo

Vinta SS is a simple one page “Under Construction” template that allows you to keep your users informed while you are building a new website. This html template will allow you to quickly and easily create a landing page on a new domain or website project that tells the visitors what is going on and when the site will be completed.

2. We’re on holiday/Under Construction – $7

LinkDemo

This is an under construction page that takes on the persona of the owners of the website going on holiday, hence the postcard. It comes with PSD files, valid Xhtml, a flash version, and simple countdown script.

3. Under Construction Page – $10

LinkDemo

This template is a simple Under Construction page that anybody could use for their website during the construction phase of their website. The template utilises a Jquery countdown timer, includes an Ajax form for newsletter sign ups, and easily customisable text and contact details.

4. Under Construction Page w/ AJAX contact form – $8

LinkDemo

SolidForm Maintenance Page is a customizable “Under Construction” page. It is easy to configure and comes with features such as a progress bar & what we are working on text, a fully Ajax contact form, latest tweets, and multiple colour schemes.

5. Neoteric – $8

LinkDemo

Neoteric is a clean single page “Under Construction/Coming Soon” template in 10 SKINS designed to keep your users up to date on your site’s progress. It comes with 3 PSD’s, a working validating form, a Jquery countdown script and a pie chart, as well as Cufon font replacement for a truly stunning look.

6. Coming Soon Under Construction 01 – $6

LinkDemo

This is a slick and easy-to-use placeholder for your website. The logo is easy to change with your own and setting up the countdown timer is a breeze. There are two separate skins included, a black and a white one. Quick and easy set-up, you can have your placeholder online in minutes after purchase. Note the included working PHP submission form with autoresponder that uses ajax (will not go off page when the message is sent, just display a success message if all goes well).

7. Easy Coming Soon with Pie Chart – $8

LinkDemo

Easy Coming Soon is an easy and flexible under construction page that will easily let you define your upcoming website and represent it’s current status, supported by a nice looking easily editable pie chart, and Ajax mailing-list form to keep your visitors up to date. It comes with 7 dark colour schemes, and 3 light schemes.

8. Ethereal – $7

LinkDemo

Ethereal – Under Construction is a clean single page “Under Construction” template, designed to keep your users up to date on your sites progress. It comes with 5 colour schemes; Blue, Dark, Neutral, Purple and Red. Features include  sliced PSD’s, a working Ajax / Php form, a Jquery countdown script, a progress bar, and extensive documentation.

9. Coming Soon Under Construction 03 – $8

LinkDemo

This is a slick and easy to use placeholder for your website. The logo is easy to change with your own and setting up the countdown timer as well as the progress bar is a breeze. The progress bar can automatically calculate (after you input the start and finish dates) the completed percentage or you can hardcode the percentage yourself. There are four separate skins included : Black, Blue, Special as well as a clean plain white skin for people who don’t want much graphics. Quick and easy set-up, you can have your placeholder online in minutes after purchase. Note the included working PHP submission form with autoresponder that uses ajax (will not go off page when the message is sent, just display a success message if all goes well).

10. Coming Soon Under Construction 02 – $8

LinkDemo

This is a slick and easy to use placeholder for your website. The logo is easy to change with your own and setting up the countdown timer as well as the progress bar is a breeze. The progress bar can automatically calculate (after you input the start and finish dates) the completed percentage or you can hardcode the percentage yourself. There are four separate skins included, dark multi-color and “ice” blue aurora skins, white aurora skin as well as a clean plain white skin for people who don’t want too much graphics. Quick and easy set-up, you can have your placeholder online in minutes after purchase. The template includes all page .psd files with slices and should be quite easy to customise with medium knowledge of Photoshop and CSS .

11. New Horizons – $7

LinkDemo

New Horizons Under Construction page is the perfect solution to any site currently under going construction. Provide a detailed explanation of what your current status is, the percentage complete and also the expected release date. Progress bar and countdown are dynamic and custom written to ensure super simple setting of start and end dates. Available in 4 different beautiful color schemes and super easy to create more!

12. Clean Countdown Timer / Construction Page – $7

LinkDemo

This is a clean and stylish “coming soon” / “construction” template. It shows days, hours, minutes and seconds left to a specific event. Show your progress trough a progress bar and give the user feedback about the progress made. The file includes a basic version in six different colors as well as two bonus versions and a shiny version in three different colors.

13. DigitFlip – $8

LinkDemo

A new theme for Under Construction Page with Styled CountDown Twitter Support and Ajax subscribe Form. Available in 4 Color Variations. Features include Valid xHTML and CSS, a styled Jquery countdown timer, twitter integration, an Ajax/Php email subscription form and is compatible with all browsers.

14. NotifyMe – $6

LinkDemo

“NotifyMe” is a very simple one page website. It comes with one HTML file, one CSS file, some images and the fully sliced PSD source file. It was designed with one of these “let me know when it is done” microsites in mind. For example for a new iPhone app, web tool, website etc. But with some changes you can also use it as small portfolio site, 404 error page or any other small and static website.

15. Econstruction – $7

LinkDemo

EConstruction is a brand new template with 6 Colour variations and a super clean, modern design. It comes with an easily customisable Jquery countdown timer, a super sleek progress bar, and well organised PSD’s. All this is accompanied by well written documentation, and a “Notify Me” submission form.

CMS

16. WordPress Plugin – Custom Coming Soon Pages – Free

Link

Custom Coming Soon Pages WordPress Plugin allows you to display a Customized Coming Soon Page or Under Construction page to normal visitors or regular members of your WordPress based website or Blog – while the Site Administrators see the fully functional website with the applied theme and active plugins as well as a fully functional Dashboard. Custom Coming Soon Pages WordPress Plugin will enable you to perform upgrades, fix nasty bugs or preview jazzy enhancements to your design live on your WordPress based website or blog without letting your users and normal visitors see crappy error messages or changes to the design until you really want them to.

17. Under Construction page with twitter & pie graph! – $8

LinkDemo

Make sure your visitors know whats going on with this Under construction site template that features a feed of your latest tweets (which can be easily removed if you don’t use twitter) and a pie chart that is easy to change to reflect your progress! It even comes with a Wordpress version, as well as html!

18. Fleepy – $8

LinkDemo

The Fleepy Under Construction template comes with not only a html version, but a free Wordpress version as well! 5 Colour schemes are available, with features included well documented PSD’s, twitter integration, a countdown script, a working contact form, and a newsletter subscription form.

19. Launchit – $8

LinkDemo

LaunchIt is an “Under Construction Template” inspired by Apple’s simple and sleek website. The template is easy to edit and comes with 2 variants, black and white; each of which has 4 colours (blue, pink, green & red). When you purchase this template you get a 3 for 1 value. You get a Joomla and a WordPress version of the template as bonus. Features include an IE6 Browser Check, a Countdown, an Ajax Form with Validation, a Flash Image Rotator and Twitter Updates.

20. Deliciousthemes Under Construction – Free

Link | Demo

This template is a simple one page “Under Construction” Wordpress theme. It has a nice interface and a great admin panel. It allows you to keep your users informed, while you work on your new WordPress website. The template has a jQuery slider containing 3 slides :one with your social pages like Twitter or Facebook, one with a subscribe-by-mail form (works only with Feedburner) and another one with an area for writing what you  are doing.

21. Tempskin – Free

Link | Demo

Tempskin is a very simplistic under construction theme for WordPress. It comes with a great looking background, along with RSS, email subscription and twitter integration. Although simple, it get’s the job done with no extra hassle.

22. Ready2Launch – Free

Link | Demo

Ready2Launch is free Under Construction template that can be used as Wordpress theme, with admin options page for customization, or as simple HTML/CSS page. It includes 6 themes and notes on customization. It comes with a JS countdown timer, and a ready to use mail form.

23. LaunchPad – Free

Link | Demo

LaunchPad classes itself as domain parking theme, but essentially its the same as all the other under construction themes here. It’s simplistic in its message though. It says that the site isn’t ready yet, and allows the user to subscribe to updates either via RSS, or by mailing list. It comes for both Wordpress, and Drupal.

24. WP Blueprint – Free

Link

Blueprint comes with a fantastic suggestive feel to it, clearly saying the site isn’t ready yet. It comes with a countdown, Feedburner and Twitter integration, a theme option page, and works in all major browsers with valid XHtml.

25. WP Launcher – Free

Link | Demo

WP Launcher is a free premium WordPress theme with a single purpose: to provide an attractive, customizable domain parking theme for WordPress users. This theme is a great solution for WordPress users who already own their site or future domain, but aren’t yet ready for their site to go live. It offers a sign-up form (powered by Google Feedburner) for visitors to subscribe to receive updates on the site‚ progress and eventual launch. It comes with a strong back-end options panel in which you can customize the Rss feed, Twitter, Social Bookmarking, Launching date with count down timer, Complete percentage and much more.

26. Ice Breaker – Free

Link | Demo

Ice Breaker is a free domain parking theme for WordPress with four different color schemes, and easy customization through custom widgets and a theme options page. With this theme, along with WordPress and a FeedBurner account, you can have an attractive landing page to collect subscribers and Twitter followers while you get your blog set up.

27. Coming Soon Wordpress Theme – Free

Link | Demo

This coming soon theme doesn’t simple relate to your website. It can be the coming soon of a product, application, or piece of software! You can use it to build up a list of interested consumers with the built-in Feedburner subscription form, and you can customise it to your own needs with a very versatile background image, and text colour picker.

PSD

28. Modern Under Construction Template – Free

LinkDemo

This is a PSD only Under Construction Template, with well organised PSD’s and the ability to easily create your own color scheme. It features space for a newsletter sign up, social icons, as well as room for a short update on where the progress of the site is currently at. Everything you need!

29. Premium Under Construction Template – Free

LinkDemo

These PSD only files by Design3Edge are modern, light styles under construction pages, with 4 different colour schemes. Elements that have been designed for include a twitter feed, a countdown timer, social button integration, and an RSS feed.

30. Under Construction Templates – $4

Link

These “under construction” templates are great to announce your brand new website or when is under maintenance. The download includes 2 PSD’s, each containing 4 renders in 4 different colors, with editable text layers so you can replace the information with your own. The image sizes are 920×695 px which is great for any website.

31. Slick Under Construction Page Template – $5

Link

This design is created as a template for pages that under construction, with a place to write your site name, slogan, Twitter updates, newsletter subscription, count down, social media links, in a slick and minimalist style. 3 Colour schemes are included (Indian Pink, Eclipse Blue and Aloe Green), and all PSD’s come layered and well organised, with editable text layers being easy to re-colour. It is created on the 960 grid system to make coding easier.

32. Slick 404 & Under Construction Pages – $4

Link

This download features modern, clean & professional looking 404 & Under Construction pages with multiple custom backgrounds. It comes with fully layered PSD files which are well-organized and easily editable.

33. Under Construction Pack – $6

Link

This pack comes with 4 under construction designs; 2 Out of the box, and 2 Normal. They are named ‘Still a sketch’, ‘Caution – Wet pixels’, ‘Tropical online soon’, and ‘3D Cubes’. They make the idea of a coming soon page more exciting and visually interesting. PSD’s are layered and grouped for easy editing.

Flash

34. 3D Tilt Coming Soon with Countdown Timer – $12

Link | Demo

This is a very cool 3D website place-holder or mini-site for those that don’t have do display much information. It’s basically a two-sided business card in which you can change the containing elements. You can change the background images for both sides and enable/disable and reposition a digital count-down timer independently for each side as well as change all of it’s colors, target date, etc. You can change (or even disable) the 3D tilting properties, allow or disallow the flipping of the card (make it one-sided). The theme is a really cool coming soon widget for your site that is sure to impress your customers and it’s very easy to use and implement.

35. Coming Soon Animation With Countdown and logo! – $5

Link | Demo

This flash template takes your under construction back to simplicity in terms of functionality with just a simple logo and countdown timer, but in terms of flashiness, it excels, with some beautiful animations that are well worth checking out.

36. Under Construction Page with Countdown, Twitter, & Newsletter Sign-up – $17

Link | Demo

Just because your site isn’t ready yet doesn’t mean your domain can’t be working for you. While you’re working to get the real site up let this temporary page generate interest and keep your future users informed. There are 4 main modules that can, but don’t all need to be used. You can also put them in whatever order you like. These include a Countdown Timer, a Twitter Status Slideshow, a Newsletter sign up form, and finally a text area.

37. Coming Soon Mini Template 02 – $12

Link | Demo

This is a website placeholder mini template, which is xml driven and is resizeable. It has two basic sections: the about module with html description and a contact module where people can reach you. The design is clean and the colors are easily customizable making it easy to integrate with your brand identity. It is the perfect solution to let people know about your presence on the web before releasing your website.

38. XML Coming Soon Vector Template – $10

Link | Demo

This is a really simple yet very cute Coming Soon Template for your website which is sure to impress everyone and is very easy to implement. This template is 100% vector which mean you can resize and change the color easily. The Subscription form has also been added so that you can always update your visitor/client on the progress of the site. Most of the settings can be set from the XML Files without even opening the FLA file.

39. Coming Soon Animation V3 Micro Site Page – $7

Link | Demo

This is version 2 of a previous flash theme that included a similar flash effect on the logo which is beautiful. This time though, instead of remaining extremely simplistic with just a countdown timer, a bit more effort has gone in to include room for your email address, countdown timer, and social networking icons.

40. Sapling – Free

Link | Demo

The Sapling site was designed to be used as a simple coming soon page. No Flash or programming knowledge is required to use the theme; everything is customized through an external XML file so you don’t even need to own Flash. The theme allows you to include information on yourself, as well as some basic links; in the demo’s case, for a dummy resume, email, and linkedin account.

Further Thoughts

I hope you have found this round-up of templates useful. While some are more advanced than others in the PSD to CMS range, they are all fantastic premium and free resources, and are well worth checking out properly if you are ever in the need for such a template. Of course, if you know of further awesome examples, get the down in the comments so the community can make use of them as well!

August 15 2010

10:00

40 Fantastic Resume/CV Templates to Show off Your Skills

Resume’s / CV’s have traditionally been bits of paper that sum up you and your life achievements in relation to a job to help you find employment. However, with technology continually evolving, we are no longer limited to text on a piece of paper. Now-a-days we have the opportunity to be much more creative with how we present ourselves to interviewers, so why not make use of it. This is a round-up of both premium and free resume templates that achieve this through html, or incredibly creative PSD designs which can be printed.

Html/Css

Having a resume in Html/Css allows you to easily send a link, and always have your resume readily viewable online compared to having to print your resume out for a prospective employer. You can also include a print.css to allow your resume to be printed off cleanly.

Clean CV / Resume Html Template + 4 Bonuses! – $12

Link | Demo

Clean Cv / Resume is a html template that will help you set up a professional online Cv in minutes and broaden the chance of finding a suitable job as many recruiters resort more and more to browsing online for prospective applicants instead of advertising their position and calling for applicants. You will also find included as a bonus an envelope, letter of intent, curriculum vitae and a business card in .indd (Adobe InDesign) format that will come in handy for face to face interviews.

Clean Portfolio Site – $17

Link | Demo

A clean and flexible site for anyone from designers to someone looking to display their professional resume and services. Features include a working contact form with validation, a Jquery lightbox /gallery, and PSD’s for the logo and design.

Smart CV – Resume Theme – $6

Link | Demo

SmartCV is a clean resume that was designed to hold all the info you may need when you create an online resume. You can easily add content and keep it within one click distance, due to the jQuery scroll plugin implemented.

Interviewer Friendly RESUME – $10

Link | Demo

This is a clean, User friendly and customizable Resume theme. It includes a twitter module and links to the guy’s networks. Features include video and Flickr ready, a print specific stylesheet, Jquery transitions, and a highly customisable design.

Cielo CV – $10

Link | Demo

Cielo CV is a modern, web2.0 styled HTML CV (Resume) template that will enhance your chance of finding better work proposals. Features include Cufon font replacement, A PDF version of your resume, print ready, and social integration with icons.

Major – Resume Template – $10

Link | Demo

This template comes with two columns, one for your portrait photo and contact information, and the wider second column for all your resume content. The template makes it super easy to make your own colour schemes, and is of course, print ready.

Paper Resume / CV – $10

Link | Demo

The Paper Resume CV is a html/css resume, that comes with a completely free Wordpress version! It comes with two different backgrounds, a working contact form, Jquery form validation, and is ready to be printed off at any time.

Dark Pinstripe Resume / CV template – $12

Link | Demo

This is a professional pinstriped CV / Resume with a plethora of slick jQuery effects. A great way to present yourself to any potential employers / clients. Features include Cufon font replacement, Jquery enhancements, an optional portfolio area, and a free business card, amongst others.

peachGrid resume/ CV template – $12

Link | Demo

PeachGrid is a one page (x)HTML résumé/ CV template designed for the creative professional. It’s specifically designed to help you quickly set up a respectable résumé/ CV. As it can be easily edited and modified, it can also be a basis for the a more robust full site of similar styling so you can dig right in to the well commented code, hack it up, and make it your own!

SEE VEE Online Resume/CV – $10

Link | Demo

SEE VEE Online Resume/CV is a simple and contemporary CV/Resume Template designed for those who like things to be neat and tidy. It plays nicely with IE6 and is deliberately designed to behave with even the smaller 800×600 monitors ensuring your cv/resume is seen by everyone. It comes with 7 colour schemes, and is of course, print ready.

Awesome Online Resume/CV – $12

Link | Demo

This is a clean, modern and colorful (optional) Resume/CV theme suited for everyone! It is very easy to edit and includes 10 minutes of video documentation showing you exactly what to do! Included in this template is a working contact form (with validation), a print stylesheet, 7 colour schemes, and all the PSD’s.

CV for Creatives – $7

Link | Demo

Need an online CV that also gives you the ability to showcase some of your work? Then the “CV for Creatives” might just be what you are looking for. It comes with 2 colours schemes, and provides the structure of a standard CV. However, you can optionally show 6 of your latest pieces of work as well.

Classic CV – $7

Link | Demo

Classic CV for Professionals is an online CV aimed at professionals. It comes with 3 colour schemes; Standard, Blue, and Warm. Just as a standard paper CV it showcases your skills and experiences as well as education. The HTML files are compliant with current standards; the PSD files are neatly organized (layers are grouped and clearly labelled).

Elegant Resume Template with Bonus Business Card – $10

Link | Demo

This Resume template comes with a bonus business card. Features include 5 different colour schemes, valid xhtml/css, cufon font replacement, a working contact form with Jquery validation, labelled PSD’s, and a print ready stylesheet. Full help documentation is also included.

Sample Resume Template – Free

Link | Demo

This Sample Resume Template is a simple and quick way to build an HTML resume. It is more of a starting point than a ready-to-use resume, but nothing is stopping you from using it as is.

HTML Resume Template – Free

Link | Demo

This fantastic resume template is something someone put together for their own resume, and has decided to give away for free. Both PSD and the html/css files are being given away, which is fantastic news for you!

One Page Résumé Site – Free

Link | Demo

This one page resume design put together by Chris Coyier is a fantastic starting point for your Resume. While it is fairly basic, and uses no colour, it is still fantastic, and comes with everything you need, including print ready capabilities.

Hire Me! – £5

Link | Demo

Hire Me! is a clean, colourful, one page, CV / Resume style website. It comes with Jquery scrolling content, 3 colour schemes, a print ready stylesheet, PSD’s included, and is easy to customise with documentation, and well commented code.

Jamba – $10

Link | Demo

Jamba is a clean single page HTML template for online Resumes and CVs. It’s quick and easy to install and is highly customizable. It comes with six different color schemes and includes the source Photoshop files allowing you to easily adapt the template however you choose.

Resumé template – Free

Link | Demo

This basic resume design by Jonnotie takes the resume back to simplicity, while still adding an element of beautiful style in there. It has room for a profile picture, and a hire me button as well as the expected contact details, and your life accolades.

MyResume – $39 (site subscription)

Link | Demo

Looking for a new job? Then MyResume is the perfect theme to promote yourself and create a professional and sophisticated online presence. MyResume is sleek, simple and easy to use, but also boasts some great features that will make handling your resume all the easier. Add new pages to your resume, create new tabs, connect with your peers using the social networking integration, and even add a custom portfolio at the click of a button.

Ipseity Personal Branding theme – Free

Link | Demo

“Ipseity” means selfhood, or individual identity. Although this theme isn’t a resume/CV as such, it is a personal branding theme for your site that allows you to list your contact details, achievements, anything you want really, in a beautiful sliding site.

PSD / InDesign

These types of files allow you to create stunning printable resumes, or PDF’s, which can be sent to your prospective employers!

3-piece Elegant Resume set – $6

Link

This elegant 3 piece resume set only utilizes grid and typography, the foundations of design, for both readability and legibility. It consists of 1 page resume, 1 page references, 1 page cover letter – US Letter sized – CS4 InDesign file – CS3 InDesign INX file – IDML markup file – Sample PDF

Resumes (5 Pack) – $7

Link

Everyone needs a resume at some point in time! This is a 5 pack of one-page resumes created using Photoshop. The files are completely editable in Photoshop so you can change position, sizes, colors, typefaces, etc. All of the fonts used are free fonts and are listed below.

Clean Creative Resume with Vector Icons – $4

Link

This fantastically clean resume comes with character and paragraph styles setup for easy editing and font changes. It is a one page Photoshop Template complete with layers. It is sized at A4 (International ISO ) and includes Vector Icons.

2 Page Resume – $5

Link

This 2 Page resume template comes with 3 colour options, each as a dark and light version. It is fully editable, and comes 8.5 x 11 inches in size. It used CMYK and has 300dpi.

Clean Elegant Resume – $5

Link

Clean Elegant Resume is a two page US Letter and A4 InDesign template. Character and paragraph styles are setup for easy editing and font changes.

SineWave Resume Template – $5

Link

SineWave is a creative style resume with your text content sticking to a wave shape. It is a simple, elegant template, that comes in A4 size, and as like all other PSD resume templates, has character styles for easy font editing.

Invictus – $5

Link

Invictus” V.1.0 is an elegant and clean layout for a resume. This is a Photoshop template which is fully editable. If you don’t like a font or an element, you can simply change it. The psd is created with CMYK (with bleed) , 300 DPI and A4 / 8.5×11 size.

Creative & Elegant Resume – $5

Link

This theme is a clean, elegant and creative Resume. It comes with easy editable, A4 layout, vector shape stars, and you can use any colour you like! 4 Colours schemes are included; violet, yellow, green and red. Both font’s that are used (Titillium Text, and Aller) are free.

Quotations Resume & Cover Letter – $5

Link

In this template you are free to replace the provided quotations with any others you wish. Have fun with it! Give the person who’s reading your resume something to think about or laugh about! this will make your resume memorable, we promise! Ask former employers for a quote about you and your work ethic and drop it in! Your prospective employer will applaud your unique resume as it stands out from the rest of the other candidates!

Slick + Stylish Resume – $6

Link

Slick + Stylish Resume (InDesign CS3 +) is a beautiful resume template originally in grey and white, but easily changeable to any colour of your choice. It features fully implemented, and easy edit character, table, and cell styles, and makes use of the incredible Myriad Pro font.

Simple and Clean Resume with Covering Letter – $6

Link

A simple and clean CV Resume which includes a covering letter in the same style. All PSD files are layered and labeled and include basic guide lines. The pages are sized at International A4 (21cm x 29.7cm) at 300DPI using CMYK colours – Print ready. The sample font used is Trebuchet MS (System font) Standard for PC and Mac.

Metogé Resume – $5

Link

This Beautiful and clean resume includes US letter and international sized paper. The whole packet includes A4 (Europe, UK, Australia, New Zealand) (PSD), US letter (USA, Canada) (PSD), Information and example JPG files. Metogé Resume is ready to print (CMYK and 300dpi).

4 Pack Clean Professional Resumes – $5

Link

The Professional way to present your self to your next employer. This pack included 4 brilliant looking resume’s that will look fantastic on the desk of your next employer. The design comes in A4 Size with easy to edit & change colors.

Curriculum Vitae – $5

Link

This theme offers you a cool, slick, sophisticated way to present your skills to would be employers! With room for a picture of yourself, and a slick cover letter included, you can’t go wrong with this.

3-Piece Minimalist Resume – $6

Link

This 3-Piece Minimalist Resume is available in three different variants; Black and white, grey and white, and grey and blue. The pack comes with templates for your cover letter, resume, and references. It comes US letter sized.

Catchy Horizontal Resume – $6

Link

A Catchy resume, print ready, with a modern style and 5 colour combination, created to be used specially with horizontal page orientation. Colour options include Grey, Purple, Orange, Red and Turquoise. The package comes with well organised and grouped layers, and easily customisable and scalable graphics.

Resume Booklet (8 pages) – $7

Link

Want to impress with your resume? This very clean and creative booklet-style resume is the right choice. Drop in your own text and pictures and you’re ready to go. With just a bit more effort you could turn it into a template with any other purpose.

Final thoughts

So there you have it. Whether you are after something to have online, or something to creative to physically have at hand, there are plenty of fantastic resources out there. As always, I’m sure there is more out there, so if you know of other templates that are worthy of a mention, get them down in the comments for other people to see!

June 24 2010

13:15

Design for efficiency: Techniques & Templates

The folks over at Viget detail an article on how to be a more efficient designer and provided downloadable Photoshop templates to setup your files and make life easier on yourself. Can’t beat shared knowledge and freebies!

March 05 2010

20:00

28 New Great Magazine/Newspaper Style WordPress Themes

As a great cms platform WordPress has many examples for every work  like blogs, companies, portfolios, galleries etc. Magazine/Newspaper style themes are one of the most wanted WordPress themes and they are very useful for managing lots of posts on a page.

This type of themes are mostly liked by small and medium-sized teams who can produce actual content every day. It is easy to show many thumbnails and sliders on a page so you can push up your page views easily. But you need to choose right theme for your visitors. For example if your visitors are generally looking for galleries check out a more visual one, otherwise take a look for most text-based ones.

Premium newspaper style themes have great features and other professional ones are really satisfying. Here are mixed 28 new great Magazine/Newspaper style WordPress themes.

1. Transcript – Premium Magazine Style Theme

Transcript is a multi-purpose and stylish news/magazine theme.  Some features are

  • A nice ajax support for featured entries
  • Built in Banner Management
  • Built in Media Gallery Module …

2. Eventina – Premium Magazine Style Theme

Eventina is a flexible magazine style theme.  Some features;

  • Built-in Social Addon
  • Featured Posts on Homepage
  • Featured Posts in the Header …

3. Technologic – Premium Magazine Style Theme

Technologic is a flexible and unique magazine style theme.  Some features;

  • 5 Color Styles
  • Threaded Comments
  • Featured Slideshows on Homepage …

4. HotGoss – Premium Magazine Style Theme

HotGoss is a magazine/news style theme which is easy to modify. Some features:

  • Major Browser Compatible
  • Valid XHTML 1.0 Transitional
  • Valid CSS Level 2.1 or 3 …

5. SportState Theme – Premium Magazine Style Theme

Sportstate is a cool magazine/news style theme for good-working publishers. Some features;

  • Integrated Content Rotator
  • Optional Jquery Dropdown Menu

6. ColorMatic Theme – Premium Magazine Style Theme

ColorMatic is a variety of magazine/news sites theme. Some features;

  • Four (4) effective website layouts
  • Built-in Blog Navigator Widget
  • Advertising management …

7. Magazine WordPress Theme – Premium Magazine Style Theme

Magazine WordPress Theme is a good designed magazine style theme with good features. Some features;

  • 2 or 3 Columns
  • Theme Options
  • Threaded Comments …

8. The Theme Wars Magazine – Premium Magazine Style Theme

The Theme Wars Magazine is a good magazine style WordPress theme with a large featured-area on the homepage. Some features;

  • Powerful Theme Control Panel
  • Featured content sliding gallery (optional)
  • No custom fields – built-in post extras …

9. LifeStyle – Premium Magazine Style Theme

Arthemia Premium is a detailed magazine theme. Some Features;

  • 2 or 3 Columns
  • Theme Options
  • Threaded Comments …

10. Arthemia – Premium Magazine Style Theme

Arthemia Premium is a powerful magazine style wordpress theme. Also it has a free version. Some Features:

  • Cross-Browser Compatible
  • Analytics and Feedburner
  • Banner & Adsense Management …

11. IndoMagz Magazine – Premium Magazine Style Theme

IndoMagz is a new style Magazine theme. You can choose one of many templates with different colors. Some Features:

  • 1, 2 or 3 Column Templates
  • RTL Text Direction
  • Post Thumbnail Support …

12. Arash Theme – Free Magazine Style Theme

Arras Theme is designed for news or review sites with lots of customisable features. Some Features:

  • Widgets Ready
  • 5 News Layouts
  • Alternate Styles Ready …

13. Obscure – Free Magazine Style Theme

Obscure is magazine wordpress theme. It build in any site niche and best fit for community based site.  Some Features:

  • Built in Featured Content Gallery
  • Feedburner RSS Subscription Ready
  • Twitter Integration …

14. WP-Clear – Premium Magazine Style Theme

WP-Clear is a clean, minimalist design theme. It can be used as an online magazine or newspaper. Some Features:

  • 2-Column or 3-Column Layout with Widgetized Sidebar
  • Home Page Magazine Layout
  • Featured Content Glider …

15. WP-Smooth – Premium Magazine Style Theme

WP-Smooth is a dark premium WordPress magazine theme. But it comes multiple color options and layouts. Some Features:

  • Gravatar Integration
  • Banner Ad Integration
  • Built-In Post Thumbnails …

16. Hamasaki – Free Magazine Style Theme

Hamasaki is a white wordpress theme. It is really useful and good designed. Some Features:

  • Page Comment Templates
  • Contact Page with CAPTCHA Support
  • Widget Support …

17. Ndadap – Free Magazine Style Theme

Ndadap is a uniqe Magazine Style theme. It contains minimum configuration to make it work. Some features:

  • Auto Re-size Image
  • Grid Based Layou
  • Built in featured post area …

18. Advanced Newspaper – Premium Newspaper Style Theme

Advanced Newspaper is an exclusive Newspaper Style theme. Some features:

  • Multilevel dropdown
  • Category based advertisement
  • Unique newspaper layout …

19. Zenko Magazine – Premium Magazine Style Theme

Zenko Magazine is a flexible magazine style theme. It is stylish & colorful. Some features:

  • Threaded Comments
  • Ads Management System
  • Featured Posts on Homepage …

20. Yamidoo Magazine – Premium Magazine Style Theme

Yamidoo Magazine has a simple layout and can be easily styled to create the perfect look for your blog.  Some features:

  • Feedburner & Google Analytics Ready
  • Featured Content Section
  • Ads Management System …

21. Inuit Types – Free Magazine Style Wordpress Theme

Inuit Types is a very useful theme for e-magazines. Some features:

  • Multiple Layouts,
  • Fully Widgetized,
  • Excerpted Content …

22. Mimbo Pro – Premium Magazine Style Wordpress Theme

Mimbo Pro is another premium Magazine style theme. It includes an image carousel and seems great. Some features:

  • Animated Dropdown Menus
  • Image Carousel With Variable Speed
  • Image Thumbnail Resizing …

23. Newsport – Premium Magazine Style Wordpress Theme

Newsport is a professional Magazine style theme with some unique features. Some features;

  • 4 Widgetized Areas
  • 5 Custom Woo Widgets
  • 11 Great Colour Schemes …

24. HeadLine – Premium Magazine Style Wordpress Theme

Headline Magazine style theme has s a flexible layout with lots of features. Some features;

  • Featured jQuery Tabber/Slider Area
  • Author Box Widget on Single Posts
  • 15 Stylish Alternate Colour Schemes …

25. Studio Press News  – Premium Magazine Style Wordpress Theme

Studio Press News theme is a simple and smart Magazine Style theme . Some features;

  • 2 or 3-columns
  • Fixed Width
  • Threaded Comments …

26. One Theme  – Premium Magazine Style Wordpress Theme

One Theme is Magazine style wordpress theme which has a 4 different versions. Some features;

  • Numbered Comments
  • Custom Control Panel
  • Three Homepage Layouts …

27. WP-MediaMag  – Premium Magazine Style Wordpress Theme

WP-MediaMag is a modern Magazine style WordPress theme. It is designed for publishers who like to upload media. Some features;

  • Video Integration
  • Theme Settings Page
  • Featured Content Glider …

28. WP-Magazine  - Premium Magazine Style Wordpress Theme

WP-Magazine is another professional and simple WordPress theme. Some features;

  • Featured Article Glider
  • Built-In Banner Ad Blocks
  • Built-In Site Guide in Right Sidebar …

If you can not find a good one for you, look for the first post: 60 Free, Yet Premium Quality Wordpress Magazine News Themes

Featured Content Section

Featured content sliding gallery (optional)Featured content sliding gallery (optional)

Eventina

News WordPress Theme

November 27 2009

10:30

10 Templates that Solve Problems for Web Developers

We live in a web centric world right now, and if you haven’t already, you’ll most likely be facing website related dilemma(s). For example, maybe you need an email template to send out your company newsletter(s) but you don’t have the first clue as to how to create one let alone create one that works with all major clients, looks outstanding and is easy to customize and reuse.

Or maybe you need a stylish but functional admin panel for a client whom you’ve just built a complex CMS for, but you aren’t a designer. There are an infinite number of possible problems you could be facing and fortunately, there are solutions.

1. Airmail! – Customizable Email Template

Airmail

“Airmail is a professionally built and designed custom HTML email template! Perfect for just about anyone – usable for everything from newsletters to eFlyers to whitepapers.”

Airmail

2. Simpla Admin – Flexible & User Friendly Admin skin

Simpla Admin

“Simpla Admin is a professional template with a beautiful and user friendly interface. With various smart and intuitive jQuery functions, navigating the interface is a breeze.”

Simpla Admin

3. CleanMail – Email Template Package – 5 Colors!

CleanMail

“CleanMail is a simple yet sexy email template package with 5 different color schemes!”

CleanMail

4. WordPress Wiki Theme

WordPress Wiki

“If you’re looking for a Knowledge Base or Wiki for your company but don’t want or need a full blown Wiki Application. This is the theme for you. Built with a custom Frequently Asked Questions plugin to help extend the functionality of your web site. The plugin acts as a custom write panel that displays in essence short FAQs below posts in their respective categories. The FAQs are searchable and paginate and are not required.”

WordPressWiki

5. Marketplace Community WordPress Theme

Marketplace Community

“Marketplace is a both clean and stylish WordPress theme with the intent and focus on creating a community site for industry news, tutorials, etc. This theme includes many popular built in features seen in today’s industry leading community sites. This themes comes with 5 different color options to choose from.”

Marketplace Community

6. vCard Professional Portfolio

vCard Professional Portfolio

“This is a professional and clean vCard based on Tim Van Damme’s website. With this design you can use almost any background.”

vCard Professional Portfolio

7. Sleek Server Error Pages

Sleek Server Error Pages

“This is a clean, web 2.0 design for website / server error pages. It is flexible and very easy to customize. It comes with 5 of the most common error pages (404, 403, 401, 500 and 503) but it’s very easy to add more if needed. All text is real text so adding more pages is a breeze, no image editing required.”

Sleek Server Error Pages

8. NEOTERIC—The Ultimate Under Construction Page!

Neoteric

“NEOTERIC is a clean single page ‘Under Construction/Coming Soon’ template in 10 SKINS designed to keep your users up to date on your site’s progress.”

Neoteric

9. Under Construction Page with Twitter & Pie Graph!

Under Construction

“Make sure your visitors know whats going on with this Under construction site template that features a feed of your latest tweets (which can be easily removed if you dont use twitter) and a pie chart that is easy to change to reflect your progress!”

Under Construction

10. Minimo – A minimal one page portfolio theme

Minimo

“Minimo is a simple and attractive one page portfolio showcase theme. This theme is built using the 960.gs grid system framework, giving it a structured and professional look and features custom designed icons. Included is a form mail script, so the entire site works out of the box, simply add your destination email address.”

Minimo

Conclusion

When working on projects for your clients, what kinds of templates do you find yourself most in need of? Thanks for reading!



November 25 2009

15:33

Advanced Power Tips For WordPress Template Developers

Smashing-magazine-advertisement in Advanced Power Tips For WordPress Template Developers
 in Advanced Power Tips For WordPress Template Developers  in Advanced Power Tips For WordPress Template Developers  in Advanced Power Tips For WordPress Template Developers

Spacer in Advanced Power Tips For WordPress Template Developers
Back in July, “Power Tips for WordPress Template Developers” presented 8 basic techniques for adding popular features to the front end of a WordPress-powered website. The premise was that WordPress has become an elegant, lightweight content management solution that offers the fundamentals out of the box, atop a modular core that offers incredible potential in the hands of a capable developer.

WordPress does not try to be an “everything to everyone” CMS right out of the box. Many systems do an average job incorporating 99% of what the potential CMS market might need, even if the last 15-20% is used only by a fraction of the market and adds considerably to the system’s overall “heft” (or bloat). At the other end of the spectrum are completely custom solutions that are finely tailored to exact needs, at the cost of reinventing wheels like polished content editing with media management and version control.

The self-proclaimed WordPress “code poets” have, alternatively, focused on doing an A+ job with the “fat middle”: the 80-85% of features that almost everyone needs, and coupling those with a first rate framework and API that enables capable developers to add in almost any niche or “long tail” feature. In fact, the core WordPress framework is so capable that a handful of “intermediary” frameworks that sit on top of it have already emerged.

That previous “Power Tips” entry scratched the surface, covering a handful of API calls mixed in with some simple PHP code and configuration tips intended to help beginner WordPress template developers kick their game up a notch. This article takes power tips to the next level, expanding on some of the topics in the first article, and introducing more advanced techniques and methods for customizing not only the front end, but the content management (or back end) experience.

You may be interested in the following related posts:

Multiple Column Content Techniques

The average blog or website has a single, clearly defined block of space for a given page’s or post’s unique content. But there are plenty of creative websites that don’t conform to this simple notion of “one unique block” per page. A creative online portfolio layout might feature a screenshot and project description in a left column, and a list of technologies used in a right column. Both the left and right column are unique to each portfolio page.

Here’s a screenshot from an in-development website project, built on WordPress. The “projects” area features portfolio-like layouts of green building projects throughout the state. In addition to a specially designed gallery visualization, note that the individual project profile has two distinct columns.

Rigbc-2-column in Advanced Power Tips For WordPress Template Developers

A more commonplace layout might feature an obvious, primary block of page content, but also feature a sidebar element that is unique to the current page: maybe a quote from a customer about a specific product or service. The “Power Tips” article offered a method to associate sidebar elements with multiple pages using custom fields and page IDs (tip #6). That approach isn’t very effective or efficient for designs with a 1:1 relationship between sidebars and pages (where each page has a unique sidebar element).

Sidebars in Advanced Power Tips For WordPress Template Developers

Yes, the developer could add table buttons to the WordPress editor, and let content authors fend for themselves: a solution prone to problematic layouts and bad output relied upon far too often. Here are a few simple options that keep layout in the hands of the template developer while making content management easier and problem-free.

Short, simple, and HTML free? No worries.

Before we delve into solutions that assume a need for HTML formatting in this second content block, let’s review a more basic solution. If the second column does not need to be formatted – or maybe should not be formatted by the editor for design reasons – then a simple custom field will do the trick. In the case of a simple sidebar element, like a customer quote, this may be just the trick.

There are already great tutorials and useful custom fields hacks that walk through the WordPress custom fields feature, so if you are not familiar with the basic idea behind custom fields, start there. Let’s go ahead and create a custom field named “sidebar_content” (also known as the “key”), and put some simple content in there. Just to shake things up, let’s assume we do need a very basic HTML feature for our content authors, who know nothing about HTML: line and paragraph breaks. Let’s also assume that we want to format this sidebar content on the front end with some of the basic automatic niceties we get when we output post content, like curly quotation marks.

Sidebar-custom-field in Advanced Power Tips For WordPress Template Developers

Here’s how we can output this in any template file, using the “the_content” filter to apply the WordPress content filter to our custom field. That filter converts single line breaks to break tags, double line breaks to paragraphing tags, and even transforms simple quotation marks to curly quotes!

$sidebar_content = get_post_meta($post->ID, "sidebar_content", true);

if ($sidebar_content) {
   echo '<div id="sidebar_content">';
   echo apply_filters("the_content", $sidebar_content);
   echo '</div>';
}

Of course, we can make this even more intuitive for the content authors by creating a new meta field box for sidebar content instead of relying on the generic “custom fields” box… which will be covered later in this article!

Using the More Tag for… More

The WordPress editor has a button “more tag” button that is primarily intended to separate “above the fold” content from “below the fold” content. If you are not already familiar with the “more” divider, read up on that first.

If the pages or posts that need a two column layouts also rely on traditional more separation, this tip will most likely not be effective, unless one of the columns is also the intended “above the fold” content. However, most instances where a two column layout is desirable don’t overlap with a traditional above / below the fold need. It is fairly rare, for instance, for pages (vs. posts) to actually make any use of the more tag. So let’s start taking advantage of that feature!

The basic idea is that content above the more divider will represent one block of HTML content, while content below the divider will represent a second block (be it a sidebar element or column).

Sidebar-using-more-tag in Advanced Power Tips For WordPress Template Developers

Here is how to retrieve content above and below the more divider as separate blocks of HTML content in the corresponding page template file.

global $more;

$more = 0;
echo '<div id="column_one">';
the_content('');
echo '</div>':

$more = 1;
echo '<div id="column_two">';
the_content('',true);
echo '</div>';

The global “more” variable lets WordPress know whether or not the content is being rendered in an “above the fold” (or “teaser”) only view. By passing an empty string to “the_content”, we prevent a “read more” link from showing up below the HTML content. And, for column two, we pass a second parameter to “the_content” – true – which instructs WordPress to output the content without the teaser.

If the intent is to output the second block of content outside of the loop in another template element, such as a sidebar, this approach is a bit trickier. One option would be to store the second block of content in a uniquely named variable, declare it as a global variable in the sidebar, and – if there is any content inside the variable – output a new block. An alternative could involve checking which page template is in use with the “is_page_template” function, and, if the two column template is in use, calling “the_content” with the second parameter set to true, as in the example above.

The Plug-in Solution: Adding a Second HTML Content Block to the Editor

The ideal solution, of course, might be a second HTML editor field on the WordPress page or post editor. Unfortunately, no such plug-in existed… until recently! While writing this article, we decided it was time such a solution did exist, and so the author of this article is happy to present a free, open source plug-in that combines some savvy understanding of how TinyMCE works (hint: it’s as simple as a class name) with the custom meta box tutorial covered later in this article, and a little bit of extra customization and polish thrown into the mix.

Secondary HTML Content adds a second HTML editor to pages, posts, or both (customizable with a simple settings panel). You can output the content in a sidebar with an included widget, or integrate it more tightly with the template by using “the_content_2″ and “get_the_content_2″ functions.

Secondary-html in Advanced Power Tips For WordPress Template Developers

Associating Pages with Post Content: Reloaded

“Power Tips” covered the basic foundation for associating different WordPress pages with different post categories. The basic premise was that many sites require, effectively, different post “feeds” on different pages. For instance, there may be a company blog, but there may also be an independent news feed.

This continuation offers specific tips that extend the core concept introduced in part 1, making it easier to have multiple page / category associations, preventing entrance into the “real” category archive, and ensuring that individual post views retain a visual and architectural association with their parent “category page” layout.

Be sure to read part 1 before proceeding.

A Review of the Basics & the Two Fundamental Approaches

At the heart of the category / page association (covered in part one) was:

  • A matching of the “page slug” with the “category slug.”
  • Using “query_posts” and the category parameter to exclude standalone page categories from the primary feed
  • Using a dedicated page template with “query_posts” and the “category name” parameter to create a page featuring a feed for a single category.

Wp-cat-config in Advanced Power Tips For WordPress Template Developers

Before delving into the tips that extend those ideas, it is important to make a distinction between two common but fundamentally different use cases for page / category association. The more typical use case, which the first part was tailored to, is a website that has a primary feed, like a blog, but also has one or two distinct feeds, most often for a formal news or press feed.

The second use case is a bit more esoteric: there is no primary feed. The site has many pages, and many (but not all) of those top level pages are individual feeds of posts. The example, at the end of this power tip, m62.net, is one such use case. Another common use case might be – again – a portfolio centric website.

Let’s say we want to create “Joe’s Portfolio”, and Joe wants to feature 4 distinct areas of expertise. Each area of expertise should be a top level page, say, joes-portfolio.com/web-design, joes-portfolio.com/graphic-design, etc. Joe wants to have a little write-up about each service area at the top of the page, followed by a feed of case studies. Why a feed instead of sub-pages? Maybe Joe wants prospects to be able to subscribe to an RSS feed for each area of expertise; maybe he wants to easily cross-tag case studies based on industry; maybe he plans to update frequently and doesn’t want a huge page sitemap or wants visitors to page through a date-organized collection of case studies. There are many reasons to use posts instead of pages.

The following tips provide solutions for both use cases.

Automatically Determining the Page / Category Association

Part one suggested that a unique page template be created for any page associated with a category. That page template would then query for posts using a hardcoded category name or category ID. If there are only one or two standalone “category pages”, this is an efficient and effective solution.

However, if there are many page / category associations, as in use case #2 (no primary feed), the process of manually creating page templates for each association is tedious to build and maintain, and not realistic if content editors who don’t program need to be able to create more page / category associations on demand.

An alternative would be to create a generic page template, let’s say “template-category-connector.php”, that is assigned to all pages associated with a category, and automatically determines the right category to query.

The following code performs the matching and executes the post query. The magic happens by taking advantage of our matching page and category slugs. Once again, if the website does not use permalinks, an alternative approach will be required (one permalink-free alternative could involve a custom field with the associated category ID).

$cat = get_category_by_slug($post->post_name);
query_posts('cat='.$cat->term_id);

That’s all there is to it… just proceed on with the post loop to output the applicable category’s posts. Note that the template should probably check for an actual return value from line 1, and output a graceful error in the event there is no match.

Handling Entry into the “Real” Category Archive

Now that there is a dedicated page layout that handles the category feed, we will want to be make certain that the visitor doesn’t land on WordPress’ default category “archive” view. For instance, when using permalinks with the default “category base” value, the archive view for a category with a top level category assigned a “web-design” slug would be: mysiteurl.com/category/web-design. However, the intent is for visitors to view this category at our top level page: mysiteurl.com/web-design.

By combining the WordPress category template file with some smart redirects, we can prevent entry into the default category archive. Out of the box, the WordPress template system allows developers to create global category archive templates as well as templates for individual category archives.

If we are in use case #1 – a site with a traditional blog feed and a standalone news feed on a “press releases” page – we will want to use the latter solution. Let’s say, as in part one, the category ID for “press releases” is 5. We create a template file in our theme folder named category-5.php. Under use case #2 (no primary feed), we will want to redirect all category archive traffic, in which case we need to work with the category.php template file.

A few lines of code in either template file will redirect visitors to the right place. We’ll also pass HTTP error / redirect code “301″ – which will tell search engines to permanently redirect their link to the right location. Note that this particular code assumes we are using a permalink configuration. Line 2 can be modified to accomodate that situation.

$destination = get_bloginfo('url');
$destination .= str_replace('/'.get_option('category_base').'/','/',$_SERVER['REQUEST_URI']);
wp_redirect($destination, 301);

In effect, that code removes the category base (”/category” by default) from the overall relative URL, and safely redirects the visitor to the page with the matching slug. Of course, if the site falls under use case #1 (one or two stand alone feeds), the line three could dropped into a specific category template (i.e. category-5.php) with a hardcoded absolute URL for the redirect destitation.

Hiding Standalone Categories from the Category List & Primary Site Feed

In the first use case (only isolating one or two categories from a primary feed), it may be necessary to prevent isolated categories or the posts within those categories from appearing in some common theme elements that would traditionally include them.

Consider the example from part one: a site with a traditional blog and a standalone press release feed. Assume the owners of the site want the RSS feed for the blog to be persistently available throughout the site (typically manifesting itself as an RSS icon in the browser location bar), but don’t want the press release items included in that primary feed. By default, the WordPress primary feed is available at “/feed”, and includes all published posts, regardless of category or any other post property.

Smashingmag-feed in Advanced Power Tips For WordPress Template Developers

To exclude categories from the primary RSS feed, we need to filter the WordPress function that retrieves the posts. Let’s again assume that the category ID for Press Releases is 5. The following code should be placed in the template’s “functions.php” file.

add_filter('pre_get_posts','exclude_press');

function exclude_press($query) {
   if($query->is_feed && !$query->is_category) $query->set('cat','-5');
}

To summarize, we use the “pre_get_posts” filter to modify the post query before it executes. Within a new filter – named “exclude_press” – a conditional confirms that the post query is for a feed, and that the query is not for an individual category. If the check pans out, the query is modified to exclude category 5 before execution.

The notion of globally filtering the post query may have broader implications depending on the site’s unique requirements. With some smart conditional checking, the filter could be extended to prevent the category from appearing anywhere except within the category or isolated post view. But be careful when extending the filter, and be sure to consider all possible views, including administrative views!

The category list is another frequently used site element that isolated categories should, in most cases, be excluded from. If the template calls the category list in only one or two places by code (as opposed to using the categories widget), excluding categories from the list is straight forward.

wp_list_categories('exclude=5');

However, if the categories widget is in use, or the category list is used throughout the template, an alternative approach is required. Enter the “list_terms_exclusions” filter. Again, the following code should be placed in the “functions.php” template file.

add_filter('list_terms_exclusions', 'filter_press');

function filter_press($exclusions) {
   $exclusions .= " AND t.term_id != 5 ";
   return $exclusions;
}

The return value of a “terms exclusions” filter is tacked onto the “where” clause in the SQL query that retrieves the terms. Without digging too deep here, the reason for discussing “terms” as opposed to, say, “categories” is because WordPress abstracts a variety of different taxonomies (link categories, post categories, tags, custom taxonomies, etc) into a unified database model that handles all taxonomies. Calls to “get categories”, “get tags”, and so forth, are all referring back to general “terms” behind the scenes. Ever wonder why category, tag, and other IDs tend to jump around? They are all being added to the same table. Assuming a fairly clean install, try adding a new post category, and note the ID. Then add a tag, and note its ID… one greater than the new post category.

Term-taxonomies in Advanced Power Tips For WordPress Template Developers

Retaining the Page Layout for Post Views within a Category Page

One of the most common challenges to tackle with page / category association is retaining a sense that the visitor is still within the “category page” hierarchy – and not a global feed hierarchy – when a visitor is reading an individual post. Part one hinted at this challenge under “The devil is in the details,” and started to suggest a path that incorporated using the “in_category” function. We will explain how to use “in_category” within templates, as well as how to trick functions that reference the original query object into thinking that they are “within” the category page.

Let’s start with case #1, and building on the example in the first article, assume we only need to contend with one isolated feed, “Press Releases” (category ID 5).

Say the theme has a sidebar template that lists post categories when rendering the blog part of the site, and when rendering a standalone page, shows a page list instead. Here’s an extremely simplified version of what that might look inside the sidebar template file.

if (is_page())
{
   wp_list_pages();
}
else
{
   wp_list_categories();
}

Of course, there may be alternative widget sets for pages or posts, and there is likely to be more than just one element in the sidebar. But the concept should hold. Now going back to the example, the theme should render posts in category 5 (Press Releases) as if the visitor were on a page (not the blog). Leveraging the “in_category” check, the code above would now like the following:

if (is_page() || in_category(5))
{
   wp_list_pages();
}
else
{
   wp_list_categories();
}

Note that if there are multiple categories whose posts should resemble page output, the “in_category” function should be passed an array of IDs, like so:

in_category(array(5,7));

The need for a “in category” check is probably moot in case #2 (multiple page/category associations, without a primary feed): the template is probably structured to output the same elements on pages and posts from the get go. In other words, everything is handled as if it is a page since there is no primary feed. However, the following tip – that dynamically looks up the faux parent page ID (the page associated with the category) – is necessary for the next part of this tip. Just amend the code to check if “faux_parent_page” has a valid value: if it does, then the post is inside an isolated category associated with a page.

Once again, this approach to dynamically seeking the faux parent page (the category page) depends on taking advantage of the matching permalink structure between post categories and pages that is at the heart of this association. If the site is unable to use permalinks, a more complex alternative look up of the faux parent page will be necessary.

foreach(get_the_category() as $category) {
   $faux_parent_path = '/'.get_category_parents($category, FALSE, '/', TRUE);
}
$faux_parent_page = get_page_by_path($faux_parent_path)->ID;

Now that we have the ID of the category’s associated page, we can trick “black box” theme elements that determine page or post properties on their own (by referencing the post query) into thinking they are actually working with the category page.

The most common use case is page navigation. Whether its breadcrumbs, a top level page menu that should retain “current” (on) states, or a side navigation menu that should display the current section, there are many “black box” navigation functions that need to be tricked into rendering themselves as if on the category page.

Let’s use a simple top level page list, which should maintain proper “current_page”, “current_page_parent” (and so on) classes when on a post under a category page. Here’s what that simple function might look like before our changes:

wp_list_pages('depth=1');

Of course, posts do not normally have parent pages, so there will be no “current” classes assigned to that output when reading a post. Here is how to trick that function into thinking it is rendering the navigation for the “parent” category page.

//retrieve faux parent page dynamically… can skip and hard code in case 1
foreach(get_the_category() as $category) {
   $faux_parent_path = '/'.get_category_parents($category, FALSE, '/', TRUE);
}
$faux_parent_page = get_page_by_path($faux_parent_path)->ID;

//reset the post query as if on the faux parent page
query_posts('page_id='.$faux_parent_page);

//execute our "faked out" function
wp_list_pages('depth=1');

//reset the query back to the initial state
wp_reset_query();

If there are multiple elements that need be “tricked,” a best practice would be to put the “faux parent page” retriever at the top of the template, and declare it a global in any template files that need it. This would avoid repeated look ups of the faux parent page.

An Example: Seeing it All Put Together

A great example of a WordPress-powered CMS that pushes use case #2 to its limits can be seen at the home of m62 visual communications, at http://www.m62.net.

M62-pharm in Advanced Power Tips For WordPress Template Developers

All of the navigation items across the top (Presentation Theory, PowerPoint Slides, etc) are pages associated with post categories. The sub-navigation on the right contains sub-pages that are also associated with sub-categories. For example, in the screenshot above (available here), the visitor is on the “Pharmaceutical Templates” page (faux category), which is a child of the “PowerPoint Templates” page (also a faux category). The content starting with “Download free” (below the page title) is the content from the “Pharmaceutical Templates” page. The posts below the “Next Steps” bar, titled “Latest in Pharmaceutical Templates”, are the posts inside that category. The applicable related category is automatically discovered by the WordPress template, populating the category name “Latest in X” and recent posts. Now let’s look at one of the posts inside that category.

M62-post in Advanced Power Tips For WordPress Template Developers

Using the tips outlined above, the individual post retains the feel of being within the “Pharmaceutical Templates” page, right down to the breadcrumb navigation and “current” states in the navigation.

But not only does m62.net use category / page associations for most top and second level navigation items, it actually extends the concept to tags. The 5 “tabs” on the top right actually represent post tags, and each has a “tag page.”

Stay tuned!

The second part of the post will be published here, on Smashing Magazine, in two weeks. Hence, you may want to subscribe to our RSS-feed and follow us on Twitter. Any ideas or suggestions? Comment on this article!


Would you like to see more similar articles on Smashing Magazine?(survey)


© Jacob Goldman for Smashing Magazine, 2009. | Permalink | 14 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: PHP, templates, wordpress

November 11 2009

10:13

Free “Site Under Construction” Template

Free “Site Under Construction” Template

This template is a simple one page “Under Construction” template that allows you to keep your users informed,while you work at your website.The template has a jQuery slider containing 3 slides:one with your social pages,like Twitter or Facebook,one with a subscribe-by-mail form and another one with an area for writing what you do. Some more features are: jQuery Countdown Script! jQuery Slider! .PSD File included! Modern and clean web typeface! And of cource a documentation about how to set up the page!

URL: http://www.ourtuts.com/free-site-under-construction-template/


Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...