If you took some photos of the fireworks on your town or if you know some good photos please post them up on you comments, lets make this list really big.

Brazil

Rio de Janeiro – Brazil

Rio de Janeiro – Brazil

London – UK

London – UK

London – UK

Singapore

Singapore

Singapore

Scotland

Australia

Australia

Australia

Finland

Hawaii – USA

San Diego – USA

Taiwan

Hong Kong – China

Hong Kong – China

Portugal

Lisbon – Portugal

Croatia

Austria

Costa Rica

Czech Republic

Poland

Open a new file with the canvas 625 x 625px. Create a rectangle that fit the canvas and fill it with a Radial Gradient with the colors #000 and

STEP 2

Let’s start creating the monitor. Draw a rectangle (538×360px). Fill with #000 and border 2px #CCC. Add a Inner Shadow with #FFF and the values: 0 – 65% – 2. Also, set a round corner of 10%.

STEP 3

To create the support of the display, we need to use the Pen Tool. Draw a shape like the picture, than apply a Linear Gradient. The colors for this gradient and the positions of them are: #494949 – #C7C8CC – #C7C8CC – #FFF – #FFF – #C7C8CC.

STEP 4

Now we need to duplicate this support to create a shadow. So after duplicate it, move it a nudge down a little bit; send it to backward and apply a Drop Shadow with the values: 4 – 40% – 4 – 270º.

STEP 5

We need to create the canvas of the display. Draw a rectangle inside of the rounded rectangle and fill it with a nice background image, like your own desktop. Here we’re using an image from James White, you can download here if you want.

STEP 6

To create the reflectin on the display, firstly, we need to duplicate the rounded rectangle and bring it to front. After that convert this rectangle to path (just ungroup!). We must create 2 new dots with the Pen Tool and after that delete other ones. See the picture below for reference.

STEP 7

Now just apply a Linear Gradient from #FFF to #FFF. At the bottom of this gradient change the opacity to 0. Also use 40% opacity to the entire path. After that, just move this path 2 pixels left and 2 pixels bottom.

Final Result

We can put an Apple’s logo at the bottom and a very small circle at the top to simulate the camera. Now we have a beautiful vector Apple Cinema Display to play with some backgrounds, wallpapers or website layouts. It’s definitely an awesome way to show off your work or present them to clients.

Download the Fireworks file

Click here to download the Fireworks file.

First of all, create a rounded rectangle with a dark gray gradient. Now we need to edit the path, so ungroup it and edit the points with the “Subselection Tool” tool (A) until you get a great shape. After that, apply a Inner Bevel with the values like the image.

Step 2

Now, duplicate the first rectangle, make a little bit small and apply the color #000. Duplicate this last one and do the same, turn it smaller on the height and width and apply a very dark gradient and 2 Inner Shadows like the image.

Step 3

Now we will create the phone part. On this step we draw 4 elipses, each one with a diferent style, size and position. Look the image and set all the values for each one like I did.

Step 4

To create the button, we need 2 elements: one elipse and one circle. The circle will be the mask for the elipse. So first draw the circle, apply a Linear Gradient like the image 2, also it must have a border with 2px. After that draw the elipse with a dark Linear Gradient. To do the mask, cut the elipse (CTRL or Cmd + X) and paste inside the circle (select the circle and CTRL or Cms + V).

Step 5

Almost done, take a look on the image to see the other elements we should create to reach the details like the gadget. The PNG file have all the elements already drawn for you.

Final Result

Here’s the result. The process is simple, but we should have attention on every detail, because that makes the difference on this kind of project. To get even more real, we place the Palm’s interface over the icon. And stay tunned, this interface will be the next tutorial I will make!

Download PNG file

Design References

Step 1

The first thing to do is of course have a concept in mind of what you want to do. In my case the guys over at Wellknow.as told me exactly what they wanted for the layout. Also I used a CSS Framework and the Fireworks template. You can download it at http://960.gs/

Step 2

