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. [Updated June/14/2017]
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.
Further Reading on SmashingMag: Link
- 50 Excellent Digital Photography Photoshop Tutorials1
- 50 Stunning Photoshop Text Effects Tutorials2
- Techniques For Creating Custom Textures In Photoshop3
- 70 Beauty-Retouching Photoshop Tutorials4
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 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!
Photoshop Techniques and Tutorials Link
Make a Delicious Donut in Photoshop5
In this tutorial, you`ll see the process of making a tasty donut in Photoshop. Use the pen tool, the brush tool, the burn tool, the dodge tool, the smudge tool, and various filters and layer styling techniques to achieve the final outcome.
Learn how to design some amazing vector based Retro Rainbow Curves using Adobe Photoshop. These retro artifacts have become a popular trend in modern design.
Blood and Milk Typography Poster in Photoshop9
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.
How to Create an Amazing Mixed Media Poster in Photoshop11
Learn how to create this creative composition using a variety of graphical elements. This tutorial will show you how to easily create futuristic shapes with the Path tools and combine them with photos and brushes to create this mixed media poster.
Simple Roy Lichtenstein Style in Illustrator and Photoshop13
Learn how you can apply the Halftone filter in Photoshop and the Width Tool in Illustrator CS 5 to create an image inspired by Roy Lichtenstein’s style.
How To Design a 3D Wooden Box in Photoshop15
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 Maller17
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.
Brushing Up On Photoshop’s Brush Tool 21
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.
In this video tutorial, Adnan Hadi will explain how to create a futuristic concept car using Photoshop.
Realistic, High Quality Printer Icon in Photoshop25
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 27
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 29
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.
How to Create a Photo Realistic Camera35
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 Scene37
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.
Opacity + Photoshop Blend Modes = Pattern Magic41
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 Photoshop43
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.
With Photoshop manipulation tools, you can create and edit images for Web and print. Below you will find some tutorials on poster design from 2010.
Photoshop Etiquette For Responsive Web Design49
Style Tiles, Style Prototypes, Visual Inventories, Element Collages, style guides, and even designing in the browser have all been suitable approaches to multi-device design. With a shift from page-based design to building a design system, it’s truly an exciting time.
Creating Retro Folded Typography Using Photoshoping Photoshop51
In this Photoshop tutorial, you will learn to create retro-looking text that seems like it’s constructed using folded strips of paper.
An Awesome Collection Of 80 Photoshop Typography Tutorials53
An overview of professional creative step-by-step typography tutorials using Adobe Photoshop which can enrich your design skills and improve the quality of your work.
Understanding Inner Shadows in Photoshop55
Photoshop layer styles are a popular way to add effects, such as drop shadows and strokes, to layers in a non-destructive way. With the right knowledge and experience, any effect can be achieved. To achieve these effects, however, you need to understand what each setting does and how they can be combined to achieve a certain look.
Cool Text Effect with the Puppet Warp Tool in Photoshop CS5 57
This tutorial will show you how to create a text effect using a photo of a rope and the Puppet Warp tool.
3D Water Text Effect with Repoussé in Photoshop CS559
In this tutorial you’ll see how to create a water text effect with Photoshop. Even though it might look complex, it’s a very simple effect. You will be using the new Repoussé tool and then some stock photos to create the effect.
Create a Distressed Vector Typographic Poster Design61
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.
How To Make Digital Photos Look Like Lomo Photography63
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.
Uncovering Toy Cameras and Polaroid Vintage Effects (With Photoshop Tutorials)65
Below are a list of the most famous toy cameras and some tutorials that can be used to recreate their famous effects.
50 Time Saving Photoshop Actions for Enhancing Photos67
Here are 50 excellent Photoshop actions that can add professional looking enhancements to your photos with the click of a button.
100+ Outstanding Photoshop Actions to Enhance your Photography69
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.
How to Make a Photoshop Montage75
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.
80+ Photoshop Actions for Giving Your Pictures a Vintage Look 77
This post round-ups over eighty Photoshop actions that will add vintage or retro effects to your photos.
Improving General Photoshop Skills Link
Create Animations in Photoshop79
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 How to Draw Hand-crafted Pixel Art in Photoshop81
In this tutorial, an illustrator Russel Tate teaches you how to draw with pixels. You’ll learn how to create artwork in the style of eBoy and Army of Trolls.
Create a Camera Lens Icon in Photoshop (Screencast)83
In this tutorial, you’ll learn how to create a camera lens icon using Photoshop. Duration of the screencast: 30 minutes.
Learn Photoshop: All of the Basics for Beginners85
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.
Mastering Photoshop: Unknown Tricks and Time-Savers93
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.
Taking Photoshop’s Curves Beyond Highlights and Shadows95
Read on for more details about what Photoshop curves are, as well as how to use them properly for your designs.
Getting to Know Clipping Masks and Layer Masks in Photoshop 97
This article outlines the differences between the layer mask and the clipping mask in Photoshop.
Photoshop Android GUI Set, Great freebie.99
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 Designers101
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 105
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 107
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 Link
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? 109
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 HTML111
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.
Setting Up Photoshop For Web, App and iPhone Development 113
This article addresses the issues in trying to match colors in images to colors generated by HTML, CSS or code.
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.
#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.
Last Click Link
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… 119
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.”
The Darwinian Evolution of Photoshop125
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.
- 1 https://www.smashingmagazine.com/2008/12/50-excellent-digital-photography-photoshop-tutorials/
- 2 https://www.smashingmagazine.com/2009/03/50-stunning-photoshop-text-effect-tutorials/
- 3 https://www.smashingmagazine.com/2014/07/creating-custom-textures-photoshop-techniques/
- 4 https://www.smashingmagazine.com/2008/07/70-beauty-retouching-photoshop-tutorials/
- 5 https://www.sitepoint.com/make-delicious-donut-icon-photoshop/
- 6 https://www.sitepoint.com/make-delicious-donut-icon-photoshop/
- 7 http://www.tutorial9.net/tutorials/photoshop-tutorials/amazing-vector-retro-rainbow-curves/
- 8 http://www.tutorial9.net/tutorials/photoshop-tutorials/amazing-vector-retro-rainbow-curves/
- 9 http://www.psdeluxe.com/tutorials/special-effects-tutorials/create-blood-and-milk-typography-poster-in-photoshop/
- 10 http://www.psdeluxe.com/tutorials/special-effects-tutorials/create-blood-and-milk-typography-poster-in-photoshop/
- 11 https://photoshoptutorials.ws/photoshop-tutorials/drawing/create-amazing-mixed-media-poster-photoshop/
- 12 https://photoshoptutorials.ws/photoshop-tutorials/drawing/create-amazing-mixed-media-poster-photoshop/
- 13 http://abduzeedo.com/simple-roy-lichtenstein-style-illustrator-and-photoshop
- 14 http://abduzeedo.com/simple-roy-lichtenstein-style-illustrator-and-photoshop
- 15 http://www.tutorial9.net/photoshop/3d-wooden-box-photoshop-tutorial/
- 16 http://www.tutorial9.net/photoshop/3d-wooden-box-photoshop-tutorial/
- 17 http://abduzeedo.com/ursus-brief-process-examination-justin-maller
- 18 http://abduzeedo.com/ursus-brief-process-examination-justin-maller
- 19 http://www.tutorial9.net/photoshop/design-a-vintage-radio-icon-in-photoshop/
- 20 http://www.tutorial9.net/photoshop/design-a-vintage-radio-icon-in-photoshop/
- 21 https://www.smashingmagazine.com/2009/11/16/brushing-up-on-photoshops-brush-tool/
- 22 https://www.smashingmagazine.com/2009/11/16/brushing-up-on-photoshops-brush-tool/
- 23 https://design.tutsplus.com/articles/create-a-futuristic-concept-car-in-photoshop--psd-19216
- 24 https://design.tutsplus.com/articles/create-a-futuristic-concept-car-in-photoshop--psd-19216
- 25 http://iconlibrary.iconshock.com/tutorials/high-quality-printer-icon/
- 26 http://iconlibrary.iconshock.com/tutorials/high-quality-printer-icon/
- 27 http://designm.ag/resources/photoshop-brushes-brush-strokes/
- 28 http://designm.ag/resources/photoshop-brushes-brush-strokes/
- 29 http://www.digital-photography-school.com/master-repeating-patterns-in-photoshop
- 30 http://www.digital-photography-school.com/master-repeating-patterns-in-photoshop
- 31 http://designreviver.com/tutorials/creating-a-furry-possum-in-photoshop/
- 32 http://designreviver.com/tutorials/creating-a-furry-possum-in-photoshop/
- 33 http://abduzeedo.com/simple-underwater-scene-photoshop
- 34 http://abduzeedo.com/simple-underwater-scene-photoshop
- 35 http://psd.tutsplus.com/tutorials/illustration/how-to-create-a-photo-realistic-camera/
- 36 http://psd.tutsplus.com/tutorials/illustration/how-to-create-a-photo-realistic-camera/
- 37 http://10steps.sg/tutorials/photoshop/making-a-book-of-magical-playground-scene/
- 38 http://10steps.sg/tutorials/photoshop/making-a-book-of-magical-playground-scene/
- 39 http://www.designcourse.com/photoshop-poster-tutorial
- 40 http://www.designcourse.com/photoshop-poster-tutorial
- 41 http://www.webdesignerdepot.com/2010/06/opacity-photoshop-blend-modes-pattern-magic/
- 42 http://www.webdesignerdepot.com/2010/06/opacity-photoshop-blend-modes-pattern-magic/
- 43 http://psd.tutsplus.com/tutorials/drawing/create-a-photo-realistic-usb-cable-in-photoshop/
- 44 http://psd.tutsplus.com/tutorials/drawing/create-a-photo-realistic-usb-cable-in-photoshop/
- 45 http://www.blog.spoongraphics.co.uk/tutorials/how-to-create-a-retro-sci-fi-computer-game-poster
- 46 http://www.blog.spoongraphics.co.uk/tutorials/how-to-create-a-retro-sci-fi-computer-game-poster
- 47 http://www.creativebloq.com/photoshop/free-scripts-4132388
- 48 http://www.creativebloq.com/photoshop/free-scripts-4132388
- 49 https://www.smashingmagazine.com/2016/08/photoshop-etiquette-for-responsive-web-design/
- 50 https://www.smashingmagazine.com/2016/08/photoshop-etiquette-for-responsive-web-design/
- 51 http://designinstruct.com/text-effects/creating-retro-folded-typography-using-photoshop/
- 52 http://designinstruct.com/text-effects/creating-retro-folded-typography-using-photoshop/
- 53 http://www.designyourway.net/drb/an-awesome-collection-of-80-photoshop-typography-tutorials/
- 54 http://www.designyourway.net/drb/an-awesome-collection-of-80-photoshop-typography-tutorials/
- 55 https://design.tutsplus.com/articles/understanding-inner-shadows-in-photoshop--psd-16767
- 56 https://design.tutsplus.com/articles/understanding-inner-shadows-in-photoshop--psd-16767
- 57 http://abduzeedo.com/cool-text-effect-puppet-warp-tool-photoshop-cs5
- 58 http://abduzeedo.com/cool-text-effect-puppet-warp-tool-photoshop-cs5
- 59 http://abduzeedo.com/3d-water-text-effect-repouss%C3%A9-photoshop-cs5
- 60 http://abduzeedo.com/3d-water-text-effect-repouss%C3%A9-photoshop-cs5
- 61 http://www.blog.spoongraphics.co.uk/tutorials/create-a-distressed-vector-typographic-poster-design
- 62 http://www.blog.spoongraphics.co.uk/tutorials/create-a-distressed-vector-typographic-poster-design
- 63 http://www.digital-photography-school.com/how-to-make-digital-photos-look-like-lomo-photography
- 64 http://www.digital-photography-school.com/how-to-make-digital-photos-look-like-lomo-photography
- 65 https://www.smashingmagazine.com/2010/03/10/uncovering-toy-cameras-and-polaroid-vintage-effects/
- 66 https://www.smashingmagazine.com/2010/03/10/uncovering-toy-cameras-and-polaroid-vintage-effects/
- 67 http://webdesignledger.com/freebies/50-time-saving-photoshop-actions-for-enhancing-photos
- 68 http://webdesignledger.com/freebies/50-time-saving-photoshop-actions-for-enhancing-photos
- 69 http://www.thephotoargus.com/freebies/100-outstanding-photoshop-actions-to-enhance-your-photography/
- 70 http://www.thephotoargus.com/freebies/100-outstanding-photoshop-actions-to-enhance-your-photography/
- 71 http://abduzeedo.com/perfect-lie-photoshop-2
- 72 http://abduzeedo.com/perfect-lie-photoshop-2
- 73 http://www.webdesignerdepot.com/2009/03/20-beautiful-photoshop-montage-tutorials/
- 74 http://www.webdesignerdepot.com/2009/03/20-beautiful-photoshop-montage-tutorials/
- 75 http://www.webdesignerdepot.com/2009/04/how-to-make-a-photoshop-montage/
- 76 http://www.webdesignerdepot.com/2009/04/how-to-make-a-photoshop-montage/
- 77 http://webdesignledger.com/freebies/80-photoshop-actions-for-giving-your-pictures-a-vintage-look
- 78 http://webdesignledger.com/freebies/80-photoshop-actions-for-giving-your-pictures-a-vintage-look
- 79 http://designshack.co.uk/articles/graphics/create-awesome-animations-in-photoshop
- 80 http://designshack.co.uk/articles/graphics/create-awesome-animations-in-photoshop
- 81 http://psd.tutsplus.com/articles/techniques/learn-how-to-draw-hand-crafted-pixel-art-in-photoshop/
- 82 http://psd.tutsplus.com/articles/techniques/learn-how-to-draw-hand-crafted-pixel-art-in-photoshop/
- 83 http://psd.tutsplus.com/tutorials/icon-design/create-a-camera-lens-icon-in-photoshop-screencast/
- 84 http://psd.tutsplus.com/tutorials/icon-design/create-a-camera-lens-icon-in-photoshop-screencast/
- 85 http://vandelaydesign.com/blog/design/learn-photoshop-basics/
- 86 http://vandelaydesign.com/blog/design/learn-photoshop-basics/
- 87 http://designreviver.com/tutorials/photoshop-101-working-with-slices/
- 88 http://designreviver.com/tutorials/photoshop-101-working-with-slices/
- 89 https://www.smashingmagazine.com/2009/12/17/unveiling-photoshop-masks/
- 90 https://www.smashingmagazine.com/2009/12/17/unveiling-photoshop-masks/
- 91 http://www.thedesigncubicle.com/2009/01/12-common-photoshop-mistakes-misuses-and-abuses/
- 92 http://www.thedesigncubicle.com/2009/01/12-common-photoshop-mistakes-misuses-and-abuses/
- 93 https://www.smashingmagazine.com/2010/01/20/obscure-adobe-photoshop-time-savers/
- 94 https://www.smashingmagazine.com/2010/01/20/obscure-adobe-photoshop-time-savers/
- 95 http://www.webdesignerdepot.com/2010/06/taking-photoshops-curves-beyond-highlights-and-shadows/
- 96 http://www.webdesignerdepot.com/2010/06/taking-photoshops-curves-beyond-highlights-and-shadows/
- 97 http://blog.echoenduring.com/2010/08/12/getting-to-know-clipping-masks-and-layer-masks-in-photoshop/
- 98 http://blog.echoenduring.com/2010/08/12/getting-to-know-clipping-masks-and-layer-masks-in-photoshop/
- 99 http://www.webdesignshock.com/freebies/free-photoshop-android-interface-gui/
- 100 http://www.webdesignshock.com/freebies/free-photoshop-android-interface-gui/
- 101 http://www.hongkiat.com/blog/60-high-quality-photoshop-psd-files-for-designers/
- 102 http://www.hongkiat.com/blog/60-high-quality-photoshop-psd-files-for-designers/
- 103 http://www.fuelyourcreativity.com/free-psd-facebook-fanpage-template/
- 104 http://www.fuelyourcreativity.com/free-psd-facebook-fanpage-template/
- 105 http://speckyboy.com/2010/09/06/modern-ui-and-layout-tutorials-for-photoshop/
- 106 http://speckyboy.com/2010/09/06/modern-ui-and-layout-tutorials-for-photoshop/
- 107 http://www.webdesignerdepot.com/2009/08/how-to-effectively-organize-your-photoshop-layers/
- 108 http://www.webdesignerdepot.com/2009/08/how-to-effectively-organize-your-photoshop-layers/
- 109 http://www.onextrapixel.com/2010/01/27/photoshop-variables-how-to-import-external-psd-smartly/
- 110 http://www.onextrapixel.com/2010/01/27/photoshop-variables-how-to-import-external-psd-smartly/
- 111 http://line25.com/tutorials/how-to-code-up-a-web-design-from-psd-to-html
- 112 http://line25.com/tutorials/how-to-code-up-a-web-design-from-psd-to-html
- 113 https://www.smashingmagazine.com/2009/10/12/setting-up-photoshop-for-web-app-and-iphone-development/
- 114 https://www.smashingmagazine.com/2009/10/12/setting-up-photoshop-for-web-app-and-iphone-development/
- 115 http://www.divine-project.com/
- 116 http://www.divine-project.com/
- 117 https://addons.mozilla.org/en-US/firefox/addon/99845/
- 118 https://addons.mozilla.org/en-US/firefox/addon/99845/
- 119 http://blog.echoenduring.com/2010/01/09/if-photoshop-was-batman-then-illustrator-would-be/
- 120 http://blog.echoenduring.com/2010/01/09/if-photoshop-was-batman-then-illustrator-would-be/
- 121 http://mediamilitia.com/top-10-photoshop-feature-requests/
- 122 http://mediamilitia.com/top-10-photoshop-feature-requests/
- 123 http://bjango.com/articles/photoshopcs6wishlist/
- 124 http://bjango.com/articles/photoshopcs6wishlist/
- 125 http://www.testking.com/techking/infographics/darwinian-evolution-photoshop/
- 126 http://www.testking.com/techking/infographics/darwinian-evolution-photoshop/