Today we are glad to release a Payment Icon Set, a set with 18 payment icons in PNG format, in the resolutions 32×32px — 128×128px. This set was designed by Phil Matthews and released especially for Smashing Magazine and its readers.
The icons are inteded to be used on e-commerce websites where you can show what types of payment the shop accepts. Each icon comes in curved and straight edge variations. As usual, the set is free to use in private and commercial projects — no credit is required.
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 insights from the designer:
This icon pack includes 18 different payment icons in PNG format. These icons are released free of charge and can be used without credit. The icons cannot be resold in any way. The copyright of each logo is owned by the respective payment company and I do not take responsibility for any part of the design of these. They are inteded for you to show what types of payment your website accepts. Please spread the word if you like this icon set or find it useful. Thank you.
— Phil Mathews
Thank you very much, Phil! We really appreciate your efforts.
These are great times for front-end developers. After months of exaggerated excitement about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes. We see fewer “pure CSS images” and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. And that’s a good thing!
In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills. Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping, but share your insights and your experience instead. Also, notice that some techniques are not only CSS-based, but use JavaScript, or JavaScript-libraries as well.
[Offtopic: by the way, did you already get your copy of the Smashing Book?]
CSS Techniques
Now Playing: transitions and animations with CSS Tim Van Damme showcases a fairly simple CSS design that uses transitions, animations and subtle hover-effects to produce an engaging user experience. Also, notice the use of favicons as background-images for attribute selectors. Unfortunately, the demo works best in Webkit-browsers, but it degrades gracefully in other modern browsers. Unfortunately, we didn’t find the documentation of the technique.
CSS3 range slider, checkbox + radio button A demo of HTML input elements made with CSS3. They include realistic range sliders, checkboxes and radio buttons. The designer used minimal markup, no JavaScript and no images. Downside: there is a ton of messy CSS3 code, and Safari renders the page best. Chrome is close, but the 3D perspective doesn’t quite work.
CSS3 Media Queries CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.
Proportional leading with CSS3 Media Queries A fluid layout should be responsive to the width of the columns of text. This problem, of proportional leading, is what holds many designers back from adopting fluid layouts. In this article, Andy Clarke explains how you can achieve proportional leading for your typography using CSS3 Media Queries.
Responsive Web Design This article by Ethan Marcotte explains how to use fluid grids, flexible images, and media queries to create elegant user experiences with responsive web design. Check out the demo — of course, don’t forget to resize the browser window.
Popout Details on Hover with CSS This tutorial describes a technique that presents details of a content item on hover. The solution is quite simple and uses position: relative and z-index to achieve the effect.
CSS3 Border-Radius and Rounded Avatars Trent Walton came up with a clever technique to create rounded images (in this case, rounded avatars) with the border-radius property. The solution is simple: create a frame class for your image, and give it a border. Then, round both the frame and image with the border-radius property, and you’re done: a simple technique with no additional images or scripts — just an extra line of code. You may want to check Tim Van Damme’s similar CSS technique, too.
CSS3 Rounded Image With jQuery “The other day I was trying to style CSS3 border-radius to image element and I realized that Firefox doesn’t display border-radius on images. Then I figured a way to work around it — wrap a span tag around with the original image as a background-image.”
The Simpler CSS Grid Why restrict your layout so that it can fit into this 960gs? A grid is supposed to help you in design, not to limit your creativity. The 978 grid is not just about increasing the page width, but to loosen the gutter space, so users can read it more comfortably.
Correcting Orphans with CSS Overflow When typesetting, designers try to avoid leaving just one or a few words hanging on a line at the end of a paragraph. Doing so is considered poor typography because it leaves too much white space between paragraphs and interrupts the reader’s eye movement (see the example below). A simple typographic solution is to rework the line by adding indented paragraph endings. But the problem is particularly annoying when aligning a paragraph next to an image that exceeds the paragraph’s height. Soh Tanaka has come up with a simple and quick solution to this problem with CSS.
How to create a kick-ass CSS3 progress bar New features introduced in CSS3 allows developers to create stunning visual effects: this post exaplains how you can create a fancy progress bar using CSS3 and jQuery, without Flash or images.
CSS pseudo-element Solar System using semantic HTML This is a complete reworking of another author’s basic reproduction of the classic model of our solar system using CSS. By using pseudo-elements (again) I wanted to reproduce as much as possible without presentational HTML and JavaScript. In addition, by hooking into HTML microdata I’ve put together a rough scale model of the solar system that demonstrates some further uses of CSS generated content.
Advanced Columns using the :nth-child(N) Imagine this task: you have to display product listings as columns laid out in a zig zag pattern. The first instinct is to split each section into its own list, but if the site is running on a CMS, all products had to be spit out in one giant list. Given this scenario, you can use pseudo-selectors :nth-child(N) and a bit of jQuery to help with IE support.
Lost World’s Fairs Trent Walton explains the workflow and design techniques used to create the Lost World’s Fairs website to celebrate the launch of Internet Explorer 9. The result is truly remarkable.
New Twitter Design with CSS and JQuery. This post explains the techniques used by Twitter’s new web interface and re-creates its interactivity using CSS and jQuery.
Europe, CSS & jQuery clickable map CSS converts a simple list of countries into the fully clickable map. Works with disabled style sheets and JavaScript, as well as on mobile devices. A simple code does not require Flash Player or other plug-ins!
Simple Tooltip w/ jQuery & CSS There are a lot of tooltip plugins out there, but not many of them explain what exactly goes on in the logic of a tooltip. I would like to share how I’ve created mine today, and am also open to any critiques and suggestions for those jQuery ninjas out there. Lets take a look.
Super Cool CSS Flip Effect with Webkit Animation Webkit support some fancy transform and animation effects that can really spice up the web experiences for users with Safari or Chrome browsers. Here’s a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a Transformers themed top trumps design.
CSS3 Border Images for Beautiful, Flexible Boxes The CSS3 buzz is in full swing, and many of CSS3′s most useful properties are receiving a fair bit of attention. Properties like border-radius, text-shadow, custom gradients, and even CSS3 transitions have been shown to be quite practical, resolving real-world design issues with minimal markup and maintainable code.
Animated wicked CSS3 3D bar chart Create a beautiful 3D bar chart. But instead of creating a “stacked” one, several bars are placed under each other. When hovering, the animation shows and the bar grows to the appropriate size.
CSS Border Tricks Since I released my new redesigned blog, a lot of people have asked me how I styled the pressed effect on my category navigation. I would like to share some simple border style tricks to get various effects for your next project.
The Background Trick With CSS This page provides links to a couple of examples for the trick used on Design Made In Germany 5 where a couple of layers are used and the middle layer has a fixed background, while other layers have absolute positioning. The visual effect is unique and interesting. Unfortunately, the explanations are in German, but the demos are self-explanatory.
Footnotes With CSS in their simplest implementation — using sup tags and linking within the page — footnotes aren’t very user-friendly. They interrupt the experience, requiring the user to click the link, read the information and then return to the page with the browser’s “Back” button.” Lukas Mathis has come up with an elegant solution to improve this user experience: his jQuery script shows the content of footnotes as soon as the user indicates that they are interested in it — i.e. when they move the cursor over the footnote symbol.
Why and how to create Microsoft Office Minibar with jQuery and CSS3 Although many will argue that Microsoft products are an example of a good design, Minibar was one of design refreshments that came out with the Office 2007. It is a variation of a toolbar that exposes context-related functionality. In case of MS Word, context is a text selection. Since Minibar always pops up near the mouse pointer it enables users to quickly perform actions related to a selection.
CSS image replacement with pseudo-elements (NIR) An accessible image replacement method using pseudo-elements and generated-content. This method works with images and/or CSS off; works with semi-transparent images; doesn’t hide text from screen-readers or search engines; and provides fallback for IE6 and IE7.
Diagonal CSS Sprites – Aaron Barker So you’ve got your sprite created, and it’s working great. 30+ icons in one image, and major HTTP connections saved. You have made your little corner of the interwebs a little happier and faster. Steve Souders would be proud.
Sneak — Fixing the background ‘bleed’ I recently came up with an issue in Safari where the background colour of an element seemed to “bleed’ through the edge of the corners when applying both borders and a border-radius (see the image above). I then found a solution, and it came in the form of the -webkit-background-clip property.
Zebra-striping rows and columns Zebra-striping tables is certainly not a new thing; it has been done and discussed for years. They (allegedly) aid usability in reading tabular data by offering the user a coloured means of separating and differentiating rows from one another. We can create zebra-stripes using the nth-of-type selector — but we can apply it not only to rows but also columns.
Feature Table Design “I ran into the feature table design and I was inspired to try and replicate it. First in Photoshop, then in HTML/CSS. Recreating cool stuff you find on the web is definitely an excise I recommend (a few days after, I read this – couldn’t agree more). As these exercises typically do, it lead me down some interesting paths.”
ShineTime – A jQuery & CSS3 Gallery With Animated Shine Effects This article shows how you can create an animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve.
The Mac-style Skype Application Menu with CSS3 and jQuery This tutorial re-creates the Skype application menu in the web browser. The final design mimics not the full layout — only the menu where all your friends are listed. For the nifty layout CSS3 is used and jQuery is used for the extra functionality.
Further Interesting Techniques
Object-oriented CSS All the resources you need to get started are linked from the left navigation. Start by downloading the base files. Exercises one and two can be completed in Firebug if you are comfortable with it. Then you can download the finished file at the beginning of Exercise 3.
CSS3 text-shadow and box-shadow trick All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today. That’s handy, because it means no worrying about matching a precise hex colour shadow to a specific hex colour background. Instead just let the browser blend.
Data theft with CSS Mozilla has released security updates to Firefox 3.5 and 3.6 that include defenses for an old, little-known, but serious security hole: cross-site data theft using CSS. These defenses have a small but significant chance of breaking websites that rely on “quirks mode”Â� rendering and use a server in another DNS domain (e.g. a CDN) for their style sheets.
Show Markup in CSS Comments “Let’s say you are creating a CSS file for a modular bit of a webpage. Perhaps you are the type that separates your CSS files into bits like header.css, sidebar.css, footer.css, etc. I just ran across an idea I thought was rather clever where you include the basic markup you will be styling as a comment at the top of your CSS file.”
How to Micro-Optimize Your CSS Minification shrinks file size significantly, by as much as 30% or more (depending on input code). This size-reduction is the net result of numerous micro-optimization techniques applied to your stylesheet. By learning these techniques and integrating them into your coding practice, you’ll create better-optimized CSS during the development process. Sharper skills, cleaner code, faster downloads — it’s a “win-win”Â� for everyone.
Transparent Borders with background-clip Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don’t think Facebook sports the look anymore, but it’s still rather neat.
Showing and hiding content with CSS 3 One very common feature is the expanding/collapsing or shown/hidden box, whether this is a tabbed interface, a content “tray” on the side that can be slid out and then put away again, or a complex tree menu with expanding/collapsing sub-menus. Generally, these features are implemented via JavaScript, however using CSS3 it is possible to create such content using only HTML and CSS — no JavaScript required.
CSS for Blockin’ Stuff If you want to use user stylesheets, ad blockers, flash blockers, or whatever else, more power to you. Here are some CSS projects intended for blockin’ stuff.
CSS Tools and Services
ProCSSor: Advanced CSS Prettifier This online tool allows you to submit your CSS (either copy and paste the code, upload the file or point to a URL) and choose your formatting options. You can save options and reuse them every time you run code through ProCSSor. You can separate properties and selectors across multiple lines, indent up to four levels with either the space bar or tab key and even sort properties. The tool also has a “Columnize” mode, which groups elements into columns, making for a more elegant style sheet; you need to deactivate “Fail-safe mode” to use it.
Selectivizr – CSS3 selectors for IE 6-8 selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest. Selectivizr adds support for 19 CSS3 pseudo-classes, 2 pseudo-elements and every attribute selector to older versions of IE. It can also fix a few of the browsers native selector implementations.
CSS Desk CSSDesk is an online HTML/CSS sandbox. The tool allows you too experiment with CSS online, see the results live, and share your code with others. You may want to check Rendera , too.
The Square Grid A quite simple CSS framework that is based on 35 equal-width columns. It aims to cut down on development time and help you create well-structured websites. The total width of the grid is 994 pixels – which the majority of modern monitors support. You can use the grid in a variety of columns: 18, 12, 9, 6, 4, 3 and 2. The pack contains sketch sheets for printing (PDF), design layout templates for Photoshop, InDesign and Illustrator and source code files with explanations.
Instant Blueprint Instant Blueprint allows you to quickly create a web project framework with valid HTML/XHTML and CSS in only a matter of seconds, allowing you to get your project up and running faster. You may want to check Project Deploy, too.
HTML5 Boilerplate HTML5 Boilerplate is the professional base HTML/CSS/JS template for a fast, robust and future-proof site. You get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain ajax and flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on. You may want to check HTML5 Reset, too.
HTML5 Starter Pack A a very basic HTML5 starter pack with a clean and ordered directory structure that will fit for most projects. The pack contains the most common files (HTML, CSS, JavaScript), as well as a basic Photoshop web design template, again with a group’s structure that would fit for most projects.
PrimerCSS Primer undercoats your CSS by pulling out all of your classes and id’s and placing them into a starter stylesheet. Paste your HTML in to get started.
Hardboiled CSS3 Media Queries These hardboiled CSS3 Media Queries are empty placeholders for targeting the devices and attributes that you may be interested in making responsive designs for. The stylesheet covers smartphones in portrait and landscape modes, iPads, iPhone and large screens.
Grid Generator This tool allows you treate your own custom CSS grids. You can select base unit, number of columns, column width, gutter width and margins and download PNG as well as a CSS source code.
Baseline framework Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system.
Gridulator Gridulator is a quick and easy grid calculator for web designers and developers. You can choose the overall width and number of columns, select the column width and gutter width and download the PNG of the grid.
Dust-Me Selectors Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they’re encountered.
zen-coding – Project Hosting on Google Code Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions — similar to CSS selectors — into HTML code.
Turbine Turbine is a collection of PHP-powered tools that are designed to decrease CSS development time. It includes packing, gzipping and automatic minification of multiple style files, “CSS variables”, selector aliases as well as nested css selectors and OOP-like inheritance, extensions and templating features.
CSS Usage CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site.
CSS Reloader CSS Reloader is a browser extension for Mozilla Firefox and Google Chrome, that allows you to reload all the CSS of any site without you have to reload the page itself. The goal for this browser extension is to enable developers to become more productive.
CSS Frame Generator This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure — each selector and all of its properties and values in one line. This may be a bit strange for you at the beginning, but if you get used to it you’ll find it much better. It’s essential to use a predefined properties order, such as this one:
Switch CSS Switch is a full featured, production ready CSS preprocessor. It runs under Apache with mod_python, or as an environment-agnostic command line tool.
CSS Tools: Diagnostic CSS Validation is great, but it won’t catch everything. For example, if you have a link where you forgot to add a URL value to the href attribute, the validator won’t complain. The syntax is valid, even if it’s a broken experience. Similarly, the validator will be happy to let through empty class and id values.
IE Print Protector – ieCSS IE Print Protector is a piece of javascript that allows you to print HTML5 pages in Internet Explorer. IE Print Protector helps IE render HTML5 elements correctly, both on screen and in print.
CSS reset, CSS framework, Toucan CSS reset It is a reset stylesheet. Unlike Meyer’s or YUI’s, it not only removes the default styling of HTML elements, but also rebuilds the new generic rules for the typography, headings, paragraphs, lists, forms, tables etc. It’s light-weight, flexible and browser-friendly.
PHP CSS Browser Selector CSS Browser Selector is a very small javascript with just one line php function which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.
CSS3Machine for iPad CSS3Machine makes the most advanced CSS3 styles simple. Easily create stunning gradients, drop-shadows, and 3D transforms. CSS3Machine also builds, edits, and exports WebKit animations.
minify Minify is a PHP5 app that helps you follow several of Yahoo!’s Rules for High Performance Web Sites. It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.
Modernizr Modernizr adds classes to the element which allow you to target specific browser functionality in your stylesheet. You don’t actually need to write any Javascript to use it.
Spritebaker: Easy Base64 encoding for designers This free tool parses your CSS and returns a copy with all external media “baked”Â� right into it as Base64 encoded datasets. The number of time consuming http-requests on your website is decreased significantly, resulting in a massive speed-boost (server-side gzip-compression must be enabled).
My DebugBar IETester is a free application that allows you to have the rendering and JavaScript engines of IE9 preview, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE at the same time.
Less Framework 2 This framework is a CSS framework for cross-device layouts. The framework has a minimal set of features, and does away with things like predefined classes. All it really contains are a set of media-queries, typography presets aligned to a 24 px baseline grid and a grid, with its column sizes noted down within CSS comments. You can select what features you want to have in your framework files, and the tool will provide you with a zipped archive right away. Note that this framework isn’t related with LESS CSS, another framework that extends CSS with variables, mixins, operations and nested rules.
Last Click
Never Mind the Bullets HTML5 is coming to modern browsers, and developers are already pushing its limits. To this end, Microsoft has created an online comic to show off HTML5/CSS3’s features (SVG background, JavaScript acceleration, etc.) as they function on IE9. It’s a fully interactive experience, complete with animations and other features that were until now possibly only with JavaScript or Flash.
The comic is a Western in a fairly traditional comic-book style, but with a lot of extras. It’s viewable in other browsers, but not as fully as with all of the features built into IE9. There’s also a feature that lets you create your own comic strip using the same characters. We never thought we’d say these words, but the website is actually best viewed in Internet Explorer 9.
Have something useful? Get in touch with us!
Our job is to promote good, high-quality content and resources. If you wrote or developed something useful, contact us — we will do our best to spread the word and help you out.
Desktop wallpapers can serve as an excellent source of inspiration. However, if you use some specific wallpaper for a long period of time, it becomes harder to draw inspiration out of it. That’s why we have decided to supply you with smashing wallpapers over 12 months. And to make them a little bit more distinctive from the usual crowd, we’ve decided to embed calendars for the upcoming month. So if you need to look up some date, isn’t it better to show off a nice wallpaper with a nice calendar instead of launching some default time application?
This post features 45 free desktop wallpapers, created by designers across the globe. Both versions with a calendar and without a calendar can be downloaded for free.
Please notice:
all images can be clicked and lead to the preview of the wallpaper;
you can feature your work in our magazine by taking part in our desktop wallpaper calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?
So what wallpapers have we received for October 2010?
[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]
"For October 2010, still with the summer in the head, I wanted to imagine a magic place where I can go sometimes far from work, far from the Earth." Designed by Benoit Chartron from France.
"”Breathe in the cool air!” – if we can’t have summer, embrace the chilly air! :D Enjoy October everybody! Ps. thanks to Rosanna Bell for modelling." Designed by Olivia Bell from England, UK.
"I was sorting out all my brushes in Photoshop and started playing around with loads of variations of brush strokes that I actually forgot I had. I was trying to create a cloudy hole and have a fetish with time and time traveling at the moment and it turned out to be something in between a black hole and some sort of disrupted void in the space time continuum. I liked it that much afterwards I thought I’d use it for my own desktop and then thought I’d share it on smashingmag :)" Designed by Rik Hopkinson from UK.
"Let’s bring back authentic made by hand illustration, and follow Marissa & Liloo in their cute world. /Fr/ Retour ? l’authentique illustration faite main gr?ce ? ces adorables personnages Marisssa et Liloo." Designed by 23 Graphic Design from France.
"I love autumn, all the leaves on the ground and the first few frosts – it can be quite gorgeous. But I’m still holding onto a bit of summer, so in this design I tried to have a bit of autumn along with a bit of summery colours!" Designed by Sasha Bell from England, UK.
"Children day is celebrated in October…in many countries around the world ..They are the future.. The hope for a brighter tomorrow…" Designed by Nishith from India.
"50 Years ago, Nigeria gained her independence from the United Kingdom. By October 1st, a golden jubilee celebration will kick-start and in a bid to commemorate this historical day, I dedicate my wallpaper to Nigerias Independence day.Happy Birthday, Nigeria." Designed by Aroyewun Babajide from Nigeria.
"This wallpaper is a constant reminder to buy eggs, because you know you’ll run out of eggs when you least expect. Also, I try to use free fonts in my personal projects as much as I can so this was a nice opportunity to play with Piron." Designed by Lucijan Blagonic from Croatia.
"Gandhi Jayanti is a national holiday in India celebrated on 2nd October. This day is celebrated in the honor of the birthday of the Father of the nation, Mohandas Karamchand Gandhi, popularly known as Mahatma Gandhi or Bapuji." Designed by Manish Jinwal from India.
"Loosening, loading, transporting and installing of equipment with a single machine – The Caterpillar 627 G Scraper is an all-rounder old-timer in construction field. The Caterpillar 627 G Scraper is the October motif of the Heavy Equipment Calendar 2010. Weight: 25,8 Tons/ Performance: 246kW (330 PS) / Motor: Caterpillar with capacity 15,2 l (Front) & 8,8 l (Heck) / Location: Sinsheim, Deutschland" Designed by Bauforum24 from Germany.
"I should have posted this wallpaper in August. Just like you should have gone to the sea when it was a little warmer. But it doesn’t matter if you love the sea." Designed by Jade Cheng from USA.
"The month the dead walk (apparently). For everyone who celebrates Halloween, with costumes, trick or treats or just a simple desktop wallpaper." Designed by Bogdan Lazar from Romania.
"I think everyone has their moments when all you want to do is hide under the warm duvet covers! Have a wonderful October whatever weather you have! Ps. thanks to Rosanna Bell for modelling." Designed by Olivia Bell from England, UK.
Please notice that we respect the ideas and motivation behind artists’ work which is why we’ve given artists full freedom to explore their creativity and express emotions and experience through their works. And this is also why the themes of the wallpapers weren’t anyhow influenced by us, but designed from scratch by the artists themselves.
As web designers, we always have something new to learn. Over the last decade our workflow has changed dramatically — it’s become more sophisticated and highly diversified. Not only do we have a much larger variety of improved tools to use; there’s also an endless stream of new techniques emerging and spreading within the web design community via social networks.
And this is where the opportunity to learn new useful, practical approaches and techniques comes in. We can learn by exploring the different design approaches other designers have taken, when solving their problems and apply these approaches to our work to become more productive and skilled. Therefore, our editorial team is permanently looking for interesting techniques, tools and tutorials, which we carefully select and present in round-ups on Smashing Magazine. You needn’t love our lists, but they often will give you some useful ideas and advice.
Below you’ll find an overview of new useful Adobe Photoshop techniques and tutorials that we’ve found and collected over the last months. We sincerely hope that at least some of the techniques presented there will help you improve your graphic design skills in Adobe Photoshop. And sincere thanks to all designers and developers whose articles are featured in this review. We respect and appreciate your contributions to the design community, folks!
Create an Awesome Number-Based Illustration In this tutorial, you will how to combine the power of the pen tool with some patterns and shapes to create an original and vivid illustration. You’ll also learn some tips for workflow, along with a variety of design skills that you can apply in your own design works.
iPhone Photoshoot Video Michael Flarup recorded 6 hours of work with 1000+ layers in Photoshop and made a video speeding up the process. The illustration was designed for a Smashing Magazine’s article How to Market Your App.
Blood and Milk Typography Poster in Photoshop This tutorial shows you how easy with few basics steps you can create original typography poster in Photoshop. With this technique you can create interesting flyers for clubs or you can use it in advertisements.
Adobe CS5 Design Premium Box Artwork in Photoshop In this tutorial you will learn how to create a design like the one you’ll find see on the Adobe CS 5 Design Premium Box. Actually, it’s fairly simple and you will be playing with pattern a lot. If you want to create the design of the Photoshop CS 5 box, for example, it will be pretty much the same process.
How To Design a 3D Wooden Box in Photoshop In this tutorial, you’ll learn to make a Wooden Box with a realistic touch. Along the way, you will be learning various tips such as using layer-sets for putting a group of layers together that you’d want to move/resize alt at a time. With layer-sets, the tedious work of selection of multiple layers for moving/resizing can be avoided.
Ursus – Brief Process Examination by Justin Maller This post is a case study or a brief process examination sent by Justin Maller, in which he explains how he created the original and abstract Ursus artwork.
Design a Vintage Radio Icon in Photoshop In this Photoshop Tutorial, you’ll learn how to design an old vintage radio using simple shapes, gradients, patterns and textures.
Brushing Up On Photoshop’s Brush Tool Developing Photoshop brush skills takes time, but it is well worth the effort. This article outlines the plethora of options that Photoshop affords, so that you can efficiently create and use brushes like the Old Masters.
Create a Colorful Space Scene in Photoshop In this tutorial you’ll learn how to create a colorful illustration that includes the Earth, the Moon, a starry sky and some beautiful light effects.
Realistic, High Quality Printer Icon in Photoshop In this long tutorial you will learn how to use vector masks and layer styles in Photoshop to create a slick looking ink printer reminiscent of some Canon and HP ink printers.
500+ Photoshop Brushes for Creating Brush Strokes This review presents Photoshop brushes that will allow you to easily create realistic paint brush stroke effects. There are 18 free brush sets included, overall more than 500 brushes.
Master Repeating Patterns in Photoshop Ths tutorial explains how a repeating pattern can be created given that there are spaces around the original shape. In the process, you will get a grasp on creating repeating patterns in Photoshop.
Creating a Furry Possum in Photoshop In this detailed tutorial, you will learn some techniques used to create the possum (one of the possum brothers) from the animated cartoon-Ice Age.
How to Create a Photo Realistic Camera This article demonstrates a powerful combination of vector shapes, layer styles, and manual drawing to create a photorealistic camera. In fact, the result is so realistic that you’d think it’s just an ordinary photo.
Making a Book of Magical Playground Scene This tutorial will show how to create a fantasy book scene. The designers will be using various advanced Photoshop techniques to make the composition as realistic as possible.
Photoshop Poster Design Tutorial This tutorial shows you how to design a great looking poster to celebrate Adobe Photoshop’s 20th Anniversary.
Opacity + Photoshop Blend Modes = Pattern Magic When it comes to creating patterns, the ability to duplicate a layer is one of Photoshop’s greatest features.The trick is to pay attention more to how shapes interact than to how a shape looks on its own. This article explains this and other techniques for creating patterns in Photoshop.
Create a Photo Realistic USB Cable in Photoshop In the right hands, Photoshop’s pen tool can be a very powerful tool for creating incredible; even photo realistic images. This tutorial demonstrates exactly that, and shows how to draw a photo realistic USB cable in Photoshop.
5 Advanced Photoshop Techniques for Web Designers Sometimes you need that extra Photoshop knowledge in order to achieve the look you need. In this step-by-step tutorial, Marko Prljić shows you how to create five killer effects for your site. You many want to check the second part of the article , too.
How to Create Inset Typography in Photoshop In this beginning-level design tutorial, you’ll learn how to apply a beautiful and easy text treatment in Photoshop: the inset text effect.
Create a Distressed Vector Typographic Poster Design Follow this step by step walkthrough of Chris Spooner’s recent design process for the ‘Spectrum’ poster. Starting with custom made type in Illustrator, you’ll move vector graphics into Photoshop for some serious distressing with Photoshop brushes and blending modes.
Photography
How To Make Digital Photos Look Like Lomo Photography A step by step tutorial on how I take a digital photo and make it Lomoified. Don’t forget to create an action script once you get this down, it will save you a lot of time.
100+ Outstanding Photoshop Actions to Enhance your Photography Have you ever seen photos in magazines or on the web and wondered how they achieved that look? This post presents over 100 Photoshop actions that will help you achieve some of these looks and save you some time in the process.
A Perfect Lie in Photoshop #2 In this Photoshop Tutorial Cameron Rad will present us what he has found out over this last year of Photoshop experiments with skin retouching.
20 Beautiful Photoshop Montage Tutorials In this round-up, you’ll look at 20 beautiful Photoshop montage tutorials that teach you step by step how to create these amazing photo composites.
How to Make a Photoshop Montage Anyone can cobble together a few photos and textures and create a humdrum montage. To elevate yours beyond this it takes a few simple tricks using Photoshop’s array of tools. This tutorial explains how to create a Photoshop montage in 19 steps.
Create Animations in Photoshop After Effects is the go-to Adobe application for creating both simple and complex animations. However, for those users that either don’t have the time to learn an entire new application or simply don’t own a copy of After Effects, Photoshop has incorporated very similar, albeit scaled back, functionality.
Learn Photoshop: All of the Basics for Beginners This post is intended for designers or aspiring designers who either want to get started with Photoshop or have limited experience and are looking to improve. With this post you’ll find links to plenty of resources to teach you all the basics and fundmentals of Photoshop.
Photoshop 101 – Working with Slices In this tutorial you’ll learn how to use the slice tool and show you some easy methods of slicing up your designs.
Unveiling Photoshop Masks In this article, you’ll explore the technical aspects and creative advantages of incorporating masks into your workflow.
Mastering Photoshop: Unknown Tricks and Time-Savers Collected here are some lesser known but extremely useful shortcuts. Many of these are not documented in the “Keyboard Shortcuts”Â� menu, and some of them don’t even have equivalent menu options.
Photoshop Android GUI Set, Great freebie. This design pieces are brought to you thanks to our design family at Iconshock, which is a quote of faith regarding the quality of the set. The package includes fully editable Photoshop files, original fonts and previews, everything that you may need in order to customize your set according to your preferences. Please let us know your opinions and feel free to share this amazing gift with your friends, remember that you will always find the best articles and resources only here, at Webdesignshock.
60 High Quality Photoshop PSD Files For Designers Photoshop .PSD file reveals the techniques used on a specific design, and it also tells us the style of the creator and most of the time there is something new we can learn from it. You’ll get quite an overview of interesting techniques in this collection of PSD files.
Modern UI and Layout Tutorials for Photoshop In this round-up you’ll find many current web design Photoshop tutorials that cover not only web page layouts, but also web app layouts, mobile UI and design elements such as buttons, search boxes, headers and footers.
How to Effectively Organize your Photoshop Layers This tutorial outlines how to create organized, designer and developer friendly PSD files. This is in no way the only solution, but hopefully it will encourage better practice in the web design world.
Coding, Processes and Organization
Preparing Photoshop Files for Web Developers Designers can help their counterparts or clients before a design hand-off by taking 10 to 15 minutes to prepare files in a consistent and organized manner that can potentially save developers hours of production time. As an added bonus, an organized Photoshop file will save designers time by minimizing development questions after the file has been handed off for coding.
Photoshop Variables: How to Import External PSD Smartly? From the article: “A while back, I discovered a system that enables designers to say goodbye to opening 23 PSD files just to change the header color. When a change is required, we can just change it in one place.”
How to Code up a Web Design from PSD to HTML Learn how to code up a complete mockup in HTML and CSS, ensuring the code is semantic and standards compliant. You’ll then add some finishing touches with a spot of jQuery.
Clean Up Your Photoshop Swatches and Styles From the post: “If you’re always grabbing the eye-dropper to get colors and copying/pasting layer styles, chances are you’re wasting time and getting innaccurate results to boot. So what’s a good Photoshopper to do? I’ve created two empty palettes for you. Just download them and follow the directions below.”
Divine Divine creates websites from Photoshop to WordPress promptly. Basically, Divine is a plug-in that sits on top of Photoshop. Once you’ve finished designing in Photoshop, launch Divine plug-in in Photoshop, assign WordPress roles to the main elements (e.g. #footer, #header, etc.), and then the plug-in will prepare all the files you need. Once you set FTP access, the tool uploads the theme automatically to your server. The tool is free.
Open With Photoshop Open With Photoshop is a Firefox extension that allows you to send any image via right click context menu from the browser directly to the Photoshop.
Last Click
Why We Don’t Deliver Photoshop Files Occasionally a potential client will ask you to give them Photoshop comps as the final deliverable, to be coded either by an internal implementation team or a technical partner. Some designers don’t do that. Here’s why.
If Photoshop Was Batman, Then Illustrator Would Be… From the article: “Perhaps as a direct result of too much Batman: Arkham Asylum, I found myself asking the question: If Photoshop was Batman, what would Illustrator be? In this silly little article, I explore some of the intriguing possibilities.”
Top 10 Photoshop Feature Requests This post presentes some of the top 10 most requested features that he believes would make Photoshop a more powerful and time saving tool.
Photoshop CS6 wish list You may want to check out this Photoshop CS6 wish list, too. Do you agree with the features mentioned there?
The Darwinian Evolution of Photoshop What does a top notch graphic designer have in common with an amateur photographer who uploads his weekend pictures on Facebook? They both love Photoshop! This infographics presents the evolution of Photoshop in a quite unusual, original way.
In August we announced the World Of Signage Photo Contest, in which we encouraged designers, artists and photographers to go out with their cameras, shoot attractive typography and public signage and send us the results. The more obvious subjects we received were street signs, building facades, highway markers and road signs, as well as wayfinding graphics (i.e. directional signage) in public venues, subway signs, hotel and office signs and signs in shops, too.
And The Winner Is…
Suicide signage [ large preview ] "Photo taken in the tube in Paris." Photo taken by Julian Salaun from France.
The winner of the digital SLR camera, the Canon EOS Digital Rebel XS (EOS 1000D) is Julian Salaun for his photo “Suicide Signage”, taken in the underground tube in Paris. That’s a sign you wouldn’t normally notice; the unconventional perspective is attention-grabbing and makes the photo stand out with its almost ironic placement. Very unique, very original shot. Congratulations to you! (You should have been contacted by now.)
2,500+ submissions, 51 categories
We received almost everything one could think of. The response was overwhelming and truly smashing: overall, we received over 2,500 photos, some of which, though, didn’t pass our automated processing or didn’t fit our guidelines.
Overall, almost 1,500 photos are presented in 51 galleries below. With so many emails from so many people across the world, sorting the submissions manually was a daunting task. But that’s what we had to do. It took a lot of time, even with every member of our team spending a significant amount of time reviewing and grouping the photos. Interestingly, the most popular kinds of photos were road and street signs and warning and danger signs, followed by train and airport signs, venue signs and, of course, WC (restroom) signs. We noticed that some photographers shot the same places at different times — what curious coincidences those were!
Showcase
Now, finally, the results are online. Initially, we planned to add personal comments to each one, but that would have taken months. Out of sympathy for our media servers, we have split the submissions across several pages, all linked below. Please check out the pages and comment on the photos you like best. We also hope we have achieved the goal of the contest: to provide our readers with useful and creative ideas on how designers worldwide combine type, visual design and pictograms in public signage.
Some of the most interesting, creative and original submissions are presented below. Please note: each photo comes with a license, noted in the description of the photo. Before using the images for personal or commercial projects, make sure the license allows you to do so. Also, you can click on the photos for larger versions.
Station Shop
Station Shop [ large preview ] "Please use other door – Station Shop." Created by John Kilpatrick from United Kingdom.
Subway Scratch Off
Subway Scratch Off [ large preview ] "Subway sign for center city Philly @ Market East Station." Created by Carissa Katz from USA.
Beware of Falling Coconuts
Beware of Falling Coconuts [ large preview ] "Heard about ‘Beware of dogs but coconuts?’." Created by Kisan Bhat from India.
From here you can go anywhere
From here you can go anywhere [ large preview ] "Should i see Skadarlija, Skopje, Moscow, maybe Moon? I think I’ll go for a drink at “Sesir Moj 2″." License: CC BY-NC-ND. Created by Marko Rosic from Serbia.
Don’t even think of parking here
Don’t even think of parking here [ large preview ] "The picture was taken in NYC in 2009." Designed by Stefan Vogel from Germany.
Chinatown San Fran
Chinatown San Fran [ large preview ] "The main street that runs through Chinatown in San Francisco is Grant Street. Here the local color can be seen in the background of the sign." Created by Jen Mabe from USA.
Caixa Forum Pictograms
Caixa Forum Pictograms [ large preview ] "Signage from Caixa Forum museum in Barcelona, minimalistic & neat: Pictograms." Created by Ivana Vasilj from Croatia.
Skövde Central Station Sign [ large preview ] "A really beautiful, accessible and easy to understand sign on a Central Station in Skövde. The sign illustrates bus station, taxi and train platforms. Note that everything is also written in Braille code." Designed by Igor Jovic from Sweden.
FLine Up
Line Up [ large preview ] "Lining up at Incheon International Airport in South Korea." Licensed: Copyright. Designed by Aurus Sy from Philippines.
Number 2 Is Open
Number 2 Is Open [ large preview ] "These are personal FedEx Kinkos Booths open to the public. Notice how the signs are slightly angled so they attract attention from down the hall instead of being flat on the surface of the doors… and aren’t the colors just wonderful." Licensed: All Rights Reserved. Designed by Stephanie King from USA.
Wyatt’s Confusion
Wyatt’s Confusion [ large preview ] "SCCC 2010 graphic design student, Wyatt stands amongst many directional signs, slightly puzzled." Photo taken by Chelsey Scheffe from USA.
Architect’s Gateway
Architect’s Gateway [ large preview ] "3 doors from the side of a building with signage of what an Architect does." Licensed: Royalty Free (RF) images. Designed by Ellson Yap from Singapore.
Beware, polar bears !
Beware, polar bears ! [ large preview ] "Photo taken near Longyearbyen in Svalbard (or Spitzbergen), Norway, in October 2009. This photo shows the non attention paid to the sign, as the lady runs towards the land, where the bears are, as the sign says to beware of polar bears “In the entire Svalbard”." Created by Brian MathÈ from France.
Vacancy
Vacancy [ large preview ] "Lake Wales – roadside signs: Permanent Vacancy." Created by Angela Wilson from USA.
1833 Salamanca
1833 Salamanca [ large preview ] "Metal shelled sign filled with original convict mined sandstone blocks." Licensed: Copyright Steven Clark with permission granted to Smashing Magazine to use in relation to this competition. Designed by Steven Clark from Australia.
Udderly Tall
Udderly Tall [ large preview ] "Best place in town for sweet iced tea & your weekly 2%." Created by Carissa Katz from USA.
Mixed Signals
Mixed Signals [ large preview ] "Open, closed, I’m there…?" Photo taken by Kent Downer from USA.
Welcome to Salt Lake City
Welcome to Salt Lake City [ large preview ] "A sign that pretty much sums of living in the city of salt." Created by Shauna Ehninger from USA.
Up the 101
Up the 101 [ large preview ] "This photo was taken at the famous Taipei 101 building. What amazed me is that each floor you went they would write the height of the building. Clear fonts with an inviting graphics." Photo taken by Michelle Pei Ting Huang from Brazil.
Magic numbers
Magic numbers [ large preview ] "House numbers in brass in the evening." Photo taken by Jaina from UK.
The Room Number
The Room Number [ large preview ] "A Picture of a hostel room in thailand." License: Creative Common Attribution License. Created by Robert Hoppe from Germany.
Zetland House Type
Zetland House Type [ large preview ] "My work is in this building with really great giant type for the floor markings." Photo taken by Rachel Lipsitz from UK.
High voltage
High voltage [ large preview ] "A warning sign in an Indian train." Created by Harald Krefting from United Kingdom.
Steep Hahnenkamm
Steep Hahnenkamm [ large preview ] "Hahnenkamm Ski Slope in Kitzbuhel, Austria." Photo taken by Gary Toriello from USA.
Dangerman
Dangerman [ large preview ] "This is a danger sign found on truck carrying inflammable material in Mumbai. Danger comes in all sizes and flavors :)." Designed by Charvi Mohan Sarfare from India.
End
End [ large preview ] "A nice looking warning in Hong Kong about the end of a pedestrian zone." Licensed: Free use, just give me credit. Designed by John Mertens from USA.
Monsoon Morning
Monsoon Morning [ large preview ] "Taken today around 8am from tube station." Licensed: Free. Designed by Yatrik Vyas from United Kingdom.
No jumping be careful the safe
No jumping be careful the safe [ large preview ] "Picture taken during my trip to Huashan Mountain in China in 2007." License: Free. Created by Yann Lorber from The Netherlands.
The Exclusion Zone
The Exclusion Zone [ large preview ] "The Exclusion Zone of Novosibirsk Hydropower Station." Photo taken by Maria Demina from Russia.
Handrail signage for blind person [ large preview ] "Staircases’ handrails provide information label for blind people in one of the Nagoya’s (Japan) underground. As easy to notice there are braille characters on the left side of the handrail." Licensed: Photo was taken by myself. Designed by Piotr Domowicz from Poland.
Vienna Subway Map
Vienna Subway Map [ large preview ] "Vienna Subway Map. I really love the use of Helvetica" Created by Alex Buga from Romania.
Waiting at Gate #3
Waiting at Gate #3 [ large preview ] "Photo was taken while waiting for a flight connection to Brazil in Carrasco International Airport, Montevideo, Uruguay." Licensed: Attribution-ShareAlike License. Designed by Fernando Maclen from Argentina.
Signage dock E zurich 1
Signage dock E zurich 1 [ large preview ] "Zurich Airport Dock E, main walls in the (Sky) Metro station." Licensed: Sascha Țr̦k РWirksame Gestaltung. Designed by Sascha Țr̦k from Switzerland.
Pit Stop
Pit Stop [ large preview ] "Photo was taken while waiting for a flight connection to Brazil in Carrasco International Airport, Montevideo, Uruguay." Licensed: Attribution-ShareAlike License. Designed by Fernando Maclen from Argentina.
Texturized wall
Texturized wall [ large preview ] "A wall in Hamburg airport, literally texturize with text." Designed by Pitipat Srichairat from Thailand.
Cphan Look Right Hongkong
Cphan Look Right Hongkong [ large preview ] "The sign in Air Asia Airplane that I shot during my travel." Designed by Christina Phan from Indonesia.
Filling The White Space
Filling The White Space [ large preview ] "Landing Site on Cheung Chau Island, Hong Kong." Licensed: cc by-nc. Designed by Andrea Surwillo from France.
Indian Railway reservation chart table
Indian Railway reservation chart table [ large preview ] "Indian’s Railway reservation chart table." License: Copyrighted. Created by Sroan Sergei Graovac from Croatia.
Airport Security Check
Airport Security Check [ large preview ] "Security at airport." Created by balajee from India.
Three Signs In A Row [ large preview ] "I liked the three layers of the signs. One on the glas window, one behind on the wall, and the reflection of one sign on the oppsite side of the glas window.." Designed by Andris Linz from Switzerland.
Port Sign Boote
Port Sign Boote [ large preview ] "Simple port sign photo in Austria." Designed by Olariu Ionel from Romania.
Everywhichway
Everywhichway [ large preview ] "California Science Center." Designed by Enrico Santana from USA.
Valley of the kings
Valley of the kings [ large preview ] "Valley of the kings tombs Egypt." Designed by Kristina Ivandic from Croatia.
New York Tourism
New York Tourism [ large preview ] "A directional sign located in Battery Park, New York, USA." Photo taken by Tracey L. Warner from USA.
Rock and roll is here
Rock and roll is here [ large preview ] "Just ran into an interesting scene, which is about a sign of a livehouse in Kaohsiung city, Taiwan." Photo taken by Terry Lai from Taiwan.
Signs to far destinations [ large preview ] "Signs to destinations all over the world in Gran Canaria." License: Creative Commons by-nc. Created by Misel Radosavac from Germany.
Right Way
Right Way [ large preview ] "Boracay island Philippines alleyway." Created by David Coates from UK.
ParkInside
ParkInside [ large preview ] "Beautiful vintage, grunge sign found in St. Louis. Taken with iPhone." Photo taken by Phil Franks from USA.
Main road signage
Main road signage [ large preview ] "Hand painted on a block of a pointed shaped stone indicating that this road is the 1st main road." Photo taken by Heya Basu from India.
Look
Look [ large preview ] "Whimsical, typographic message with a hint of pictogram via the small dots in the O’s, creating a subtle pair of eyes." Photo taken by Jason Bequette from USA.
Bump [ large preview ] "Sometime a little bump on the road can save you." Designed by Md. Zabir Hasan from Bangladesh.
Play with size
Play with size [ large preview ] "Design Center in Copenhagen, brilliantly played with sizing." Photo taken by Pitipat Srichairat from Thailand.
Choosing the right way
Choosing the right way [ large preview ] "First photo of a short story. You have to choose your way to the divinity." Licensed: Creative Commons Attribution. Designed by Ester Liquori from Italy.
Bike parking sign
Bike parking sign [ large preview ] "A bike parking sign in the city of Heraklion, watch for the city’s sign up and left." Licensed: Royalty Free. Designed by Miljkovic Milos from Greece.
Cryptic writings
Cryptic writings [ large preview ] "Letters in a parking garace in Helsinki. Not very informative." Created by Erkki Punttila from Finland.
Which Way [ large preview ] "The traffic light tree (London) here could repesent the confusion we face in our lives deciding which way to go." Designed by Hazem Lashin from UK.
Corner in Primary
Corner in Primary [ large preview ] "A highway billboard in New Mexico getting a fresh coat of primary colors." Licensed: Copyright. Designed by Gavin Todes from USA.
Ecuador Sign, Ecuador [ large preview ] "This photo shows both the coordinates of the location, as well as the actual line passing below the sign to mark the equator, or “The Middle of the World” as they call it in Ecuador." Photo taken by Tessa K. Marmion from USA.
Berlin Street Signs [ large preview ] "Street signs in Berlin-Kreuzberg, with the characteristic German ‘eszett’ and several ‘tz’ ligatures." License: http://creativecommons.org/licenses/by-nc-nd/3.0/. Created by Florian Hardwig from Germany.
Last Click
Good Morning Sunshine
Good Morning Sunshine [ large preview ] "One of the morning sun shines in Glasgow at Tchai Ovna." Photo taken by Shalmali Patkar from United Kingdom.
Thanks to all participants for taking the time to prepare and submit their photos for this contest and for contributing to the unique and diverse gallery presented here. We truly appreciate and respect your effort and time, folks. And please stay tuned for our next contest! Let us know what kind of contest you would like it to be; we look forward to your comments in this post!
Further Galleries
You may want to take a look at other contest galleries, too:
