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.

Last Sunday I arrived in Chicago and had the opportunity to visit one of the coolest cities I’ve ever been to. It was a very short trip, only 2 days, and I will definitely go back to Chicago again in the future; hopefully the near one

Walking around Chicago was great: the skyscrapers and all the history behind them and their architects such as the well known Mies van der Rohe. Also some famous movies shot there like: Batman Begins, The Dark Night, The Blues Brothers, Road to Perdition and the Ferris Bueller's Day Off historic parade scene.

The first skyscraper was the ten-storey Home Insurance Building in Chicago, built in 1884–1885. While its height is not considered unusual or very impressive today, the architect, Major William Le Baron Jenney, created the first load-bearing structural frame. In this building, a steel frame supported the entire weight of the walls, instead of load-bearing walls carrying the weight of the building, which was the usual method. This development led to the "Chicago skeleton" form of construction. After Jenney's accomplishment the sky was truly the limit as far as building was concerned. Wikipedia

In 1885, the first steel-framed high-rise building rose in Chicago ushering in the skyscraper era.[18] Today, Chicago's skyline is among the world's tallest.[19] Downtown's historic buildings include the Chicago Board of Trade Building in the Loop, with others along the lakefront and the Chicago River. Once first on the list of largest buildings in the world and still listed thirteenth, the Merchandise Mart stands near the junction of the north and south river branches. Presently the three tallest in the city are the Sears Tower, the Aon Center (previously the Standard Oil Building), and the John Hancock Center. Wikipedia

Ludwig Mies van der Rohe, along with Walter Gropius and Le Corbusier, is widely regarded as one of the pioneering masters of modern architecture. Mies, like many of his post World War I contemporaries, sought to establish a new architectural style that could represent modern times just as Classical and Gothic did for their own eras. He created an influential 20th century architectural style, stated with extreme clarity and simplicity. His mature buildings made use of modern materials such as industrial steel and plate glass to define interior spaces. He strived towards an architecture with a minimal framework of structural order balanced against the implied freedom of free-flowing open space. He called his buildings "skin and bones" architecture. He sought a rational approach that would guide the creative process of architectural design, and is known for his use of the aphorisms "less is more" and "God is in the details". Wikipedia

I really enjoyed my time in Chicago and if you ever get a chance to visit this great city, I highly recommend you go. Meanwhile I'll leave you with some photos I took.

One of the biggest challenges when advertising a product, is to come up with an idea that is not obvious, but still is clever enough to deliver the message your client wants. When you do that and still manage to be funny, you hit the jackpot.

Here are some examples of clever advertising and how a simple idea might be just the right one to go with. Remember, complex might not be best way, so stick to simple ideas... most times less is more! Found these on Flickr. Enjoy!

