Design starts with inspiration, but inspiration can be triggered while trying out different things… It's like Picasso once said "Inspiration exists, but it has to find you working". This is so true. A perfect example of this are the creations of geometric formations such as spirographs…
There is a lot you can create starting from a simple shape by using a repetitive effect like rotating, resizing, while duplicating, in combination with color effects, transparency and layer modes. The possibilities are really endless.
In my presentation I showed the basic technique of how each of these spirographs were created, which I also explained a while ago in this article. In most of the examples I showed, the starting element was a circle, but by duplicating and rotating it in a certain sequence, applying transparency layer mode effects, and a certain color combination, a surprising result was achieved.
Phantasm Studio CS
At some point I also experimented with an Illustrator plug-in called Phantasm CS. It's a plug-in I mainly use when I want to modify the hue, saturation, or contrast of an object in Illustrator, which can all be applied as a Live Effect. However, there is also this powerful feature called "Halftone" that creates these interesting results. It's perfect for experimenting. In my presentation I showed an example design where I've used some of these Halftone settings. The great thing about these effects is that they are all applied as Live Effects, which gives you the flexibility to edit this at all times, just by double clicking it in the Appearance palette. This plug-in can do more than these effects or changing the hue, saturation, contrast, levels, curves etc. Phantasm CS Studio has some neat prepress features which can be very handy for print designers such as the Quick Separations option, and Overprint Object Preview option.
On my previous blog I wrote an article about this plug-in where I explain these Halftone settings in a bit more detail.
Simple masking technique
Sketching & doodling
A lot of my basic design ideas and concepts started from a doodle or sketch. Inspiration can come while you are sketching or doodling. I try to reserve 15 minutes per day to just experiment a bit, totally not work related. Just freely doing some random doodling. Sometimes these small sketches end up as the basic idea or concept for a design of a project (e.g. top right sketch from the image below).
The Smashing Book #3 cover designs also started from some simple sketches. I shared the process of this design in short in my presentation, but you can read about the process more in detail in this article.
Sometimes when I start a project I try to find the right color palette and typography first, while also trying to shape the general idea or concept by creating a mood board. This is what I did for the book cover design for Aaron Gustafson about ‘Adaptive Web Design’. You can read the design process I shared a few months back.
A small experiment
In my presentation I also shared a small experiment based on something that Erik Spiekermann once said in an interview. He explains a simple trick to avoid copying an inspiring design. First you draw it exactly the same, so actually copying it. Then, you let it rest for a couple of days. After that, you redraw it from memory. Chances are you create a new design inspired on what you saw. I found this idea most interesting to try out, and so I did. I ended up with something similar, yet a bit different. In the image below to the left is the design that inspired me, and to the right the design I created.
The Cicada Principle
Then additionally I also applied a CSS experiment on this design, using the example of the Cicada Principle by Alex Walker, and this was the result. There is some fun stuff you can do based on this same principle, think of a curtain background, a skyline, clouds,… or maybe you can consider using no images at all, only CSS instead to create a random repeating color striped background.
Towards the end of my presentation I shared a few small tips and good finds. Here is a short overview:
- A small tip for the super organized among us… Are you also annoyed that whenever you copy a layer or a layer group in Photoshop that the word "copy" is added at the name of the layer or layer group? This seems to be an option that is enabled by default (still so in CS6). You can uncheck this option in the Layers Panel Options.
- Tych Panel, a wonderful Photoshop extension by Reimund Trost that automates the creation of diptychs and triptychs. I use it for some of my blog posts, and for all the layout of the squared product images for Fab's web site, iPone and iPad app design. It does all the calculation and scaling for you in no time. You can keep the images flexible and scalable by checking the option to convert the images to Smart Objects. What would take minutes to create, just takes a few seconds now.
- A Photoshop plug-in called GuideGuide by Cameron McEfee lets you set guides in your document in one click just by entering the necessary values like column width, amount of columns or rows, gutter, margin…
- Extensible Baseline Grids by Mike Precious on Method & Craft shows you how you can create a baseline grid by creating a set of pixel based patterns. There is also this user-friendly Modular Grid Pattern app that lets you create your preferred grid online in your browser, with the option to download a Photoshop pattern file that you can then load into Photoshop to use in your documents. There is also the option to download a Photoshop panel extension (requires Photoshop CS5, so not sure about CS6).
- I ended with this last tip that I learned from my design teacher at school years ago… To help you kern letters better, for example for the design of a logo, turn the letters, or logo upside down. I still use this simple technique from time to time, whenever I have some doubts, or just to double check.
Getting back to the subject of inspiration… Color inspiration can be found anywhere: from objects around you, your environment, from nature,… but if you want to be spoiled by colors, and color combinations from the web, I can recommend you these 2 resources:
- My own inspiration source here on my blog, the Inspiration Stream. You can download the color swatches (as an ASE file) from each page to use in your favorite Adobe application.
- There is also a site called Design Seeds which extracts a set of colors per photo for you.
Presentation background wallpaper
Upon request, I created a wallpaper set of the background I used in my presentation. You can download it here:
- Star desktop wallpaper 2560x1440
- Star desktop wallpaper 1920x1440
- Star wallpaper for iPad
- Star wallpaper for iPad 3
- Star wallpaper for iPhone
Hope you enjoyed my presentation's recap. Keep having fun, keep on experimenting!