Será o fim do photoshop?
5 de fevereiro de 2009 por Danival A. Souza
Arquivado em Photoshop, Web Design
Podemos dizer que o ano de 2008 foi o ano das aplicações online. Diversos aplicativos conforme conhecemos, migrou de desktop para usar o navegador. Editores de texto e planilhas foram os mais evidentes. Também tivemos uma série de softwares de edição de photos online, sendo estes os que eu mais duvidei que pudessem realmente fazer frente aos softwares desktop que temos por aí.
O principal motivo pelo descredito é que você teria que enviar as imagens para o servidor, editar, e então fazer o download delas. Isto torna tudo muito pesado e trabalhoso.
Hoje, lendo o blog do Pixlr, descobri que, em 2 de dezembro de 2008, já havia solução para isto. Aqueles que usassem o plugin do flash 10, não precisariam mais fazer upload <-> Download das imagens. Editaria elas ali, no pc mesmo!

Resolvi testar. Entrei no editor através do link: http://www.pixlr.com/editor/
Carregou rapidamente. Apesar de ser uma aplicação online, carregou tão rapido (senão mais rapido) do que o photoshop carregaria nesta máquina. Abri a imagem, e foi instantanea. Fiz algumas modificações básicas, e então salvei.
O programa é excelente, e nos menus você ainda pode trocar o idioma para português. Obviamente não é tão completo quanto o photoshop, mas é um excelente custo benefício, afinal seu custo é zero. No blog, tem alguns tutoriais.
Além deste, existem outros aplicativos online de edição de imagem, veja uma lista:
Splashup

Phoenix

pixer.us
![]()
FotoFlexer

SUMO Paint

Workshop Incremente Suas Logomarcas
11 de janeiro de 2009 por Reinaldo Nascimento
Arquivado em Photoshop, Web Design
Oi pessoas, esse post tem o objetivo de mostrar algumas técnicas usadas no artigo “Incremente suas logomarcas” e abrir um leque de opções para você poder fazer pequenos efeitos porém muito úteis no dia-a-dia do web designer.
Vamos lá, espero que vocês gostem do artigo.
1º - Ambiente 3D
Um ambiente bem feito é um grande passo para o sucesso de uma apresentação, seja de uma logomarca, de um produto ou seja lá o que se queira apresentar.
No caso da logo do artigo supracitado, fizemos um ambiente bem simples mas com aparência tridimensional.
Exemplo 1
Este exemplo usa a mesma técnica apresentada no post “Incremente suas logomarcas“.
1 - Um fundo degradê de vermelhos (R: 255, G: 0, B: 0) para (R: 155, G: 0, B: 0)
2 - Alteração da curva (Cntrl + M) na parte inferior
O resto da imagem foi apenas aplicação de sombras, brilhos e caustics que nós iremos ver em futuros artigos aqui no FazendoSites.com.br.
A seta, mais ou menos 3D, também é uma técnica que veremos logo, logo por aqui.
Exemplo 2

Esse também é muito simples, não é?
O objetivo não fazer nada complicado e sim mostrar que o ambiente é tão importante quanto o objeto em foco. E não precisa de muita coisa para fazer um ambiente interessante e agradável.
Um exercício para nós: Usemos a imaginação e todo o conhecimento que temos (independente do tamanho desse conhecimento
) e vamos usar a imagem ao lado para tentar criar o máximo de opções e variações possíveis ou desejáveis.
Se vocês quiserem, enviem suas criações para reymaster@gmail.com com o assunto [FAZENDO SITES - AMBIENTE 3D].
Será um prazer postar aqui no blog suas criações.
2º - Formas com simulação 3D
Essa técnica é bem interessante, útil e pode ser usada em várias ocasiões, não só na estilização de logomarcas como também em botões e marcadores.

Na imagem acima, usei exatamente a mesma técnica em todas as formas
1 - Uma forma com degradê
2 - Inner Shadow ajustado como fizemos no post “Incremente suas logomarcas”
3 - Uma forma complementar na cor branca com trasparência, no caso dos círculos pode ser usado degradê do branco para transparente e no caso de outas formas pode variar.
4 - Para completar, um reflexo cai bem.
Talvez você tenha achado que eu iria mostrar centenas de configurações e técnicas arrojadas, fórmulas mágicas e filtros avançadíssimos para se obter resultados profissionais. Nada disso, o que tenho observado a cada dia é que a simplicidade é o segredo de um design profissional de sucesso.
Tente, construa, desconstrua e veja como obter efeitos maravilhosos é mais fácil e simples do que se imagina.
Até a próxima.
Incremente suas logomarcas
8 de janeiro de 2009 por Reinaldo Nascimento
Arquivado em Destaques, Photoshop, Web Design
Podemos observar, principalmente na web, que muitas empresas tem usado efeitos 3D em na apresentação de suas logomarcas dando um toque tecnológico bem interessante, limpo e sem muita frescura.
Neste tutorial eu utilizei o Adobe Photoshop CS3, mas se você estiver utilizando outra versão, creio que não vai ter dificuldade para acompanhar.
Vamos lá, acompanhe o passo-a-passo:
Passo 1 - Crie um novo arquivo

Neste caso, um arquivo com 590 x 270 pixels.
Vamos reproduzir a logomarca da empresa Claro e usar efeitos bem interessantes e profissionais. No resultado final, qualquer semelhança não é mera coincidência.
Passo 2 - Crie um Degradê Radial na camada
2.1 - Defina a cor do primeiro plano como #ff0000 (R: 255, G: 0, B: 0)
2.2 - Defina a cor do segundo plano como #9b0000 (R: 155, G: 0, B: 0)
2.3 - Selecione a ferramenta Gradient Tool
, escolha na barra superior a opção Radial
.
2.4 - Arraste o cursor pela área do arquivo a partir do topo à esquerda até a parte inferior à direita:

Agora você deve estar vendo algo parecido com a imagem abaixo:

Passo 3 - Criar a base para a logomarca
Selecione a ferramenta Retangular Marquee
e selecione uma área de 590px de largura por 97px de altura na parte inferior do arquivo para simularmos a base para a logomarca.

Agora escureça um pouco essa área clicando em Image->Adjustments->Curves (ou Cntrl + M).

Passo 4 - Criando a Logomarca
Agora que já preparamos a área para a logomarca, vamos iniciar a criação da própria:
Selecione a ferramenta Elliptical Marquee (M)
e crie um círculo perfeito segurando a tecla Shift.
Agora crie um nova camada (Cntrl + Shift + N) e preencha o círculo com o mesmo degradê que usamos na base.

Depois de preenchido, pressione Cntrl + D para retirar a seleção do círculo e clique em no ícone fx, localizado na parte inferior da paleta Layers (Camadas) e selecione a opção Inner Shadow

Na tela de configuração do Inner Shadow (Sombra Interna), coloque os seguintes parâmetros:
Angle: -89
Distance: 6
Choke: 9
Size: 16

Agora selecione novamente a ferramenta Elliptical Marquee (M)
e crie um novo círculo menor dentro do círculo maior como mostra a imagem a seguir.

Crie uma nova camada (Cntrl + Shift + N) e preecha o interior do círculo menor de cima para baixo com um degradê da cor branca para transparente como mostra a figura acima tendo o resultado abaixo:

Tecle Cntrl + T para transformar a seleção e achate um pouco o círculo agora preenchido com o degradê.

O resultado agora será o seguinte:

Para dar um “tchan” interessante nesse ponto da logomarca, faça o seguinte:
1 - Crie outro círculo interno com a ferramenta Elliptical Marquee (M)
;
2 - Crie uma nova camada (Cntrl + Shift + N) e preencha novamente com aquele degradê de branco para transparente que usamos anteriormente;
3 - Tecle Cntrl + T para transformar a seleção e achate um pouco como da última vez;
4 - Acesse o menu Filter->Blur->Gaussian Blur e coloque como mostra a imagem abaixo:

5 - Altere a transparência da camada para 60% e você terá o seguinte resultado:

Estamos quase lá! Vamos passar para o 5º e último passo.
Passo 5 - Finalizando a Logomarca colocando o texto
Agora vamos fazer o último passo do nosso tutorial. Vamos escrever o texto da logomarca.
Selecione a ferramenta Horizontal Type (T)
e selecione a fonte Arial Black, tamanho 44 e cor branca (eu utilizei Arial Black com itálico, se eu tivesse criado essa logo, teria usado.
)
Faça de forma a ficar assim:

Agora vamos fazes os retângulos que completam a logo.
Faça um retângulo fino logo após a letra “O” com mais ou menos uns 28 x 6 px, crie uma nova camada (Cntrl + Shift + N) e preencha com a cor branca, duplique os retangulos (Cntrl + J) duas vezes e posicione um a 45 e outro a 90º no topo da letra “O”.

Pronto!
Agora pra arrematar você pode usar várias outras técnicas para melhorar o brilho, realçar as cores e etc..
Eu fiz apenas o seguinte:

Até a próxima!