As the Summer Olympics draws near every aspect of popular culture tends to involve itself in it. The design world especially plays an important part in inspiring people to get excited about the games. Recently there was a book released called "A Century of Olympic Posters" (which was mentioned in Fabiano's Best of the Week #18 post back in June). I've actually never seen the book, but I found that I didn't actually need it to see all the posters. Wikipedia has them all easily accessible.

Looking through these posters is great because it's like looking at a timeline of the changes and innovations in Graphic Design.
Some of my favorites are:
1912 - I love the 1912 one because it has a sort of Art Nouveau look to it, which is pretty appropriate for the time.
1924 - This poster almost seems like a German or Soviet propaganda poster.
1956 - Here we see a departure from depicting the usual roman statuesque male form that was part of the posters since 1908. In fact in completely removes any natural form.
1968 - I'm totally digging this Mexico '68 poster.
1988 - this one is in almost classic 1980's style. It looks like they actually used early computer graphics to make this.

1896

1900

1904

1908

1912

1920

1924

1928

1932

1936

1948

1952

1956

1960

1964

1968

1972

1976

1980

1984

1988

1992

1996

2000

2004

2008

2012

source: haha.nu

Previously we've shown how to make a small layout on fireworks based on the 9rules desing. Now we're going to show you how to set this to code up. We're gonna explain everything, from slicing in Fireworks to setting the css in the code. Enjoy and let's get started!

STEP 1 - SECTIONS

First of all, we need to open the file at the the Tutorial Part 1. After that, we're going to set the regions of this page, this will help us to make the code.

STEP 2 - THE CODE

Now we can start to code. We will make the basic structure and then see how the page will look only with some plain text. To do the code, we use Smultron, a free and powerfull text editor, but you can use whatever you want. Let's code it region by region:

HEADER:

	

		
Abduzeedo by design
	

MAIN:

	

		

			The idea behind this blog is mainly to be a channel to design.
		
		

			

				
New Posts
				

					

						
Inspiration: Amy Stein Photography
						Posted by Aloa -  06/30/2008
					
	
					

						
Inspiration: Amy Stein Photography
						Posted by Aloa -  06/30/2008
					
	
					

						
Inspiration: Amy Stein Photography
						Posted by Aloa -  06/30/2008
					
	
				
				

					Currently on Page 1 of 24
					
PreviousNext
				
			
		
		

			
2008 abduzeedo.com
		
	

CONTENT:

	

			

				
New Posts
				

					

						
Inspiration: Amy Stein Photography
						Posted by Aloa -  06/30/2008
					
	
					

						
Inspiration: Amy Stein Photography
						Posted by Aloa -  06/30/2008
					
	
					

						
Inspiration: Amy Stein Photography
						Posted by Aloa -  06/30/2008
					
	
				
				

					Currently on Page 1 of 24
					
PreviousNext
				
			
		

FULL CODE

<body&gt
 
	

		
Abduzeedo by design
	
	

		

			The idea behind this blog is mainly to be a channel to design.
		
		

			

				
New Posts
				

					

						
Inspiration: Amy Stein Photography
						Posted by Aloa -  06/30/2008
					
	
					

						
Inspiration: Amy Stein Photography
						Posted by Aloa -  06/30/2008
					
	
					

						
Inspiration: Amy Stein Photography
						Posted by Aloa -  06/30/2008
					
	
				
				

					Currently on Page 1 of 24
					
PreviousNext
				
			
		
		

			
2008 abduzeedo.com
		
	

</body&gt

You may save this file and call it index.html. Here you can see how your browser will render it with no styles right now.

STEP 3 - SLICING THE PNG

At this step, we're gonna hide some layers and use the Slice Tool to export the images that we'll use in the CSS. Select the tool and make the slices as shown.

STEP 4 - EXPORTING IMAGES

After making the slices we'll export the images. Click with the right button over each slice and select Export Select Slice, save the images inside a folder in the root, and call this folder "images". Check the names of each image we've exported.

STEP 5 - CSS

Now we must link the CSS file in the HTML. Insert the following line inside the <head> tag.

To build the CSS we'l use CSSEdit. Open a new CSS file and save it on the root folder as style.css. To begin the styles we will create the main ID's.

body {
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-size: 16px;
	margin: 0;
	padding: 0;
	background: #000;
}
#total {
	width: 600px;
	height: 600px;
	border: 5px solid #FFF;
	position: relative;
	margin: 20px auto;
}
#header {
	height: 105px;
	background: url(images/bg_header.jpg);
	position: relative;
}
#main {
	background: url(images/bg_body.png) left top repeat-x #DBE8C4;
	height: 477px;
	width: 500px;
	padding: 18px 50px 0 50px;
}
#slogan {
	width: 195px;
	height: 82px;
	background: url(images/bg_slogan.jpg) no-repeat;
	color: #325D6A;
	padding: 18px 20px 0 285px;
	line-height: 1.3em;
}
#content {
	background: url(images/bg_roundWhite_top.png) left top no-repeat #FFF;
	margin-top: 15px;
}
#footer {
	background: url(images/bg_roundGreen_top.png) left top no-repeat #81AC40;
	margin-top: 15px;
}

Now, let's make the style for the contents inside the ID #content. We must create the #content_inner, to make the round corners at the bottom and at the top.

#content_inner {
		background: url(images/bg_roundWhite_bottom.png) left bottom no-repeat;
		height: 240px;
		padding: 10px 15px;
	}
	#content_inner h2 {
		margin: 0;
		color: #666;
		font-size: .9em;
		font-weight: normal;
		border-bottom: 1px dotted #CCC;
		padding-bottom: 10px;
		height: 15px;
	}
	#content_inner ul {
		margin: 0;
		padding: 0;
	}
	#content_inner ul li{
		margin: 0;
		padding: 0;
		list-style: none;
		height: 50px;
		padding-top: 10px;
		padding-left: 15px;
		border-bottom: 1px dotted #CCC;
	}
		#content_inner ul li.gray {
			background: #f5f5f5;	
		}
	#content_inner ul li h3 {
		margin: 0;
		font-size: .95em;
		line-height: 20px;
	}
	#content_inner ul li .submitted {
		color: #666;
		font-size: .8em;
		height: 20px;
		line-height: 20px;
	}
	#content_inner ul li .submitted a{
		color: #325D6A;
		font-weight: bold;
		text-decoration: none;
	}
	#content_inner ul li .submitted a:hover {
		color: #000;
		text-decoration: underline;
	}
	#content_inner .pager {
		position: relative;
		height: 30px;
	}
	#content_inner .pager .pages {
		position: absolute;
		left: 0;
		top: 0;
		color: #666;
		font-size: .7em;
		line-height: 30px;
	}
	#content_inner .pager .pages strong {
		color: #000;
	}
	#content_inner .pager .links {
		position: absolute;
		right: 0;
		top: 10px;
		height: 18px;
		line-height: 18px;
		font-size: .6em;
		font-weight: bold;
		text-transform: uppercase;
	}
	#content_inner .pager .links a{
		text-decoration: none;
		background: #325D6A;
		color: #FFF;
		line-height: 18px;
		height: 18px;
		padding: 3px 5px;
		margin-left: 5px;
	}
	#content_inner .pager .links a:hover {
		background: #000;
	}

