Retro light effects - Pixelmator Tutorial (2 copies of Pixelmator to give away)ListThumbs
Retro light effects - Pixelmator Tutorial (2 copies of Pixelmator to give away)
A few days ago we published an excellent video from a French band called Justice, the name of the clip was DVNO and the coolest thing was that it was full of references from the 80’s. Besides that, there was the great interview with James White, and again, his work is full of elements from the 80’s. With all that retro inspiration in mind, I decided to write a new Pixelmator tutorial.
So in this Pixelmator tutorial I will show you how to create a very fast retro design coming straight from that old Atari 2600 that we used to play Decathlon and get our hands full of blisters...
We have 2 copies of Pixelmator to give away, so just leave a comment and you can get a free copy of this nice software. The final day will be April, 1st.
Step 1
Create a new document, 800x600 is fine, then select the Gradient Tool (G) and create a new gradient color in the Gradient Palette, use black and purple (#332233) for the colors and use Radial for the type.
Step 2
Create a new layer and go to Filter>Quartz Composer>Generator>Floor. This filter will create a nice light effect.
Step 3
Create a new layer, name it "lines", fill it with black and change the Blend Mode to Color Dodge, then go to Filter>Generator>Stripes. Make sure that the foreground color is white. Use 6 for width and 0 for hardness.
Step 4
Go to Edit>Transform>Perspective. Move the vertices until you get a nice perspective like the image below. After that go to Filter>Blur>Gaussian Blur, use 2 for the Radius
Step 5
Go to Layer>Add Layer Mask, then get the Brush Tool(B), select the white color and a medium brush, like 100px width and hardness 0. Start deleting the end of some lines, make some shorter than the others.
Step 6
Select the Type Tool(T) and add your text, the font I used was Bauhaus. After that go to Layer>Rasterize Type Layer. Then go to Edit>Transform>Distort. Then just pull the vertices to make the text follow the line’s perspective.
The last thing here is holding the Command Key, click on the layers thumbnail to create a selection of they 80’s layer. Then select the mask of the "Lines" layer and fill the selection with white.
Step 7
Duplicate the layer and go to Filter>Quartz Composer>Stylize>Neon. Select pink for the color and use the Amount of 0.08.
Step 8
Duplicate the layer and go to Filter>Blur>Zoom… use the Amount of 50 like the image below.
Step 9
Create a new layer, beneath the layer with zoom blur. Fill the new layer with black and change the Blend Mode to Color Dodge. After that select the Brush Tool(B), white for the color, and a brush with a medium size like 80-100px, the hardness has to be 0%.
Now just paint some parts of the lines, just one click and you will create a nice light effect.
Step 10
Create a new layer and go to Filter>Generator>Random Generator. This filter will create a sort of noise effect. Then just change the Blend Mode to Screen and use like 10% opacity.
Step 11
Create a new layer and fill it with a linear gradient, use Red, Green, and Blue for the colors and change the Blend Mode to Overlay.
Conclusion
This image was experiment I did just to learn a bit more of Pixelmator. The more I use it the more I like it, even though it lacks some very important features like the Layer Styles and the powerful brush engine that Photoshop has, I think Pixelmator is a great tool and it will probably get much better in the newer version.
Download the Pixelmator file
Click here to download the file for this Pixelmator tutorial.
More Pixelmator Tutorials
About the author
My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.
194 Comments
AMAAAAAAAAZING :D
My attempt in Photoshop.
http://www.where2b.org/en/photo?photoId=40658&top=personal-gallery
Excellent effect, but probably the worst tutorial I've seen...
I made this with photoshop :D
Very, very simply and nice
I tried it about 10 times but surely some steps are missing , i am not any designer , but i followed all steps exactly and the step 2 colors are changed to grey and white and after that using the color blending color dodge gives you stripes only on half of the layer , and top half remains black , i dunno know maybe i am too dumb to follow instructions also , but yah something is not explained properly
How the hell do I do reconstruct this on Photoshop???! I'm trying to do it right now, and it's oh-so frustrating.
Oh that's right, it's for Pixelmator. But, if I were to do it on Photoshop, how could it be done??
It's missing a ton of steps. I couldn't reconstruct it exactly. It was very annoying.
Great tutorial. Fantastic.
I think that Pixelmator is a very good program and i really want a copy of it.
Thanks for the great Tuts and the opportunity to get Pixelmator
I want this software. Great tutorials!
i want this software
Can you do one tutorial on this but for photoshop?
way cool
Hey Fabio,
Nice work. Don't pay any attention to any of these idiots that bad-mouth you. I am sure they wouldn't do it face to face. I use Pixelmator but prefer Photoshop.
Peace,
Tony (Vietnam Vet, 101st Airborne, 1971-72)
I wished i had Mac os
cool
cool. this program looks good.
Oh man so sweet work
more pixelmator! We haven't seen any all summer long
Great Tut!!!!!!!!!!
Thanks heaps for all your effort.
Blessings
Thanks for the nice tutorial
Pixelmator like very good and easy pro. but It's problem is don't working in windows
Thanks .
wowowowowowowow i like it so much :|
Well I think It is possible with PShop, Try to follow the same steps above in PShop,, I think it qill definitely be posiible
i downloaded this tutorial, but i don't know to use it. is its' name Pixelmator.dmg? thanks
cool tutorial!
Worst tutorial ever. Steps are incomplete. Don't bother, you will just end up frustrated.
Nice effects ! It's look very beautiful.
I would really want a copy pixelmator.
Thanks !
absolutely stupid tutorial, with no decent steps ... get some grey matter shots before ya write another..but before that explain this one properly!! bitch!
Esse software é indiscutivelmente um dos mais completos que ja vi!!!
can anyone help me with stage 9 ?
I tried redoing the tutorial in photoshop , and i really can't do the pulsing lights in stage 9 .. how can i do that ?
Thanks folks :)
@ Fabio Sasso:
As can be seen from the screenshots provided, the Floor lighting effect is applied using seemingly the default setting. But if you really try it this way, all you can get is nice grayscale lighting, unlike what's shown in that corresponding screenshot. I suspect there's changes in filter setting and/or blend mode involved.
Also after changing blend mode of the "lines" layer from normal to color dodge, the stripes will only show within the purple area, which translates that you won't be getting full length stripes as shown in the screenshot.
I view all these as one big common issue among tutorial publishers: pieces of critical information are left out, either subconsciously or intentionally. Sure tutorials will bring in more traffic to website, but this doesn't mean you, as an publisher, should lower the standards.
OK, that's all for now.
Thank you all the same !
I've successfully created this same effect in Photoshop, except for step 9 where you add the little "pulses" of light to each line. Can you explain quickly how you do this in photoshop?
I just wanted to say that at least 90% of the comments are PATHETIC :)
And that as 2 commenters said (wow. . I guess people don't actually do the tutorial, they just want the prize), the tutorial is missing many details and I can't make it pass the second or third step.
Quote from somewhere above:
"Did anybody actually try this tutorial???? I cannot get it to work right at all. The steps are barely detailed, screenshots are minimal, and I couldn't get past the third step. I'm not an idiot, and I can usually figure things out. I'm very disappointed and it seems that nobody who has posted has actually tried the steps."
That pretty much sums it up. And the first commenter also said kinda the same thing.
I am going to be the first to say:
Not a great tutorial! I don't want a free Pixelmator! All I can say is a nice final result... But it's clearly not a tutorial for everyone to follow. You didn't write each and every step you took.
the Quartz Composer feature isn't working properly as expected.
After step 2, that particular layer is black and grey, not as shown in the screenshot provided.
After step 3, the lines just sorta of being masked by the underlaying layers, it also has got a little ugly pinkish-purple stroke where the purple ends in the underlaying layer with the lighting effect.
So if anyone could just help me figure out what went wrong, that would be great !
Thank you in advance! And Thanks for this gorgeous tutorial !
oh dang april 1st. just read that. my bad
still...great tut!
i would love to get one of those copies of pixelmator if someone else already hasn't. i downloaded the trial and love it. i would love to have the actual version so i can export photos without the watermark so i can put them in my photoshop files.
really good tutorial btw.
wow..that a great tut! thx
Schnallen Sie sich an, es kommt Nervenkitzel auf Sie zu! Wir sind ein online casino Guide und haben Casinobesprechungen sowie Strategien, wie Sie von Online Casino Bonus so profitieren, dass Sie im Casino gewinnen können!
The computer has this disciplinary order. Pound wrote some kasinos online. It's mature to be led! Online casino misled some time. A casinos has one difficult meeting. Obviously, this responsible hour comfortably came across a beautiful grand casino. Strategic casino faq is the genuine casino boni. I bred that government via the company. Hello, some registered woman adequately touched pending one brave eye. Building snorted this online casino spiele. One casinoreviews has this developed foot. As everyone knows, some lucky kasinos online comfortably spread in spite of this cheap casinos. Life overran that information. It's nuclear to be congratulated! Hi, a history is more circular than some indirect kasinos online...
AWESOME JOB!! Make more, you do FANTASTIC tutorials!
Very nice, keep up the great tutorials :)
Hi, this tutorial is very great but i use photoshop ... i need a file in PSD anyone have? ... pls send to me (graziebaggio@hotmail.com) THX
I wanna try this pixelmator, some of the filters are very cool and straight forward. Photoshop needs to watch its back.
This program looks like it has some great potential. Cant wait to try it out.
Very nice tut . Can you give me a copy of PixelMator ?
interesting! i'd love to get my hands on it!
nice retro tutorial ;)
I think it's really cool! I would like to have this software to learn new things and create some good stuff!!!
I need this. It looks fun.
Awesome tutorial! thanks!
reaaaaaaaaaaaaaly cool! i need this!!!
abduzeedo rulez!
muy buen tutorial amigo !
la verdad es que no manejo ni nunca use el Pixelmator, asi que decidi armar esto en Photoshop CS3, miralo por aqui : http://www.flickr.com/photos/acidrod/2379505721/
Pixelmator is awesome! I already bought it so if I win i'll give it to my girlfriend. :D
Easy to follow tutorial; thank you.
It appears that this app is quite easy to work with. I have been looking for an application like this for a while. I like photoshop, but you need an application that provides you with fast results, being easy to work with. I am excited to start using Pixelmator.
Thank you,
Juan
Great tutorial, Hopefully I can redo it in photoshop. Or even better get a pixelmator copy :)
Very nice tutorial!
Cool! The app looks to make things easier for us :)
Woah nice tutorial :)
Will sure use this on some of my collections
thanks!
This looks great. I love the Justice video. It's awesome that I can recreate that look from my childhood!
Nice one. Especially the white brush tool spots on the lines
Wow Pixelmator good program for the design ;) ?f have xp I will download it :D
Great Tutorial!
can't wait to get start using these sweet effects!!!!
Very cool. Too bad it's only for Mac...
Thanks for this!, nice to see some new tutorials for pixelmator.
Fab! Amazing! Cool and professional effect! Go on...!
Great!!
What a nice tutorial !
Thanks Abduzeedo :)
Thak you for this great tutorial. :)
Great tips for pixelmator and I liked your style in your explanation, it makes the use of a simple application much simpler :)
Please keep up the great tutors.
Thanks for the tutorial!
Did anybody actually try this tutorial???? I cannot get it to work right at all. The steps are barely detailed, screenshots are minimal, and I couldn't get past the third step. I'm not an idiot, and I can usually figure things out. I'm very disappointed and it seems that nobody who has posted has actually tried the steps.
Very disappointed.
Makes me want to bust out my laserdisc copy of Tron!
Your tutorials rock! I really liked your Aurora Borealis tutorial as well. No wonder you get so many comments on your tutorials like many others I'd love to have a free copy of Pixelmator! :D
Great tutorial!!! We need more!!! Keep 'em comin' ;-)
btw - I've already got Pixelmator, so I don't need another license.
Hey,
great tutorial, I'm trying to do that on Photoshop. It's a bit difficult but it looks alike. :)
Thanks anyway, it's quite inspiring. :)
Very cool tutorial, and stunning result..it made me feel like dancing;)
WARNING WARNING - WILL NOT PARTICIPATE IN FREE GIVE AWAY COMPETITION - I USE THE EVIL MACHINES WARNING WARNING
Nice tutorial! Also great to download the final result to reverse engineer it!
Regards,
Peter
Nice.. I'll have to take a closer look at pixelmator. I'm impressed so far.
How'd you like exporting that to a jpeg? Notice that you didn't comment on how painful that was. That is the main area where Pixelmator lacks to make a serious competitor with any image editing apps.
Nice tutorial. I'd be interested in the free license as well.
Very cool effect. I didn't know there was anything else out there other than photoshop!!!
I am about to buy this for my brother-in-law. I will wait and see if I win a copy! Love this software.
Keep these tutorials coming!
I'd really love a copy of Pixelmator, it would be so helpful for a poor student :)
Pixelmator looks on great app. I`m waiting on text about compare Pixelmator and Photoshop Elements 6.
Very good tutorial. Actually looks easier to produce this with pixelmator then it would be with ps.
very cool post keep up the good work!
looks like a simply but very usefull app i would like to make some works there ;)
thanks
That looks crazy fun! Pixelmator has definitely got me intrigued. I'm glad someone is still crazy enough to take on Photoshop head to head and do it well. Especially for a 1.0 release.
COOL DESIGN!
Remeber JOOST TV :)
Like it. real competitor to photoshop given the price.
seems like there are a lot of image editing alternatives coming to try and compete with photoshop. I recently talked with a recruiter who was looking for artists to help microsoft create their versions of photoshop and illustrator.
Very good tutorial, it looks like Pixelmator has a nice workflow. It has a pretty interface also, although I don't have one to know if it's efficient or not. Thanks for posting all these valuable stuff.
By the way, does anyone know what So-Me used when he directed DVNO?
Haha, I just got the captcha wrong..
Four capital letters...
Printed in gold
don't think my other post went thru but I'd love to try this tutorial out for sure!
Great tutorial!! I really wish i had Pixelmator to do that!
I was 90's kid so i missed out on this :)
Very great and cool tutorial, hope I can win the copy to do that, too.
Thanks Zee
Great Tutorial! I like the second one with the different colors!
WOOOOW excellent tutorial - i haven't thought that pixelmator can be so cool program.
This is incredible software with some really good potential for many things it seems. I would love to tie this in at work or better yet on my own website! Keep up the excellent work!
- Ben
Very nice, I've got to give Pixelmator a shot.
how to do like that in photoshop??? can you give a tutorial?
DVNO :D
Fabio,
Once again, nice tutorial. Great to see techniques on other software like Pixelmator. Keep up the great work. Looking forward to more of what you do.
Best Reguards,
Frank
Pixelmator is one of the most beautiful apps ever made. Seems easy to use. Haven't had a go of it as yet. But nothing is better than french electro music, 80s colors and design, and a 2008 Macbook and cutting edge software.
Thanks for all the great posts! This looks like software I could really use.
Awesome effect. I've not used it but it looks like a decent program.
haha i want the software
Ahhh this looks positively ravishing. I love J.U.S.T.I.C.E and this looks just like from DVNO. So cool.
Muinto Massa!!
I'm a daily fan of this web, constantly checking for these precious tutorials and I would love to have a copy of Pixelmator. I have always been a fan of retro designs.
Thats sweet! I havent used Pixelmator yet but from all the tutorials and images that I've seen from it, it looks great! The image is awsome! Thanks for your blog its sic!
Great blog! Has insipired me to do more works and even a little proyect in my mind that when I have less work I will try to achieve it.
Great tutorial and i love this kind of effects and everything that is retro and things like that
thanks and keep up the good work
Cool! How does the giveaway work...random? first to post? :D
The demo is pretty awesome.
Your always making tutorials, it's great even though I don't have a copy of pixelmator (yet) :P
I would be interested in Pixelmator and I must say that Abduzeedo has tons of good tutorials and inspirational images I have been following this page for a short time but I really love it.
WHAT A BEAUTIFUL & GREAT TUTORIALS...
I think it'll be easier to use than Photoshop..
You site is chock full of inventive design ideas it can't help but stimulate creative juices. Your page will be forever bookmarked. Carry on..............:)
I tried to do it with Illustrator and Photoshop, but I didn't succeed...;-(
Great stuff, absolutely loved the DVNO video. As much as I love Photoshop, Pixelmator seems like a nice alternative that integrates well with Macs. I'd love to participate in the drawing.
awesome work i love your site! Pixelmator looks fantastic i hope i win! cheers :)
Unfortunately I don't have Pixelmator....I don't even have a Mac :D
it would be gread if you could explain how this works in Photoshop, because the effect is really stunning.
Keep up the good work.
Very nice effect ZEE. I showed it to my dad (because I didn't experience the 80's) and he immediately started to try and duplicate the result in Photoshop.
By the way, I don't want to be entered for the software, it looks good and everything, but I'm perfectly happy with PS :) (but I was surprised at the number of comments that it generated).
ooh how lovley
Wow that is beautiful
Is Pixelmator only for Mac? :P
Wow, this takes me back!
I've tried to do this same effect in Photoshop, but... No sucess. Beacause Pixelmator's features, its more easy to repeat this tutorial.
One day I'll have a Mac computer!!!
In for the free software, and nice tut!
Hello, my pixelmator not showing the effect Quartz Composer
Nice result, gives me quite some interest in Pixelmator.
Cool Tuts , nice Job Fabio!
Too bad, if you're running pixelmator on osX 10.4 , quartz composer isn't avaible :(
never even heard of pixelmator until i came to your site, but it seems pretty cool..
thanks for all the tuts!
Nice Tutorial!
Pixelmator seems to be a nice program :)
amazong tutorial! and amazing software!!!!
haha, look at all the comments. this looks like a good program. I love the Generator>Floor filter
Unfortunately I don't have Pixelmator....I don't even have a Mac :D
it would be gread if you could explain how this works in Photoshop, because the effect is really stunning.
Keep up the good work.
always an inspiration. thanks for all the great posts.
Wow, i will appreciate that software for sure :p
Good things inside ;)
Tks
I've heard a lot about Pixelmator lately. Your tutorial makes me want to get out there and buy it. I love all of your tutorials... you make it look so easy! Keep em' coming.
hey,
very nice tutorial!
i don't have Pixelmator to create this effect, so i'd really like to get a free copy ;)
bye, diederik
so awesome, thanks!
What is this new great and powerful weapon for design!?
Seems to be very useful, and it would be nice to take a break from photoshop and use something new.
By the way!! Thanx for the desintegration tutorial!!! That one eas great!!!
Take care!
I could do with a copy ;)
Nice effect though!
beangamer**************at********__+*******gmail.com
Nicely done!
Love the lighting effects.One again a great tutorial. Much love.
Hey there Fabio,
Great tutorial. I have got my Pixelmator and I was wondering how it works altough I had no time to look over it.
That looks great! A copy of pixelmator would be great :o)
Great job on the tutorial! The light bursts really bring out the flashiness of the 80's. Put me in the running for a copy of pixelmator. Sounds like a great piece of software.
I love photoshop but this pixelmator tutorial might make me go out and buy a copy if I don't win.
Cool tut, step 9 is really good
Wouldn't it be really cool
having Pixelmator as a tool!?
Amazing stuff!
Pretty cool. Has some nice effects with what looks like an easy to use interface.
Mac only. *sigh*
Wow, you are really amazing at what you do. Keep up the good work.
Ya and I would love a copy of Pixelmator
Jake
bajake(at)gmail.com
Very cool tutorial. I've been a silent reader on this site for a long time. Keep up the great work.
Looks like a great app for me. I find Photoshop quite difficult. Looks like it has also more Mac feeling. Great !
Great design! It's positively dripping with... well, whatever the 80's were dripping with, it's that stuff.
Awesome tutorial as usual…
I'd love to get a copy of Pixelmator, please help out a poor student :)
Cheers,
Ben
Very cool retro art. I would love to have a copy of Pixelmator!
Very nice indeed!
Looks powerful, interesting and good looking result!
Wicked! The light burst on the type and neon lines look great. I've never heard of this Pixelmator program, but it looks like something well-worth checking out.
Nice job on a great tutorial!
God job and good tutorial. And finally you make a big shot. Go on this way.
Hey there, long time viewer, first time commenter. I love the tutorials you are willing to share with the community. I have you added to my Google Reader feeds, and I always take something very valuable away from your tutorials and your articles. I love this Eighties flashback business. I actually still have and periodically play my Atari 2600 with around 50 games.
Pixelmator looks awesome, too. Cheers!
Wow,I just downloaded pixalmator, (demo) and triend your previous tutorial, I agree it has some amazing features, still getting used to it after working in photoshop for ages. :) Nice tutorial, i'll try it out for sure...
WOW. Excellent tut. Pixelmator is awesome. It seems easier than Photoshop. Love, love it. Peace!
Cheers for that tutorial dude!
I was just looking for a similar tutorial to help with my project.
I have forever subscribed/bookmarked to your page now =)
Hope to see more of these amazing tutorials x
Pixelmator looks like it has some awesome features. That "floor" generator is awesome all on it's own =)
VERY good looking effect...
Pixelmator looks very promising, I wish I had it... ¬¬...
LOL...
abraços fabio!
good tut, giev pixelmator :P
As always loving the site - great tutorial...
Excellent tutorial!
Easy and very good looking!
Cool tut.. I hope this time i'll be the lucky one..
Well the last time I entered 'leave a comment to win a prize' I got nothing but emails and didn't wiin ... Boooooo !!
Anyway.. I've been seriously thinking of purchasing a copy of Pixelmator, as a substitute to Photoshop, Which to be honest I doubt I will ever find a TRUE substitute.
Although I did find 'Coda' for OS X, www.panic.com/coda/.
Which in my opinion dumps all over dreamweaver from a great height...
So My question is how good is Pixelmator, compared with photoshop?
Ark
Awesome tutorial. I love that DVNO video. My friends have been passing it around.
I'd love a copy of pixelmator too :)
WOW! That program makes it look easy. I'll have to look in to that. Thanks for the tutorials.
That's very cool - looking forward to more tuts from pixelmator!
So impressive!
good stuff!
Hey, great tut. I'll take a copy of pixelmator too.
Email : doom_world_ends@hotmail.com
Really cool effect!
I would really like a copy of pixelmator!
My email is
jrundruud[at]yahoo.com
Really nice effect! As a child of the 80's I tip my hat to you :)
Pixelmator would look lovely on my Mac also :)
WOW this one was really nice and great thanks alot for sharing the TUT. :)
keep up the great work
I CAN HAS PEEXELMATURZ? KTHXBAI.
Hey, i really love the DVNO video, im a big fan of their other videos like D.a.n.c.e, and i'm really in love with the whole 80's color thing, but i wanted to ask if there was a way to do this on photoshop?
Im also a big fan of your tut's!
Very cool tut, thanks.
Very nice tutorial, reminds the good old times of Atari 2600, colecovision and vectrex.
Best regards.
Daniel
pixelmator looks so cool. really eyecandy to look at it. It has the 'mac' look and also almost a powerfull as photoshop.
Very nice effects, looks like the 80s for real.
I would really really want a copy pixelmator
email: escord-1@hotmail.com
Looks really great.
I like the GUI of the program...
..or is it just your visual style ?
anyway.. nice tool and nice tutorial.
I Would be happy to get a copy of pixelmator : bne.corp@gmail.com
Looks nice :)
Thanks
Omg, i hope it is possible with Photoshop! Because that looks really cool! Again, light. I love it! :D
And i really want a copy of pixelmator:
Markus_nielsen@hotmail.com
Post new comment