articles on

Tutorial: Obama's Background on Fireworks - Part 1

Reaching the end of the electoral race to know who's running for the democrates, Barack Obama shows that one of this main concerns was the design of campaign pieces. All material released, even his website shows us that. And now, we won't teach Obama a way to beat Hillary, but we'll be giving you some tips to rebuilt on Fireworks the background image of his site. The orginal image is this one. So, let's begin building this image and check how some of this effects are done on Fireworks. (Remember, this is only part 1... soon, we'll teach you how to do the full CSS of it.) STEP 1 Let's begin opening a new 1280 x 1024px document. Set #01245C as the background color. Let's use guide lines to delimit the content central area. Make all of them 160px away from the borders (left, right and top), making a 960px central area. STEP 2 Create a 960 x 850px rectangle (it must go to the page bottom). Apply a Linear Gradient from #FFFFFF to #01245C. STEP 3 Now let's begin building the glowing background. Select the Pen tool (P) and start drawing a shape as shown. Use a Radial Gradiente from #FFFFFF to #85CFF2 and 65% of opacity for this last color. After that, apply a 100% Feather and the texture Swish (20% of it). After that, we apply a Color Dodge and make all this shape with a 60% alpha. STEP 4 To apply to this glowing background the color we want, we need to create 2 extra shapes. For the first one, simply copy the one we made now and modify a little bit its points making a smaller shape to create different effects everywhere. For this one, let's make Swish texture only 2% and switch from Color Dodge to Overlay. STEP 5 For the third glowing shape, we're going to create it one more time, a little bit smaller than the last one. Apply the color #FFFFFF, Feather 100%, Texture 0%, Color Dodge and the opacity 40%. STEP 6 Now, let's create the shadow. It will also goint to be an irregular shape. Make the shape as shown, use the color #01245C and a 22% Feather. STEP 7 Take a look on how to order the layers and the effect done until now. STEP 8 Now, let's create the top right area. To make that blend effect let's use another command on Fireworks. Before doing that, create a line as shown and go to Commands > Creative > Twist and Fade. Play a little bit the values and find the best result. Here, we're using the values shown. STEP 9 Now copy this result a few times, make a very low opacity, about 8% and position it as shown. Apply some texts and other elements, here we're using a few stars. Throw all that bneath all layers, that way the lines will get a brighter glow due the Color Dodge from the other shapes. STEP 10 For the logo area we're going to create another shape to make it look that there's a different light glowing beneath that. Use the color #FFFFFF and apply a 40% Feather. Besides that, we're also using a few extra elements, like some circles with alpha next to 5%. STEP 11 Now only the central area is empty. We've created a shape like is shown. Apply a Linear Gradient from #FFFFFF to #336994. Then, use the rectangle beneath as a mask. Cut the created shape and paste it inside the rectangle (CTRL+SHIFT+V selecting the rectangle). FINAL RESULT Now place a few elements above it all to make a customized background. Final result in full size. The PNG file is avaiable HERE to download. Author: Fabiano Meneghetti | If you want to write an article and have it published here send it via email to abduzeedo[at]abduzeedo.com

How to create HDR Photos - HDR/Photomatix tutorial

There has been a lot of buzz recently about HDR photography, but many people assume that it's only limited to professional photographers. The reality is that just about anyone can take and process an HDR photo with most cameras and proper HDR software. There are plenty of explanations of what HDR is and how it works, so we won't cover that here. If you want more background info, check out HDR explained so anyone can understand or Jon Meyer's popular HDR primer. In this tutorial we'll go through the steps necessary to take your very own HDR photo and process it like a pro. What you will need: A camera that allows you to adjust exposure settings. Tone Mapping Software (In this tutorial we will use Photomatix, which is the most popular way to create HDR's.) Step 1: Taking the photo(s) TITLE: Quick and Easy steps to take HDR Photos with any camera To create an HDR photo you need at least 3 differently exposed photos of the same shot. That's not as difficult as it sounds. Many cameras give you the ability to change exposures from shot to shot. Since all cameras are different you'll have to figure out how to change these exposure settings on your particular camera. Look for Exposure, AEB (Automatic Exposure Bracketing), A-EV, BKT (more on that here and here), or a little +/- graphic. Important: Make sure the camera does not move between shots. Use a tripod or place the camera on a stable surface, minimizing movement as much as possible between shots. Below is an example of how this works using my girlfriend's simple point and shoot camera - the Sony DSC-W50. If you click on the +/- button you will see a way to adjust the Image brightness (EV) level for your picture. 1. Take one picture at EV 0 2. (press the shutter halfway to clear the preview), press the +/- button again and move the cursor down to EV -2. Take a picture. 3. (press the shutter halfway to clear the preview), press the +/- button again and move the cursor up to EV +2. Take a picture. I usually take 3 shots each spaced 2 EV exposure values apart - one at EV -2, one at EV 0 (which is the most correctly exposed photo), and one at EV +2. Here is an example of 3 shots I recently took: The first is exposed just right (0), the second too dark (-2), and the third exposed too light (+2). Step 2: Generating and Tone Mapping the HDR For this step you will need Photomatix Pro. While it's possible to do this with Photoshop CS2/CS3 or other HDR software, Photomatix is a much better tool - it gives you better results and is much easier to use. You can download a free trial of Photomatix Pro which will leave a watermark on your picture, or you can buy it for $99. Note: You can use Photomatix Coupon Code VPG8 to get an 8% discount.. Open Photomatix Pro and click on "Generate HDR image." Click "Browse..." and select the 3 photos you took in step 1 (by clicking each one while holding down CTRL on a PC or Command on a Mac). Once you have the 3 photos highlighted, click "Open" then click "OK." Now you will see a set of options. Keep Align source images checked. I also usually leave the "Attempt to reduce ghosting artifacts" option checked as well. If you have moving water in your shot, change the option to ("Background movements", otherwise leave "Moving objects/people) selected. Click OK. After a few seconds of processing you will see something like this. It will usually look too dark - don't worry. The next step is where the magic happens. Click on "Tone Mapping". You will see Tone Map Settings panel and a preview of your HDR photo. The settings toward the top will have the most impact on your photo. Adjust Strength and Light Smoothing settings to get your preferred "HDR effect." Feel free to experiment with the rest of the tabs, controls, and settings to get your desired results. Some people prefer a saturated surreal look, while others like to keep the photo looking more realistic and natural. After you are happy with what the photo looks like, click "Process." Once Photomatix is done processing, it will show you the resulting HDR. Click "File" > "Save As..." and save your photo as a JPEG. Voila! You now have your very own HDR photo. For some inspiration, check out the following: 20 Beautiful HDR pictures Digg's All Time Favorite HDR Photos 35 Fantastic HDR Pictures If you want to share some of your own HDR's, submit them to (the soon to be launching) Dynamic HDR's Photo Gallery or join the Flickr HDR Photo Pool. Author: Markus Urban | If you want to write an article and have it published here send it via email to abduzeedo[at]abduzeedo.com

Tutorial: Newspond menu on Fireworks - Part 2

This is the second part of the web design tutorial on how to create a website using Fireworks then CSS and XHTML. A few days ago we published the first part of the tutorial when we designed the page, now in this part we will show you how to go from that image to the webpage, using a CSS and HTML. STEP 1 First, let's study the layout and set some parameters, like which will be the main regions, so we can structure the html. STEP 2 To create the html, open you favorite text editor (notepad, dreamweaver, textmate, etc). Here I've used Smultron. What we have to do is now to create the areas following the regions we've set before: HEADER <div id="header"> <div class="wrapp"><img src="images/logo.jpg"/></div></div> CONTENT Here we're using 2 div's for central content because we're using shadows on both sides. <div id="content"> <div id="main"> </div></div> MENU <div id="content"> <div id="main"> <div id="menu"><!-- *** Main menu *** --> <ul class="nav_left"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> <li><a href="#" class="last">Contact</a></li> </ul><!-- *** Links right side *** --> <ul class="nav_right"> <li><a href="#">Login</a></li> </ul> </div> </div></div> SUPPORT BENEATH THE MENU <div id="content"> <div id="main"> <div id="menu"> <!-- *** Main menu *** --> <ul class="nav_left"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> <li><a href="#" class="last">Contact</a></li> </ul> <!-- *** Links right side *** --> <ul class="nav_right"> <li><a href="#">Login</a></li> </ul> </div><div id="sub_nav"> <span class="tip">Zee is a small studio located in Brazil.</span> <span class="links"><a href="#">Register</a> | <a href="#">Request Password</a></span> </div> </div></div> FULL CODE <body><div id="header"> <div class="wrapp"><img src="images/logo.jpg"/></div></div><div id="content"> <div id="main"> <div id="menu"> <!-- *** Main menu *** --> <ul class="nav_left"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> <li><a href="#" class="last">Contact</a></li> </ul> <!-- *** Links right side *** --> <ul class="nav_right"> <li><a href="#">Login</a></li> </ul> </div> <div id="sub_nav"> <span class="tip">Zee is a small studio located in Brazil.</span> <span class="links"><a href="#">Register</a> | <a href="#">Request Password</a></span> </div> <!-- *** Round corners for the content *** --> <div class="center1"> <div class="center2"> <!-- *** Round corners each item *** --> <div class="item1"> <div class="item2"> <div class="content-item"> <h1>Donec porttitor ligula eu dolor</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.</p> </div> </div> </div> <!-- *** Round corners each item *** --> <div class="item1"> <div class="item2"> <div class="content-item"> <h1>Donec porttitor ligula eu dolor</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.</p> </div> </div> </div> </div> </div> </div></div><div id="footer"></div></body> Save this file as menu.html. STEP 3 Now that we have the code ready, let's open the .png file and export the images that we're going to use in our CSS. To do that, we're gonna use the Slice tool, and we will create all the necessary slices with this tool, like we see in the images below: STEP 4 Save all your images in an images folder, right on the root where the file menu.html is. STEP 5 With all this images and the code ready, let's start our CSS. I've used CSSEdit to make this, but you may use your editor of choice. To begin, paste the following code inside the "HEAD" on menu.html: <link rel="stylesheet" type="text/css" href="style.css"/> STEP 6 We're also using here a file to reset all the tag configurations, what will make the manipulation of objects inside the layout much easier. Download the file "reset.css" (is attached at the end of this tutorial) and drop it on the root with the menu.html file. Open a new css document and save it asstyle.css. In the top of the document, import the reset.css with the following code: @import url("reset.css"); STEP 7 Now we beggin creating the style for our main ID's. Remember how I've told you before that we're going to apply shadows on the sides of #content and #main. body { font-family: Arial, Helvetica, Geneva, sans-serif; color: #000; background: #595D67; }#header { height: 100px; background: url(images/bg_header.jpg) left top repeat-x; position: relative;}#content { width: 844px; position: relative; margin: 0 auto; background: url(images/bg_shadow_left.jpg) left top repeat-y #434752;}#main { background: url(images/bg_shadow_right.jpg) right top repeat-y ; padding-bottom: 30px;}#menu { height: 30px; background: url(images/bg_menu.jpg) left top repeat-x; margin: 0 7px;}.wrapp { width: 844px; position: relative; margin: 0 auto;}#footer { height: 100px; background: url(images/bg_footer.jpg) left top repeat-x; position: relative;} Notice that the #content width is 844px, because it's the 700px for the body and another 7px of shadow for each side. It's important to know that we're going to centralize the main content. We're using 3 attributes to place it on the browser center:width, position e margin. Look: #content { width: 844px; position: relative; margin: 0 auto; background: url(images/bg_shadow_left.jpg) left top repeat-y #434752;} STEP 8 Now, the menu. Take another look on the code we've used to do it. Inside the "ul" is where we're placing all the links. Notice that we've used a class="nav_right" on the second "ul", because we're going to position it on the right side of the menu, that's what we've used here for our Login link. <div id="menu"> <!-- *** Main menu *** --> <ul class="nav_left"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> <li><a href="#" class="last">Contact</a></li> </ul> <!-- *** Links on right side *** --> <ul class="nav_right"> <li><a href="#">Login</a></li> </ul> </div> Now let's position our "ul"s and place the images that go on the menu extremes: #menu ul.nav_left { padding-left: 30px; height: 30px; background: url(images/bg_leftMenu.jpg) left top no-repeat; /** left image **/}#menu ul.nav_right{ position: absolute; /** position the menu on the right side **/ right: 7px; top: 0; padding-right: 30px; height: 30px; background: url(images/bg_rightMenu.jpg) right top no-repeat; /** right image **/} We're almost done. Let's a style for our link and check how they will look: #menu ul li { float: left; /** precisamos deste float para funcionar no IE **/ background: url(images/divider_menu.jpg) left top no-repeat;}#menu ul li a.last { /** add a image to the last element **/ background: url(images/divider_menu.jpg) right top no-repeat;}#menu ul li a{ display: block; float: left; height: 30px; padding: 0 18px; text-decoration: none; color: #FFF; font: .96em/28px "Lucida Grande", Lucida, Verdana, sans-serif;}#menu ul li a:hover { background: url(images/bg_menu_active.jpg) left top repeat-x;} STEP 9 Here we can see how the style will look for the text and support links beneath the menu. This is when we apply the shadow beneath it. #sub_nav { height: 50px; background: url(images/bg_shadow_subNav.jpg) left top no-repeat; margin: 0 7px; line-height: 50px; position: relative; font-size: .8em; color: #CCC;}#sub_nav span.tip { left: 30px; position: absolute;}#sub_nav span.links { right: 30px; position: absolute; color: #F90; }#sub_nav span.links a{ text-decoration: none; color: #F90;}#sub_nav span.links a:hover { text-decoration: underline;} STEP 10 Now you must build the bottom text boxes so we can finish the layout. We're not getting into details because this step is not our inside our objetive for this tutorial, mas we're going to talk further about round corners e text boxes in another article. But if you download the final files and analise it, you're see that the whole process is really simple. FINAL RESULT To see how your layout should be looking like right now, totally tabless and cross-browser, click here to check the final result. AnexoTamanho zeepond.zip17.77 KB menu_slices.png193.09 KB Author: Fabiano Meneghetti | If you want to write an article and have it published here send it via email to abduzeedo[at]abduzeedo.com

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 Aurora Borealis Effect in Pixelmator Filter and blending effects in Pixelmator

Tutorial: Newspond menu on Fireworks - Part 1

Today we begin a new series of tutorials, about layouts developing for web, from design creation to CSS coding. These tutorials will come in 2 parts: 1 - Layout; 2 - CSS. But our difference is that we're going to unveal and develop the tutorials about existing websites. Probably our steps won't be the same used to built these sites, but the idea is to simply show you guys how to get really close to the original layout. To begin the series, our first post is about the Newspond menu. The colors and effects are smooth and really modern. And it was the little details in the design that called our attention and made us decide to use it as our first tutorial We're going to use Fireworks to develop all the design, the steps are simple, but it's the adjustments and gradients that will make the difference in the final result. STEP 1 To begin, open a new document with dimensios 1000x660. Pick #595D67 for background color. STEP 2 Make a 1010x100 rectangle, and apply a gradient that goes from #3F444D to #000000. Position it at X=-5 and Y=0 (This X position will help our next step). STEP 3 Apply Filter > Inner Shadow, and pick this values as in the image: 0, 90%, 5. STEP 4 Now, let's make the menu. Create a 830x30 rectangle, centralize it on the stage and position it at Y=100. Apply the linear gradient using the colors as in the image. STEP 5 Bow let's creat the content area background. Create a rectangle and apply a linear gradient that goes from #434752 to #000000. Move the gradient as shown. This will do to make the shadow bellow the menu. STEP 6 Move the rectangle layer to under all the others and apply Filter > Drop Shadow, with the values: 0, 90%, 7. STEP 7 Write some texts in the menu to use as links. Here we use 4, but you may use as many as you want. After that, draw a #9EA8B2 line at the top of the rectangle. This will make the menu pop out. STEP 8 Now, let's creat the background of active links. Create a rectangle and apply a linear gradient that goes from #000000 to #434752. Position the gradient as shown. You can see in the detail that we've created a #555C68 line above the rectangle. STEP 9 Now, we're gonna create the lines that will separete each menu link. We are also going to align the links within the menu. Follow the steps bellow creating the lines (notice that besides the colors, you most group the lines and apply a 40% opacity), then creating the guide lines leaving a 30px space from the border, adjust the spacing e for last create an extra link right aligned to the menu. STEP 10 Create the small border gradients. Create a 20x30 rectangle. Apply a linear gradiente in the horizontal position with the colors and opacity shown (notice the Feather=2). After that, copy it to the other side and apply a modify > trasnform > flip horizontal. STEP 11 We're almost done. Let's make the menu pop out a little bit more, by creating a stronger shadow beneath it. To do that, i've created an #000000 ellipse with Feather = 33. Move this ellipse layer towards the bottom, just above the rectangle that will be the content body. STEP 12 Now all we gotta do is create some content in the central body. You may display the content however you wish. We've used some text blocks in order to get a little bit close to the original site. Besises that, put your logo at the top. You may create a #BCC9D9 ellipse with Feather = 75 and put it beneath the logo to make it shine. FINAL RESULT You can download the sample file HERE (196kb). Hope you all liked it. Author: Fabiano Meneghetti | If you want to write an article and have it published here send it via email to abduzeedo[at]abduzeedo.com

Time Machine Icon in Photoshop

Last week I got sometime to study a bit of icon design, specially the Mac OS X icons. Among all Leopard icons the one that I like the most is the Time Machine one, it's really beautiful and the idea is very clever as well. With that icon in mind, I sort of challenged myself and I decided to recreate it in Photoshop to see how some of those effects work and, perhaps, start creating some icons as well. After a couple of hours I had gotten a satisfactory result, I think. So I decided to teach my girlfriend how to create the icon. Well, she stopped on the third step :). But I still think it’s a very useful tutorial. UPDATE: I think the tutorial will be published this week on PSDTUTS.

Apple Brushed Aluminum Photoshop Tutorial

I've just finished my new Photoshop tutorial and this time it won’t have lighting effects, with glows and sparks all over, however its is again a request from a user. Tom suggested if we could create a brushed aluminum texture similar to the Apple products. There are some nice techniques applied on this tutorial, and I think it can be easily used to interface design and web design projects. The tutorial will be published at psdtuts.com soon I think. But I took some more time and created 2 desktop wallpapers and 2 iPhone wallpapers. Desktop Version 1440x900px Desktop Dark Version 1440x900px iPhone Version iPhone Dark Version

Hot Chick on a Muscle Car

In this tutorial we'll fuse an image of a Muscle Car and an image of a Hot Chick into one cool retro postcard design. Learn some brush, texture, and layer techniques to create a classic image everyone wants to get ahold of. Step 1 We need to gather the assets for this tutorial. They are all available from istockphoto: 1 | 2 | 3 | 4 | 5 | 6. Go ahead and download these files. Let's get started by removing our model from her background. Step 2 Next create our working document. Make it about the size of a Postcard. Then place our Muscle Car Image. Then place our cut out model on top of the hood of the car. Do some Free Transforming to scale the model down to fit and rotate her a little counter clock wise. Step 3 First Draw a dark green to bright yellow gradient over our images. Then set the layer to Multiply. And then set it to 30 Percent Transparency. Step 4 Import our Paper Texture. Scale it down until it looks right. Then set the layer to Multiply and give it a Transparency of 90 Percent. Step 5 Import our Stars and Stripes Background to the top layer and set it to Hard Light. The grab the Eraser Tool with a Maser Diameter: 300 and a Hardness of 0 Percent. Now Erase the Background in the places where it overlaps the car and the model. This will allow the background to move to the back and fade the background around the edges of the model and car. Step 6 Import our Clouds and place them behind the Muscle Car. Then set the Muscle Car to Multiply. Use a large Eraser with a Hardness of 0 Percent and remove some of the clouds until your results match the image below. Step 7 The first image below is just to show you what we are accomplishing on the Paper Background. Grab a large Eraser, set the Brush Hardness to 0 Percent, and erase on the Paper Background layer right where the models head would be. Make sure your settings for the layer are the same as before. The second image shows the change to our image. Her face and torso stand out more now. Step 8 Let's make our ground stand out more. Import another copy of Stars and Stripes Background. Drop it just above our cloud layer and use a similar Eraser Brush as the last step and erase the top of this layer until your results match the image below. Step 9 The little details can make a big difference. Draw a selection around the models yellow bracelet. Create a new layer and color the selection orange. Then set the layer to Multiply. Next create a new layer below the model. Grab a small Brush and draw a shadow under the model. Then set the Layer Opacity to 50 Percent. Step 10 Type in the text ANYWHERE USA and place it at the bottom. I used Arial Black set at 54pt. Use the settings below to give our text a layer style. Step 12 Now let's add some brush work to give the design an old worn feel to it. In the first image you can see the Brush Tool chosen. On a new layer residing at the top of our document use a dark blue to brush the edges. View the effect in the last image of setting the layer style to Overlay. Step 13 Use the same kind of Brush as above and create Multiple Brush layers with different colors and opacities. Place all these at the top of our design. Work with it until your happy with your results. My results are shown below. I really like the brushes that started to glow when working with this. Look at the yellow brushes over the text for example. Those are set to Hard Light with an Opacity of 60 Percent. Step 14 Create a new layer right above our Muscle Car image. Grab another large Brush of the same style we have been using and give it a color of red. Set the layer style to Color Dodge and now wherever you brush it will glow a little bit. I mostly brushed around the Models head to get that to stand out a bit more. But I brushed a little in the bottom corners as well. Step 15 Now lets add some fingerprints so that it looks like this photo has been handled over the years. First lets cut out each fingerprint from our Fingerprint image. Then paste each one individually onto its own layer. Use the Free Transform tool to move them around until your happy. Keep in mind that the corners are where the most handling usually occurs in a Photograph. I also Erased a little bit of one of the prints as you can see below. Step 16 Now give your fingerprints varying levels of Opacity and Layer Styles. I used Darken on some and Multiply on the others. I used varying Opacities set between 40 percent and 100 percent. The last thing I did was go over the top Stars and Stripes background with the eraser a bit more so we can see the clouds break through next to the model. The results of our final image is shown below. Conclusion Fusing photos into a composition is fun. Textures, brushes, and grunge elements are a great way to pull these images together. And above all else never forget that muscle cars and hot chicks are a cool and classic design combo.Download the PSDClick here to download the Photoshop file. About the authorThis tutorial was written by Sean Hodge. Hi All! Tutorials are awesome. I'm really into writing them on my Illustrator and Vector Graphics blog AiBURN. I'm from the US, but living on the beach in Venezuela. My studio is Connection Cube. That's where I get to create graphics, design websites, and write for some great companies! I love working on creative projects!

Sparkling Hot Girl in Photoshop

I’ve seen some very nice images mixing photos with light effects and sparks. If you go to flickr in those Photoshop and Graphic Design groups you will see images with this effect. There’s a designer, I think he's Brazilian, who has some amazing designs using this style, his name is Leandro Demetrius and it’s really worth checking his work out. Anyway, in this tutorial I will show you how to create an image using this technique. It basically mixes some techniques from tutorials like Magic Lighting Effect, Amazing Photoshop light effect in 10 Steps, and the latest Create the MSNBC header effect. Step 1 Create a new document, mine is 800x600 pixels. After that double click on the background layer to open the Layer Style dialog box and add a Gradient Overaly. Select Radial for the Style and use a dark red to black for the colors Step 2 Select a nice photo, in my case an amazingly hot girl from the 30 Color and Pattern Inspiration Bikinis post. Select the Pen Tool (P) and start creating a path with the shape of the woman. Later we will convert this path to selection to mask the girl. Step 3 After you create a path with the shape of the woman, go to the Path palette, right next to the Layer Palette. You will see the path with the girl’s shape. Click on the dotted circle icon at the bottom of the box to create a selection from the path. Step 4 Back to the Layer Palette, select the girl’s layer and then go to Selection>Refine Edge. This command will allow us to adjust the selection in real time with some nice settings like feather, smooth, contras, and others. Make some tests with a black background. When you have a good selection click ok. After that go to Layer>Layer Mask>Reveal Selection. Step 5 Lets increase the contrast of our girl, go to Image>Settings>Brightness/Contrast. After that reduce the layer like the image below. Then add a bit of noise. Filter>Noise>Add Noise. Step 6 Group the girl layer so it will be inside a folder on the Layer Palette. Select the Elliptical Marquee Tool (M), set the feather option to 30px and create a elliptical selection like the image below. Now select the Folder instead of the girl’s layer and after that go again to Layer>Layer Mask>Reveal Selection. We will add the mask to the folder and everything inside the folder. Step 7 Double click on the girl’s layer to open the Layer Style box. Select Outer Glow. For the Blend Mode use Color Dodge and for the size set 35px. After that Duplicate this layer and go to Filter>Blur>Motion Blur. Use 43º for the Angle and 155 for distance. Make sure that the blurry layer is behind the normal layer. Step 8 Create a layer, not inside the folder anymore. This layer has to be behind the girl. Then go to Filter>Render>Clouds. Change the Blend Mode to Color Dodge. Step 9 Create another layer, behind the clouds’ layer. Now go to Filter>Render>Fibers... Use 13 for the variance and 4 for the Strength. After lets add another filter, this time Motion Blur, go to Filter>Blur>Motion Blur. The angle will 90º and for the distance use more than 300px like the image below. Step 10 First rotate the layer. Then select Lasso Tool (L) set 30px for the feather and create a selection like I did. Then one more time go to Layer>Layer Mask>Reveal Selection. After that double click the layer to open the Layer Style box. In the Layer Style’s first screen set the Fill Opacity to 60%, then add a Gradient Overlay, use the rainbow colors. Step 11 Here it’s all about brushes. But first create a new Folder in the Layer Palette and set the Blend Mode to Color Dodge. After that create the layers you want to be light inside of this folder and using white color. You can even add some different shapes and apply gaussian blur to create those rays of light. Conclusion This is one of those designs that looks a bit complicated when we see it at first. But when you start working on it, it turns out to be much easier than we thought. You can add different light colors, more or less sparks, or even explode some parts of her body. Well that’s another tutorial I will write about. Download the PSD file Click here to download the PSD file.

New tutorial: MSNBC header effect

Today I saw that the guys at PSDTUTS.com published another tutorial I wrote, Reader Request: MSNBC Style Effect. It's a really nice effect and very easy to do too. One of the coolest thing in this effect is that you can use it to create lots of different designs. You can create a header for your site like MSNBC did, or you can create some compositions with photos. Here you can see the end result of the tutorial Get the 1440x900px wallpaper iPhone wallpaper And here is another image I created using the same effect but this time I mixed it with a very beautiful girl. I know the girl makes the design much better. Anyway I'm writing a tutorial showing all steps.

Create an amazing widget for your blog

Last December I was working on a cool project, the web design for a brazilian online job board. It was a very pleasant project to work on mainly because we had total freedom to create and suggest features. Of course some of our suggestions didn't make to the final version, however one did, the widget. The web widget is a portable chunk of code that can be installed and executed within any separate HTML-based web page by an end user without requiring additional compilation. They are derived from the idea of code reuse. Other terms used to describe web widgets including: gadget, badge, module, capsule, snippet, mini and flake. Web widgets often but not always use DHTML, JavaScript, or Adobe Flash. Wikipedia Basically what I did was get the data from the RSS feed and show it in a nicer way using Flash. In other words, it’s a sort of RSS reader. So in this post I will show you how you can create your own widget using the FLA file I created for the Openjobs widget. There’s one more thing, as I’m a designer and not a real programmer, my AS2 (actionscript 2) code won’t be the best code ever, but if you are an AS ninja and want to contribute with a better code, feel free. Actually it would be awesome to have the widget using AS3 rather the AS2. Design Widgets are like banners but they deliver more information. For this widget I follow the idea we used on the Openjobs website design, where there's a person holding an ad sign, in this case he's showing the jobs available. Flash Customization To create your widget you won't even need to touch the code. Just change the visual elements and that’s it. Below you can see the elements of each layer. Dynamic elements If you want to change the font or text size just edit the "title" and "description box" symbols in the library. The widget You will have to publish the widget’s swf file in your site's server in order to distribute it only with the embed code. The feed’s url goes direct in the embed code as well, just change the url in the Feed parameter. Below you can see the widget and the code. <embed width="220" height="210" wmode="transparent" src="http://openjobs.com.br/images/goodies/widget.swf&quot; allowfullscreen="true" allowscriptaccess="always" flashvars="feed=http://feeds.feedburner.com/OpenJobsWidget"></embed&gt;

Aurora Borealis Effect in Pixelmator (Win a Pixelmator Copy)

A while ago I had the opportunity to be a Pixelmator beta tester, and let me tell you, it sure has been a fun experience. Pixelmator is now on its 1.1.2 version with new features such as the Quark Composer Filter that uses the same image system as the Mac OS Core. It’s now amazingly faster and much more stable; the blurs and filters are in real time; no preview windows, nothing. It has one of the most beautiful interfaces I’ve ever seen, and that’s no exaggeration there, folks . 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. If you’re not looking to spend a lot of money or you just simply want an easy to use application to do some image adjustments on and create very nice effects, then Pixelmator is the tool for you. No need to search far to get your hands on it though because I have a copy of Pixelmator to give away right here. To win just leave a comment below and don’t forget to leave your email too. You have until Friday, February 15th. I wrote you guys another tutorial to help you get started using Pixelmator. In this tutorial I’ll show you how easy it is to create the Aurora Borealis effect which I’ve previously created in GIMP and Photoshop. I must say, Pixelmator is by far the fastest of the three though. Step 1 Open Pixelmator and create a new document. Then select a very dark blue and fill the background layer with it. Step 2 Create a new layer and select the Gradient Tool (G). If the Gradient box is hidden go to View>Show Gradient or just (shift+command+5) to show it, select the gradient that starts with yellow and go to cyan, pink, and red. Fill the layer with that gradient. Step 3 Using the Lasso Tool (L), create a selection like I did. After that go to Edit>Inverse and delete the selection. Step 4 Go to Filter>Blur>Gaussian Blur and add a blur. Then select the Eraser Tool (E) and delete some parts of our shape, like the image below. After that go to Filter>Stylize>Pointilize and apply the filter. Step 5 Go to Filter>Quartz Composer>Stylize>Zoom Blur and apply the filter. A dialog box will open with a rope and a controller. Move the rope to change the direction of the effect like the image below. After that change the Blend Mode to Hard Light. Step 6 Create a New Layer, fill it with black, and change the blend mode to Color Dodge. Then select the Brush Tool (B) and open the Brush Box. Create a new Brush with: Diameter 41px, Hardness 13px, Spacing 1px. After that select white for the color and start creating some stars, it’s not necessary to create lots of stars because we will use a filter to do that. Tip: click 2 or more times without moving the mouse to create bigger stars. Step 7 Go to Tile>Affine... and apply the filter. This filter will create more stars for us. Step 8 Now just add your logo to the image and that’s it. Conclusion You will need less than 20 minutes to create this image. As I said before the filters in Pixelmator are really fast, and there is good variety of effects you can do. Some of them you won't need to change any property to get amazing results. Even though it lacks some filters and feautures like Render Clouds, the Layer Styles, and non-destrcutive filters, Pixelmator is an excellent tool, and with the price of $59 dollars, it's much more affordable than Photoshop and definitely worth downloading and testing out.

Icon Design Explained (Quickly)

Jon and Leigh Hicks from Hicksdesign bring us a cool, quick slide show explanation of how to do design a icon. And if you don't know them, they actually designed the Mozilla Firefox and Thunderbid logos. These dudes are really good. | View | Upload your own

Creating a crazy cool logo

I’m a huge fan of typography and logo design, even though I havent worked on too many logo design projects I had the opportunity to express my love on a few, but at the same time, very pleasant ID projects. One of them was in 2005 for a company called Zagora. When they hired us to create their ID design they said that they wanted something very unique and modern. Besides of that we spent like 4 hours talking about ideas and concepts in order to know exactly what we would have to do. In this post I will show you how we created the logo. I will skip the drawing parts, yes there were tons of drawings before going to the computer, because when they stole my computer and backups in 2006 they took all my photos of the drawings. This logo is pretty much a bunch of circles, I used a circle for the module and deleted some segments in order to create the characters. Step 1 In Illustrator, using the Ellipse Tool (U) create a circle. Step 2 Select the Circle and hit the Enter Key (return) the Move dialog box will open. Now we can move the circle horizontally or vertically and create copies as well. First we will create the horizontal one, so just add the width of the circle in the horizontal field and click on the copy button. Repeat this process until you have 6 circles side by side. Step 3 Lets create a circle below the first and the third circle. Those will be the Z and the G letters. Step 4 Using the Direct Selection Tool(A), select some segments of the circles and delete them like the image below.   Step 5 Select all objects and change the Stroke Weight to 20pt, After that add 2 more elements above the Z and the R like the image below, and delete a segment of the last A. Tip: Use the Object>Transform>Move and Object>Transform>Reflect commands for more precision. Step 6 Change the stroke colors. I used green for the Z, brown for the As, red for the G and R, and blue for the O. Step 7 Select the A or the second circle and open the Move dialog box. Move it closer to the first letter, Z. Repeat that for the other letters. After that change the order of the letters so the R goes in front of the last A, but through the O. Tip: To do that you will have to create new elements in order to mask them. Use the Move command for precision. Step 8 Once you have a nice spacing and all the letters are well positioned, select all objects again and go to Object>Path>Outline Stroke. This will convert the Strokes to Fill. Step 9 Select the G and the R and apply a linear gradient. Use Orange to Red for the colors. Step 10 Duplicate the element above the Z and change its color to black. Go to Effects>Blur>Gaussian Blur and use like 3.5pt. After that place it beneath the Z and the R like the image below. Conclusion After we had an idea of what we were looking for, the design process became pretty straight forward. That means that once you know what you have to do the tool is just part of the process and you will find many ways to achieve the same result.

100 Photoshop Tutorials (for Creating Beautiful Art)

If you know the right places to look at, you can just find any kind of tutorial. Love art, painting and all that? Here are 100 tutorials you must visit. 3DTotal brings us an awesome selection of 100 photoshop art tutorials that will teach you some neat techniques of how enhance your digital painting skills. And I mean, it's a whole 100 tutorials... that's a LOT. Here are my favorites. Remember, these are just a few of them. To visit the complete set, click here! Author: Paulo Antunes | If you want to write an article and have it published here send it via email to abduzeedo[at]abduzeedo.com

Apple Air Banner in Fireworks

I’ve always been a huge Apple fanboy, I love the attention to the details and the importance Steve Jobs and his team have given to the design above all. With the new Macbook Air is not different. It’s just incredibly thin and very beautiful. Well I’ve started to save money because I will have to get one of those. Another thing that caught my attention was the banner they had placed in the Apple’s front-page, I really liked the simplicity with gradients and the new typeface, Myriad Light I think. Because of that I will show you how to create that effect in a easy and quick way using Fireworks. Step 1 New document, I used 800x600px and set the background to black. Step 2 Get the Apple’s logo from a typeface or you can get it on this link http://brandsoftheworld.com/download/brand/134868.html. After that open it in Fireworks and keep it vector. Copy it and paste it in your document. Step 3 Place the logo like the vector below and choose Gradient>Radial for the fill type. And for the colors a dark grey and a light grey. Using the Gradient Tool click between the leaf and the apple, hold the button and drag it to place and create the gradient. Use the image below for reference. Step 4 Make sure that the logo is selected and go to Modify>Alter Path>Expand Stroke. Use 3px for the width, rounded corners, and rounded caps. After that go to Modify>Combine Paths>Split. We will have 4 objects, select the 2 smaller ones go to Modify>Combine Paths>Join, rename the layer to “front”. Then select the other two and repeat the Join command. Rename the layer to “back”. Tip: the join command will allow us to apply a gradient for the objects. Step 5 Select the “back” layer and apply a gradient. This time Linear and for the colors use 4 levels: black, white, white, and black like the image below. Step 6 Using the Rectangle Tool (u), create a rectangle like the image below. After that change the fill type to Gradient>Linear. For the colors use black for the start and end, but change the opacity for the start point to 0. That will create a shadow. Step 7 Add some texts with a light font, I’m using Helvetica Neue Ultra Light. Conclusion I have to say, my favorite tool is Fireworks. I work with web design basically and it’s the most versatile tool for that. It has amazing vector tools that allow me to create and edit shapes like in Illustrator or the extinct Freehand, but at the same time I can play with bitmaps and tons of other great features.

Amazing Photoshop light effect in 10 Steps

Last year I had written a tutorial showing how to create some lighting effects in Photoshop, it was called Magic Lighting Effects. A lot of people liked it, but some people still have some questions on how to achieve that effect. When I added a “buy me a coffee” featured on my blog I decided to use an image I had done when I was showing my cousin how to do the Magic effect. Instead of using a hat I used a coffee cup and the process is basically the same, however this time I will explain it in more details. Step 1 Create a new document, apply a Layer Style on the background layer. Add a Gradient Overlay and a Pattern Overlay. Step 2 Here I've used an icon I found on a cool site, but you can use whatever you want. Step 3 Select the Ellipse Tool (U) and create a shape like I did. After that apply a Gaussian Blur (Filter>Blur>Gaussian Blur) with radius of 30px. Step 4 Create a new Folder name it “Light Effects”. Change its blend mode to Color Dodge, and move the ellipse you created to this folder. Step 5 In order to create the sparks we will use the amazing brush engine. Add a new layer, inside the “Light Effects” layer, set white for the color and follow the images below. Step 6 Using the Layer Styles add a Outer Glow to the sparks Step 7 Lets add some smoke. Create a new Layer, call it “Smoke”. Change its blend mode to Color Dodge and select the Lasso Tool. Set 40px for Feather and create a selection like I did below. After that make sure that the foreground is white and the background is black and apply a Filter>Render>Clouds. Tip: Continue applying the filter until you get the best clouds. Step 8 Add some text and using the Layer Styles again lets create a nice effect. Step 9 Place your logo and you can even add more effects like I did on the Magic Lighting Effect, but then you will have to follow that tutorial ;). Conclusion I have to say, if you know a bit of Layer Styles and the Brush engine in Photoshop you will be able to create amazing effects. It will depend exclusively on your imagination and playing with the tool. Sometimes just changing a some settings and you get a totally different effect. The PSD file used in this tutorial can be downloaded here.