Link Tutoriais

Barra de navegação estilizada

2007-07-22T13:40:00.000-03:00

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

Blogueiros, diversão ou trabalho?

2007-07-17T12:06:00.000-03:00

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

Criando um layout com o tema de estudos

2007-07-15T23:12:00.000-03:00

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

Glass Orb

2007-07-14T17:13:00.000-03:00

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

Este e mais tutoriais em http://linktutoriais.blogspot.com

Tentáculos com sangue

2007-07-14T01:33:00.000-03:00

Olá Galera!
Estive um tempo sumido, pois fiquei um tempo fora de casa, mas já estou de volta com o blog! =D

Hoje vamos ver um efeito de Tentáculos com sangue, muito interessante, um dos mais clicados lah no webtutoriais.

http://www.webtutoriais.com/open.php?cut=4429

Amanhã, provavelmente, algum tutorial bem interessante traduzido ;)
Boa Noite!

Transformando o Tom Cruise em um alien

2007-07-07T13:00:00.000-03:00

Isso mesmo que você ouviu(viu, né!). :P

Este tutorial achei no forum do imasters, e vim publicar aqui para vocês..
Um tutorial que requer um pouco de prática e um pouco trabalhoso, mas o resultado final vale muito a pena conferir.

http://www.worth1000.com/tutorial.asp?sid=161240&page=1

Muito bom, nota 10 por mim. :D

Abraços..

Grid-Lines Grossas

2007-07-06T21:02:00.000-03:00

Olá Pessoal!

Hoje, mais um tutorial feito por mim, sobre Grid-Lines, só que mais grossas,
para decorar suas imagens, designs, etc.

1º Passo: Crie um novo documento com 28x28px de medidas, como fundo
transparente.

2º Passo: Agora faça uma linha em diagonal com 10px de largura.
Dica: Desenhe a linha segurando o Shift, para que seu desenho saia com
simetria!
Não se esqueça de desmarcar o anti-aliased, para que seu desenho se
encaixe quando for aplicá-lo.
Depois de fazer a primeira linha, faça uma bem pequena no canto direito de
cima da figura. Posicione exatamente como se encontra na figura, considerando o
espaço de 1px do canto direito de baixo da imagem, para que a imagem possa se
encaixar perfeitamente.

( Imagem com zoom de 1600%)

Repare que, caso você alinhe duas linhas da regua, as imagens estarão
perfeitamente alinhadas.

3ºPasso: Pronto, sua grid já está criada, basta agora transformá-la
em Pattern, então vá em Edit>Define Pattern, e salve sua grid.

Pronto! Agora é só aplicar em seus documentos, como mostrado no
tutorial de Grid-Lines normal, indo em Edit>Fill.

Exemplos de utilização:

Texto Neon

2007-07-06T01:21:00.000-03:00

Olá Galera do LinkTutoriais! :)

Hoje eu traduzi um tutorial da good-tutorials que ensina a fazer um efeito de texto igual aqueles neons de Las Vegas, como mostrado abaixo:

Então, mãos a obra: :)

1º Passo: Crie um novo documento e pinte seu fundo de preto. Logo após escreva o texto desejado com a fonte que quiser, no caso foi usado a fonte Eurose.

2º Passo: Agora segure o Ctrl e clique na camada do texto, e dê um clique no olho que há do lado da camada para deixar a camada invisível, crie uma nova camada em branco, e ainda com a forma do texto selecionada, vá em Edit>Stroke e faça uma borda com 3px e na cor 0fC9FF.

3º Passo: Vá em Blending Options e siga este modelo em Outer Glow:

Seu Neon deve estar mais ou menos assim:

4º Passo: Bom, o Neon já está praticamente pronto, mas para dar um toque final mais detalhado, seria legal aplicarmos um certo brilho nele. Então dê um Ctrl + Clique na camada original do texto, crie uma nova layer, e novamente vá em Edit>Stroke agora com 1px Branca.

Pronto! Seu efeito está pronto, mas vamos mais além..

Vamos fazer agora o efeito dele apagado, para poder fazer um gif dele piscando! :)