With the Rectangle Tool (U) create a new rectangle with the document size. For the Color use Solid and #191D22. Then on the Properties Panel, click on the Add Icon (+) and select Add Noise. Use 1 for the Amount.

Step 3

With the Rectangle Tool (U) create another rectangle but make it like a stripe starting on 200 pixels in the Y axis. For the Color use #1c202a.

Step 4

Click on the Add and to to Shadow and Glow > Inner Shadow. Use 0 for the distance, 40% for the Opacity, 1 for the Blur and 270º for the Angle.

Step 5

Click again on the Add icon and choose Shadow and Glow>Drop Shadow. Use 0 for the Distance, 65% Opacity, 4 for the Blur. The angle won’t make any difference because the Distance is 0.

Step 6

Now again let’s add some noise so the rectangle won’t have that solid color, but instead a nice plastic feeling.

Step 7

Here I placed the iPhone image right in the center of the image as it was sitting on. They didn’t want to show the interface of the app right now so that angle was perfect.

Step 8

Duplicate the layer and go to Modify>Transform>Flip Vertical. Then change the Opacity to 50% and go to Modify>Mask>Reveal All. With the Gradient Tool (G) select the black and white preset and apply it on the layer mask. What is white will be visible and what is black transparent. So, create the famous wet floor effect.

Step 9

Add a new rectangle with the Rectangle Tool and fill it with a gradient using white for the both colors. Just change the opacities one will be 100% (1) and the other 0%(2). Use the Gradient Tool (G) to apply the gradient in a angle of 90º.

Step 10

To create the light effect it was very easy. With the Ellipse Tool (U) create an ellipse, then use white for the color and change the Edge to Feather and 100 for the value (1). After that just change the Blend Mode to Overlay (2).

Step 11

Now duplicate to make the light stronger. Also add different ellipses to make the light effect more realistic. Another thing that is very important is to play with the opacities. Use 50-60% for the new ellipses.

Step 11

For the slogan, I used Arial 35px for the typeface because Arial is the iPhone’s font, and a gradient from a light grey to white. Also I added a shadow using 1px for the Distance, 90% for the Opacity, 1 for the Blur and 90º for the Angle.

Step 12

With the Round Rectangle Tool (U) create a rectangle, fill it with grey and change the opacity to 80% (1). The with the Rectangle Tool (U) create another rectangles but beneath the grey one. Also make it smaller (2). Again with the Round Rectangle Tool (U) create another element (3). Then select the 2 round rectangles and go to Modify>Combine Path>Punch. Select all elements and group them. After that add a noise like in the first steps.

Step 13

With the Line Tool (N) create a line then go to Modify>Mask>Reveal All. Select the gradient tool and the black white preset with oval for the type and paint over the layer mask. That way the edges will fade.

Step 14

With the Ellipse Tool (U) add an ellipse in black and change the Edge to Feather and use 60 for the amount. Then with mask, hide the part below the line. To do that is super simple, create a rectangle with the area you want to show and go to Edit>Cut. Then select the ellipse and go to Modify>Mask>Paste as Mask.

Step 15

Repeat the same process to mask the Id Card.

Step 16

Now let’s add the lanyard. Again repeat the same process to mask it. Also add a little shadow to the card and lanyard.

Step 17

Place some icons on the left column and it’s time to add the content.

Step 18

Make the guides visible so we can have a visual reference to create the columns and place the content. That will be really important when you code the CSS.

Conclusion

The layout is done, I need to do a few adjustments to make the slicing process a little bit easier but we have the whole home-page created. The design process was quite simple even the tools and filters we used, the most important thing was to define the concept before going to the tool. The same thing could be done in Photoshop or a different tool, however, with Fireworks we have the super useful vector capabilities and the non-destructive filters that make the process much easier. Also the way we can play with gradients in Fireworks is simply unbeatable.

Click the image to visit the web site

When you first got interested about art and design?

