In this tutorial, we’ll be creating an Autumn themed Calendar for this month of September. The style here is dark and grungy and the final result is appropriately titled the ‘The Fall.’ This being the season of falling leaves from trees. The techniques used to attain the final image are the application of Blend modes, the use of grunge brushes
Step 1
First off, open a new document Ctrl+N, and set its document size to 1280 x 768px and the resolution to 140dpi. The wood texture below was from www.mega-tex.nl. Drag wood texture into your working document window.
Step 2
Press Ctrl+U for the Hue/Saturation Dialog box and then reduce the Saturation to -42. This is to fade the wood’s colour a little. We don’t intend to make the colours of our composition too vibrant.
The result:
Step 3
Go to Filter> Render> Lighting Effects and set the Lightening parameters below:
The Lighting Effects result:
Step 4
Now to paint over the lightened wood texture with a grunge specific brush. Download a set of grunge brushes by ART-D. Select the ‘BB Grunge_9′ brush from the Brushes Palette and increase its size to 1166px and the brush colour that is, the foreground colour to #1f1710.
Step 5
Create a new layer and paint just once over the wood image.
Step 6
Change the layer’s Blend mode to Soft Light.
Step 7
Create a new Curves Adjustment Layer by clicking on the fourth icon from the left on the Layers Palette or go to Layers> New Adjustment Layer> Curves. Drag the midpoint of the straight line downwards to reduce the brightness of the image slightly.
We have now a dark wood surface that appears to be whittling away. Name this layer ‘grunge.’
This is the arrangement of the layers on the Layers Palette so far.
Step 8
Set the Foreground colour to #322c28 and from the Tools Panel, select the Rectangle Tool (U) and on its Options bar, select the ‘Fill Pixels’ icon.The square to be
drawn would be automatically filled with colour.
Step 9
Double-click on the ‘block’ layer for a Layer Style and select the Drop Shadow style. Set its parameters as shown below:
The Inner Shadow Layer Style adjustments:
Step 10
Create a new layer and with the Brush Tool (B) selected, right-click to choose a new grunge brush – ‘BB Grunge_7 ‘and ‘BB Grunge_9′ to be precised. Set the brush colour to #262321 and reduce its opacity to about 85%. Paint on the block not minding if you exceed its boundaries and then on the layer, right-click to select a ‘Clipping Mask’ to ‘fasten’ the brush painting to the block.
Step 11
Select a Soft Round brush and change its colour to #181412. Paint over the block as shown below:
Step 12
Head on to Filter> Blur> Gaussian Blur and set the Blur Radius to about 45.5 pixels. *Note:when the effect has been applied, there’s no need to erase around the edges of the block where the blur might have spread. Finally, set the layer’s Blend mode to Soft Light.
Step 13
For a new layer, select the Elliptical Marquee Tool (M) and draw a circle that just encompasses the lower right corner of the block. Use a White Soft Round brush with an opacity of 75% to paint within the circle. Press Ctrl+D to clear the selection.
Step 14
Apply a Gaussian Blur of a Radius of about 60%. This in effect, increases the light intensity at a point without affecting other areas of the image.
For this layer ‘light,’ reduce the blur’s opacity to 60%.
Step 15
We’ll now add text for the date by selecting the Type Horizontal Tool (T).With the Tool, drag to create a rectangular shape.
Step 16
On the Type Tool’s Options bar, choose the font type as ‘AgencyFB‘; the style as ‘Bold‘; size to 24pt and colour to black. Alternatively, these adjustments can be made on the Character Panel. Enable this if not visible already, by going to Menu bar and select Window> Character. Type in the numbers for the month of the September; hit Enter to go into the next row for another set of numbers and so on.
Step 17
For a new layer, type in the numbers “30, 31″ for the numbers of the previous date and “1, 2, 3″ for
the numbers of the next date (the text colour doesnt matter for now).
Step 18
To make the date correspond with the direction of light, we’ll add a Gradient to it. Double-click on the first date text layer and select a Gradient Overlay Layer Style. Edit the Gradient by changing the Color Stops to the colours show below:
Step 19
Reduce the Gradient’s Opacity to 85% and set its Angle to -72.
Step 20
Add a Drop Shadow style with the adjustments below:
Step 21
For the second date “30, 31, 1, 2 and 3″, add a Bevel and Emboss Layer style. Set its parameters as shown below:
Step 22
Still on the second date, add a Color Overlay Layer style and set its colour to #957f6fand reduce its Opacity to 85%.
The final result:
Step 23
Also type in the days of the week and on the Character Panel, set the font colour set to #181615.
Step 24
For the month and the year, type in “SEPT . 2010″ and the Character Panel set the font type to “Broken Ghost” (you can download it for free at dafont.com)and the font colour to #363535.
Below we have a font with uneven edges that tallies with grittiness of the whole composition.
The completed date for September:
Step 25
Select a Spatter brush for the brush and set its Opacity to 85% Erase a little the set of numbers last row and the last two numbers on the row before. The aim is to make the numbers appear scratched.
Autumn wouldnt be complete without leaves; these maple leaves were downloaded from www.sxc.hu.
Step 26
Drag any maple leaf you fancy into the main document window and use the Magic Wand Tool (W) to extract the leaf from its background. Just click anywhere outside the leaf and hit the Delete key to clear the selection and you’re done! You may have to use the Eraser Tool to clear any hint of white left on the leaf.
Step 27
Use the Move Tool (V) to position the leaf and with the Free transform Tool (Ctrl+T), you might have to scale the leaf down.
Step 28
For the ‘Maple leaf’ layer, add a Drop Shadow Layer style:
Step 29
Follow up with an Inner Shadow style making the adjustments below:
The result below:
Step 30
Select the Brush Tool as a grunge brush and paint just once over the leaf.
Step 31
Create a Clipping Mask for the layer by right-clicking it and selecting this option. Set the layer’s Blend mode to Soft Light and reduce its opacity to 70%.
Step 32
With the Elliptical Marquee Tool, draw a circle and fill with a white colour and deselect or you could just use a Soft Round brush with the appropriate size and stamp a white brush mark over the leaf.
Step 33
Have the round white circle blurred with a Gaussian Blur and set the layer’s Blend mode to Soft Light. Also erase around the leaf to clear any paint outside it.
And this is our Calendar for September. Like I mentioned earlier, its titled “The Fall.”
Today we are glad to release iCandies Icon Set, a set with 60 high quality icons in 64×64px, 48×48px and 32×32px, available in .EPS, .AI and .PNG. The set is designed by the talented folks from IconEden on a sole purpose of giving your projects a sleek and geeky style or provide crisp, attractive icons for your modern and fashionable-looking interfaces. All the icons in this pack — 60 icons in total — are designed in Round Rectangle shape.
Download the icon 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.
As always, here are some words from the designers of the set:
Dear Smashing Magazine readers,Â
IconEden’s 2nd birthday is coming! And we’re as excited about it as you’re. To celebrate our two years of rocking the icon design world, IconEden collaborated with Smashing Magazine to craft a small set of 60 wonderful icons called “iCandies”! And it’s all yours.Â
Similar to previous collections, iCandies comes in vector and pixel formats and can be immediately be built into your projects at no cost. You can use the icons for any commercial and personal projects.
Thank you very much, guys! We appreciate your efforts.
[Offtopic: by the way, did you already get your copy of the Smashing Book?]
Related Posts
You may be interested in the following related releases:
In this post we release a yet another freebie: Academica WordPress Theme, a free WordPress theme designed specifically for educational websites such as universities, schools etc. It’s a flexible and versatile free theme that can be easily customized and branded for any university, academy or non-profit organization. The theme is designed by ProudThemes and released for Smashing Magazine and its readers. As usual, the theme is free to use in private and commerical projects.
Download the theme for free!
The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.
The theme was developed for WordPress 3.0 (compatible with 3.0.1)
Modern, three-column clean design
Setting up Academica Theme is easy and takes just a few seconds. The theme can be uploaded directly from the Dashboard > Appearance > Themes page. No need to edit any files — everything can be done from the Theme Options page.
5 built-in icons to share and link to your profiles on Twitter, Flickr, Facebook, LinkedIn and Youtube
The theme allows enabling/disabling of a jQuery-based content slider on the homepage for showing your photos
Academica Theme uses a jQuery-based drop-down menu with a fade-in effect
9 sidebars (widget areas) and 3 custom widgets developed for this theme
3 custom page templates and 2 custom post templates
Comments area with threaded comments (“reply”-functionality). See live demo.
Behind the design process
As always, here are some insights from the designers:
“Most theme developers create a lot of magazine and portfolio themes for WordPress, however the education niche is mostly ignored. We decided to do something about it, and create a flexible and versatile free theme that can be easily customized and branded for any university/academy or non-profit organization. Of course, the theme can be used in other niches as well, no restrictions or whatsoever. After reviewing a ton of web-sites of educational institutions, our eyes fell on the web-site of Massey University of New Zealand. With a rather general layout and color palette, we decided to make the navigation and all styling pure-CSS, without any gradients, so that the theme can be customized much faster and easier.”
Thank you for your great work, guys. We appreciate your work, your time and your contributions to the design community.
To mock-up the user interface of a website, software or any other product, you’ll need some basic UI elements. And this is where wireframing kits and UI design kits come in handy. When you want to create a low-fidelity prototype for your projects, you can use these kits to give your idea a certain shape, keeping it abstract and not losing yourself in details.
In this post, we’ve prepared an overview of useful web and mobile user interface kits, handy PDFs and resources that you can use in your projects. We’ve carefully selected the most useful kits and resources to get you going in the early stages of a project.
[Offtopic: by the way, did you already get your copy of the Smashing Book?]
Free Mobile GUI PSD
Android GUI PSD This Android GUI PSD is based on elements of the Android 1.5 GUI and was made to help the open-source community with its Android application mock-ups. Most of the elements and phone illustrations are done in vector paths and so are easily resizable. Android Sans was used for the text.
RIM Blackberry PSD A complete PSD file with layer styles, this has 135 layers of Photoshop goodness.
Android Sketch Stencil Version 1.0 A Sketch-style Android OmniGraffle template. The purpose of the sketch style wireframe is to prevent the audience from thinking about visual design and encourage them to focus instead on functionality and behavior.
All elements of Maemo 5 GUI in PSD This downloadable PSD file contains GUI template elements for the Maemo platform. These are indispensable for prototyping GUI applications running on Maemo devices.
iPhone 4 GUI PSD (Retina Display) GUI PSD kit for creatives who design for the retina display (640×960). The file is huge, both in file size (62.7MB) and dimension (4074×2986). You’ll need to work at 25% – 50% even on the largest screens to roughly grab elements before zooming into 100% for the actual work.
iPad GUI Kit in PSD This version offers a canvas size true to the iPad at 768×1024. In addition, most of the graphical elements are provided in vector format, allowing you a lot of room to scale up for high-resolution presentations. This version is layered in Photoshop, making it easy for you to go nuts with your mock-ups and client presentations.
Android 1.6 Wireframe stencil for Omnigraffle Download this beautiful wireframe stencil add-on for OmniGraffle 5.x. Use this toolkit to wireframe Android-based apps and websites on the 1.6 Donut SDK.
Google Android GUI PSD Here are the GUI elements of Android, built using vectors to scale.
iPad GUI PSD Kit This pack includes full size graphics, as well as 256, 128 and 64 pixel icon sizes. The pack includes four sizes of the iPad graphic in PSD, PNG and Mac ICNS formats.
Fireworks template for Android In this Fireworks template, Android UI elements have been redrawn as vector images. In the folders, the elements have been mostly labeled according to the Android vocabulary.
Sexy Vector Cell Phone This phone can be scaled to any size. Easily add your own image to the screen with the included object mask. All objects are layered, grouped and labeled for easy customization.
iPad Stencil for Omnigraffle Contains backgrounds, title bars, buttons, selectors and other iPhone UI elements. The text is fully editable in lists, title bars, buttons and scroll wheels.
iPhone GUI Elements Some beautiful iPhone elements. All graphics are layered Photoshop files.
iPad and iPhone Design Design your application for the iPhone, iPod Touch and iPad with this exhaustive set of stencils. All stencils were created by hand with native OmniGraffle shapes, and groups and can be scaled, resized and exported to other vector formats in Graffle.
Design Stencil for iPhone and iPad A stencil for designing OS applications for the iPhone, iPod Touch and iPad. The stencil for now is targeted at developers familiar with the default characteristics of the views and controls provided by UIKit.
Apple iPad fully editable PSD A fully editable Apple iPad in PSD format. Every element you see is editable via vector masks, and everything is scaleable.
Palm Pre GUI PSD This set contains a PSD to help designers pitch and develop polished concepts using Photoshop.
iPhone UI Vector Elements Most visuals for applications start out as vector mock-ups in Adobe Illustrator. So, here are some cool iPhone UI vector elements. And there are even a few good Photoshop resources and even a nice OmniGraffle iPhone UI file or two in there.
iPad Vector GUI Elements: tabs buttons menus icons This set contains almost all of the iPad UI elements, including buttons, tabs, menus, keyboard and balloons. Useful for designers and developers, it includes scalable and totally editable vector versions (AI).
Free Social Networking GUI PSD Kits
Free Full-Layered Facebook GUI PSD Kit The idea behind this kit is to speed up the prototyping of Facebook application UIs and Facebook fan pages, sparing you from drawing all the comps and letting you customize all the text, buttons and data as you need. The kit is free to use in all projects, without any restrictions.
Facebook GUI Free PSD Resource A Facebook graphic user interface (FBGUI) resource kit for Photoshop to make your work easier.
Facebook Applications A sizable collection of elements for creating wireframes for Facebook applications.
Best Practice UX Forms Stencil v1.1 A comprehensive release of stencil that follows best practices for UX form design, providing three different ways to lay out forms, each with its own benefits. This version also provides different button layouts, a progress indicator, a Captcha code input field, labels and more.
Form Elements UI Kit Form elements stencil from the Design Stencil kit in the Yahoo! Design Pattern Library.
Wireframe Shapes Here is a set of shapes for making wireframes in OmniGraffle version 5.x ( forMac OS X). It consists of most of the basic elements you’ll need to create user interface specifications.
Wireframe kit for UI Designers A set of various wireframes, such as product details, list of items, front page, mobile phone.
MBTI sketching paper for ideation MBTI sketching paper for ideation sessions. It helps you think inside the box of four personality traits. Describe a design challenge and the problem to solve on every piece of paper. There’s also space for annotations.
A4 sketching paper This sketching paper can be used after generating ideas for functionality. Design preliminary screens based on the ideas you come up with.
Wireframe Magnets (DIY Kit) This DIY magnet template is based on the Konigi wireframe stencils, and it includes three sheets of elements that might be useful for whiteboard prototyping. Simply download and print the PDFs onto magnet sheets, optionally laminate them if you intend to use with dry-erase markers, and then cut them out.
Wireframe template A useful print-and-sketch template available for downloading.
iPad Idea Sheet A total of three sheets: one full size (landscape), one at 70% reduction (vertical) and one at 50% reduction (landscape). The 80 tiny dots make it easy to split the screen horizontally and vertically.
Free Photoshop browser template Need a clean browser screenshot for a design presentation? Look no further. These free professional Photoshop browser templates come in 1024×768 and 800×600 pixel sizes and all kinds of flavors.
Interactive Sketching Notation 0.1 The idea behind this notation is to visualize user interface states as well as user actions in a clear and rapid manner.
MobileMe Full iPhone GUI For use with WinterBoard, this is a beta release, so there may be unthemed elements.
Dragnet website wireframes kit v 0.9 Dragnet website wireframes kit v0.9 is a common library for Adobe Fireworks and contains over 25 objects that are useful for rapid prototyping of websites. It is completely free to download and use. The kit contains common Web design elements, such as scrollbars, buttons, menus and alerts.
User Interface Design Framework This pretty and comprehensive design framework contains a GUI library of hundreds of vector elements for interface design. This minimal UI icon set has 260 vector icons and a library of 200 styles for Illustrator.
Browser Form Elements PSD Included here is a set for Firefox 3 for Mac and another for IE7 on Vista.
Sketching and Wireframing Kit Here is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.
Photoshop Form Element Templates This set includes all common form fields and mouse and link pointers, optimized for ease of use.
Web Browser Elements This excellent and useful kit contains pull-down menus, input fields, radio buttons, check boxes, buttons, text fields and scroll bars, all in an easily editable PSD file.
UI Design Kit This Web UI template kit is made completely with shape objects, which in some cases convert to SmartObjects, so they’re totally scalable.
Wireframe Symbols This download contains a symbols library and a full Adobe Illustrator file, with all of the elements spread out on the art board. To install this library, just drag and drop the Wireframe Symbols.ai file into your Illustrator Symbols directory. Once you are in Illustrator, go to your Symbols palette, and load the library.
Web UI Element Pack This pack, in PSD format, contains 19 elements including loading bar, default and clicked-state buttons, button toggle, icons for “Close,” “Next” and “Previous,” paging icon and slider.
OmniGraffle Stencil for Ext JS v3.0 This updated version of Ext JS Omnigraffle stencil contains many improvements and additions, namely the recreation of most Ext JS elements as Graffletopia shapes or groups, especially helpful for resizing titles, tables cells and so on.
Flex 3 Stencil Includes all Flex components from the Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tooltips and errors.
Aqua GUI A series of elements inspired by the GUI Design Palette 1.2 and the Mac OS X interface stencils, based on Aqua, and mainly intended to make simple window designs.
Web Wireframe Kit Here is a simple way to plan a layout and a cost-effective, time-saving wireframe kit for Web designers.
UI Buttons and Icons This set contains 165 high-quality UI icons and buttons in five different colors. Available in AI, JPEG and SVG formats.
Quommunication Stencil Kit This beautiful set contains design elements for wireframing, RSS feeds, colors, advertising units, browser windows and grids.
Mac OS X Interface 2 A Leopard-y interface stencil kit that makes extensive use of tables for maximum flexibility while maintaining pixel precision.
OmniGraffle UX Template The OmniGraffle Pro (v. 5) template for interface design. Includes shared layers for basic UX document needs (e.g. title page, wireframes, storyboards).
Template for Blueprint CSS Comps This template allows you to create visual design comps to be implemented using a CSS layout framework. The Adobe Illustrator document features a 24-column grid for CSS frameworks such as Blueprint.
Apple Elements for OmniGraffle Stencils of Apple hardware and miscellaneous networking components. Excellent for creating physical diagrams.
DeviantART ID PSD Kit These 15 professionally designed, fully customizable templates include MINI and Original ID templates.
Browser Screens and Website Elements Here is a useful set of vector assets you can use to mock up client projects, present your work or get a quick visual while laying out a website.
The Importance of Wireframing A comprehensive article on how wireframing plays an important role in information architecture
The Future of Wireframes As we move into the next decade of Web design, it’s time to re-evaluate our understanding of wireframes, a tried and tested user experience staple.
Wireframing Is Not a Religion Wireframes are an indispensable tool for design thinking, a digital sketch pad ready to be drawn and erased, scrapped or resurrected at any moment.
Five Commandments for Wireframing Paul Boag is a wireframes fanatic and believes they are an indispensable part of the development process. He espouses five unbreakable rules.
20 Steps to Better Wireframing Possibly the biggest mistake made in any development project is failing to plan. This article goes over why.
Resources and Round-Ups
I Love Wireframes A tumblog dedicated to wireframes, prototypes and mock-ups.
Wireframe Showcase This site is a place to look at websites based on wireframes and analyze how the designers transformed mock-ups into working designs. Because the wireframes and designs were submitted by their creators, Wireframe Showcase includes a short explanation of each piece. Most of the websites grew out of digital mock-ups, which have the advantage of being easy to tweak and rearrange. The result is a pleasing and informative collection of wireframes.
50 Free UI and Web Design Wireframing Kits and Resources This post focuses on wireframing tools and standalone applications, as well as resources you need to build your own wireframe: wireframing kits, browser windows, form elements, grids, Mac OS X elements and mobile elements, which you can use in any graphics editor such as Photoshop or Illustrator, or with pen and paper.
Useful (Offline) Utensils and Toolkits for Designers Why start completely from scratch when you can use one of these pre-made guides to save time and better direct your creative energies? In this article, you will find a great list of free downloadable tools, as well as a collection of notepads and other products to purchase for offline planning and design.
Related Posts
35 Excellent Wireframing Resources Here are more than 35 resources for creating better wireframes, including tutorials on different methods and a variety of tools available.
Free Printable Sketching, Wireframing and Note-Taking PDFs In this article, you will find a concise collection of ready-to-print sketching, wireframing and note-taking templates. Most are geared to the design community, but some could be used in any industry for any purpose.
Would you like to see more similar posts on Smashing Magazine?
Today we are glad to release a yet another freebie: Polaroid Magento Theme, a professional design skin for the shops powered by the popular open-source ecommerce web application Magento. The theme was designed by eCommerce-Themes and released for Smashing Magazine and its readers. As usual, the theme is absolutely free to use in private and commerical projects.
Download the theme for free!
The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.
The Polaroid theme includes the following features:
the Polaroid effect is made with CSS3. The product grid displays products in random orientations.
Product zoom: the category page was spiced up by adding a zoom functionality to the product grid. When you mouse over a product, it zooms in to show the product in more details.
The .zip-package also contains additional modules “Best Sellers”, “Features Products”, “New Products”, and “Multi Shipping”.
As always, here are some insights from the designers:
We wanted to go beyond the boundaries of Magento and break the usual design patterns. We really wanted to try something new, add rich CSS3 features to the Magento theme and experiment a bit with its different features. We are very pleased to share this theme with the community, especially with Smashing Magazine readers.
Thank you, guys. We appreciate your work and your good intentions.
[Offtopic: by the way, did you already get your copy of the Smashing Book?]
Related Posts
You may be interested in the following related posts:
