fabiano's blog

Melhores da Semana - 20

fabiano — Fri, 04 Jul 2008 18:06:32 -0500

Mais uma semana de grandes novidades pra todos nós, como o Recomendation Engine do Digg, o novo Flash otimizado para SEO, e muitas, mas muitas referências de design gráfico. Espero que curtam!

Sites da Semana - #7

fabiano — Thu, 03 Jul 2008 18:51:47 -0500

Eu achei que um momento iria acontecer isto, pois esta semana curiosamente separamos 2 sites que não conseguimos traduzir para mostrar um pouco sobre essas empresas! Então contamos com alguém pra nos ajudar a completar esse post! Alguém se habilita?

DESIGN / CSS

ijsfontein - www.ijsfontein.nl

Can anyone please translate the "About" for us?!.

FLASH SITE

Design and Design - www.designanddesign.com

It all starts with an inspired, spontaneous idea.

COMMUNITY

Community of Sweden - communityofsweden.com

Welcome to CommunityOfSweden.com – the official online community for Sweden! Here you can share and enjoy photos, travel stories tips and more from friends in Sweden and all over the world. Anyone can join CommunityOfSweden.

WEB APP

Posterous - posterous.com

Posterous lets you post things online fast using email. You email us at post@posterous.com and we reply instantly with your new posterous blog. If you can use email, you can have your own website to share thoughts and media with friends, family and the world.

PORTFOLIO

Erwin Bauer - www.erwinbauer.com

Can anyone please translate the "About" for us?!

Mini-layout inspirado no 9rules design

fabiano — Tue, 01 Jul 2008 18:48:37 -0500

Nesse tutorial vamos mostrar em poucos passos como criar um efeito simples de header e com algumas texturas em vetor do próprio fireworks, tentar compor um pequeno layout buscando referência do 9rules.com. A parte 2 dele, faremos o HTML/CSS para mostrar como se comporta esse layout no browser!

PASSO 1 - FUNDO DO HEADER

Para começar, abra um arquivo novo de 600x600px, com a cor de background de #DBE8C4. Em seguida faça um retângulo na parte superior de 600x105px. Use um gradiente linear nele da cor #669933 para #0B1005.

PASSO 2 - EFEITOS

Para fazer o efeito das listras, vamos usar 2 texturas sobrepostas. Para fazer a primeira, faça um retângulo no topo queseja maior que o feito anteriormente (aqui fizemos de 625x162px) e preencha ele com a textura DNA e cor #666666. Em seguida aplique um fitro Motion BLur com os valores indicados na figura e um blend Soft Dodge. Feito isso duplique este layer e apenas troque a textura para Grid 4 e o blend para Overlay. Aqui não vamos mascarar o que ficou sobrando, vamos apenas criar um retângulo branco por cima de tudo.

PASSO 3 - GRADIENTE DO BODY

Faça agora um retângulo com gradiente linear para ser o fundo do corpo principal. Use as cores #93B956 e #DBE8C4 e deixe ele na posição Y em 109. Agora vamos fazer apenas um acabamento no header com uma linha horizontal de 1px na cor #C2D79A. Veja no detalhe como devem ficar os elementos até agora.

PASSO 4 - ELEMENTOS DO LAYOUT

Agora não temos nenhum truque de efeitos para ser feito, apenas usar a criatidade e adicionar alguns elementos no layout. Usamos algumas frases grandes, textos, uma lista com links, um footer e claro, um bom ícone e um título pra dar o acabamento!

RESULTADO FINAL

Veja que o processo é bem simples é só testar as cores, os efeitos e tentar chegar nos elementos certos para que consiga comport um layout com harmonia e com estilo.

Melhores da Semana - 19

fabiano — Fri, 27 Jun 2008 14:15:17 -0500

Terminamos a semana como um frontpage no Digg com nosso post de HDR, o que foi sensacional. E durante a semana tivemos uma série de artigos bacanas que valem a pena conferir!

SEXTA - 27/06

Yuko

AisleOne — Pantone Espresso Cups

Nike Kit Builder / Niketown London

Skate Study House

Celebrate Bill Gates Day with us here at Engadget

Where There's Smoke... There's Georgi

Found Type Friday #54

QUINTA - 26/06

McDonalds Open Late

Philips

Bloody Ambient Marketing

Inspiration: Eric Tan’s Wall•e posters

