articles on

Codemyconcept Winners & Tomorrow's Pixelmator Giveaway!

Wow, what a response! I'm not sure I've ever seen an image explode with tags on Facebook like that! And I'm sure everyone who is still frantically tagging and commenting, trying to figure everything is wondering who the winners are… So here we go, these are the winners: Winners of $500 codemyconcept gift cards and t-shirts 1. Paul McDonough 2. Hugo Oliveira 3. Abrar Ahmad 4. Ben Albers 5. Alex Gurghis 6. Kyle W Martin 7. Aarikamarino (**need your email**) 8. Kelly Baker 9. Jonathan Dolan 10. John Wilson Winners of $500 codemyconcept gift cards 1. Andy Shin 2. Gieljan Vantyghem 3. Frankie Frank 4. Ahmed Ziab 5. Jessica Emberson 6. Victor Samaue 7. Fabe Rnhrt 8. Angelo Ferreira 9. Jonathan Mitchum 10. Rory Geraghty Winners of Wordpress packages from codemyconcept's new project, custompsds.com 1. Brennan Matthews Griffith 2. Tuxu Arts **Note: Winners will receive a message today on facebook telling them how to collect on their winnings** And a prize for everyone…. 50% off any five page project in 2011! Is it free? No, but we gave away as much as possible. With this deal, you can get a half off on any five page project you might have in the coming year, and support your favorite source of inspiration in the process :) So what's happening with tomorrow's giveaway? At 1pm EST tomorrow (Wednesday), I will be posting the below image to the Abduzeedo facebook page. The rules are simple, the first 5 to tag the image with their name will get a free copy of the pixelmator software. This will go even fast than today's contest so I'll be extra careful to be precise on the time. 1pm EST - on the dot! UPDATE: WE WILL NOT BE USING TAGGING TOMORROW. YOU MUST COMMENT! FIRST 5 COMMENTS OF "ABDUZEEDO" WILL WIN.

Pixelmator Giveaway - Winner

Last week we showed you the amazing Pixelmator Office, and besides that Saulius also gave us a copy of Pixelmator to give away on Abduzeedo. Today we will announce the winner! Pixelmator, the beautifully designed, easy-to-use, fast and powerful image editor for Mac OS X has everything you need to create, edit and enhance your images. Winner Last week we launched a giveaway from Pixelmator. And the winner of a Pixelmator copy is: Samir Congratulation man! We will get in touch to you soon! And if you're not the winner and want to know more about Pixelmator, stay tunned on Twitter at @pixelmator. Some photos from Pixelmator office If you want to take a look on more photos, visit the other post at abduzeedo.com/pixelmator-office-photos-1-copy-giveaway. More about Pixelmator If you want to know more about this powerful image editing tool, visit: pixelmator.com.

Pixelmator Office Photos - 1 Copy to Giveaway

Pixelmator has been growing in a fast pace since 2007, not only in terms of popularity but their team has increased considerably too. They also have moved to a new office and thanks to Saulius, we will share with you a little bit of the workspace where the Pixelmator guys come up with their crazy ideas. But that's not all, we've also gotten a copy of Pixelmator to give away. Founded by the brothers Saulius and Aidas, today Pixelmator has 9 people on the team helping to create the software that is called "the best image editor for the rest of us." And we have to say that the working environment of those guys over there is inspiring. Based in London, it differs a little bit from those "organized" offices with everything in their proper places, and shows an area with so much life and personality into every corner. About the giveaway We'll be giving away 1 copy of Pixelmator. To win, simply follow Pixelmator on Twitter @pixelmator and tweet or add a comment below showing why you must win this Pixelmator. Next week we will be announcing the winners Pixelmator, the beautifully designed, easy-to-use, fast and powerful image editor for Mac OS X has everything you need to create, edit and enhance your images. More about Pixelmator If you want to know more about this powerful image editing tool, visit: pixelmator.com.

Water Text in Pixelmator

In this tutorial, I will show you how to create text with water effects. To do this, we will use some stock photos with masks and image adjustments. I will also show you how to create bevels using Pixelmator. Step 1 Open Pixelmator and create a new document. I used 1440×900 pixels. Also, keep the background white. Step 2 With the Type Tool (T), add a text. I typed “WATER” using Arial black for the font. The color here doesn’t matter because we will use it to mask images. To create a marquee selection of the text, just click on the thumb of the text layer while holding the Command Key. Step 3 Now, let’s use a photo of water. The one I used was courtesy of Shutterstock, and you can find it here. Import it and place it in your document. Go to Edit>Transform and reduce its size; also, duplicate it 3 times, always flipping the new copy horizontally. That way, you will be able to match the sides. Use the image below for a reference. Step 4 With the marquee selection of the text active, go to Layer>Add Layer Mask; that way, the photo will show only on the text area. You will have to repeat this 2 more times for the duplicated layers of the photo. Step 5 To make the water more realistic, let’s use another photo. You can find one here. This one is of some water bubbles. To make the colors of the images match, go to Image>Colorize. Move the little controller to the cyan area and increase the saturation to over 70. We will use this often for other images throughout the tutorial so keep that in mind. You also will have to try different values depending on the imagery you are using. Step 6 Repeat the Masking process so the bubbles will be within the text area. The result here already looks pretty cool. Step 7 To spicy it up a little, add some water splashes. The ones I used can be found here, courtesy of Shuterstock, once again. You also will have to colorize them in order to make the colors match, exactly like we did in Step 6. Step 8 Select all layers but the white background and duplicate them. Merge all the duplicated layers (Layer>Merge Layers) and then go to Edit>Flip Vertically. Move this upside down text right below the text aligning the words. After that, go to Filter>Blur>Gaussian Blur; use 20 for the amount. To finish the effect, go to Layer>Add Layer Mask, then select the Gradient Tool (G) and a linear gradient from black to white. Mask the layer in which the black area will be hidden and the white will be shown. Use the image below for reference or download the PXM file in the end of the tutorial. Step 9 Add a layer on top of the others and fill it with a very subtle gradient. Use the Gradient Tool (G), and for the colors, use Grey to White and play with the Opacity in order to make it very, very subtle, exactly like the image below. Step 10 Let’s now place a photo of some water droplets. The one I used can be found here. The image is in grey scale, so go again to Image>Colorize and change the color of the image to this cyan scheme we are using. Step 11 Put this layer beneath the other layers; also, change its opacity to 55%. After that, go to Edit>Transform. Then, the Transform panel will open. Click on the little gear icon and choose perspective. Then, apply the perspective I used. Use the image below for a reference, but basically, the only thing you will have to do is move the controllers on the bottom area while holding shift to make them wider than the top area. Step 12 Duplicate the droplets layer and go to Filter>Blur>Gaussian Blur. Use 30 for the amount. Step 13 With the Eraser Tool (E), delete the areas close to the text in order to remove the blur. Also, notice that the horizon is sort of fading out. That’s because I added a gradient from white to cyan and applied an overlay for the blending. Step 14 Again, repeat the “WATER” text with the marquee selection like we did in Step 2; however, this time, the text has to be black. Step 15 Go to Edit>Stroke. Use white for the color and 5 for the width. Also, make sure that the Inside option is selected. Step 16 Now, still with the marquee selection active, go to Filter>Blur>Gaussian Blur. Use 15 for the Radius. Step 17 Just change the Blending of the layer to Color Dodge and you will already have a really nice bevel effect. Step 18 With the Eraser Tool (E), delete the bottom left areas of the bevel to try to match the droplets. Step 19 Select all layers and duplicate them. Then, merge all of them into a layer and go to Filter>Blur>Gaussian Blur. Use 20 for the Radius. Step 20 Change the Blending to Screen. Step 21 Add a new layer on top of the others and fill it with cyan using the Paint Bucket Tool (N). Then, change the Blending to Color Burn with 30% Opacity. Step 22 Now, add another layer, this time, beneath the cyan layer and fill it with a radial gradient from white in the center to grey. Change the Blending to Multiply with 25% for the Opacity. Layers Order I love that we can now have groups of layers in Pixelmator. Conclusion This is the outcome you will have. The idea is pretty simple and straight forward; we are just mixing some photos and masking them with text. However, I believe the Bevel technique will be very useful for your projects in Pixelmator because there is no filter for that yet. Download the Pixelmator File Click here to download the Pixelmator file used for this tutorial.

