Criatividade Visual » Tutoriais Design

Recursos: Tutorial – Criar aplicação web no photoshop (user interface)

Flávio Proença — Tue, 07 Jul 2009 20:58:18 +0000

Aplicações web são populares devido à omnipresença dos navegadores web. A capacidade de actualizar e manter as aplicações web sem distribuir e instalar o software em potencialmente milhares de computadores dos clientes é uma das principais razões para a sua popularidade.

Por isso a webappers criou um tutorial em photoshop de como como criar uma aplicação Web Admin User Interface.

O tutorial encontra-se em inglês, mas é de fácil compreensão.

Podem ver aqui a imagem do resultado final (carreguem nela para ver no tamanho original).

Website: Criar aplicação web no photoshop

Tutorial: Desenvolver uma mascote, por Smashing Magazine!

Slitake — Fri, 03 Jul 2009 13:46:38 +0000

Deixo o link para um tutorial feito pela Smashing Magazine, onde podem aprender a fazer uma mascote para o vosso site por exemplo. Fazer umas mascote é sempre complicado porque envolver muita imaginação/criatividade e é um processo demoroso. O ponto alto do tutorial penso que sejam os efeitos de luz, porque a mascote é baseada na vectorização de um desenho mas depois a leve aqueles efeitos que a deixa mais real e mais bonita.

Link para o tutorial: Aqui!

Curiosidade: namemasher – O resultado de misturar dois nomes

Flávio Proença — Fri, 20 Mar 2009 13:37:21 +0000

Muita gente gosta de misturar nomes para criar verdadeiras “obras de arte”. Colocar a metade do nome da mãe junto com a metade do nome do pai gerou uma geração de “ClaudeVanes”, “Vivingelinas”, etc.

Se você gosta desta tendência vai adorar o namemasher.com, um site onde podem informar os nomes originais e obter uma colecção de resultados ~~realmente assustadores~~.

Testem, brinquem, mas, antes de batizar seu filho, pense no futuro dele…

Website: NameMasher

Tutorial: Texto Transparente

Flávio Proença — Sat, 07 Mar 2009 14:17:15 +0000

Texto Transparente

Trago aqui um simples tutorial que ensina como colocar texto transparente. Este tutorial é óptimo para quem se está a iniciar no Photoshop. Este é um simples efeito, que pode dar jeito de vez em quando, depende do resultado final que cada um pretenda. O tutorial está explicado passo-a-passo, com imagens que achei necessário colocar para ajudar. Caso tenham alguma dúvida, perguntem que eu responderei o mais breve possível.

Data: 07/03/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programa necessário: Adobe Photoshop

Tempo: 5 minutos

Nível: Básico

Resultado Final:

1- Abrir o Photoshop.
2- Cria um fundo a teu gosto.
3- Depois de teres criado o fundo, cria uma nova layer (Ctrl+Shift+N), selecciona a ferramenta de texto (T), e escreve o texto que desejares, tendo em atenção que a cor do texto é branco.

4- Na layer do texto, faz duplo clique para irmos para as Blending Options (Layer » Layer Style » Blending Options).
5- Agora nas Blending Options configura conforme a figura abaixo. (Basta mudar o “Blend Mode” para Linear Burn)

