articles on

Tutorial: Obama's Background in CSS - Part 2

In this tutorial we're going to show how you may use the background we've created in the Obama's Background 1st part. But we're not only gonna show you how to put it inside a site body, but also how to create and structure the site main regions like the menu, main content, support column and footer. Our objective is not only to assemble the whole site, but also show some CSS basic concepts and Fireworks intregration with Web. STEP 1 The first thing we must do is to export our images. Since we're creating only the basic structure, we're only gonna need two images: background and logo. STEP 2 Now let's create the html file. The structure will have 4 regions: #header, #main, #sidebar and #footer. Notice that we're gonna insert the #main and #sidebar inside a #content, this way we're gonna have a greater possibility to modify things in the future. <body><div id="total"> <div id="header"> <a href="#"> <img src="logo_obama.jpg" alt="Home Obama"/> </a> </div> <div id="menu">MENU </div> <div id="content"> <div id="main">HERE IS THE MAIN CONTENT </div> <div id="sidebar">SIDEBAR </div> <div> <div id="footer">FOOTER </div></div></body> STEP 3 Now let's create the CSS. You may use the text/CSS editor of your choice. We're using here CSSEdit, and we're going to open Live Preview. With that, we'll be able to view in real time the things we are modifying. Notice that the structure is really simple. We're inserting a body #total with "margin: 0 auto" and all the other elements inside it. body { margin: 0; color: #999; font-weight: bold; font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; font-size: 2em; background: #01245c url(bg_obama.jpg) no-repeat center top; } // AQUI ESTÁ NOSSO BG! // Repare também que usamos a cor #01245C. #total { width: 960px; margin: 0 auto; } #header { height: 160px; } #header img{ border: 0; } #menu { height: 60px; background: #FFF; text-align: center; line-height: 60px; } #main { float: left; width: 650px; background: #f0f0f0; height: 400px; text-align: center; padding-top: 100px; } #sidebar { float: right; width: 310px; background: #dadada; height: 400px; text-align: center; padding-top: 100px; } #footer { height: 150px; text-align: center; padding-top: 50px; clear: both; color: #15539c; } STEP 4 Check the final result... really simple, huh? You only have to structure well the code and practice!

Light Graffiti in Photoshop

A few weeks ago, Paulo published a really cool post about what he called “Awesome Light Graffiti Pictures”. I was completely blown away by the images and the crazy things they’re capable of doing just by taking pictures with a long exposure. I received some emails asking me how to create that effect in Photoshop, and there are already some good tutorials on it, but I decided to write one myself. I’ll write 4 tutorials explaining how to do that in: Photoshop, GIMP, Pixelmator, and Fireworks. I’ll start with the Photoshop one, and the final result you can see below. The tutorial will be published this week I think.Update: You can read the tutorial at PSDTUTS.COM or clicking  here

Tutorial: Creating the iPhone Interface on Fireworks

You certainly want one, or already have one of these. It's an awesome device, but Iphone's interface is also something that gives a lot of pleasure on using it. Thinking about, we're going to show you how to do the interface on Fireworks. I've tried to make a real detailed tutorial, on how to do do that glossy look and maybe some other time I'll show you guys how to create the iPhone per say... so let's talk about business! STEP 1 To start, download these 2 images that will serve as our base.Iphone pictureColored background image Create a new 800 x 800px document with a black background, and import these 2 images. STEP 2 Now put the layer with the fishes image behind the iPhone and reduce the image, try to fix it until it looks like the image below. Hint: let's use the telephone image with the central part cutted as a layer above all others, this way we're havinh more freedom to work with shapes behind it! STEP 3 Let's creat a 255 x 380px rectangle, it will mask the background image. Now select the image, cut and paste inside the rectangle (CTRL+SHIFT+V). Now position it to stay inside the display limits and from behind it. STEP 4 In order to create the interface, we're gonna use mainly rectangle and apply some gradients and opacities. The process is quite simples, and there should be numerous ways to create these effects. Let's begin creating a 255 x 20px rectangle on the top, make it #000 and opacity 55%. Copy this rectangle, move 20px below and insert a 76px height. Then, create a lower 1px line, make it #000 and opacity 50%. STEP 5 Now let's create a little 3D effect. Create a 255 x 38px white rectangle and position it at the top of the last created rectangle as shown. Now apply a linear gradient that goes from #FFF to #FFF and use the transparencies in the gradient itself as we show in the details (notice that we've create an extra point of opacity to make the feather effect only at the bottom part). STEP 6 We already have the top ready, now copy the last two created rectangles to the bottom part. Create another #000 line with a 50% opacity above them, the same way we did before. STEP 7 Let's create the "slide to unlock" button. Create a 215 x 39px button without filling and 1px #CCC border, make its round 50. Duplicate the rectangle and cut the bottom part of the white gradient. Select the rectangle and the gradient, go to Modify > Combine Paths > Punch. STEP 8 After that, duplicate once more the rectangle and move it 1px above, apply a linear gradient that goes from #000 to #000, with opacity 24 at the bottom part (of the gradient). Make the whole rectangle a 80% opacity. STEP 9 For the button, create a 53 x 35px button and make its round 43. Apply a linear gradient as shown. Now put a arrow inside it, using the Arrow tool, and make it like the shape we're using. Apply a #979797 to it and a Inner Shadow with the values 0, 30% and 2. STEP 10 Now let's begin inserting texts. Here we're using Helvetica, but if you don't have it, you may use Arial without problems. The Hour text is #FFF and size 50. Duplicate the text layer and for the one beneath, apply #000 and move it 1px up. This effect looks better than the Inner Shadow, because it mantains the font's natural appereance. For the date text we're using #CCC and size 13. For the "slide to unlock" we're going to use #FFF and opacity 25%, size 20. FINAL RESULT To finish, apply the icons and the name of your provider at the top, above the 20px high rectangle. All the icons we also create using only rectangles and lines, play a little bit wih it! The PNG file has all that has been done.

Wave explosion Photoshop Tutorial Soon

Today I took 2 hours to do another reader’s request. I have to say, this image was really cool to make because I didn’t know how to even create that effect in the first place. But it turned out to be easier than I thought. Now I just need to write the Photoshop tutorial. Well I don’t even know how to describe the effect, it’s such a Heroes Peter Petrelli power of mind wave explosion, . Seriously, it’s a sort of explosion that this guy saw on a video and wanted to know how to do it. Below you can see the end result. Besides that, I’d like to share some information about the site. It had a huge traffic last month of over 930k visitors and more than 1.6 million page-views; it was a record. We’re all really happy with that and we want to thank all of you for visiting the site. We are also going to give away 2 favicon slots. These 2 slots will be to promote our visitor's sites. Each one will be there for a full month and by the end of that month, we'll change the favicons. So remember, every month we will give these 2 slots away. Wanna be the first one to get your site favicon here? Drop us a comment!You can check the tutorial at Winners of the Favicon slotsRajJonathan Solichin 

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]

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]

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]

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]

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 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 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="; allowfullscreen="true" allowscriptaccess="always" flashvars="feed="></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