For as long as I can remember, I have always been drawing and thinking about art. I grew up on comic books, cartoons and doodling in my school books. I always wanted to do art in school, I never ever had any interest in other school work or anything else except drawing.
When I was in school I read a lot about artists like Andy Warhol, Pablo Picasso and a lot of The Renaissance painters. Their work really inspired me to draw and paint and most of express myself. I also watched endless amounts of music videos and loved the work of Michel Gondry, Hype Williams, Chris Cunningham and Mark Romanek. I wanted to go to art college to be either a painter or a designer. I was happy to find out I could be almost both, as an illustrator! My inspiration and desire to be an illustrator just kept growing as I progressed in college.

How did you discovered your talent for producing art?

When I was in school, my teachers would pay me with chocolate bars and small amounts of money to draw all these pictures so the rest of the class could color them, like big huge coloring books. I used to get called out of my classes sometimes to draw for other teachers and their students. I went to an all boys Irish Christian Brothers school and there was a lot of emphasis on religion and we would incorporate religion into our art. I drew a lot of pictures of Jesus, God and the Devil. I also used to draw things like Superman and Batman, I’d hide them away but my friends would also show the teachers how good I was. But school was tough because when it came to doing other things like mathematics, science and sports I was completely lost.

How did you start working with design and illustration?

I left college in 2003, I worked as an illustrator on a series of roughs for a children’s book. It was very traditionally based, all paint and pencils, absolutely no Photoshop. I got a job as a display assistant and designer in a huge department store here in Dublin. I got to design leaflets, signage and create illustrations for retail areas, fashion shows and press ads. But I also discovered my love of fashion, styling and retail so I was very lucky to gain such experience. During my free time working there I began to develop my own style of illustration. I looked at artists like Deanne Cheuk, Justin Maller, Pete Harrison, Derek Lea and was just amazed and inspired by their level of skill and professional work ethic. Their work was crazy beautiful but it was very successful in a commercial manner. I just did a heap of research on my favorite illustrators to see how their creative processes would work. I knew I wanted to be an illustrator so I kept working to discover a balance between my love of traditional illustration and digitally manipulated art. I focused on becoming an established illustrator and trying to better myself and giving people something to enjoy.

How did you improve your work and technique?

I’ve always been described as a hard worker and a very efficient person. I’m always looking at ways to improve on my workflow. I upgrade a lot of my hardware and software regularly just to make things run more smoothly for me. I get stressed when I’m working a big piece in Photoshop, I haven’t pressed ‘Save’ and then it just freezes up!!! I make a lot of my own brushes in Photoshop. I scan in bits of dirt and paint or old pictures to give all my work a very unique and personalized look. It’s fun to build your own library of brushes and textures. I try spent at least a week a month collecting bits of rubbish that could work as a really cool texture in Photoshop. I also do my best to draw as much as I can. You can spend all day sitting at Photoshop and turn into a zombie. I read about some artists who just fire up Photoshop and start working. I couldn’t do this, I think any artist needs a sketchbook to rough out ideas, compositions and brainstorm techniques to get the best out of their work.
I carry a sketchbook around with me so I can scribble out any impulsive images that pop into my head.
I’m trying my best now to avoid using stock imagery. I hate seeing a digital art piece that you know has been based around a random stock image, and then you see the same image being used somewhere else in a completely different context. If I do need to use stock images, I use shots that are rarely used and have something different looking about them. If you can collaborate with a professional photographer that have their own recognized name and style then do that too. Or just shoot your own photography!

What, in your opinion, is the best way to evolve in this field?

Learn about the current trends in art/design/illustration/fashion and avoid them!!! The best way to stay fresh is to do your own thing and not imitate what has been done already. Yes, I can admit I’ve done some Andy Warhol style pieces (!) but I look at this as an homage and a kind of reinterpretation, much like Picasso when he started doing famous paintings, but in his own style. But I was having fun with it and reinterpreting his iconography to suit my ideas and my style. I thought, ‘everybody knows his work so they will understand me taking the piece.’
Every artist has their own style and potential it’s just a matter of finding it and making people see it. I think illustrators should be more confident about their own ideas and conceptual work rather than just feeling like they should fit into the crowd or go with what they think will get them work. A great line that a friend gave to me years back was ‘Remember Phil, the rest are all sheep…you are a wolf!’

