articles on

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

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

Buytemplates review

Nowadays is very important to have a blog or even a website, we can promote our portfolio, ideas and opinions. And if you are a freelancer it's one of the best ways for you to get some work. However building a website is not an easy task. It requires a good knowledge of designing with grids, colors and typography. Also, there's the programming part: CSS, XHTML. besides that, you will need a good amount of time to do design and get your site runing, and that might be a problem when you have a lot of things to do. That's why sometimes it's worth buying a web site template. You can get a website for a very affordable price and even a hosting plan. Buytemplates.net is a good example, they offer you pretty much everything you will need to have your site like: five page templates so you won't have to worry about creating templates for other pages. Besides that, you can get Flash and Joomla Templates, live chat support 24 hours, and if you want you can pay a bit more and have a complete customization of template, custom design service, add more functionalities like ecommerce, and hosting. For more information visit their website at Buytemplates.net. This is a sponsored review, if you want to have your product or service reviewed by our team send an email to abduzeedo[at]abduzeedo.com.

Openjobs seeking talents

Openjobs is a very cool project where I had the opportunity to work in partnership with my brother. It’s basically a job board target for the Brazilian Market, inspired by Krop, 37signals GigBoard and Authentic Jobs. One of the coolest things about this project was the freedom I had to create the design and the CSS. We used a web framework called Wicket, which really makes designing and developing web apps very easy and straightforward. Besides that we are creating widgets so everybody can publish them on their blogs, and in the near future we will be releasing an Open Social widget as well for the Orkut mainly. With proper mark-up/logic separation, a POJO data model, and a refreshing lack of XML, Apache Wicket makes developing web-apps simple and enjoyable again. Swap the boilerplate, complex debugging and brittle code for powerful, reusable components written with plain Java and HTML. Some screenshots Widget

Zee's redesign

After some weeks planning, designing and developing, the Zee's new website is online. Much more than simply a redesign, we have changed everything, mainly because we needed to use a good and scalable CMS and create a blog for the company. Zee's old site With all these requirements, Drupal became our only choice. Firstly because we've been using it for a while so it wouldn't take us too much time learning and developing for it, giving us more time to spend on the design matters. Our goal for the site was basically create a very simple interface using few images and put all of our efforts on typography, colors and CSS. Listed below some sites and blogs inspired us. We also followed some ideas we learned from some excellent podcasts such as the @media presentations: How to be a Creative Sponge, Diabolical Design: The Devil is in the Details, Five Simple Steps to Better Typography and Interface Design Juggling. Among all of those lessons, we were able to apply on this project the very useful Jason Santa Maria's tip of creating a sort of wireframe, but with the real content, where we could play with the typography elements without worrying about colors and images. With the site well structured we started applying some colors and testing different combinations. Wireframe and first color scheme Although our first idea was to use a light background, we chose to keep it dark. That decision is explained because we have always used dark backgrounds, and wouldn't be a wise move to change our identity so drastically. Visit the site at http://zee.com.br Final Version

Get in shape while improving your design skills

Nowadays we can have access to pretty much everything, and even for those like me, who don’t have the opportunity to attend to design events such as @media, sxsw, dconstrukt and others, we have the chance to listen to them via podcasts or using Odeo. The truth is, there are lots of excellent speeches to listen to. From how to get inspiration to the importance of microformats, we can learn a lot from them. And one of the best things in my opinion is that I can throw everything in my iPod and enjoy them while I’m exercising. That means, both my body and my brain can get a work out Listed here are some of the best speeches, interviews and podcasts that i've come across so far Jeremy Keith - The Joy of API d.Construct 2006 Jeffrey Veen - Designing the Complete User Experience d.Construct 2006 Daniel Burka {15}digg design CreativeXpert frog design }{ evolving your design CreativeXpert Design 101 boagworld.com: web design podcast Writing an effective brief boagworld.com: web design podcast Andy Clarke: ?The Fine Art Of Web Design? Podcast @media 2006 Dave Shea: ?Fine Typography On The Web? Podcast @media 2006 Eric Meyer: ?A Decade of Style? Podcast @media 2006 Jason Santa Maria - Diabolical Design: The Devil is in the Details @media 2007 Dan Cederholm - Interface Design Juggling @media 2007 Mark Boulton - Five Simple Steps to Better Typography @media 2007 Jon Hicks - How to be a Creative Sponge @media 2007 How to Be A Web Design Superhero Andy Budd, Andy Clarkesxsw 07 Design Workflows at Work: How Top Designers Work Their Magic Bryan Veloso, Jeff Croft, Veerle Pieters, Kelsey Rugersxsw 07

Web 2.0 ... The Machine is Us/ing Us

This is a really good video showing how the web 2.0 is changing communications and the ways we use the web The video was created by Michael Wesch and he describes it as "Web 2.0 in just under 5 minutes". Transcripts are available as well at http://mediatedcultures.net/ksudigg/?p=78