Garmin: Landscape, Microphone

Microsoft, then and now

Behold! Photoshop Skins for your Keyboard

Olympische Spiele Munchen 1972

QUARTA - 25/06

Israeli Stamps of 1975

Money Celebrities Pictures

São Paulo Fashion Week Summer 2009 Highlights

twitabit - Post your tweets here when twitter is down

Playful - Pablo Alfieri

Inspiriation: Nik Ainley

Otaku Kaidan

The Challenge: Read One Book a Week

Tiji / La télé à la hauteur de leur imagination

TERÇA - 24/06

In the Land of Retinal Delights: The Juxtapoz Factor

1.5 Million Australian Students Dump Outlook/Exchange For Gmail

New Home Page Unveiled At Yahoo AU

Evernote Opens to All: Fantastic Promise, Disappointing Execution

Favicon Episode 7

30 Essential PDF Documents Every Designer Should Download

Prismgirl

Young Illustrator’s Award

SEGUNDA - 23/06

Learning When to Say No

Remembering George Carlin

How to Go From Sedentary to Running in Five Steps

4+ Ways to Quickly Create Excellent Presentations Online

Google Trends for Websites Sucks for Small Blogs

Creative Calendar Designs

Battle of the geeks

40+ Killer Typographic Posters, Photoshop Effects and Tutorials

Varo International Ltd.

Sites da Semana - #6

fabiano — Thu, 26 Jun 2008 09:35:08 -0500

Esta semana começamos a separar os sites por categorias, já que muitos nos perguntavam o porque de ter escolhido os tais sites. Então decidi fazer esta divisão e listar os melhores sites que vi nesta última semana separando cada um em uma categoria!

E fique a vontade para dar uma dica de uma nova categoria ou mesmo um site para estar aparecendo na próxima lista.

DESIGN / CSS

Celsias - www.celsias.com

Celsias is the world's leading action-based climate change website. Enable Celsias members to combat climate change by learning, committing to action, and engaging with people, organizations and projects.

FLASH SITE

The Hejz - www.hejz.com

The Hejz is as a showcase for Peter Jaworowski, co-owner of Warsaw based studio Ars Thanea, lead designer and illustrator.

COMMUNITY

Si-MI - www.si-mi.com

Si-Mi.com is a digital media platform for users to upload, share and sell their content. On Si-Mi, users can set their price and keep 70% of the net proceeds. All content can be voted on by the Si-Mi community in a social networking environment so that the most popular content is promoted to the front page for millions of visitors to see (and buy!).

WEB APP

Planzone - www.planzone.com

Planzones are online workspaces that are secure and private. You and your team can meet there anytime to get work done. Planzone is designed to help you focus on what's important and succeed at what you do. Planzone is where teamwork begins™.

PORTFOLIO

delrancho - http://www.delrancho.org

Ricardo Villavicencio AKA delRancho is Designer from Santiago de Chile

Melhores da Semana - 18

fabiano — Sat, 21 Jun 2008 10:15:29 -0500

Esta semana listamos diversas referências e notícias de web, sendo que a principal delas foi o lançamento oficial do Firefox 3 e o recorde de downloads em um único dia. Mas também nossa semana foi cheia de muita inspiração gráfica, muitas cores, muitas loucuras e sempre com um pouco de leitura pra fazer um balanço!

SEXTA - 20/06

The Cloud - Organic sculptural landmark

Fun with brands

Recycled Train Tickets

Screenprints & Portfolio…

Carl Warner’s Food Landscapes or “Foodscapes”

QUINTA - 19/06

Live Surface

City lights by Sleeping Beauty

Bubbles in bloom

CSS Editors Reviewed

A Century of Olympic Posters Book

The Hype Worked: Firefox 3 Downloaded 8.3 Million Times In First 24 Hours

10 Grand Graphic Designers

Signalnoise in Perth, Australia

Ultra-Realistic Paper Craft Motorcycle

The Five Most Common Mistakes of Male Freelancers

Mama, Good Old Days Disappeared

6 New MWM Graphics Posters.

QUARTA - 18/06

Handy Designer’s Tools “On The Fly”

Drips auf Flickr - Fotosharing!

hand-drawing style in modern web design

Dreamers Ink Aesthetics™

Volkswagen Trucks

How to Exceed Expectations

Collis Launches VECTORTUTS

Element Carbon Fiber and Helium Skateboard

