Bom, hoje vou traduzir uma barra de navegação, muito útil para sites e
portfolios. :)
Veja o resultado final:
1º Passo: Faça um novo documento do tamanho que preferir, no caso
400x150. Use uma cor para começar o botão, no caso azul. Agora faça um shape
com a Rounded Rectangular Tool, mais ou menos como o layer abaixo.
2° Passo: Selecione o layer do shape, clique no botão Layer Style e
selecione Blending Options.
Utilize esssas configurações:
Drop Shadow:
sua imagem deverá estar assim:
3º Passo: Crie uma linha branca de 1px, posicione-a em cima do retangulo e
deixe sua opacidade em 30%:
4º Passo: Agora vamos criar o brilho. Faça um novo layer, escolha a
cor branca e faça um shape como mostrado na figura, usando a Rounded
Rectangular Tool.
5º Passo: Agora você pegue esse retangulo branco e ajuste sua
opacidade para 20%, e pronto, está criada sua barra ;)
Creditos: http://www.100tutorials.com/navigation.html
domingo, 22 de julho de 2007
Barra de navegação estilizada
terça-feira, 17 de julho de 2007
Blogueiros, diversão ou trabalho?
Olá Pessoal!
Hoje resolvi fugir um pouco dos tutoriais e escrever um pouco sobre o que eu ando pesquisando na internet ultimamente.
Hoje em dia, com toda a revolução da internet, Web 2.0, etc, etc, etc.. Existem zilhares de blogs, a maioria falando do mesmo assunto, alguns com qualidade, outros com quantidade e a visível intensão de só querer ganhar dinheiro. Tudo isso que eu via na internet me fez refletir muito sobre como prosseguir com meu blog, que é muito recente.
Como muitos outros blogueiros, eu tenho a opinião de que é hipocrisia, no mundo atual, o internauta entrar em um site (ou blog, principalmente blog, no caso) e não querer ver anúncios, mesmo porque, hoje em dia, tudo envolve publicidade. O usuário pode se sentir incomodado com sites/blogs que abusam dos anúncios em toda parte do site, de forma que atrapalhe a navegação. Fica visível a intensão do dono do site, que é nada mais que ganhar dinheiro, e isso não vai acontecer, porque, como também já ouvi muito falar disso em outros blogs, o retorno só virar com uma dedicação muito grande ao CONTEÚDO.
A Minha opinião é que, se você quiser viver de internet, lucrar uma renda suficiente para cobrir um salario de um trabalho "comum", você vai ter que se dedicar ao seu blog da mesma forma que você se dedica a um trabalho convencional, terá que investir tempo e dinheiro.
Portanto, na maioria dos casos, o blog é uma diversão, um hobby para você expor suas idéias, que, nada mais justo, que você coloque uns anunciozinhos pra ganhar uma graninha, mas conforme-se, que o lucro não vai ser astronômico, e com essa pequena 'renda-extra' dedique-se a investir um pouco mais em conhecimento próprio, para, além de aprimorar sua capacidade, melhorar a qualidade do seu blog, assim ,todo mundo ganha. ;D
Para não quebrar a ideia do blog, segue mais 4 tutoriais ótimos, e variados:
• Recorte de Cabelos Encaracolados
• Colorindo imagens Preto&Branco (conceitos)
• Dark Art
• Tipgorafia Clean
domingo, 15 de julho de 2007
Criando um layout com o tema de estudos
Olá Galera!
Bom, vou começar este tutorial logo falando que foi um dos MELHORES tutoriais
que já vi na internet, e resolvi traduzir para você, visitante do meu humilde
blog. :D
Se trata de um tutorial completo que ensina a fazer um layout de web no estilo
de uma mesa de estudos, muito criativo, podendo ser usado em seu portfolio, ou
em sites com o tema, lembrando que este tutorial ensina uma BASE, porque,
claro, se todos que virem esse tutorial, fizerem igual e publicarem, vai ficar
chato, e perder a graça, então, pegue as técnicas aplicadas aqui para
desenvolver seu design.
Veja que belo o resultado final:
Bom.. cortando o papo furando, vamos ao que interessa! ;)
1º Passo: Crie um documento em 700x550 px, e pinte o fundo com uma cor
meio "azul piscina escuro" (:S), após isso, faça uma seleção
horizontal e pinte de "azul piscina claro". Após isso, aperte CTRL+D
para desmarcara seleção, de um CTRL+T e estique o retangulo, deixando ele bem
comprido, mesmo que fora da imagem. Isso é para fazermos o efeito do
background todo cruzado. Acompanhe as imagens a seguir para se situar melhor.
A seleção com a linha horizontal:
Esticando a linha horizontal:
2º Passo: Agora, ainda com a Transform Tool (Ctrl+T) ativada, gire 45º
a linha deixando-a na diagonal do documento, e crie uma nova pasta chamada stripes.
3º Passo: Duplique as linhas e vá espalhando-as por toda o espaço,
mantendo uma regularidade, como mostra a figura. Depois clique na pasta stripes
e transforme-a em uma layer indo em Layer>Merge Layer Set
>> 
4º Passo: Reduza a opacidade das linhas para 30%. Duplique a layer e a
inverta horizontalmente (Edit>Transform>Flip horizontal).
5º Passo: Bom.. O fundo já foi criado, agora vamos começar a
criaçãodo layout em si. Crie uma nova layer e, com a ferramenta Rectangular
Marquee Tool, desenhe um retângulo e pinte-o de branco, e crie uma nova pasta
com o nome de "paper 2", com a layer anteriormente criada.
6º Passo: Duplique essa pasta e nomeie para "paper 1", e
deixe-a invisível. Na pasta "paper 2", crie uma nova layer e, usando
a ferramenta Rectangular Marquee tool, faça uma linha de 2px e pinte de roxo,
na parte de cima do 'papel'. Estas serão as linhas de nossa folha de caderno.
(Clique para ampliar)
7º Passo: Duplique a layer da linha roxa varias vezes e vá criando
varias linhas, com certa regularidade, para deixar bem real, e depois, como no
passo 3, selecione a pasta "paper 2" e vá em Layer>Merge Layer
Set para transformá-la em um só layer.
(Clique para ampliar)
8º Passo: Deixe a pasta "Paper 1" visível novamente e
transnforme-a em uma layer, como no passo anterior. Após isso entre nas
Blending Options e configure da seguinte forma:
(Clique para ampliar)
9º Passo: Selecione a layer da folha com linhas e de uma leve entortada
nela, girando-a com Ctrl+T, para dar um ar de bagunça.
(Clique para ampliar)
10º Passo: Duplique a layer do papel em branco e de uma outra
entortadinha, alterando um pouco sua posição, levemente, para dar enfase a
'bagunça'.
(Clique para ampliar)
11º Passo: Duplique novamente a layer e de mais uma bagunçada. Isto
não é essencial, mas enfeita um pouco mais, deixa mais caprichado. Agora
vamos fazer a parte amarela, que seria um papelzinho de anotações, como o
menu. Então crie uma nova layer por cima de todas as dos papeis, e com o
Rectangular Marquee Tool, faça uma seleção parecida com a da imagem.
(Clique para ampliar)
12º Passo: Pinte essa nova layer com amarelo (#F9EEB3)
(Clique para ampliar)
13º Passo: Faça uma selação na parte que 'sobra' pra fora do papel e
ajuste a Hue/Saturation (CTRL+U) e acordo com a figura.
(Clique para ampliar)
14º Passo: Dê uma leve entortada na layer amarela, com o CTRL+T, como
a figura.
(Clique para ampliar)
15º Passo: Agora vamos adicionar o conteúdo. A fonte utilizada no site
foi a font angelina, que pode ser baixada em http://dafont.com/angelina.font
(Clique para ampliar)
16º Passo: Segue as configurações utilizadas nos textos:
Texto do menu:
Texto do título:
17º Passo: Agora entramos na reta final de nosso layout. Vamos
adicionar os objetos, que darão mais realidade a nossa interface de estudos.
Você pode pegar as imagens
dos objetos, ou então pegar o psd
pronto, com as imagens já tratadas. Aconselho a pegar o psd já tratado,
para facilitar nosso processo.
Então copie a imagem da borracha e gire ela mais ou menos 50º com o CTRL+T,
como na figura.
(Clique para ampliar)
18º Passo: Mude a cor com o CTRL+U, e acordo com as configurações:
(Clique para ampliar)
19º Passo: Reduza o tamanho em 50% com a Transform Toll (CTRL+T) e
depois, com um zoom de 200%, remova os restos do background da borracha com a
Polygon Lasso Tool.
(Clique para ampliar)
20º Passo: Volte com o zoom normal e posicione, bonitinho, como na
figura :D
(Clique para ampliar)
21º Passo: Aplique uma sombra discreta (blending Options), com as
configurações mostradas na figura.
\/
22º Passo: Repita o mesmo processo com as outras imagens, mas use uma
entonação diferente nas sombras.
\/
\/
E é isso.. Nosso layout está feito! :D
Veja novamente o resultado final! ;)
É isso aí. Um tutorial completo, que te dá bases para você desenvovler o
SEU layout, com a SUA criatvidade. ;)
Até a proxima pessoal.. e comentem ;)
Fonte: http://www.flash-game-design.com/tutorials/dtWebLayout-photoshop-tutorial-1.html
Download do PSD: http://rapidshare.com/files/39441140/desktop-layout.psd
sábado, 14 de julho de 2007
Glass Orb
Olá Galera!
Fiquei uma semaninha ausente, mas já estou de volta, para traduzir mais um
tutorial, agora ensinando a fazer um Glass Orb, uma "bola com
reflexo". :)
Mãos a obra:
1º Passo: Crie um arquivo em 500x500 px com fundo branco. Agora crie
uma nova layer fazendo um circulo regular na cor #445377. Dica: Segure Shift
para fazer um circulo simétrico.
2º Passo: Agora vá em Inner Glow e configure da seguinte forma:
Sua imagem deverá ficar assim:
3º Passo: Crie uma nova layer, depois segure CTRL e clique na layer
anterior, para criar a seleção do circulo. Agora vá em
Select>Modify>Contract e mude isso pra 5. A seleção diminuirá e
ficará desta forma:
5º Passo: Inverta o foreground com o background, depois selecione a
Gradient Tool, mude para Radial Gradient e aplique como mostrado na figura,
depois de um CTRL+D para desmarcar o círculo.
Altere essa layer para color dodge, e deverá ficar assim.
Ok! Estamos quaase acabando! Vamos para os retoques finais:
6º Passo: Crie uma nova layer e marque um circulo meio oval, como a
imagem abaixo.
7º Passo: Mude o foreground para branco, selecione Gradient Tool e mude
para Linear Gradient. Aplique como abaixo.
Agora é com você, use o CTRL+T para marcar o tamanho que achar mais
apropriado, e depois vá em Fill e configure a transparência conforme achar
melhor. O resultado final é esse:
Espero que tenham gostado. Facinho este tutorial né?
Créditos: http://www.minimalistic.dk/orb.htm