Stylish Light Effect in Pixelmator

In this tutorial I will show you how to create a really nice light effect using basic filters and tools in Pixelmator. The idea is to create an image with that 80s feeling in it but modern as well. Step 1 Open Pixelmator and create a new document. The size I am using is 1440×2000 pixels. After that, import a photo of a girl; the one I’m using is courtesy of Shutterstock and you can find it here. Step 2 Duplicate the layer of the girl and go to Image>Hue and Saturation. Increase the Saturation to 20. Step 3 Now the color of your image will be a little bit more saturated, in this case warmer as well. Step 4 Duplicate the layer of the girl, the one on which you increased the saturation, and go to Filter>Blur>Gaussian Blur. Use 20 for the radius. So you will have a pretty blurry image on top of the other. The idea here is to make the girl’s skin super smooth. Step 5 With the blur layer selected, go to Layer>Add Layer Mask. Then with the Brush Tool (B) and a very soft brush, start painting on the layer mask over the eyes, nose and mouth in order to hide the blurry layer. So you will have all the details in those areas but keep a super soft skin. This is not supposed to be highly realistic, so there won’t be any problem in doing that. Step 6 Now, duplicate the layer with no blur and go to Image>Desaturate. Rearrange this layer so it will be on top of the others. After that, change its Blending to Soft Light. Step 7 Add a new layer and with the Brush Tool (B) and the same soft brush, start painting with black in order to hide the background. Leave just her face with a part of her hair and neck. Use the image below for reference. Step 8 Still with the Brush Tool selected, add a new layer on top of the others and start painting with red and orange on to bottom left, and top right and left. Play with the opacity of the brushes; these colors have to be very subtle. Step 9 Now let’s use another image. You can do that using brushes if you want as well; however, I use a stock photo from Shutterstock. You can find it here. Position the image on top of the other layers and change the Blending to Hard Light at 40% Opacity. Step 10 This will be the result you will have after these 10 steps. The concept is pretty much done. Now let’s just add a few more effects. Step 11 Add a new layer beneath the lights layer from the previous one. After that go to Filter>Quartz Composer>Generator>Defocus. Use the image below for the values. Step 12 You will have an effect like the image below. Change the Blending to Color Dodge. After that, go to Image>Levels. Increase values of the white input in order to make the bokeh stronger. Step 13 If you didn’t like how the bokeh was rendered, simply try a few more times until you get a nice result. You will also have to delete the bokeh effect that is over the girl’s face. I also added a little lens-flare effect next to her eye. That lens flare is from a photo that you can download for free at http://www.williams.edu/astronomy/IAU_eclipses/jmp_eclipse03_04.jpg. Resize the image and use Screen for the Blending. Step 14 Add a new layer on top of the previous one and go to Filter>Generator>Sunbeans. Make sure you had black and white for the colors. Move the controller far to the top right and use the image below for the values. Step 15 Add a new layer and fill it with black. This layer will be beneath the one you applied the sunbeams filter. Select both layers and merge them into one. Change the Blending of this new layer to Color Dodge. You can go to Filter>Blur>Gaussian Blur and add some blur to the rays. Step 16 With the Eraser Tool (E) and a very soft brush, delete most of the rays, leaving just the area over the girl’s face and the top right. Also reduce the Opacity to 40%. Step 17 Duplicate the rays layer and move it to the top a little bit. After that, change the Blending to Soft Light. After that add a layer on top of the others and fill it with yellow. Change this layer’s Blending to Soft Light at 15%. Layers Order Conclusion Now, it’s all about adding some noise and your logo. The effect is done. We basically played with brushes and blendings to create this effect. Now it’s up to you to apply the technique to your own projects. Download the Pixelmator File Click here to download the Pixelmator file used for this tutorial

Cubes Mosaic in Pixelmator