Made In Spain ‘08

TERÇA - 17/06

The Goggle Favicon Debate

Web Typography At It’s Best

33 New Places to Get Design Inspiration

Nestle Museum, Mexico

David Mascha

SEGUNDA - 16/06

A great ad about Dutch simplicity

Blogging From the High Seas

Transparent House

Can Twitter Be Saved?

Radiohead at The Daydream Festival

Emil Kozak

Beautiful Brochures and Booklets

Apple Introduces iPhone 3G Videoconferencing Kit!

Museum's Journal

Citroen Pages

Sites da Semana - #5

fabiano — Thu, 19 Jun 2008 15:56:48 -0500

Para os sites desta semana separamos 2 em especial: o redesign do site do Jason Santa Maria, um blog que acompanho constantemente, com um design mais limpo e simples e o site Spread Firefox, criado para o Download Day do Firefox, todo desenvolvido em Drupal, nosso CMS favorito!

Jason Santa Maria - jasonsantamaria.com

Jason Santa Maria is a Graphic Designer living in sunny Brooklyn, NY. He serves as Creative Director for Happy Cog Studios, both in New York and Philadelphia. This status grants him access to most black-tie galas and groundbreaking ceremonies.

Spread Firefox - www.spreadfirefox.com

Welcome to SpreadFirefox! We're thrilled to have you join us, and we hope you're excited to be a member of one of the most energetic communities on the web. This page will answer some of the most common questions our members have.

Tennessee Summertime - summer.tnvacation.com

Traveling to Tennessee makes sense. We have natural beauty, southern hospitality, serene weather, and something for everyone. And, we are within a day's drive of 65 percent of the United States population. What more could you want in a travel destination? Tennessee welcomes you to explore everything we have to offer.

DeepSleep Studio - www.deepsleepstudio.com

Designer Alex Martinez, operates DeepSleep Studio. A creative spae based out of Miami Florida. Alex has a background in the fine arts ranging from painting, sculpting, printmaking and collage. An outlet was discovered once he opened himself to digital media. Design has been fuel ever since

Meez - www.meez.com

Meez is a leading online social entertainment network that fuses avatars, gaming and a robust virtual economy to create more interactive online communities. Our platform supports the building of animated 3D avatars, live interactions in virtual spaces and competitive online gaming, creating an immersive environment where users can personalize their experience and connect with friends.

Design estilo Grooveshark no Fireworks

fabiano — Wed, 18 Jun 2008 19:45:57 -0500

Semana passada mostramos o site Tinysong no nosso Sites da Semana. Além de se um belo aplicativo o site tem um design muito bem feito e achei que seria interessante reproduzir o mesmo design e fazer um tutorial sobre isso no fireworks.

Neste tutorial não iremo aplicar nenhum grande efeito ou alguma ferramenta desconhecida, mas apenas mostrar uma forma simples de fazer pequenos efeitos que fazem a diferença em um bom design.

PASSO 1 - NOVO DOCUMENTO

Para começarmos, abra um novo documento de 600 x 600px com a cor #BFD2E5 de background.

PASSO 2 - RETÂNGULO

Vamos agora fazer um Rounded Retângulo branco de 578 x 555px. Deixe como na figura com um espaçamento um pouco maior em baixo para podermos colocar algum elemento ali no final. Faça este retângulo com rounds pequenos, para ficar bem suave. Aplique também um Drop Shadow com os valore 1 - 50% - 2 - 270º e com a cor #46586A.

PASSO 3 - BOX 1

Para fazermos o background que será o fundo de nosso textfield vamos usar 3 Rounded Retângulos sobrepostos. Em todos eles será aplicado um gradiente linear e repare nas dimensões deles que o de cima é sempre 2px na altura e na largura menor que o de baixo, desta forma conseguimos dar a impressão de relevo que queremos. Siga o gradiente e as dimensoes de cada um dos retângulos.

PASSO 4 - ALINHANDO OS RETÂNGULOS

Aqui você consegue ver como devem ficar dispostos os 3 retângulos. Após fazer os 3 nesta ordem, selecione os 3 e alinhe na vertical e na horizontal para ter certeza que eles estão centralizados. Depois agrupe os 3.

PASSO 4 - SOMBRA E REFLEXO