What do you like most on your job? And what would you say you don’t like about it?

I love that I am able to do art everyday, I waited so long in school to be able to draw and create on a full time basis. I’m addicted to my work…I’ve never done drugs so art is really my habit I can’t kick. Seriously it’s not even funny sometimes how obsessed I get with my work. I’m always trying to better my style and try new things so right now the journey is better than the destination. I love drawing, it’s the best way to express yourself. I hate not getting paid on time or when a potential job doesn’t go ahead. It knocks your confidence into the stratosphere. I grew a thick skin very quickly when I started out. Also I hate people asking me to work for free. It really pisses me off now, it’s incredibly insulting to be asked by a company that is obviously generating a lot of money to work for nothing. I am cool with charity based projects however, I feel a lot better when it’s going to a good cause.

Which software and hardware do you use to produce your art?

I own a 24′ Intel based iMac with 4GB of RAM and a big hard drive. It is superb for adding fine detail to my work as the screen resolution is so sharp and the colors are so vibrant. I use Adobe Photoshop CS4 Extended. My work isn’t very layered, the best pieces are around five layers with different layer blending modes. I find the best way to add depth and complexity to my work is in the drawings I do. My drawings are done to a large scale, scanned in at around 600dpi, so everything is very sharp and vibrant. I back up everything with an external drive and keep a separate copy on a DVD or a USB stick on my keys, incase somebody might need anything emailed to them. I just bought a little netbook to use while I’m out and about. I don’t get much sun here in ireland, it is very important for Vitamin D and my mood. The last thing I want to be is in a room on a computer when the sun is out. So my netbook is my right arm on sunny days.

What kind of “software upgrade” you would say it would make your work much easier?

If somebody could invent an application that could take what I see in my mind and put it up on my iMac screen then I would be delighted. And a teleportation device, like in Star Trek. I get panicky when I’m running late or when I’m tired so to be somewhere in an instant would be very useful. Seriously though a better lasso/magic wand tool on Photoshop would be nice. And better customization on Photoshop would be cool too, like having the ability to completely reconfigure the filter galleries and tools to suit your needs.

What is your main inspiration source?

It changes all the time! I can never really say specifically at what inspires me. I think life is very inspirational. The ability to create and to experience it’s reaction gives me a great buzz. Life is so random, you just never know what will happen next. I like strange coincidences and weird events. And people doing something that’s not considered everyday, I like asking them a lot of questions.

Which are your goals and future plans for your career?

I want to get over my fear (and hatred :0 ) of photography and start shooting models and incorporate them into illustrations. I want spend a bit more money on personal projects so they fit in seamlessly with my commercial work. I’m thinking now, particularly during this super famous global recession, ‘If people won’t commission me…I’ll commission myself.’ I want to avoid using women in my illustrations. I’m getting sick of seeing a hot girl with a lot doodles around her. When I completed my work on the recent Depthcore pack called ‘Her’ I was like…I’ve done this to death, a hot girl with swirls. Let’s get some guys, monsters, scary creatures or superheroes and start doing pieces with them. I now like to see a cool illustration that features a guy as the model/basis. I need to move on and look at different areas to explore. I think architecture would be cool interpret in illustration, because Dublin just has such unique
architecture and it’s always inspiring to me. Plus more work with the Depthcore collective…mad respect to all my fellow members, to have joined them and to be involved with all the artists there has been an absolute blessing. I have been very lucky to have had the opportunities and experiences in my career so far, I’m still very young and have a lot to learn and there is so much more to share with everyone.

Do you have any advises to the upcoming artists?