In this tutorial, I will show you how to create a really nice effect from mixing a mosaic pattern with a photo. We will play around with masks and other basic filters, but the outcome will be very cool. Step 1 Open Pixelmator, and create a new document. I am using a size of 1440×900 pixels. Fill the background layer with black, and import the cubes pattern texture by clicking here. Insert it into your design. Step 2 With the pattern selected, go to Filter>Tile>Affine Tile. Use 0 for the Angle, 0.40 for the Scale, 1 for the Stretch, and 0 for the Skew. Step 3 Reduce the Opacity of the layer to 20%. Make sure that the background is set to black. Step 4 Using the Magic Wand Tool (W), select one of the sides of the cubes and create a new layer with it by inverting the selection and deleting the rest of the layer. Step 5 Repeat the same procedure for the other side of the cube, and create another layer. These two sides will be used to mask the photos. Step 6 Now, let’s import a photo. The one I am using is courtesy of Shutterstock and can be downloaded by clicking here. Insert it in the center of the design, and duplicate it twice, so that you have three layers that include the girl. Step 7 In one of the layers, go to Edit>Transform, then click on the little icon on the left, the little gear, and select Skew. Distort the photo following the cubes’ angle. Next, go to Filter>Blur>Guassian Blur. Use 15 for the radius. Step 8 Holding down the Command key, click on the thumb of the layer of the sides of the cube layer created in step 5. Then select the distorted photo from the previous step, and go to Layer>Add Layer Mask. Step 9 Repeat the same procedure from step 7 with the other layer of the girl. Step 10 Again, mask the layer but use the other side of the cubes layer. That way you will have a sort of deconstructed photo that follows the cubes pattern. Step 11 Now, make the non-distorted layer of the girl visible, and rearrange the order, so that it is behind the two other distorted layers. After that, group the three layers and rename the group “Girl.” Step 12 Using the Lasso Tool (L), create a marquee selection of one of the cubes. Add a new layer, and fill the marquee selection with black. You will now have a hexagon. Go to View>Show Brushes. Drag the layer with the hexagon to the brush palette, in order to create a new brush. Step 13 Now select the “Girl” group, and go to Layer>Add Layer Mask. Then, using the Brush Tool (B), select the hexagon brush created in the previous step and use black to begin painting over the mask area to be hidden. Make some cubes visible by hiding sections of the “Girl” group. Step 14 Duplicate the hexagonal pattern layer, and rearrange it, so that it is in front of the other layers. Next, change the Blending to Soft Light. Step 15 Add a new layer on top of the others, and fill it with black. Change the Blending to Multiply, and select the Brush Tool (B). Using the color white and a big and very soft brush, begin painting in the center of the document in order to create a vignette effect. Order of the Layers Conclusion This method is an extremely simple technique with a really nice outcome. It is all about playing with a pattern and mask. It is now up to you to come up with different ideas and ways of using Pixelmator. Download the Pixelmator File Click here to download the Pixelmator File

Lens Flare Revisited in Pixelmator

