92 Comments

Colorful Spirograph Poster

May 12, 2009

In this great tutorial we will be learning how to create a spirograph effect in Photoshop, yep that thing that you played with when your a kid that made you feel artistic. Then we’ll be using the effect to create a very stylish poster design with some smart typography and wait for it… rainbow gradients! So give it a try and I’m sure you’ll learn a bit.

Introduction

I got the inspiration for this tutorial from Diego Bellorin, a talented designer. You can check out his images here. Look below to see what we are going to make now.

Step 1

Create a new document with dimensions; 2000x2500px then create a new layer and make sure the foreground color is set to black. First select the brush tool and change it to a 2px hard brush. Next select the ellipse tool and in the main toolbar there are three buttons on the left, press the one in the middle which will say paths if you hover over it. Now what you have to do is to draw a few circles or ellipses next to each other, this is the basis for our spirograph pattern. Below you can see what my paths looked like.

Step 2

Now select the brush tool then just hit Return and this will stroke the path with the brush you selected earlier. Now change the opacity of this layer to 50%.

Step 3

Now the complicated bit, we are going to make an action to turn this into a spirograph pattern, specifically the action is going to duplicate the layer then move the pivot point then rotate the layer slightly. So first open the actions panel by going Window>Actions or hitting Alt+F9. Now create a new action, thats the button in the actions panel that is the same as the new layer button in the layers panel. After you’ve hit ok the action will start recording automatically so you have to do exactly what I say now. Right click and duplicate the layer with the circles in it then hit Ctrl+T to enter free transform mode then first move the pivot point, thats the point in the middle of the bounding box, I’ve shown an image below of what it should look like after you have moved the pivot point. Now rotate the layer slightly until it looks like the second image below then hit Return. Now click the stop button in the actions panel.

Step 4

With the newer circle layer selected, all you have to do is to keep clicking the play button in the actions panel until you have something that resembles the image below. Next select all the layers that make up this pattern, so every layer except the background layer then hit Ctrl+E to merge them into one layer. You probably want this in the middle like mine so select this merged layer and select the background layer then select the move tool and in the main toolbar there are some alignment buttons, click the align horizontal centers one. You can also move it up and down at this point.

Step 5

Duplicate this layer then hit Ctrl+T again and this time just rotate the layer slightly then change the opacity of this layer to 50% and you should have something like below.

Step 6

We’re going to make it even more interesting now by distorting it a bit, duplicate this newer layer then go Filter>Liquify and witha suitably sized brush, brush away at the outer edge of the pattern, there isn’t any more I can here, just make it look like the image shown below.

Step 7

okay now create a new layer then change the brush diameter to 20px then using exactly the same technique as we did in step one, create a circle and stroke it. You’ll want to create about three of these in different sizes in different layers so that you have something similar to below.

Step 8

In the layers panel change the opacity of these three layers to 60% and the fill to 0%, this will make the circles disappear so right click on one of the layers and go to blending options and add the a color overlay and a gradient overlay using the settings shown below. After that right click on this layer and select copy layer style then right click on the other circle layers and paste this layer style, you should now have something similar to the bottom image.


Step 9

Okay, now this step will take a bit of time what you have to do is select these three layers then duplicate them so you now have six layers with rainbow circles now select the move tool and move these new layers around. Now do this maybe seven more times, it’s up to you so whatever you think looks good. I’ve shown what mine looks like below.

Step 10

Now select all these rainbow circle layers then hit Ctrl+E to merge them (if you have experience with smart objects then convert it to a smart object instead of merging, thats what I did). Now go into the blending options for this layer and add a color overlay using the settings below.

Step 11

I felt the these circles were a bit too light so duplicate the layer then lower the opacity of the duplicated layer to 80%.

Step 12

Now its time to add some text to make it look more like a poster, it doesn’t matter what you type the text will make the image look better. I recomend Helvetica font for this kind of thing, if you don’t own helvetica then use a similar sans-serif font. Use a gray color, I used #404040. You can mess around with the placement of the text until it looks good, I also added another circle, you should be an expert at creating these now though.

Step 13

Now as a wee finishing touch create a new layer then go Image>Apply Image, now with the rectanglur marquee tool drag a selection holding Shift to make a square (make the selection over a colorful bit). Now go Select>Inverse then hit Delete. You should be left with a square of the picture, you can scalee this down by going into free transform mode (Ctrl+T). I also added a thin grey stroke within the layer styles to give it a border but this is optional. Take a look at the finished image below.

