Create an Origami Logo

Posted on February 13th, 2009 by Zen Elements

Create an Origami Logo in Photoshop with this tutorial, getting a little taste towards one of the predicted trends for 2009 Logo Design. Along with a few other predicted trends for Logo Design in 2009, the one that most caught my eye was the Origami Logos. I am extremely fond of Origami and while I am by no means an expert in the art of folding paper, I was very keen to see what sort of techniques could be written for creating such pieces in a digital environment. An important exercise Before you pick up any pencils and start sketching, try this. Take a piece of paper and fold it. Take a strip of paper and fold it. Observe how the paper folds, the shape that is created and the shadows that are cast.

Step 1 The inevitable New Document

Open Photoshop and create a New Document. For the purpose of this tutorial, Ive gone with my personal favourite, 750 by 500 pixels.

Step 2 Sketch to Basic Shape

Once youve sketched up the concept for your logo (digitally or on paper for scanning later), identify each of the areas and how paper would fold to create your new origami logo.

Step 3 The Individual Panels

Depending on the complexity of your origami logo, you may have separate layers and paths for each individual panel. For the purpose of demonstration and the simplicity of the logo were creating here, we manage to use two main paths for a front and rear paper set.

Step 4 Taking Shape

Now that we have our basic shape and panels set out, we can go ahead and fill them with the colour of our choice. Use a slightly darker shade for the rear paper set, which will create some depth to your origami logo. Next, we need to crop down the ends of the paper strip by using the Polygonal Lasso Tool, holding Shift to get a good 45 degree selection area.

Step 5 Folded Shadow

Make a duplicate of the front paper set [ Select the layer then press Ctrl + j ] and darken the layers contents to a solid black. You can do this quickly using the Hue/Saturation controls [ Ctrl + u ] and dragging Lightness down to -100. Next, apply a Gaussian Blur [ Filter Blur Gaussian Blur ] of around 2.5 - 3 pixels and click OK.

Finally, clip the shadow layer with the rear paper set below it [ Alt-click between the Shadow layer and Rear Paper Set ] OR [ Layer Create Clipping Mask ]

Step 6 Shadow
Holding Ctrl + Shift (on a PC), click both the Front & Rear paper Sets and in a new layer, fill with any colour. Drop the Fill down to 0% then access the layers style options. Apply a small drop shadow of around 1 to 2 pixels and leave it quite sharp. This just lifts the logo from the surface giving it a little more dimension.

Step 7 Final Details

Try not to be tempted to play with the Texturizer settings! It is really not something that is needed. All that is left to do is incorporate the company name in with our new origami logo and save!

Some other uses for this technique could include origami icons, badges, wallpapers, etc! If youve created an interesting Origami piece, please share it for others to see by linking it below in a comment. Subscribe to RSS or Email so you dont miss the next tutorial! Thank you for reading. Alex | Zen Elements

20
diggs digg it

2
tweets

retweet

loswlFebruary 15th, 2009 at 12:39 am Never thought of creating a logo like that before, but that is a pretty neat idea! nice instructions too:o) Reply - Quote

Zen ElementsFebruary 15th, 2009 at 12:12 pm @loswl | Thank you for your feedback. Im glad to hear you liked the tutorial and found a little inspiration from it too =] Reply - Quote

G loveFebruary 15th, 2009 at 12:36 pm Well described tutorial, thank you for that bit of knowledge.

Reply - Quote

MikeFebruary 27th, 2009 at 1:03 pm Well, this is pretty useful! Kinda like the idea for my own website! Thx u Reply - Quote

ptamaroMarch 14th, 2009 at 2:19 am Nice work. Great blog. Thanks! Reply - Quote

Zen ElementsMarch 14th, 2009 at 10:18 am @ptamaro | Im glad you enjoyed the tutorial and thank you for your feedback! @Mike | If you go ahead to create something along these lines, Id be really glad to see it when its in place. Give me a nudge =] Reply - Quote

lawrence77March 15th, 2009 at 12:37 pm i like it! wow! very professional, but very simple! you rocks Zen! Reply - Quote

Zen ElementsMarch 15th, 2009 at 3:45 pm @lawrence77 | Im glad you liked it and sounding off with such energy too! =] Thank you! Reply - Quote

Chetan MadaanMay 1st, 2009 at 4:38 pm Nice.. Reply - Quote

B SnowMay 2nd, 2009 at 6:30 pm Whats the advantage of using a Gaussian Blur over an outer glow? :) Reply - Quote

Zen ElementsMay 3rd, 2009 at 11:08 am @B Snow | There is no real advantage in terms of end result and just in this particular instance, using a gaussian blur was my preference :) Outer Glow, if others want to play:Apply an Outer Glow layer style (set blend mode to Multiply, colour Black) then separate that layer (Layer Layer Style Create Layer) then as above, mask that layer (Layer Create Clipping Mask). Reply - Quote

PortfoleoMay 3rd, 2009 at 11:59 am Nice tutorial you did there. Althought I did some things different with the same result AND I personally would recommend doing logos in Illustrator. Its basicly the same workflow. Reply - Quote

patrick jamesMay 4th, 2009 at 9:49 pm Yeah, i have seen a few in this style. And i love it! A really nice design man! Love the color you chose as well. Thanks! :) Reply - Quote top