Never give up. If you get knocked back by anyone or anything, dust it off and start again. You have to consider the progressive nature of the design industry and realize that one commission won’t make you an overnight success. The best digital artists and designers out there are the dedicated ones because they are trying something new, being confident about what they do. If you stay confident and focused this will show in your work, people will see it and they will
want to hire you. Branch out and contact other artists…like me! ;D, ask to collaborate with them and stay fresh. Keep up with the latest trends in digital art, design, art and fashion and just avoid them. Create your own trends, I know that sounds easy to say, but if you work at it and think about it enough, you’ll do it. Artists who are successful are the ones who come from the left of centre because they were doing their own thing. I’ve only started using Facebook,
Twitter and soon Youtube…the potential for these are limitless so explore things like these.

Thanks again Phil… and the final words are with you…

Thank you so much. And to finalize I have three simple words…Love The Robot.

For more information visit Chanito’s Deviantart at http://chanito.deviantart.com/

Step 1

Open Adobe Illustrator and find the font that you want to use in your artwork, in this case I used Xirod Font and tweaked it a little. Make it outline and save it in Adobe Illustrator 8. (Cinema 4D just open vectors in this Adobe Illustrator version).

Step 2

Go to Cinema 4D and open your Illustrator file, when you open it in Cinema 4D you can see that it is inside of a group. You need to ungroup them and add the extrude NURBS to each letter of your word. Then when you have each letter with extrude you need to add lights (I used 2 area lights, in the front and the left side) and target camera (optional, you can use whatever you want).

Step 3

Well, we have our 3D text and we need to add more details before we go over to Photoshop. We’re going to duplicate our 3D object 8 times to make it editable and we are going to add explosion and shatter. You need to play with the settings to see how you want your 3D text to look like. Just apply 3 explosions and 3 shatters to it and make a preview, you will see where to add more details and where not to.

Step 4

Go to render settings and put these following settings. Make the render and save in 300 DPI TIFF format with Alpha Channel.

Step 5

Take the render into Photoshop, go to the Channels windows and choose the Alpha Channel. Make your selection, cut your 3D text and paste it in another layer. Then you can work just with your 3D text and after, with your background.

Step 6

We’re going to create the background and paint some areas with dark blue. I used the basic soft brush and 50% opacity to achieve the effect that I wanted.

Step 7

Now we’re going to add more details to the background and we also need to create some highlights behind the 3D text to make it stand out.

Step 8

Time to add some color to our 3D text. You can do this in different ways. I just used the basic soft brush and painted over the 3D letter and made some masks.

Step 9

We need to do a special effect to apply in front of our 3D letters. To do this, choose the Gradient Tool and change the mode to Difference. Make gradients in different directions. After, select the text and make a layer mask in this effect layer. Change the blend mode to Soft Light and Opacity to 70%

Step 10

Next, select the 3D text, go to Modify – Contract and use 10 to 20 pixels. Delete then deselect and go to Effects – Blur – Motion Blur use Angle: 15 and Distance between 60 to 70 pixels.

Step 11