Conclusion

Thats us done, pretty nice result eh? If you’re interested in actions in Photoshop then I wrote another tutorial using them in a similar way, check it out here. Hope you enjoyed this and learned something new, make sure to add your own images to the PSDlearning Flickr group for a chance to be a featured artist.


Similar Tutorials:

Save and Share this Post

We like people who share our posts! Del.Icio.Us - StumbleUpon - Float - Reddit


Or why not subscribe to the feed? RSS - Email

92 Responses:

  • August 27th, 2012

    Electronics Shop US:

    Electronics Shop US Qualified Orders over $25 Ship Free just for you Electronics Shop US

  • September 4th, 2012

    Pathitta Diary:

    Show Pathitta Diary Online Blog. Find New Lifestyle in Future World and Love everything in Yours.

  • September 13th, 2012

    Rolling Blog Data:

    Rolling Blog Data School : The Best School to learn My Style in your Style.

  • October 10th, 2012

    USA People Special Society:

    The Store Tele-pod in All Volume Maxz. Minimum Funny in USA.

  • October 14th, 2012

    Plossy Markets:

    The Plossy Markets. Benefit Article be Collected for your life and Best Products.

  • October 15th, 2012

    Sammy Shops USA:

    Sammy Shops USA. Welcome to my new Trend Studio of Product Stores in USA.

  • October 16th, 2012

    Tiffy USA Stores:

    Tiffy USA Stores : Special promotions and Best event of Store online.

  • October 16th, 2012

    Maximum US Stores:

    The Maximum US Stores. We are everything in your Shopping World Stores.

  • October 22nd, 2012

    Jerry The Market:

    Jerry The Market. Welcome to my new Trend Studio of Product Stores in USA.

  • October 31st, 2012

    Kiss Of Stores:

    Kiss Of Stores. Benefit Article be Collected for your life and Best Products.

  • November 1st, 2012

    My Secret Stores:

    My Secret Stores – People Structure Building on Best Society to be Strong.

  • November 7th, 2012

    My Store Reborn:

    My Store Reborn. Welcome to my new Trend Studio of Product Stores in USA.

  • November 8th, 2012

    Hello Your Items:

    Hello Your Items : Special promotions and Best event of Store online.

  • November 25th, 2012

    Design Tutorial:

    Wonderful tutorial. Thanks for share it.

  • February 16th, 2013

    sharaf:

    kollam……!

  • February 19th, 2013

    My Do Things:

    My Do Things. Great Review of over the World Products Stores

  • February 22nd, 2013

    Gang Keep Life:

    Gang Keep Life. Welcome to my new Trend Studio of Product Stores in USA.

  • February 25th, 2013

    Navigator To Store:

    Navigator To Store. Welcome to my new Article of life and Best Products Stores.

  • February 28th, 2013

    The Total Cheap:

    The Total Cheap – People Structure Building on Best Society to be Strong

  • June 10th, 2013

    Samir:

    Simple and nice idea.

  • August 10th, 2013

    Web DFesign:

    Wonderful tutorial.This was very helpful!Thanks a lot for sharing…

    From
    Web Design Company Nigeria
    Vibe Web Team

  • February 17th, 2014

    Gazette name change Tatkal:

    Great post!! very informative.
    Thank you very much for such a lovely and informative post.

  • June 22nd, 2015

    rooseveltkuhn:

    really thanks for teach me to do a great and wonderful art work. and ofcourse thanks for the great article. you did a great job for us.

    http://www.essayguardian.com

  • September 28th, 2015

    vodafoneturkiye:

    Hayallerinizi ka??tlara dökmenin vakti gelmedi mi ? Çizim sanat? yetenek ve ilgi ister ?ah?s kendini geli?tirmek isterse e?er çok k?sa bir süre içerisinde teknik çizimleri yapabilecek durumda olabilecek ve sanat eserleri üretebilecektir. Bak?rköy resim kursu ile sanat eserlerini Ubeyt ÇA?ATAY güzel sanatlar resim kursu e?itmeni e?li?inde üretebilir ve ortamlar? sanat eserleri ile donatarak sanata olan ilgiyi gözler önüne serebilirsiniz.

    http://ruyaavcisi.com/bakirkoy-resim-kursu/

  • December 18th, 2015

    taksimresimkursu:

    VODAFONE TELEVIZYONLU ?NTERNET KAMPANYASI

    Vodafone Televizyonlu ?nternet 16 Mbps internet ve filbox tv paketi ikisi bir arada tek fatura. Üstelik ekstra ücret vermeden Tüm ulusal kanallar ve F?LM, D?Z? ve 19 adet Premium Kanallar ile birlikte.

    Dilerseniz sabit telefon hizmetinizi de ekleyerek, 3 hizmeti tek faturada kullanabilirsiniz. Ayr?ca dilerseniz 30 Mbps internet, 60 Mbps internet, 100 Mbps internet ile birlikte filbox tv paketlerinide sat?n alabilirsiniz.

    Sinemay? evinize kadar detiriyoruz. Kendi koltu?unuzda evinizde Vodafone Televizyonlu ?nternet kampanyas? ile vizyona girmi? son filmleri izleyebilirsiniz. Vodafone kalitesi ile e?siz ayr?cal?klar ile iyi seyirler dileriz…

    http://yellowmileadsl.com/vodafone-televizyonlu-internet.html

  • December 18th, 2015

    taksimresimkursu:

    Mimarl?k Bölümü ö?rencilerine Yönelik yurtd??? PORTFOLYO HAZIRLIK Çal??malar?m?z Devam Ediyor…
    Yurt D???nda, Mimarl?k Bölümünde MASTER Ba?vurusu Yapmak isteyen Ö?rencilerin Lisans Projelerinden Olu?an Ki?isel Portfolyolar?n? Dijital Ortamda, Alan?nda Uzman E?itmenlerimiz Taraf?ndan Haz?rlanmaktad?r.
    Taksim Resim Kursu ile hayallerinize bir ad?m daha yak?nla??yorsunuz.
    Detayl? için bizi arayabilir, kursumuzu ziyaret ederek e?itmenlerimiz ile birebir görü?ebilirsiniz.

    http://www.arkhesanat.com/

  • January 8th, 2016

    taksimresimkursu:

    Sanat eserleri üretmenin zevk verece?i bir ortam olan atölyemizde çizim çal??malar? haftan?n 7 günü devam etmektedir. Bak?rköy Resim Kursu olarak sizleri gelece?e haz?rlamakla yetinmeyip ilgi duydu?unuz alanlar?n optimizasyonu ile sizlere destekte vermektedir.

    http://ruyaavcisi.com/

  • January 8th, 2016

    taksimresimkursu:

    Sanat eseri üretmenin tek adresi olan taksim resim kursu ile gelece?iniz rengarenk olu?turmu? oldu?unuz sanat eserleri ile ayd?nlanacakt?r.
    Eserlerimizi atölyemizde üretmekle beraber bir çok eser yeni sanat eserleri üretilmesine vesile olmu?tur. Zafer GAZ?O?LU e?li?indeki kursumuz ?stanbulun dört bir yan?ndan gelen sanat severler ile ortak nokta niteli?i ta??maktad?r.

    http://www.arkhesanat.com/

  • January 8th, 2016

    taksimresimkursu:

    ?lgi duydu?unuz alana yönelmek istiyorsan?z ve bu ilgi duydu?unuz alan güzel sanatlara haz?rl?k alan? ise taksim resim kursu ile irtibata geçiniz. Türkiye’nin en kaliteli resim kursu olmakla beraber e?itmenlerimiz Mimar Sinan Üniversitesi mezunlar?ndan ve bir ço?u 25 y?ll?k tecrübesi ile sizlere hizmet vermektedir.
    Taksim Meydan?ndaki atölyemiz 3 katl? olmakla beraber sergi alan? , çal??ma alan? gibi bir çok geni? alan mevcuttur. Atölyemizi görmeniz için sizleri mekan?m?za bekliyoruz.

    http://www.arkhesanat.com/

  • January 15th, 2016

    taksimresimkursu:

    Foto?raf çekimlerimiz ile hizmet vermekten mutluluk duymakla beraber ?imdide yeni resim kursu ile avc?larda bak?rköy resim kursu ad? alt?nda e?itimlerimize iki ?ubemiz ile devam etmekteyiz. Sevdiklerinizin çizimlerini, do?al güzelliklerini, hayal ürünlerinizi ve daha bir çok i?levinizi soyut ve soyut teknikler ile sizlere sunmaktay?z. Sizleri 4 kurs fiyat? ile 6 kur e?itimle geli?iminizi tamamlamaktay?z.

    http://ruyaavcisi.com/

  • January 15th, 2016

    taksimresimkursu:

    Taksim meydan?ndaki yerimiz ile 3 katl? binam?zda sizlere güzel sanatlara haz?rl?k alan?nda e?itim vererek ki?isel geli?iminizi tamamlama yolunda bir ad?m daha atabileceksiniz.
    Taksim resim kursu ile geli?iminizi karakalem, ya?l? boya, manzara resimleri ve daha bir çok eseri hayal gücünüz ile birle?tirerek eser üretmekteyiz. Sizde geli?iminiz için bizimle ileti?ime geçebilirsiniz.

    http://www.arkhesanat.com/

  • January 25th, 2016

    taksimresimkursu:

    Her ya?tan gruba özel e?itimlerimizi iki ?ubemizde devam ettirmekteyiz. Üstelik 2016 y?l?na özel fiyatland?rma seçenekleri ile çok uygun ve nezih ortamla sizlerleyiz.
    Bak?rköy resim kursu sizlerin çal??ma alan?n? bir çok de?erlendirme ile yönlendirmeye çal??maktay?z.

    http://ruyaavcisi.com/bakirkoy-resim-kursu/

  • February 24th, 2016

    ???:

    ???

  • March 23rd, 2016

    bakirkoyresimkursu:

    http://ruyaavcisi.com/ )
    E?itim alm?? yüzlerce mezunumuz sektörün en kaliteli resimlerini çizmektedirler. E?itimini almak istedi?iniz çizim tekniklerini Ubeyt ÇA?ATAY e?li?inde vermekteyiz. Bak?rköy resim kursu ile sizlerleyiz. Güzel sanatlara haz?rl?kta bir numaral? adresiniz olmaya devam etmekteyiz.
    Avc?lar ve Esenyurt ?ubeleri ile sizlere bir ad?m daha yak?n?z.

  • March 30th, 2016

    12th Class Result 2016:

    Thanks for nice information.

  • May 28th, 2016

    642-874 vce:

    I think your suggestion would be helpful for me. I will let you know if this works for me Thanks and keep posting such a informative blog.

  • June 13th, 2016

    Angelina veronica:

    Your shared suggestion is very helpful for me as its easy to understand. i am very thankful to you that you have shared this excellent things in public

  • June 15th, 2016

    Andre:

    Hi,
    Thanks for the tutorial but the transform action part doesn not work in my case. I tried it different ways without success. I followed the steps from the beginning but it`s not possible to create the spirograph. I`m using PS CS6. Thanks.

  • June 16th, 2016

    game news:

    Wonderful Webpage, Continue the excellent work. Many thanks!.

  • June 16th, 2016

    dota 2:

    Simply just had to stress I’m just ecstatic I happened upon your webpage!.

  • September 24th, 2016

    ???? ???? ?? ???:

    very good

  • October 4th, 2016

    nidapark kaya?ehir projesi:

    ?stanbul’ un bir numaral? projelerine imza atan Emlak Konut ile Tahincio?lu ayr?cal?klar? ile Nidapark Kaya?ehir projesi 29 eylül 2016 tarihinde düzenlenen bas?n toplant?s?yla kamuoyuna tan?t?larak projede resmi sat??lar ba?lat?ld?. Nidapark Kaya?ehir karma proje olarak in?a edilecek.

    Projede konut , ofis ve ticari üniteler bulunuyor. 77 bin 327 metrekare büyüklü?ündeki arsa üzerinde 320 bin metrekare in?aat alan?na sahip olan projede 1.233 ba??ms?z birim bulunacak. Bunlar?n 843 tanesi konut olarak üretilirken geri kalan 390 tanesi ofislerden ve ma?azalardan olu?uyor.

    Nidapark Kaya?ehir Projesi ile ayr?cal?klar?n fark?na varmak istiyorsan?z bizimle ileti?ime geçebilirsiniz.

    Nidapark Kaya?ehir Projesi, Nidapark Kaya?ehir Proje, Nidapark Kaya?ehir Projeleri, Nidapark Kaya?ehir, Nidapark Kaya?ehir istanbul,

    http://www.emlakdream.com/proje/nidapark-kayasehir-projesi/32

Leave a Comment

©PSDlearning 2016. This site is brilliantly hosted by Mediatemple.