For the footer, we're gonna do the same thing, create the #footer_inner for the round corners.

#footer_inner {
		background: url(images/bg_roundGreen_bottom.png) left bottom no-repeat;
		height: 70px;
		line-height: 70px;
		text-indent: 15px;
		color: #2A3D15;
		font-size: 1.2em;
		font-weight: bold;
	}

For our final step, we're gonna place the logo. We're gonna name our logo 'logo.png'. Take a look how we'll make this style.

#header h1 {
		width: 292px;
		height: 130px;
		background: url(images/logo.png);
		margin: 0;
		text-indent: -2000px;
		position: absolute;
		left: 50px;
		top: 20px;
	}
	#header h1 a {
		display: block;
		width: 292px;
		height: 130px;
		outline: none;
		text-decoration: none;
	}

FINAL RESULT

You can see that all process is very easy, but you must exercise the CSS part, this is the heart of web design. A beatiful code is nothing without a good CSS to show the hard work we had to design. Practice and share with us your results!

dp.SyntaxHighlighter.ClipboardSwf = 'http://zee.com.br/misc/SyntaxHighlighter/Scripts/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code');

The V&A was awash with con’s by the end of this years Village Fete. And what a sorry looking bunch of miscreants you all were – Dance Floor Murderers, Fraudsters, Racketeers, Fashion Criminals and Nuclear Arms Dealers all rubbed shoulders with the other law-abiding visitors.

Criminality saw no boundaries as offenders young and old queued up to have their fictional Civil Liberties stripped. Some followed in the footsteps of other dynamic-duos and chose to be photographed with a partner-in-crime, others took the wrap for themselves and stood in the docks alone. Either way we caught some real hardened crims and did our part at ridding the streets of some of society’s most dangerous transgressors.

Our thanks goes to all those who took part and kept us busy for the entire event. And, if there are any of you felons reading this who received a Fibre Criminal Record, can you send us a scan of the picture side of your cards so that we can add it to our files.

Calling all designers, developers, information architects, project managers, writers, editors, marketers, and everyone else who makes websites. It is time once again to pool our information so as to begin sketching a true picture of the way our profession is practiced worldwide.

 

Hide Your Shame: The A List Apart Store and T-Shirt Emporium is back. Hot new designs! Old favorites remixed! S, M, L, XL. Come shop with us!

It’s that time again folks, the Village Fete at the V&A is back! This year we’re giving punters the chance to show their darker side with a replica vintage Criminal Record:

“Impress your friends with the Fibre Correctional Facility Criminal Record. Walk in the footsteps of your celebrity heroes - Steve McQueen, Bill Gates, Hugh Grant, Bob Fossil - and get your very own bespoke Criminal Record complete with mug-shot, finger-prints and all your personal details, without the need to spend a second at Her Majesty’s pleasure.”

More details here. Hope to see you there! 

Hi everybody, nice to see you here again. Now I come out with my second post. I come out with Tragiklabs Artworks. The arts is just awesome, with some Psychadelic arts.

Tragiklab Inc. is: The experimental playground of Dhanank Pambayun a.k.a tragikpixel evolving to an experimental room for various commercial and personal projects such as, 2d animation,graphic, digital/manual illustration, and much more, also support any independent projects, like a offline and online digital art exhibition After an intense two years experiment, tragikpixel has turned into tragiklabs. But Lately Tragiklab is dead, and turn into Evergrunge

The arts is really awesome. He process a single image one by one and combine them into one great masterpiece, and the result is just COOL!. Here some arts from him. Hope you like it n_n!!

Hello Motion

Flash Film

First Light

Selleys Bathroom

Commarts

Everyone uses a mouse, and most of you have probably heard of carpal tunnel syndrome. I never really worry about it but it does linger around the back of my mind. I even know some people who have been afflicted by it. There are different things you can do to avoid getting it, using a more ergonomic mouse in one solution, OR you can use this mouse that looks like it was designed for an alien hand.

It looks kinda of interesting and I'm totally willing to try. I know that after a few hours on photoshop my wrist can get tired. I probably should invest in a Pen tablet soon.

Read more about it, and see more pictures, here: DVICE