6- Agora vamos aplicar um efeito pois caso contrário o texto não se irá ver. Podem aplicar um Stroke, um Drop Shadow, Outer Glow, entre muitos outros…. No meu caso vou aplicar dois efeitos: Outer Glow e Stroke. (Aqui fica o meu resultado final

Tutorial: Criar Favicon

Flávio Proença — Wed, 04 Mar 2009 15:59:58 +0000

Criar Favicon

Favicon, é uma fusão das abreviatura de “favorite” (favorito) e “icon” (ícone), são pequenas imagens no formato *.ico com de cerca de 16×16 pixels que ficam guardados num site para serem apresentadas pelo browser.

Data: 04/03/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programa necessário: Adobe Photoshop

Tempo: 5 minutos

Nível: Básico

Resultado Final:

Vamos então começar o nosso tutorial:

1- Abrir o Photoshop.
2- Criar um novo documento com as dimensões de 64×64 px.
3- Criem uma nova layer (Ctrl+Shift+N), e chamem-na de “Fundo“. Preencham cor uma cor que vocês queiram, podem até aplicar gradientes ou o estilos que vocês queiram. No meu caso eu preenchi de branco e apliquei um gradiente.

Propriedades do meu gradiente:

4- Agora abrem o logo do vosso site, ou uma imagem que queiram usar (eu aconselho um logo), eu vou usar o logo da CriatividadeVisual. Colem o logo/imagem numa nova layer (Ctrl+Shift+N). Coloquem o logo como vocês acharem melhor (medidas, centrado, etc).

5- Para finalizar falta apenas um passo. Agora vamos ao menu Image » Image Size… (Alt+Ctrl+I). Vai abrir a seguinte janela.

Vamos mudar para:

6- Seu Favicon está finalizado. Agora você está perguntando a si mesmo, “Como é que eu gravo no formato *.ico se não aparece cá?” Calma, tudo tem solução…. para você poder guardar o seu ficheiro como *.ico você precisa de fazer o download do plugin, que serve para abrir e guardar ficheiros *.ico no photoshop. Pode efectuar o download do plugin Aqui.

Para aplicar favicon em seu site, basta colocar o seguinte código dentro das tags e .

Além disto, o ícone em formato *.ico deve se chamar obrigatoriamente favicon e estar alojado na pasta (directório) principal do website. De forma que se o endereço da página for http://www.criatividadevisual.com, o endereço do ícone deve ser, http://www.criatividadevisual.com/favicon.ico

Tutorial: Criar Weblayout (Parte 2)

Flávio Proença — Sun, 01 Mar 2009 12:10:10 +0000

Continuamos assim com a parte 2 do nosso tutorial, Criar um weblayout. Esta é a última parte do nosso tutorial, e no fim do tutorial vão poder encontrar o ficheiro .psd para fazerem download. Este layout pode ser usado por qualquer pessoa, desde que o seu fim não seja para fins comerciais. Qualquer erro que encontrem é favor avisar, e caso tenham dúvidas digam, que eu responderei o mais breve possível.

- Agora vamos escrever os diferentes menus que vão estar disponíveis (Home, sobre, galeria, etc). Para isso vamos seleccionar a ferramenta Horinzontal Type Tool (T), depois de seleccionada vamos carregar no nosso documento para ele criar uma nova layer de texto, e começamos a escrever os nossos menus.

- Num menu fica sempre bem as divisões dos menus em si…. Agora vou mostrar como criar uma simples divisão. Criam uma selecção de 1px por 20px, numa nova layer e depois preenchem essa selecção com a cor: #7ec2cc. Agora com essa layer seleccionada façam a seguinte combinação de teclas: Ctrl+J, para duplicar essa layer e com as setas do teclado movam-a para o lado direito até que esta fique ao lado da outra. Depois seleccionem a layer duplicada e façam Ctrl+Clique do rato para seleccionar a área de layer. Feito isso mudem a cor para #64b2c0.

- Aqui fica o exemplo:

- Agora repitam o mesmo processo para os outros menus e divisões.

- Hoje em dia, quase todos os sites têm notícias, como é óbvio, por isso vamos criar uma parte para as notícias. Vamos criar um novo grupo (independente), como o nome de notícias.

- Criem uma nova layer dentro do novo grupo, chamada notícias barra.

- Criem uma nova selecção com as dimensões 225px x 60px. Preencham-na de uma cor que queiram e apliquem-lhe os seguintes efeitos:

Gradiente Overlay:

Propriedades do Gradiente:

- Agora coloquem a barra no lado direito por baixo do menu. (Atenção que podem mudar a ordem das coisas, isso fica ao vosso critério e ao gosto de cada um)

- Escrevam na barra Notícias como título e podem adicionar mais algo caso queiram.

- Vamos agora criar o sitio onde vão aparecer os títulos das últimas notícias. Para isso criem uma nova layer com o nome de fundo notícias. Criem uma nova selecção com o tamanho de 225px x 240px e preencham-no de branco.

- Feito isso, vamos fazer a divisão das notícias. Criem uma layer com o nome de divisão, depois criem uma nova selecção com as dimensões de 225px x 1px. Preencham-na com a cor que quiserem, eu no meu caso usei a cor #e4ebdb.

- Seleccionem da ferramenta de texto (T), e escrevam o título da vossa notícia. Repitam este passo e o anterior para criarem vários tópicos para as notícias. Sugestão: Aconselho a colocarem cada notícia num grupo. Por exemplo um grupo com o nome Notícia 1 em que neste grupo estaria o título da notícia, a divisão da mesma e tudo que pertença à notícia 1.

- Agora, ao lado das notícias, vamos criar uma parte onde irá aparecer as imagens correspondentes à notícia que se está a ver. Para isso criem uma nova layer com o nome imagem notícia e nessa layer coloquem um exemplo de uma foto correspondente a uma notícia.

- Vamos agora criar também uma área para os links, contacto e sobre. Nesta parte vou entrar em detalhes como fiz anteriormente, visto que se baseia tudo praticamente na mesma coisa.

- Por fim, basta colocar no fundo do site, um texto onde informa sobre o criador do website e outros afins. Aqui fica o meu exemplo.

Parte 1 do tutorial.

Download: Psd

Atenção: Proibido a sua utilização para fins comerciais. Caso encontrem algum erro façam favor de avisar.

Tutorial: Criar Weblayout (Parte 1)

Flávio Proença — Sun, 01 Mar 2009 00:16:52 +0000

Como todos sabem, hoje em dia cada vez mais se criam sites. Um site para ser “construído” tem que ser primeiro desenhado no papel e a seguir passar esse esboço para um programa de edição de imagem. Neste tutorial que vos trago pretendo ensinar a todos como criar um simples weblayout, pois já várias pessoas me perguntaram como fazer, para esclarecer todos aqueles que me perguntaram e também aqueles que possam estar interessados no assunto. O tutorial é de nível médio mas é relativamente fácil se seguirem todos os passos.

Data: 28/02/09
Autor: NgM_Me_KuRtE (Flávio Proença)
Programa necessário: Adobe Photoshop
Tempo: 1 hora
Nível: Intermédio
Resultado Final:

- Abrir o photoshop.

- Criem um novo documento, o tamanho depende do tipo de animação que vocês vão criar. No meu caso eu vou criar com o tamanho de 1488 x 986. (Desde já aviso que não deverão criar um site com tal dimensão, devido ao simples facto, de esta resolução ser um pouco “elevada”, sendo que a resolução mais usada mundialmente é a de 1024 x 768 pixels.

-Depois de terem criado um novo documento, coloquem o fundo como branco, caso não esteje e mudem da layer para Fundo, para uma melhor organização do nosso projecto.

-Vamos agora criar uma nova layer (Ctrl+Shift+N), e no nome da layer coloquem Fundo site.

-Feito isto, seleccionamos a ferramenta Rectangular Marque Tool (M), e nas propriedades da ferramenta vamos à opção Style e escolhemos a opção Fixed Size. No campo widht coloquem 750px e no campo height coloquem 968px. (Ver imagem abaixo)

- Agora dêem um clique no documento, para ele fazer a selecção (com a layer fundo site seleccionada), e façam a seguinte combinação de teclas (Alt + Delete), para ele preencher a selecção. Certifiquem-se que a cor “principal” é branco (#FFFFFF).

- Desta vez vamos seleccionar a layer Fundo, para isso pressionamos a tecla Ctrl + clique rato, para esta se seleccionar ou então podem ir ao menu Select » Load Selection… e basta clicar ok para a layer se seleccionar. Agora vamos seleccionar a layer Fundo site (não fazer duplo clique nesta, apenas seleccionar), seleccionamos a ferramenta Move Tool (V) e vamos centrar o fundo do site.

- Agora façam duplo clique na layer Fundo site, para irmos para as Blending Options, ou então vão a Layer » Layer Style e escolhemos Blending Options. Vamos aplicar agora o seguinte efeito:

Stroke:

Propriedades do Gradiente:

- Vamos agora criar um novo grupo, onde irá ficar todos os ficheiros relativos ao header. Para criar um novo grupo vamos a Layer » New » Group. No campo Name coloquem o nome Header, para saber que este grupo é o do header.

- Vamos criar uma nova layer (Ctrl+Shift+N), dentro do grupo com o nome de imagem banner. Nesta layer vamos colar a imagem que queremos usar no nosso header. Eu nom meu caso vou usar o logo do Criatividade Visual, mais uma imagem. O tamanho da minha imagem é de 750px x 200 px. Na minha imagem eu dei ainda uns pequenos efeitos, coisa que você também poderá faer, indo às Blending Options.

- Feito isto, dentro do grupo do header vamos criar outro novo grupo que irá ser para o campo de pesquisa no site. Vamos então criar um novo grupo, desta vez com o nome de Search.

- Criem uma nova layer dentro do grupo Search, e coloquem o nome de caixa de texto. Seleccionem de novo a ferramente Rectangular Marque Tool (M), e nas propriedas da ferramenta vamos à opção Style e escolhemos a opção Fixed Size. No campo widht coloquem 150px e no campo height coloquem 20px. Feito isto escolham onde desejam colocar a vossa caixa de pesquisa, e preencham a selecção com uma cor à vossa preferência e efeitos se quiserem. No final adicionem um “botão – imagem” que irá ser o botão para se efectuar a pesquisa.

- Vamos passar agora ao menu. Vamos criar mais um grupo, desta vez fora dos outros (independente), com o nome de Menu. Criamos uma nova layer, com o nome de fundo menu.

- Criamos uma selecção de 750px x 30px e vamos aplicar o seguinte efeito.

Gradiente Overlay:

Propriedades do Gradiente:

Stroke:

Parte 2 do tutorial.