articles on
Web Design: Black Layouts
Following our hit series about Web Design, today I bring to you only awesome black layouts! Man, I love these... It's incredible how a layout can get beautiful with darker colors. And of course, when you work with black, the right colors will bring just the right contrast. Lime-green, Orange, Electro-Pink... most shocking colors will bring awesome life to the layout. Of course, checking this sites you'll get to see many examples of how to apply colors in a black layout. Some of these are not pure black, 'cause if I start to name all the shades of black, grey and other monochromatic colors I'm gonna enter an eternal loop. So, I just hope you all enjoy my selection. Cheers!! ;) And of course, the best black layout ever.
Web Design: Blue Layouts
Our web design series are doing great! Our last post had over 40 thousand visits! That's a obvious sign that you people are craving for more web design posts! So today, I bring to you only blue layouts. From little guys to the BIG fish... this list has it all. There are plenty examples of html and some flash sites, but all very beautiful! My favorites are the Corona's and Pepsi's sites. And I hope you guys enjoy this selection! Cheers. ;)
Web Design: Illustration
Following our series of web design posts, I was thinking about a nice web element that many sites have and that we've featured a lot here at Abduzeedo: illustration! We've seen a lot of it here, interviewed the artists, but never really talked about it inside web design. Well, right now I won't talk, but show you many sites that use illustrated elements in their design. It's really great how they turn out to be... the results are pretty sweet! I hope you all enjoy my selection! Cheers. ;) Reader suggestions:
Web Design: Photographic Background
If I were told to make a list of web design trends I love, there would be really few itens. Wood, glowing stuff and other things... and most definately, photographic backgrounds! I even had a personal project back a few years agora, but it never went online. Here are a few websites that we get to see this awesome trend... most of them are flash sites, because when you have a photo background, it's important that it will respond to your resolution... otherwise, if you have a 1280x1024 back photo, it will lose a lot of information in 1024x768. Do you guys know any other cool sites like these? Or even cool tutorials on how to do it? If so, leave a comment! Enjoy! ;) Explore the thumbnails to enter the photoback. Just choose a language and it will pop up.
Wood in Web Design
Another day I was talking to a friend of my, and he told me that he would love to see more posts about web design here at Abduzeedo. When he told me that, I totally understood that we're kind of posting just about photography and illustration... and only Fabiano is doing something about web with his tutorials and links in the Best of the Week series. So today, web design it is! :D When making a new site design, most of us try to figure out what kind of theme to go with... and there are plenty: space (lol), water, wood, colorish, glowing and shinning stuff, etc, etc. The list is just endless. One of my favorite design elements is wood! It's really great how you can manage to make a sweet design with wood background, static or not (I do prefer static). Anyways, here are some hand picked websites that got plenty of wood for your design needs.
PSD2HTML Review
A web designer has to be able to design and code a page, that for me is extremely important because it’s the only way the professional will be able to create something that works not only in the visual sense through aesthetics, but also through functionality. Knowing how to code, what tags to use, and the best way to use it is a must for anybody who wants to become a successful web designer. However, there will always be the part of the job you like the most, some people like the coding part, or just the CSS, while some like the designing more than the coding. I have to say I really like the CSS part. There are services that do the slicing and coding for you, but I had never tested one until now. For me the best way to review a product or service is testing it and see how it works. That’s a good way to see if it is suitable to your needs and is worth to invest the money or the time to use it. So I was invited by PSD to HTML by PSD2HTML.com to test their services. PSD to HTML by PSD2HTML.com provides fast, high quality conversion of graphic Web design into Hypertext Markup Language (HTML) and its extensions. We accept source files in all common formats, including PSD, PNG, AI, and even HTML (existing markup). We support the following markup specifications: W3C Valid XHTML 1.0 Strict, W3C Valid XHTML 1.0 Transitional, W3C Valid HTML 4.01. I really liked the idea, and for the review I created a design using Fireworks for a personal portfolio with pretty much everything necessary to have an online portfolio. I decided to make the site only one page and the menu would link me to a certain part of that page. Also, the portfolio would be a carousel with the thumbs. So how did it work? Submitting The whole process is very straight forward, after I finished the design I zipped everything with the non-standard fonts I used and wrote a paragraph explaining how I needed the single page site, carousel portfolio. You have a great variety of options such as layout fix or flexible, Horizontal Alignment, Header/Footer Stretch, Vertical Alignment. Also there are the Advanced Markup Options where you can choose from browsers compatibilities, to resizable font size. There are really useful options and you can get your site up and running pretty easily even if you want to use a CMS or Blog system. They work with all the major systems, of course there will be a price for that. The Communication Everything worked really fine, they gave me a link where I could keep updated with the status of the project. They had a couple of questions about the typefaces and some layout functionalities. But the communication was very efficient. The First result I have to say, I was slower than their services. That’s because I’m traveling so I was not able to answer their questions. Even though, they sent me a fully functional site in less than 36h. Also they informed me that they had tested the site in Safari 2 and the JS Reflection effect wasn’t work so they would fix that issue. Final Result. As a designer who always wanted to code his pages I have to say, PSD to HTML by PSD2HTML.com is an excellent service. It really allows a designer to focus on the design part only and leave the code to them. But if you want to touch the code, like me, you will feel very comfortable with the code. CLICK HERE TO SEE THE DEMO Even though you might prefer to code your pages, PSD to HTML by PSD2HTML.com is a nice service when you have many projects to work on and you want to maintain quality, or if you want to focus more on the design and not so much on the code. I highly recommend you test this service. Also I'm writing a tutorial showing how I created the design. Stay tunned.
Sites of the week #3
This week we have 6 beautiful sites. However, one in special has really caught our attention, visualize.us. It's social bookmarking like del.icio.us but for images. It's really well designed and very easy to use. It's definitely worth checking it out, we sure that it will be very useful for you. vi.sualize.us - vi.sualize.us vi.sualize.us is a social bookmarking website for visual contents — vi.sualize.us (read visualize us) allows you to remember your favorite images around the web, and share them with everyone. Lifestyle Sports - www.lifestylesports.cz Lifestyle Sports is led by a strong, dynamic and diverse management team, who believe in their people and expect the best from them. We are proud of who we are and are committed to the highest standards. Leo Burnett - www.leoburnett.com We are Leo Burnett. Our aspirations is simply to be the best marketing communications company in the world, bar none. Plurk - www.plurk.com Noun. plurk (plüer-kh) - A really snazzy site that allows you to showcase the events that make up your life in deliciously digestible chunks. Low in fat, 5 calories per serving, yet chock full of goodness. Put Things Off - putthingsoff.com Put Things Off (PTO) helps freelancers, entrepreneurs and busy people work smarter, play harder and live the lives they love. PTO talks about productivity, freelancing, business, software, travel and much more. BeFunky - www.befunky.com Funky ways do express yorself. We’re changing the face of the internet. And the faces of those who surf it. BeFunky helps people turn their offline personalities into powerful online visual expressions.
Nacionale
Yes, the brazilian both designer and illustrator Doug Alves from Nacionale hasn't updated his site for awhile. But if you don't know his works already, please check cause it's awesome!
W3 PSD to HTML review
The web design process is very time consuming, besides that, sometimes we want to focus more on some graphic details and we sort of forget about the CSS/HTML production and how important it is for a good website. Because of that it’s always good to have a fast and reliable service to do this job. PSD to HTML takes a personal, hands-on approach to project management CSS, HTML, JavaScript (AJAX) and design implementation services for freelancers and design agencies. They offer: Hand-coded production using any style or methods you choose. Guaranteed on-time delivery. We just don't miss deadlines. Complete discretion and privacy. All communications are confidential. Social media optimization (SMO) Search engine optimization (SEO) Conversion rate optimization (CRO) Web development: content management systems (CMS), shopping cart (e-commerce), intranets etc Front-end coding (CSS/HTML/JS Production) Attention to detail and customer service is our main priority. Our advanced order process means that as little or as much specificity can be made for any given project so that not only is code delivered precisely as you would have done it, but you can also work with our staff via live chat, conceptshare.com, and our client area intranet. One of the coolest things on their service is the order form, you have full control over some very nice features, from the fluid or static layout to accessibility and usability options. And from some examples of their work, PSD to HTML is definitely a very good service available for us.
Sites of the week #2
I've been kind of really into web apps, I sign up to almost every service I read something about it and I always think they will be useful for me. Because of that this week I will list 3 really nice web services. Also I'll list the super cool new Boagworld site. After the first post, last week, we have received some really good suggestions, so we will be listing every week 2 sites that you recommended. To do that just leave a comment with the url of the site you want to suggest, a little explanation about it telling why it's cool to be listed here. I vote for art - www.ivoteforart.com ‘I vote for art’ is your favourite new place to buy art online. ‘I Vote for Art’ is a brand new place to buy great art at a reasonable price. Please have a look around ... If you like a piece, make sure you click on the thumb to vote for it. Or perhaps you could even buy it! Boagworld - www.boagworld.com Boagworld is the personal website of Paul (the Wurzel) Boag who lives in the heart of rural Dorset. He produces a weekly podcast along with Marcus (pop star) Lillington on all things relating to building and running websites. Jungle - audiojungle.net AudioJungle is a brand new audio community serving up thousands of stock music loops and audio effects by independent authors for use in your projects. Join us today, and together we’re going to rock the web! Orgoo - http://www.orgoo.com Imagine your personal communications cockpit, where every tool you need to communicate and express yourself is organized and integrated together in one place online - all your email accounts, all your IM accounts, video chat, video mail, SMS and more, working together to give you one seamless experience. READER SUGGESTION Alfa Romeo 159 - www.experience159.com "Vivez l'expérience 159"
Sites of the week
This week we will start a new series of articles that will be our weekly selection of sites. We've seen lots of great sites every day and we thought it would be very cool to share some of them with you. The list will have new sites, sites we saw in the past that are really good and have to be featured, an important redesign, or even a web app that might be very useful to all of us. The idea is show new concepts, designs, and solutions. Besides, we'd love to list your website, so feel free to send us emails with the url of your website. Nice Icons www.niceicons.net We sell beautiful and stylish stock icons, ready for use in personal or commercial projects. Our icons are designed to give your projects interface a new edge, whether that be for a website, software application, or mobile device. Backboard www.getbackboard.com Backboard is a simple utility designed to help you get feedback on whatever you are working on: * Managers might use Backboard to gather input on product plans. * Marketing teams can collaborate and gather feedback on graphic designs. * Web designers can get client feedback on their latest concepts. * Students might discuss and evaluate ideas for class projects. Jamie Oliver www.jamieoliver.com "When I was about seven or eight, they let me peel the potatoes and pod peas, that kind of thing. By the time I was 11, I wasn't half bad at veg prep and I could chop like a demon! A lot of the boys at school thought that cooking was a girlie thing. I didn't really care, especially as I could buy the coolest trainers with what I'd earned from working at the weekend." Jamie Oliver Diggnation Fan site on Squarespace digg.squarespace.com Here's the scenario, you build the best Diggnation Fan site on Squarespace. Kevin and Alex review all the sites and choose yours as the winner. You get the new 3G Apple iPhone, when it comes out, and Kevin and Alex announce your site on an upcoming episode of Diggnation. Epic. Powerset www.powerset.com For most people, places and things, Powerset shows a summary of Factz from across Wikipedia. Powerset finds articles related to the meaning of your query. And sometimes even direct answers. Powerset summarizes pages for easy browsing, with tools that follow you as you read and explore.
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
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