Para finalizarmos o Box 1, vamos aplicar uma pequena sombra nele e um efeito de reflexo. Ambos serão feitos também com retângulos. Para fazer a sombra (1) faça um retângulo como na figura e aplique um Feather de 3 e alpha de 55. Depois coloque este layer para baixo do grupo de retângulos feito antes. Para fazer o reflexo, faça um Rounded Retângulo na base do desenho já feito e aplique um gradiente linear da cor #E6EEF5 para #FFF. No lado #FFF coloque um alpha de 0. Feito isto aplique um alpha de 90 neste retângulo. Veja no final da imagem como ficam a ordem destes layers.

PASSO 5 - BOX 2

Neste box faremos os mesmo processo do passo 3. Repare nas cores dos gradientes e no tamanho dos retângulos. Depois de feito os 3 alinhe eles na vertical e na horizontal e agrupe eles também. Posisione este grupo abaixo do reflexo feito no passo anterior.

PASSO 6 - SOMBRA

Aqui vamos somente copiar o retângulo de sombra feito antes. Copie ele para baixo deste nosso grupo do Box 2.

PASSO 7 - TEXTFIELD

O campo de texto criado será feito com 2 retângulos. Os 2 terão preenchimento #FFF. Faça o primeiro com borda de 1px #D6E4F0. Faça o segundo retângulo em cima dele com borda 1px #93AEC7 e mova 1px para cima. Veja na imagem como ficarâo dispostos os 2 retângulos.

PASSO 8 - ÍCONE DE BUSCA

O ícone que iremos criar será feito com um Doughnut e um Retângulo. Aproxime e una os dois e gire um pouco o retângulo. Selecione os dois elementos e use Modify > Combine Paths > Union. Posicione a figura já ao lado do textfield e aplique um Gradiente Linear da cor #99ABBB para #5D768C. Observe também que aplicamos um Inner Shadow nessa figura. Depois duplique este layer, delete a Inner Shadow e use uma cor sólida #F3F7FA. Mova este layer mais claro para baixo do outro. E depois mova 1px para baixo para dar a impressão de relevo. Veja no final como ficariam os 2 layers do ícone.

PASSO 9 - ELEMENTOS

Agora que já temos praticamente tudo finalizado, utilize mais alguns elementos como um logotipo, alguns textos e também algum logo na parte de baixo da nossa área de trabalho, onde deixamos um espaço no início do tutorial.

RESULTADO FINAL

Veja que o resultado é bem similar ao do Tinysong, mas podíamos brincar e aplicar outra paleta de cores, testando com os mesmos efeitos. Espero que tenham gostado e fiquem à vontade para fazerem alguns testes e mostrar aqui no blog!

Melhores da Semana - 17

fabiano — Fri, 13 Jun 2008 15:34:55 -0500

Nesta semana trouxemos diversas referências de artistas, designers, propagandas, um pouco de arquitetura e alguns artigos interessantes. Ah é claro, não deixamos de citar o acontecimento da semana, o lançamento do iPhone 3G. Incrível!

SEXTA - 13/06

2008 Design Trends

My Favourite Photoshop Tutorial Sites (Besides PSDTUTS!)

Cube Alarm Clock

Want to know how to design? Learn The Basics.

Yahoo Runs Into Google’s Arms

New Yahoo Logo Spotted in the Wild

SUPERLOVER - JUSTIN M MALLER

Block Quotes and Pull Quotes: Examples and Good Practices

Irrational Fear of Scary Japanese School Girls

QUINTA - 12/06

Mac OS X 10.5.3: sync Google Contacts

write here...write now (part 2)

The Making of Mystic

Bottlecaps Collection on Flickr

Free Blogging Icons

Nature’s Best Photography

New works up at Xtrabold

QUARTA - 11/06

CSS Support in Email

Great Architecture blog

Last.fm Re-design: The Good, The Bad & The Ugly

BMW's fascinating GINA Light Visionary Model design study

We're looking for a designer who wants to kick our ass and change our game

Ee Venn Soh interview

TERÇA - 10/06

Voodoo Omen and Envy press shots galore

HP's TouchSmart 2 in the wild

Jason Kronenwald: A Fresh Pack of Gum Blondes

Ancient Walls With Legos

diarrhea[1].jpg (image)

WWDC 2008 keynote video now online

Apple iPhone 3G

DefienDT Self Defense

SEGUNDA - 09/06

Work Spaces Gallery

The Story Behind Google’s New Favicon