5º Passo: Duplique todas as camadas e junte elas através do Ctrl+E. Pegue esta camada q foi juntada e dê um Ctrl+U ou acesse Image > Adjustaments > Hue/Saturation deixe com está abaixo:

6º Passo: Após aplicar a Hue/Saturation, vá em Blending Options e aplique estas configurações:

Sua imagem deve estar assim:

Agora salve seu arquivo, e abra-o no Adobe ImageReady. Agora é muito simples, crie um novo frame, e deixe a camada do Neon que está apagado invisível. Pronto, agora só configure o tempo de exibição e outros atributos e Pronto! Seu Neon está criado! :)

Este e mais tutoriais em http://linktutoriais.blogspot.com/

Grid Lines

2007-07-04T23:04:00.000-03:00

Haaaaaa mlk.
Um tutorial feito por mim agora ;)
By LinkTutoriais.

Bom, sem muito o que explicar, muita gente já conhece as famosas grid-lines, mas resolvi explicar direitinho, aplicando exemplos, adaptando as fotos e etc, vale a pena conferir ;)

A imagem ficou MUITO GRANDE e o blog não aceita, e o tutorial está totalmente em imagem, portanto, vou por somente o link, e daqui a pouco pro webtutoriais ;)

http://img151.imageshack.us/my.php?image=tuto1gridlinesge0.jpg

É isso galera, 2 dias de blog, estamos começando bem, espero em breve receber algum comentário :P

Abrações

Glowing Person

2007-07-04T12:36:00.000-03:00

Este tutorial ensina como fazer aquele FAMOSO efeito do orkut, que tira espinhas da cara, deixa a pessoa com uma cor linda e etc, hahha enfim, truque de photoshop pra aparecer bunito na foto :D
Glowing Person, em 4 passos você faz esse belo efeito..

http://www.webtutoriais.com/open.php?cut=695

lembrando sempre que aqui eu só REUNO os tutoriais,
nenhum é feito por mim, e deixo bem claro isso.
Os créditos são sempre dos autores dos Tutoriais, tnato é que apenas redireciono para o site deles..

Divirtam-se :)

Urls Açucaradas

2007-07-03T22:42:00.000-03:00

Este tutorial é sobre as tão famosas URLs Açucaradas, que são ótimas para os webmasters, por ser um método mais facil para a indexação dos sites nos sitemas de buscas
Este é o primeiro tutorial sobre PHP, e o segundo do blog.. Espero que ele vá pra frente =D

http://forum.wmonline.com.br/index.php?showtopic=104274&st=40&gopid=782144&
segue acima o link do tutorial, postado na WMOnline

Criando uma Faixa

2007-07-03T19:35:00.000-03:00

Este tutorial, que eu vi a um tempinho no WebTutoriais é um dos meus prediletos, pois sempre quando via a faixa do Revolução Etc ficava curisoso de saber como se fazia, e nesse tutorial se dá uam boa base.
No Y-Art, que era um fórum que eu frequentava, e acabei me distanciando, está marcado como nível médio, ou Intermediario, mas acho que seja fácil de fazer, apenas um pouco de dedicação e você consegue! :)

O link está quebrado, já avisei o webtutoriais, estou aguardando resposta

Bom este é o primeiro Post prático né, espero que gostem..
Abraços :D

Apresentação

2007-07-03T19:17:00.000-03:00

Bem, caros leitores..
Primeiramente, fiz esse blog com a intensão de mostrar os tutoriais que vejo com frequência na net, mostrando o link deles..
Creio que esse blog será uma forma de reunir todos os tutoriais que leio e gosto, e que queira compartilhar com quem estiver interessado..
Pretendo manter o blog sempre atualizado, com a regularidade de 1 post por dia no mínimo..
O foco principal dos tutoriais serão o Photoshop e Programação PHP, que são duas ferramentas que mais uso e gosto. :)

E é isso.. meu nome é Moacir e espero que com o tempo possa mostrar muita coisa aqui, e compartilhar muito do meu conhecimento adquirido através dos tutoriais.