In this tutorial I will show you how to create a very neat lens flare effect in Pixelmator. It’s true: the terrifying lens flare is back, and it can be really cool to use as wallpaper, as I’ve been doing. This tutorial is part of series of tutorials I have been writing for the Pixelmator Learn site. Step 1 Open Pixelmator and create a new document. Go to View > Show Gradients. Create a new radial gradient using purple (#4b0026) and black for the colors. Fill the background with the radial gradient so the purple is in the center. Step 2 Add a new layer and change the Blending to Color Dodge, then create a new gradient preset. Use Radial for the type and black and white for the color. Fill the new layer with this gradient so the white is in the middle. Because of the color dodge, you will already have a really nice light effect. Step 3 Add a new layer. Using the Rectangular Marquee Tool (M), create a rectangle and fill it with black, then create a narrower rectangle and fill it with white. Go to Filter > Blur > Gaussian Blur. Use 10-15 for the Radius. Step 4 Change the Blending of the rectangle to Color Dodge to create another light effect. Step 5 Duplicate the layer that has the rectangle light effect and move it down slightly. Resize it to make it thinner. Step 6 Add a few more light streaks using the same technique. Step 7 Add a new layer and fill it with black. Change the Blending to Color Dodge. Using the Brush Tool (B), select a regular soft brush with white, then create a few vertical lines in the center of the document. To make the effect more realistic, go to Filter > Blur > Motion Blur. Use 90º for the Angle and 20 for the Amount. Step 8 Add a new layer and change the Blending to Color Dodge, then create a new gradient preset using black, white, and black for the colors. This way you will create a white ellipse. Fill the layer with this gradient. Use the image below for reference. Step 9 Go to Layer > Add Layer Mask. Fill the layer mask with black using the Paint Bucket Tool (N). With the Brush Tool (B) and white for the color, paint over the areas you want to make visible. Use a very soft brush. Step 10 Using the same technique as in the previous effect, add another ellipse as in the image below. Step 11 Add a new layer and fill it with black using the Paint Bucket Tool (N). With the Brush Tool (B) and white, create a few white spots like sparkles, then go to Filter > Blur > Zoom Blur. Use 40 for the Amount. Step 12 With the Brush Tool (B) paint a few spots with blue and green. Change the Blending to Soft Light with 50% Opacity. Step 13 Add a new layer and go to Filter > Generator > Lenticular Halo. Use the image below for values, then change the Blending to Soft Light. Step 14 Add a new layer on the top of the others, make sure you have black and white for the colors, and go to Filter > Generator > Stripes. Use 2 for the Width and 0 for the Sharpness. Change the Blending to Color Dodge with 20% Opacity. Step 15 Go to Edit > Rotate 90º Right. Then resize to fill the entire width of the document. Step 16 Still with the stripes layer selected, go to Layer > Add Layer Mask. With the layer mask selected, go to Filter > Generator > Clouds. In this way you will make lines visible only when the clouds are white. If you want to hide the lines more, just go to Image > Levels and increase the black. Step 17 Add a new layer on top of the others and fill it with yellow. Then change the Blending to Multiply at 35% to give that sort of Lomo/vintage look. Step 18 Select all layers and duplicate them. With all duplicated layers selected, go to Layer > Merge Layers, then to Filter > Blur > Gaussian Blur. Use 20 for the Radius, then change the Blending to Overlay and the Opacity to 20%. Step 19 Duplicate the blurry layer and change the Blending to Screen. Order of Layers Conclusion When you finish these steps, you should pretty much have the effect below. As you can see, there’s nothing super difficult or new about it but applying blending and blurs. With this technique you can create all sorts of light effects. You can also play with different color overlays as we did with yellow, and you can use blue, green, or even red for different effects. Tutorial Resources Pixelmator file

Underwater Scene in Pixelmator

In this tutorial, I will show you how to create an underwater scene as inspired by the opening titles of I, Robot, the movie. We will create a brush that will be used to add the bubbles and explore a technique to make your scenes look more realistic. The whole process is quite simple, and it takes less than 1 hour to go through all the steps. Step 1 Open Pixelmator and create a new document, the one I’m using is 1440×900 pixels. After that, fill the background layer with black.? Step 2 Add a new layer and fill it with a dark green (#12241f). Step 3 Go to Layer>Add Layer Mask. After that, select the thumb of the mask in the Layer Palette and go to Filter>Generator>Clouds. Use black and white for the colors and apply the clouds on the layer mask.? Step 4 With the layer mask still selected, go to Filter>Blur>Zoom Blur. Move the controller point to the bottom center of the image and use 60 for the amount. This will create a really nice effect. Step 5 Add another layer and then with the Brush Tool (B) select a red/pink color (#941433). Then, paint a large spot in the bottom and center of the design like I did in the image below.? Step 6 Repeat steps 3 and 4 and then apply the render filter to the mask and the zoom blur, respectively. Step 7 Add a new layer on top of the others and fill it in with black. Change the Blending to Color Dodge, and then with the Brush Tool (B) and a soft brush with white, paint a little white spot at the bottom and center of the design. Then, repeat the previous step for the mask.? Step 8 Reduce the opacity to 80% if your light effect gets too bright. Step 9 Add another layer, then, using the Brush Tool (B) again, select a large soft brush and dark blue to paint some blue spots right on and above the red/pink light. This blue layer has to be very subtle; I used the brush with 25% only. After that, you can apply the Zoom Blur again with the same amount as we did in the previous steps, 60. Step 10 To create the bubbles, I used a stock photo courtesy of Shutterstock. You can find it at http://www.shutterstock.com/pic-31147426/stock-photo-beautiful-abstract-background-of-soap-bubbles-on-black.html. I used the guides for reference and then with the Rectangular Marquee Tool (M), change the option to Ellipse and select the bubble you want to use for your brush. Copy and paste it to a new layer, and then go to Image > Desaturate, then Image > Invert.? Step 11 Creating the brush is pretty simple; just drag the layer from the Layer Palette to the Brushes Palette. Pixelmator will automatically create the new brush. Double click on it to edit, and then change the Spacing to 200% and the Scatter to 65%. Over the Shape Jitter options, change the Size to 100% and the stroke to 7%.? Step 12 Add a new layer and fill it with black using the Paint Bucket Tool (N). Change the Blending to Color Dodge. Select the Brush Tool (B) and the brush you created in the previous step. Paint some bubbles onto your design using white.? Step 13 Select the Blur Tool (R) and a big soft brush. Start making some bubbles blurrier than the others to add some depth to your design.? Step 14 Add another layer on top of the others, and using the Paint Bucket Tool (N), fill it with black. Change the Blending to Color Dodge, and then use the Brush Tool (B) and the bubble brush we created to paint some big bubbles, much larger than the previous one. I used 700 for the brush size this time and 300 for the previous one.? Step 15 Now, import another photo to add more realism to the composition. I’m using another image from Shutterstock, which you can find here at http://www.shutterstock.com/pic-24003511/stock-photo-water-splashing-forming-air-bubbles-over-a-black-background.html.? Step 16 With the image in your document, first, go to Image > Desaturate, and then change the Blending to Color Dodge. You will also have to resize and position the image to how you want it. I flipped the image I used vertically.? Step 17 Select all layers and duplicate them. Merge all duplicated layers and go to Filter > Blur > Gaussian Blur. Use 20 for the blur amount.? Step 18 Change the Blending to Screen and the Opacity to 50%.? Step 19 Duplicate the blurry layer and then change the Blending to Overlay, while keeping the Opacity at 50%.? Conclusion Now, just add your logo and the scene is practically done. If you want, you can add another layer on top and fill it with the Stripes filter. Then, rotate it to get some horizontal lines to simulate those scan lines from old TVs, but that is another story for another tutorial. Download the Pixelmator File Click here to download the Pixelmator file used for this tutorial

Clouds Text Effect in Pixelmator

In this tutorial, I will show you how to create a text made up of clouds in ten very simple steps, solely using brushes, blending, and basic filters. The technique is extremely simple and can be used to create all sorts of text effects as well. Step 1 Open Pixelmator and create a new document. As usual, my document is wallpaper size, 1920×1200 pixels. After that, import a photo of a sky and some clouds. The one I used stems from Google Images; you can find it at the following link: http://wallpaperblog.files.wordpress.com/2007/12/blue_sky_1920.jpg Paste the photo into your document.? Step 2 Using the Type Tool (T), add a text to your design. I am using Cooper Std Black as the style of font with a size of 300 pixels in white. Step 3 Pixelmator comes with a really cool smoke/cloud brush, but certain adjustments need to be made in order to make it work for our cloudy text effect. Double click the cloud brush to open the brush presets, then use the values shown below for your brush settings and save them.? Step 4 Holding down the command key on your keyboard, click on the thumb of the text layer in the layer palette. This action will create a marquee selection of the text. Add a new layer, and change the Blending to Screen. Then, using the Brush Tool (B), select the cloud brush you edited previously, and use white to start painting within the selection. Step 5 Go to Filter > Blur > Gaussian Blur. Use 20 for the Radius. Step 6 Add another layer, and using the Brush Tool (B) and white paint on the cloud brush, paint more clouds, particularly over the edges of the text in order to make these edges less visible. Next, adjust the opacity of this layer so as to make the effect more subtle. I am using a 50% opacity, which results in the image below. Step 7 Add another layer, and repeat painting in some more clouds; this time, the idea is to highlight particular areas.? Step 8 Adjust the opacity of the highlighted layer. Once again, I am using a 50% opacity; however, you can try different values, depending on the manner in which you painted the clouds. Step 9 Add a layer on top of the others, and fill it with a dark yellow/orange color; I used #e89e00. Next, change the Blending to Overlay and the Opacity to 30%. Step 10 Here you can see the organization of the layers in the Layer Palette.? Conclusion The yellow overlay layer was added in order to attain this vintage/lomo look in our design. As you can see, the process of creating the text effect was really quite simple and used nothing other than Brushes and Blending. You can create all sorts of text effects with this technique, ranging from water to fire. I will try to cover these effects in the next tutorials. Download the Pixelmator File Click here to download the Pixelmator file used for this tutorial.

Hexagons Bokeh Effect in Pixelmator

More than two years ago, I created an image of a digital bokeh using Pixelmator that became incredibly popular on the Internet. I easily created the image using Pixelmator’s filter, which was new at the time, called Defocus. I simply applied the filter and added a gradient overlay layer to create the effect. Therefore, in this tutorial, I will show you how to create a bokeh effect in a slightly different, but simple manner to achieve a beautiful outcome. Step 1 Open Pixelmator and fill the background layer with a very dark grey color (#0a0a0a). Step 2 Add a new layer and change the Blending to Color Dodge. Go to Filter > Quartz Composer > Generator > Floor. Use the default values. Step 3 Add another layer and fill it with black. Next, change the Blending to Color Dodge. With this new layer selected, go to Filter > Quartz Composer > Generator > Defocus. This filter is random, so you will not be able to replicate the same effect I created. Step 4 Duplicate the layer with the hexagons layer. If there are some areas that are too bright, use the Eraser Tool (E) to erase them. Step 5 Duplicate the layer once again. Step 6 Duplicate the layer again and go to Filter > Blur > Gaussian Blur. Use 60 for the amount. Once again, change the Blending to Color Dodge. Step 7 Add another layer and go to Filter > Generator > Stripes. Use 2 for the width and 0 for the sharpness. Step 8 Go to Edit > Free Transform. Rotate the stripes 30º to match the hexagons. Then, change the Blending to Color Dodge. Step 9 With the stripes layer selected, go to Layer > Add Layer Mask. Select the layer mask thumb over the layer palette and then go to Filter > Generator > Clouds. Use the clouds filter to mask the stripes. Step 10 Add a new layer on top of the others, but beneath the stripe layers. Fill this new layer with black. Then, change the Blending to Color Dodge. Next, select the Brush Tool (B). Using a basic, but very soft brush, start painting to add some white some flares to your design. Step 11 Add another layer, fill it with black, and change the Blending to Color Dodge. With the Brush Tool (B), select the clouds default brush. Then, with white paint, add some clouds over one area. Step 12 Go to Filter > Blur > Zoom Blur. Place the controller at the center of the area where you want to create the light burst. Then, change the amount to 60. Step 13 Add a new layer on top of the floor layer and beneath the other layers. Change the blending to overlay. With the Gradient Tool (G), fill the layer with a gradient. I am using a gradient with yellow, red, and blue. Step 14 Here you can see the order of the layers. Conclusion Here is the final result of this tutorial. As you can see, we only used basic filters and blended modes to create this effect. We did not utilize any stock photo to achieve these effects. One of the best features of Pixelmator is its speed. You complete this tutorial relatively quickly because the filters are fast. Now, it is up to you. Dowload the Pixelmator File Download the Pixelmator file used for this tutorial.

Speed of Light Effect in Pixelmator

In this tutorial, I will demonstrate how to create a very nice abstract effect, using the super cool Travelator filter. I will make use of some of the Quartz Composer filters in order to show the many different exciting effects that can be achieved with them. Step 1 Open Pixelmator and create a new document. Let’s go ahead and use a size of 1920×1200 pixels. Next, fill the background layer with black. Step 2 Add another layer and go to Filter > Quartz Composer > Generator > Travelator. Use 0.25 for the pace and 0.30 for the depth. Also, move the controller to the center of the document. Step 3 Add another layer on top of the others, and using the Paint Bucket Tool (N), fill the new layer with black. After that, go to View > Show Brushes. Select the smoke brush, then use the Brush Tool (B) and the color white, paint some smoke in the center of the design. Use the image below as a reference. Step 4 Go to Filter > Blur > Zoom Blur. Enter 70 as the amount, and once again move the controller to the center of the image. These steps will create a nice flare effect. Step 5 Change the opacity of the layer created in the previous step with the flare to 20%. Also, change the Blending option to Screen. Step 6 Use the Type Tool (T) to add text. First, I added the title “Speed of Light,” in Adobe Garamond Italic with a 42 pt font size. Next, I included a short paragraph using Helvetica Neue Light in 14 pt font. Use the image below to compare the alignment. Step 7 Now, let’s import a texture of old paper. I utilized a texture (courtesy of Shutterstock). Insert this texture on top of the other layers, and then change the Blending option to Overlay. Step 8 Add another layer, this time underneath the text layers, then go to Filter > Generator > Stripes. Use 2 for the width and 0 for sharpness. Step 9 Go to Edit > Transform > Rotate 90º CCW. Then go to Edit > Free Transform. Resize the width so that it fills the whole screen. Step 10 Change the stripes layer Blending to Color Dodge and the opacity to 10%. Step 11 Go to Filter > Blur > Gaussian Blur. Use 5 as the Radius. The blur will lessen the intensity of the stripes. Conclusion This tutorial was very simple, and only a few filters were used; nevertheless, the outcome is beautiful. The next tutorials I will prepare for Pixelmator will focus on exactly that, simplicity in terms of procedure that yields stunning results. Download the Pixelmator File Click here to download the Pixelmator file used for this tutorial

Basics of Slicing with Pixelmator

In this tutorial, I will show you how to use the Slice Tool in Pixelmator to, of course, slice a design to be coded into a functional Web site. I will also show you the HTML/CSS walk-through process. In the end, you will be able to download the files and tinker with them as well. Step 1 Open the Pixelmator file we created for our UI tips tutorial. Step 2 The tool that we will use in this tutorial that will allow us to transform our design into a Web page is the Slice Tool (K). Basically we will use this tool to select the areas that will be save-as images. We won’t need the whole design, just a few parts that will be a part of the UI (background, logo, buttons, screenshots). Step 3 With the Slice Tool (K) selected, create a rectangle slice around the logo as the first slice. Notice that I didn’t include the text next to it because that will be HTML text. Step 4 Now select the Tab of the navigation. Try to be very precise when slicing your site because a single pixel can disrupt the alignment later on in the HTML part. Step 5 The cool thing about the Slice Tool is that we have some options; for example, if we are slicing a photo, we can use JPEG, while for UI elements, we can use transparent PNG. Also, you can change the slice name; in this case, my slice name is “active-tab.” I’m using transparent PNGs for the UI elements and logo, and JPEG for the screenshots. Step 6 Keep selecting the parts of the design that need to be sliced. In the screenshot below, I created 2 more slices, including one for the line that divides the feature content that will be used twice, at the top and bottom of this section. I also selected the main screenshot. Step 7 Here, let’s select only one screenshot, and then we repeat it in the HTML, or you can save different images later on.. Step 8 A very important part is the background. This slice will have to be exported first because we will need the background to be active for this UI element; otherwise, it will be transparent. Step 9 This is a the shadow that we have in the feature section, but I moved it down to slice it separately from that area; once you export it, open the file and go to Edit > Transform > Flip Vertical to create the bottom shadow. Step 10 After you have created all of the slices and named them properly, go through the layer palette hiding layers that are not necessary: all of the text and the background. As I mentioned before, the background slice will have to be exported again later on with the background active. With all the adjustments done, click on Export for Web in the Slice Tool Option. A dialog box will open asking where you want to save the slices. Create a new folder on your computer called “Site”; inside this folder, create another folder called “imgs.” Select the imgs folder and export all of the images into it. Step 11 If you did everything right, you will have images like those pictured in the image below. Step 12 This is not exactly part of Pixelmator, but I will illustrate the HTML and CSS parts so you can understand what I did. Below, you can see the HTML file. We will use the “<div>” tag to create the structure of our HTML. We could use the new HTML 5 tags for that, but we would have to make some adjustments on the CSS, and it would have problems with the different browsers. However, I highly recommend that you check out HTML 5; it’s the future. Step 13 If you take a look at the HTML code in line 8, there is a <link> tag where I linked the HTML file to the CSS file, the “styles.css” file. In this CSS file, I will define the look of the page using the images from Pixelmator. CSS is like writing a cooking recipe: you indicate how the elements will look. You define the font properties (size, color, type, style, weight…), the background, the margins, the padding, and everything. The BODY element is the page itself. There you can find the background using the slice image from Pixelmator (bg.jpg). Also, there are HEADER styles. Step 14 Here you can see how I coded the menu. The slice image of the tab is defined in line 71 for “#menu ul li.active a.” Step 15 Here we have the FEATURE area; again, the backgrounds are defined in lines 79 and 85. Also, the font size for the title and the paragraph are present. Step 16 Here is the code for the screenshots section. I used some CSS 3 properties to create some eye-candy effects, like the -webkit-transition and the transform. Step 17 Here is the code for the footer; it is very simple. Conclusion Pixelmator’s Slice Tool (K) can definitely be used to design user interfaces. The secret of a good UI is simplicity and consistency, so it’s very important to optimize your design to have as few slices as possible as well as the code. Now it’s up to you. Once again, I highly recommend that you check out some tutorials on CSS and HTML; it’s not difficult, and in my opinion, it’s super fun. Site demo Download the Pixelmator and Demo Files Site demo files | Pixelmator file

Playing with Watercolor Brushes and Masks in Pixelmator

I have already created some tutorials about watercolor effects; however, I also want to create a workflow that is extremely simple but that produces a beautiful result. Therefore, I invented this tutorial, which uses only basic watercolor brushes, a photo, and a layer mask. This tutorial is part of a series of tutorials I have been writing for Pixelmator and posting over at http://www.pixelmator.com/learn/ Step 1 Open Pixelmator and create a new document. As usual, I’m using 1440×900 pixels. Next, fill the background with #363636 for the color. Step 2 Import a paper texture to your design. The texture I used was courtesy of Shutterstock, and you can get it here: http://www.shutterstock.com/pic-20845342/stock-photo-old-yellow-paper-background-with-scratches.html Step 3 Change the Blending to Multiply. Step 4 Duplicate the texture layer (so that there are 2 texture layers). The other layers will be placed between these 2 original layers. For the top layer, use Linear Burn for the Blending. Step 5 With the Brush Tool (B), select a watercolor brush. You can download the ones I used here. Next, add a new layer; then, with red for the color, paint a splatter. Step 6 Now, use other types of watercolor brushes; paint with two hues of yellow, a dark one and a light one. Step 7 Add some more splatters, now with green. Step 8 The last spatter should be blue. Try to overlay the splatters, and change their Blending to Lighten. Step 9 Place a photo of a girl in your document. The one I used is from Shutterstock, and you can download it here: http://www.shutterstock.com/pic-46637950/stock-photo-beautiful-fashiona… Step 10 Select the image layer and go to Layer > Add Layer Mask. Paint the layer mask with black so that the photo will be hidden. Then, with the Brush Tool (B) and using white for the color, start painting the mask with the watercolor brushes. This layer belongs on top of the paper texture and the other layers. Step 11 Change the Blending to Multiply. Conclusion This is a very easy effect that creates a beautiful outcome. Once again, we used only brushes, masks, and blendings—nothing else. You can try adding this effect to different images as well. Another Example Download the Pixelmator file Pixelmator file

Creating a Typographic Portrait in Pixelmator

In this tutorial, I will show you how to create a typographic portrait using only Pixelmator. But what does that mean? A typographic portrait is a portrait composed of text. The technique is pretty simple. We will also play with Blending and basic filters. Step 1 Open Pixelmator and create a new document (The size I used was 1440×900 pixels). Then fill the background layer with black. Step 2 Import the photo you want to use (The one I selected was courtesy of Shutterstock. You can get it at http://www.shutterstock.com/pic-46756228/stock-photo-sweet-girl.html). Step 3 Duplicate the layer image and go to Image>Desaturate. Then go to Filter>Blur>Gaussian Blur. Use 15 for the radius. After that, go to Image>Invert. We will use this image later on, so you need to export it. Go to File>Export and export a JPG version of it. Step 4 With the Type Tool (T), add text until the whole screen is filled (For the font, I used Georgia Italic, size 18). After that, duplicate the layer and change the text color to black. Go to Filter>Blur>Gaussian Blur and use 4 pixels for the radius. Move this layer down 2 pixels; that will create a shadow. You will not see it because the background is currently black, but it will will be visible as we start adding more layers. The shadow is important because it will give a nice depth to the composition. Step 5 Add more text, changing font sizes. Always create shadows, as we did in the previous step. Step 6 Now below all the other text layers, add more text. Fill the screen with text, but using a smaller font, such as size 13. After that, go to Filter>Blur>Gaussian Blur and use 3 pixels for the radius. Step 7 Put the photo layer on top of the other layers and change Blending to Linear Burn. Step 8 Select all text layers and go to Layer>Merge Layers. After that, go to Filter>Distortion>Displacement. The filter box will open. Here, you will need to use the image we exported in step 2. Just drag it from where you saved it to the filter box. Increase the scale to 120. Step 9 The Displace filter will make the text look weird, especially the edges, so go to Filter>Blur>Gaussian Blur. Use 6 for the radius. Step 10 Duplicate the photo layer and change Blending to Multiply and the opacity to 50%. You can also group all layers and duplicate them. After that, merge them into one layer and go to Filter>Blur>Gaussian Blur. Use 15 pixels for the radius and then change Blending to Screen and the opacity to 60%. That will add a little glow to your typographic image. Conclusion This is a very handy technique. You can even try it using different shapes instead of text. The technique is quite simple. However, it might take a little time to add text and find the right position for big keywords. Such little details will make all the difference, giving more style to your design. Download Pixelmator File Click here to download the Pixelmator file.

Lost in Space Typography in Pixelmator

At Abduzeedo, we have a posting place called “Typography Mania,” where we feature many amazing designs that were created by playing with Types. Inspired by that, I decided to use Pixelmator to create an abstract image made up of spheres and lights. I then used Blendings to mix this abstract effect within a text area to achieve the effect I wanted. In this tutorial, we will play with brushes, blendings, hues, and saturation, as well as a few basic filters. Step 1 Open Pixelmator, and create a new document, setting the size to 1440×900 pixels. Then, using the Gradient Tool (G), fill the background with a Radias Gradient from a dark Purple (18090d) in the center to Black.? Step 2 Add another layer, and using the Paint Bucket Tool (N), fill it in with Black. Using the Brush Tool (B) and setting the color to White, paint some spots with a very soft brush. Step 3 Change layer Blending to Color Dodge, which will create a nice light effect.? Step 4 Over the Gradient Palette, add a new gradient, using the colors Grey and Black. Step 5 On the Rectangular Marquee Tool (M), select the ellipse type. Then hold the Shift key to create a circle. Add a new layer, and fill in this circle with the Radial Gradient created in the previous step. Step 6 In order to create a brush from the circle, invert the colors (Image>Invert). Then drag the layer from the Layer Palette to the Brushes Panel. Step 7 Double click on the brush to edit it. Use the image below for reference. Step 8 Using the Brush Tool (B) and setting the color to Beige, paint some spheres. When this is complete, go to Image>Hue and Saturation. Reduce the Saturation to -70 and try to create the same colors shown in the sample below. The values here will vary because the brush creates random variations of the colors. Step 9 Duplicate the layer with the spheres, and go to Filter>Blur>Gaussian Blur. Set the Radius to 90, and change the Blend Mode to Color Dodge. Step 10 Using the Rectangular Marquee Tool (M), create a rectangle. Then using the Gradient Tool (G), fill the rectangle with a gradient from White to Black, similar to the image below. Step 11 Change the Blending to Color Dodge, and the result will be a super cool light effect. Step 12 Duplicate and rotate the layer a few times to create more lights. Step 13 Add a new layer on top of the other layers. Fill it with a linear gradient, using Yellow, Red, Blue, and Green. Use the image below for reference. Step 14 Change the Blending to Multiply. Step 15 Add a new layer beneath the gradient layer, and select Filter>Generator>Checkerboard. Set the Width to 6 and the Sharpness to 0. Then change the Blending to Color Dodge. Step 16 Reduce the Opacity to 30%, and select Filter>Distort>Twirl. Set the Radius to 280 and the Angle to 55 and position the controller on one of the spheres. Use the image below for reference. Repeat the same filter on the other side of the image. Step 17 Go to Filter>Blur>Gaussian Blur. Set the Radius to 10, which will soften the effect slightly. Step 18 Add another layer on top of the checkerboard layer, and fill it with Black. Then using the Brush Tool set to White, paint some light spots to create flares. Step 19 Add a logo to create a super cool abstract effect. Select all the layers and duplicate them. Then select all the duplicated layers and go to Layer>Merge Layers. The result will be a layer with the entire effect. Hide this layer for the moment. Step 20 Add a new layer and fill it with Black. This layer will be below the merged image. Using the font Val and setting the text color to White, type “Lost” and “Space,” and then type “in” using a smaller size font. Use the image below for reference. Step 21 Make the merged image layer visible, and move it to the top of the design; then change the Blend Mode to Multiply, making the merged image layer visible only over the white areas of the text. You also can duplicate the text, change it to Black, and apply a Gaussian blur to create a shadow. Conclusion Go to http://www.williams.edu/Astronomy/IAU_eclipses/eclipse_results.html and download the bright lens flare effect. Place it in the design. Delete the areas that are unnecessary, change the Blending to Screen, resize it, and go to Image>Hue and Saturation to change the hue to Yellow/Orange. Duplicate and rotate it to place it in another place. The same gradient from dark Purple to Black also can be applied to the background.? Download the Pixelmator File Pixelmator file

Hell of a Tutorial in Pixelmator

In this tutorial I will show you how to create a really cool effect. First, we will use basic filters to create a 3D text effect; then, we will blend some stock photos and textures to produce one hell of a wallpaper. Step 1 Open Pixelmator and create a new document. I’m using, as usual, 1440×900 pixels. Then with the Gradient Tool (G), fill the background layer with a radial gradient. To create the radial gradient, go to View>Show Gradient. Add a new gradient and use black and brown (#3b251c) for the colors. ? Step 2 Using the Type Tool (T), add some text to the document. I typed “ HELL.” The font I used is MOD, and you can download it for free at this Website: http://abduzeedo.com/friday-fresh-free-fonts-1. Step 3 Change the font color to a dark grey, and then go to Layer>Rasterize Type Layer. After that, go to Edit>Transform>Distort. Then move the points to apply a perspective to the text. The idea is that the text will then appear to be holes on the floor either going to or coming straight from hell.? Step 4 It is quite simple to create this perspective. Select the Lasso Tool (L) and start creating selections in the portions of the text that will be the walls. First, let’s select the ones that are facing the same direction. Step 5 Add a new layer on top of the HELL layer and go to Layer>Create Clipping Mask. This step will restrict the render area to the area within the HELL text. Fill the selection with a very dark grey. Step 6 Then repeat the same process for the other parts of the text that have these kind of walls. Use different shades of grey to create the 3D effect. Step 7 Holding Command, click on the thumb of the HELL layer, which will create a marquee selection in the area of that layer. Add a new layer on top of the other layers used to create the 3D effect; then go back to Layer>Create Clipping Mask. Fill the selection with orange and, with the marquee selection still active, go to Filter>Blur>Gaussian Blur. Use 30 pixels for the radius. After that, change the opacity to 60 percent. Step 8 Add a new layer on top of the previous one (the orange one); then go again to Layer>Create Clipping Mask. After that, go to Filter>Generate>Clouds. Use black and white for the colors. Then just change the b lending to Color Dodge and the opacity to 40 percent. Step 9 Once again, add another layer and transform it to Clipping Mask. Then fill the layer with black, using the Paint Bucket Tool (N). Because it’s a clipping mask, you will only see the area within HELL. Select the Brush Tool (B) and use white for the color. Then paint some areas in white as shown in the image below. After that, just change the blending to Color Dodge.? Step 10 At this stage, we will add some realism to the scene. To do that, let’s use some stock images of fire. The one I used was courtesy of Shutterstock images, and you can download it from this Website: (http://www.shutterstock.com/pic-2933444/stock-photo-fire.html). Copy a part of the flame and paste it into the document. Use the image below for reference. Step 11 Now add more flames. You can use different stock photos, but just try to get a fire image with a black background, because it’s easier to hide the blacks using Screen for the blending. Also use the Transform tools to create variations of the same flame. You will have to use the Lasso Tool (L) to delete parts of the flames to make it look like they are coming from the hole. Step 12 Add another layer on top of the other layers and go to Filter>Generate>Clouds. Use black and white for the colors. Then using the Eraser Tool (E), delete most parts of the layer, leaving just the area over the effect. Also you can go to Image>Levels and increase the black inputs. Use the image below for reference. Step 13 Change the blending of the clouds to Color Dodge. Step 14 Import a concrete texture and put it behind the other layers. I obtained the one below from Shutterstock images, and it can be found at this Website: (http://www.shutterstock.com/pic-16751947/stock-photo-large-concrete-wall-texture-background.html). To apply the perspective, go to Edit>Transform>Distort. Step 15 Change the blending to Multiply and the opacity to 40 percent. Step 16 Now let’s add some cracks to the floor. To do that, we will simply repeat the same thing we did in the previous step. Select a stock photo to illustrate your purpose. The image I used is from Shutterstock images and can be located at this Website: http://www.shutterstock.com/pic-44864269/stock-photo-cracked-ground.html. Apply the perspective through Edit>Transform>Distort. Then desaturate the image by going to (Image>Desaturate). After that, change the blending to Multiply. Then use the Eraser Tool (E) to delete the areas that are far from the center. Step 17 Duplicate the layer with the cracks from the previous step; then go to Image>Invert. After that, change the blending to Color Dodge and move the layer 1 pixel down. This will create a really nice effect, making it look as if lava were flowing from the cracks. Step 18 Select the layers you used to create the fire effect and duplicate them. After that, merge all the copied layers and go to Filter>Blur>Gaussian Blur. Use 20 pixels for the radius. Finally, change the blending setting to Screen. This step is optional, but it adds a nice glow to the effect. Conclusion Select all layers and duplicate them. After that, merge all the copies once more so that you will have the image in one layer only. You can then go to Image>Brightness and Contrast and just slightly increase the contrast, raising it to +3. That should be sufficient to add that dramatic dimension to the image. As you can see, the creation of the fire part is quite simple–pretty much just using blending and some blurs. But the most important part of this tutorial, in my opinion, is the beginning, where the Lasso Tool and Clipping Mask Layers were used to create a nice 3D effect. ? Download the Pixelmator File Click here to download the Pixelmator file used for this tutorial.

UI Tips in Pixelmator

Many people have been asking me how to create a nice, Apple-style UI in Pixelmator with bevels and letterpress effects. I have also received some inquiries about creating rounded corners. So, I created this tutorial to explain some efficient, helpful tips. Step 1 Open Pixelmator and create a new document. I used 1000×1000 pixels. Then, fill the background with grey. On the menu, select File>Stylize>Noise. Select 1 as the amount. Step 2 Select the Rectangular Marquee Tool (M) to create a rectangular marquee. Step 3 Go to Edit>Refine Selection. Now you will be able to change the selection; you can increase or reduce the size, make the edges blurry with Feather, or create rounded corners with Smooth. I select level 15 for Smooth. Step 4 Add a new layer, and then use the Gradient Tool (G) to fill the marquee area with the gradient. For the colors, I used a dark grey gradient from #666 to #999. ? Step 5 Select the Rectangular Marquee Tool (M) again and create a marquee selection like the one in the image below. The idea here is to create a tab for site navigation. Next, simply delete the bottom part of the rectangle. Step 6 To select only the objects within the layer, roll over the Layers Panel, hold Command, and click on the thumbnail of the layer you want to select. Step 7 Go back to Edit>Refine Selection. Let’s increase the size by 1% and raise the Smooth level by 1%. The idea here is to create a little bevel, or stroke, and apply a gradient on it. Step 8 Add another layer behind the tab layer. With the gradient tool and the selection still active, fill the layer with the gradient. The colors of this gradient are black to white, with the dark grey is at the bottom and the white at the top like a highlight 3D bevel. Use the image below for reference. Step 10 Here is our navigation tab. We are accustomed to having filters and commands to create this type of effect in tools such as Fireworks or Photoshop, but as demonstrated here, these can be easily replicated. Of course, the manual process might take a few extra steps, but it can also help us better the way in which light and shade add depth to things. Step 11 With the Rectangular Marquee Selection (M), create a rectangular selection of 1px height. Step 12 Add a new layer and fill the selection with white. That way, we can create a white line. Step 13 Add another layer and fill it with grey that is a little bit darker than the background. Go back to Filter>Stylize>Noise and add 1% noise to the grey. Then, move the layer down and place it right beneath the white line. The line will be the 3D bevel of the layer. Step 14 Select each layer and go to Layer>Add Layer Mask. Fill the layer mask with black using the Paint Bucket Tool (N). The layer will disappear. With the Brush Tool (B) and a very soft brush, select the color white and paint over the areas you want to show. In this case, only the top center part of the rectangle and line will show, as in the image below. Step 15 Select the two layers and duplicate them, then go to Layer>Merge Layers. Next, select Edit>Transform>Flip Vertical. This will create a rectangular area in which to feature the main content of the site. Try to match the colors of the tab with those of this main area. You can edit the colors of the layers by selecting Image>Adjustments>Hue and Saturation. Step 16 People often ask me how to create a subtle letterpress effect. Some tools allow you to apply shadows or bevels, but Pixelmator does not have such an automated feature. However, there is a quick and easy way to create the same effect. First, add the text you want; in my case, I added “About Us” in black text, Arial font 16px. Step 17 Duplicate the layer and change the color of the text to white, and then move it down 1 pixel. Now you will have a very nice letterpress effect. You can also make the effect subtler by reducing the opacity of the white. Step 18 Create a few more navigation items, this time without tabs. The tab will be used only for the selected item. Step 19 Add a little text about the product. For this, I switched to a bigger font, black Arial at 20px. Step 20 Repeat the Step 17 to create the letterpress effect. Duplicate the text layer, change the color to white, and move it down by one 1 pixel. Tip: If your text color is white, you can create the effect by selecting black and moving the text 1 pixel up. Step 21 Add more text using a much smaller font of 12 pixels. Outside the main area, add a title for Screenshots using the same 20-pixel font used to create the main text. Repeat the letterpress effect. Step 22 Import a screenshot or other image and place it in your design. Move it to the right side so it can become the main image of the site. As you can see in the image below, the one I used is bigger than the main area and is overlapping the white line. To fix this, use the Rectangular Marquee Tool (M) to select an area that fits the part of the image located within the two white lines. Use the image below for reference. Step 23 Next, go to Layer>Add Layer Mask. The mask will hide the areas that did not fit inside the marquee selection. Step 24 Import a few more screenshots to use in the area below the Screenshots title. Let’s add some nice touches to these images. To create a little white stroke, go to Edit>Stroke. Select white for the color, 4 for the Width, and Inside. Press OK. Step 25 It’s also very simple to create a shadow. First, create a marquee selection of the image, as we did in Step 6. Then add a new layer and fill it with black using the Paint Bucket Tool (N). To create the shadow, go to Filter>Blur>Gaussian Blur. I used 15 for the radius, but you can select a larger radius to create a larger shadow. Conclusion Next, just add your logo and a slogan. That’s it! Even though there are not explicit filters to create round corners or bevels, it’s very simple to make these yourself with only a few extra steps. This process is a good exercise for our eyes and brain, and will help us better understand the way in which simple gradients, colors and shades can add depth to a flat image. I hope you find this tutorial useful. Please feel free to send additional requests to abduzeedo@abduzeedo.com. Tutorial Resources Pixelmator file