Dubai Opera House by Zaha Hadid

Beautiful Black and White Photography

Superb Ad Prints Collection For Your Visual Pleasure

Nike Air Force 1 by Pedro Winter

Firefox Add-on To Save You From MySpace

Sites da Semana - #4

fabiano — Thu, 12 Jun 2008 16:02:14 -0500

Como sempre, os aplicativos web estão presentes em nossa seleção. Um dos mais legais, é o Tinysong, da Grooveshark. Com ele você simplesmente procura uma música e compartilha a url dela com um amigo. Simples, não? Mas experimente ele, você vai se impressionar com as fucnionalidades que ele te permite depois!

dConstruct 2008 - 2008.dconstruct.org

dConstruct is the affordable one day conference for people designing and building the latest generation of social web applications.

280slides - 280slides.com

Create beautiful presentations, access them from anywhere, and share them with the world. With 280 Slides, there's no software to download and nothing to pay for – and when you're done building your presentation you can share it any way you like.

Veer Ideas - http://ideas.veer.com/

Veer provides visual elements for use in professional creative work, such as graphic design, motion design, advertising and filmmaking. Our products include stock photography, illustration, typefaces, and unique merchandise. Products are showcased in our regularly published Veer Visual Elements catalog and other promotional pieces.

Tinysong - www.tinysong.com

TinySong allows you to quickly share music links with your friends.

Moodstream - moodstream.gettyimages.com

Moodstream is a powerful brainstorming tool designed to help take you in inspiring, unexpected directions. Whether you want images, footage or audio, or just need a stream of fresh ideas, tweak the Moodstream sliders to bring a whole new creative palette straight to you. Ready? Stream. Create.

fabiano's blog

Melhores da Semana - 20

SEXTA - 04/07

QUINTA - 03/07

QUARTA - 02/07

TERÇA - 01/07

SEGUNDA - 30/06

Sites da Semana - #7

DESIGN / CSS

ijsfontein - www.ijsfontein.nl

FLASH SITE

Design and Design - www.designanddesign.com

COMMUNITY

Community of Sweden - communityofsweden.com

WEB APP

Posterous - posterous.com

PORTFOLIO

Erwin Bauer - www.erwinbauer.com

Mini-layout inspirado no 9rules design

PASSO 1 - FUNDO DO HEADER

PASSO 2 - EFEITOS

PASSO 3 - GRADIENTE DO BODY

PASSO 4 - ELEMENTOS DO LAYOUT

RESULTADO FINAL

Melhores da Semana - 19

SEXTA - 27/06

QUINTA - 26/06

QUARTA - 25/06

TERÇA - 24/06

SEGUNDA - 23/06

Sites da Semana - #6

DESIGN / CSS

Celsias - www.celsias.com

FLASH SITE

The Hejz - www.hejz.com

COMMUNITY

Si-MI - www.si-mi.com

WEB APP

Planzone - www.planzone.com

PORTFOLIO

delrancho - http://www.delrancho.org

Melhores da Semana - 18

SEXTA - 20/06

QUINTA - 19/06

QUARTA - 18/06

TERÇA - 17/06

SEGUNDA - 16/06

Sites da Semana - #5

Jason Santa Maria - jasonsantamaria.com

Spread Firefox - www.spreadfirefox.com

Tennessee Summertime - summer.tnvacation.com

DeepSleep Studio - www.deepsleepstudio.com

Meez - www.meez.com

Design estilo Grooveshark no Fireworks

PASSO 1 - NOVO DOCUMENTO

PASSO 2 - RETÂNGULO

PASSO 3 - BOX 1

PASSO 4 - ALINHANDO OS RETÂNGULOS

PASSO 4 - SOMBRA E REFLEXO

PASSO 5 - BOX 2

PASSO 6 - SOMBRA

PASSO 7 - TEXTFIELD

PASSO 8 - ÍCONE DE BUSCA

PASSO 9 - ELEMENTOS

RESULTADO FINAL

Melhores da Semana - 17

SEXTA - 13/06

QUINTA - 12/06

QUARTA - 11/06

TERÇA - 10/06

SEGUNDA - 09/06

Sites da Semana - #4

dConstruct 2008 - 2008.dconstruct.org

280slides - 280slides.com

Veer Ideas - http://ideas.veer.com/

Tinysong - www.tinysong.com

Moodstream - moodstream.gettyimages.com