Now we’ll add more detail to our 3D text. Choose a good splatter brush and paint wherever you want. To generate the back of the explosion you need to add broken glasses behind text. (http://psdtuts.s3.amazonaws.com/208_Break_Down/pieces.png). Add some highlights to make it stand out.

Step 12

Add some shadows inside of the 3D text with the Polygonal Lasso Tool and the Gradient Tool in Black to Transparent.

Step 13

Now add some crack brushes in the 3D text to make the explosion more real. Put a crack on the letter you want to brake, in my case, the x.

Step 14

Add highlights on the border of each letter to give it a real explosion feeling. To create the beginning of the explosion add a mini explosion brush to the inside corner of the x.

Step 15

Make some lines and flares in the explosion point in different ways. Use different colors to give it a great look.

Step 16

Add the broken glass image on top of your 3D text and change the Blend Mode to Overlay. Duplicate it, go to Edit – Transform – Flip Horizontal and change the Blend Mode to Normal.

FINAL

This is the final image. Hope you enjoyed this tutorial!

Step 1

We’ll start by making a new document with 180 mm width and height. If you do not like it you can select whatever dimensions you want. Then we will make one horizontal and one vertical guide positioned directly in the center of the document.

Select the Ellipse tool (L), create the ellipse, fill it with no color, select black outline and put it in the center of the document. I made one 160 mm high and 40 mm wide. So it will look something like this:

Step 2

Now, we are going to copy the ellipse 8 times around the circle. Easiest way to do this is to use Rotate Tool (R). So select the ellipse, click on the Rotate Tool (R), hold down ALT and click on the center of the ellipse, dialog box should appear. Enter 20 in angle and click on copy button. You will get this:

Step 3

Now press CTRL+D 7 times and you get to this point:

Step 4

We can now delete the guide lines; we do not need them later. The easiest part of this tutorial is done, now we are starting with ant work We need to divide the final product in to small pieces. We are going to make it using Pathfinder. So select all ellipses and go to Window>Pathfinder and click on Divide:

Step 5

Now press Shift+CTRL+G to ungroup all objects. We are going to delete all needless objects. It is all 5 inner circles composed of 18 objects. So, 3 outer circles of objects remain as on the picture below.

Step 6

We are going to play with gradients now. It will be quite long but the output will be awesome. So let’s start: select the objects with Direct Selection Tool (A) (press Shift and click on each object) and apply a gradient from C30 M100 Y0 K0 to C30 M100 Y0 K80 like the image below:

Step 7

Then select another group of 6 objects and apply gradient from C80 M100 Y0 K0 to C80 M100 Y0 K80, here we go:

Step 8

Select another following group of 6 objects and apply gradient from C0 M100 Y100 K0 to C0 M100 Y100 K80. You’ll get something like this:

Step 9

For now you have enough information to know how to apply gradients for other groups of 6 objects.

• 4th group gradient from C0 M50 Y100 K0 to C0 M50 Y100 K80
• 5th group gradient from C0 M0 Y100 K0 to C0 M0 Y100 K80
• 6th group gradient from C50 M0 Y100 K0 to C50 M0 Y100 K80
• 7th group gradient from C100 M0 Y100 K0 to C100 M0 Y100 K80
• 8th group gradient from C100 M0 Y0 K0 to C100 M0 Y0 K80
• 9th group gradient from C100 M100 Y0 K0 to C100 M100 Y0 K80

If all went well you will get something like this:

Step 10

Now we are almost done, just remove the black outlines from all objects. And you are done with the output. This output does not correspond to physics. But applying the gradients to specific directions on each object, which our flower consists of, can make for some pretty awesome effects. It can be done by selecting each object, clicking on a Gradient Tool (G) and playing with it. Like these two examples:

Conclusion

First example is a bit complicated I will explain it later. Second example goes out from our output made in this tutorial. It was made only by rotating a gradient in proper direction on each object.

If you were able to make the second example, then change the Blending mode to Darken and copy it. On the copy – you have to make axial symmetry of each object or gradient. You can make it by axial mirroring or just by rotating the gradient to opposite side of object. If you are done with it, just put the copy over the original one and you will get the output like in the first example.

Case Study

Final Image

Plagiarism

Unfortunately when we lay our work online there is always a chance of someone trying to take an advantage of it by copying some work for their own use without any permission. Wojciech was very upset that the work he took weeks to get done was taken by someone who just added some typo and claimed it to be his.

What is Plagiarism?
Many people think of plagiarism as copying another’s work, or borrowing someone else’s original ideas. But terms like “copying” and “borrowing” can disguise the seriousness of the offense:

According to the Merriam-Webster Online Dictionary, to “plagiarize” means

to steal and pass off (the ideas or words of another) as one’s own
to use (another’s production) without crediting the source
to commit literary theft
to present as new and original an idea or product derived from an existing source.
In other words, plagiarism is an act of fraud. It involves both stealing someone else’s work and lying about it afterward.

For more about Plagiarism visit www.plagiarism.org

Here is the lame version of his stolen work.

Final Result

Close up