Criatividade » Photoshop

30 Compilações de padrões de cores e texturas para Photoshop

Diogo Espinha — Wed, 21 Dec 2011 16:15:53 +0000

Os padrões para Photoshop oferecem aos criativos várias alternativas para as suas criações online, sejam elas simples wallpapers, websites, ou trabalhos artísticos. O que define a qualidade de um criativo não são só as suas capacidades, mas também a qualidade do resultado final. Se você tiver imensas capacidades e é uma pessoa criativa, mas o seu resultado final é comprometedor e não tem qualidade, você não irá ter sucesso. Então, para potenciar a qualidade do resultado final, você deve-se artilhar com as melhores ferramentas e os melhores recursos, garantindo assim desde o início que terá um trabalho de qualidade superior aos demais. Neste artigo, trazemos-lhe 30 Compilações de Padrões de cores e texturas para Photoshop!

1. WHITE WASHED BLUE AND BEIGE PATTERNS

2. SEAMLESS PAPER PATTERNS

3. SEAMLESS OLIVE GREEN PATTERNS

4. ARGYLE TEXTURES

5. NOTORIOUS PIXELS

6. GRAPHIC PAPER PATTERN

7. RIBBON DANCER

8. ABSTRACT TILEABLE PATTERNS

9. PATTERNS 22

10. SUBTILE PATTERNS

11. DARK METAL GRID PATTERNS

12. LIGHT METAL GRID PATTERNS

13. REPEATABLE PIXEL PATTERNS

14. SEAMLESS PHOTOSHOP PATTERNS

15. PIXEL PATTERNS

16. SIMPLE LINE PIXEL PATTERNS

17. FREE PHOTOSHOP GRID PATTERNS

18. PHOTOSHOP ZIGZAG PATERNS

19. SQUIDFINGERS

20. VINTAGE RETRO WALLPAPER PATTERNS

21. WHITE WASHED BLUE PATTERNS

22. WE LIKE STRIPED

23. CARBON FIBRE PHOTOSHOP PATTERNS

24. DICE PATTERNS

25. SUBTLE GRUNGE PATTERNS

26. FABRIC PATTERNS

27. TILEABLE TEXTURES

28. PAPER PATTERNS FOR PHOTOSHOP AND GIMP

29. MICRO FIBER SET

30. ROYAL PATTERN

Abraço e até já!

Artigos Recomendados

Como criar uma barra de navegação semelhante à Apple no Photoshop

Diogo Espinha — Fri, 11 Nov 2011 17:20:24 +0000

A barra de navegação do website da Apple é simples e atrativa, dando um toque de luxuria na apresentação dos conteúdos. Muitas são as pessoas que gostariam de ter um menu de navegação idêntico nos seus websites, e a partir de hoje você também poderá ter. Com este tutorial, você irá aprender passo-a-passo Como criar uma barra de navegação semelhante à Apple para os seus trabalhos web ou para uso pessoal em Adobe Photoshop. Não perca mais tempo, meta já mãos à obra!

O primeiro passo é criar um novo documento. Clique em CTRL+SHIFT+N e crie um documento com 500x500px. Clique OK e de seguida clique na tecla M para abrir o Rectangular Marquee Tool. Logo de seguida defina a opção Fixed size com os tamanhos 485x35px na barra de ferramentas, e crie a selecção dentro do documento. Centre a selecção.

De seguida clique em Select -> Modify -> Smooth e insira o valor de 3px para o Radius. De seguida clique CTRL+SHIFT+N para criar uma nova layer, de seguida pressione a tecla G para seleccionar a Paint Bucket Tool e pinte a area criada com uma cor da sua escolha.

De seguida vá ás Blending Options da layer criada

e defina os valores de acordo com a imagem:

Crie um Gradient Overlay da cor #949494 para a cor #d2d2d2

De seguida, ainda dentro do Blending Options, clique em Drop Shadow e defina os valores seguintes:

Côr #b1b1b1, Opacity 80%, Ângulo de 90º, Blend Mode Normal, Distance 1 e Size 3.

De seguida Insira as palavras do seu menu com a côr #383838 com o tipoe de letra Segoe UE tamanho 14 e vá em Blending Options. Depois em Drop Shadow, insira os valores que estão na imagem:

A sua barra de navegação deverá estar semelhante à seguinte (Com outras palavras certamente):

De seguida clique Ctrl+Shift+N para criar uma nova layer, e pressione a letra M do teclado para selecionar a Rectangular Marquee Tool. Crie uma linha com 1 pixel de largura, pressione a letra G do teclado para selecionar a Paint Bucket Tool e pinte a seleção de branco. A Seguir terá de alterar o modo de blend para Soft Light e definir a opacidade para 20%. CLique CTRL+J para duplicar a layer e utilizando as setas do teclado, posicione a layer para alcançar o efeito desejado. Depois de posicionado, clique em CTRL+E para mesclar as 2 layers, e repita o CTRL+J para duplicar a layer finalizada e criar o efeito dos botões.

Para criar o efeito de mouse over, crie uma nova layer com CTRL+SHIFT+N e pressione a tecla M para seleccionar a Rectangular Marquee Tool. Lembre-se de alterar o Fixed Size para Normal, e crie uma seleccção do futuro botão, tal como a imagem abaixo indica.

Clique na tecla G do se teclado e pinte a selecção com uma cor que queira. De seguida vá às Blending Options da layer e vá em Gradient Overlay. Aí defina os valores de acordo com a imagem seguinte, com o gradiente da cor #666666 para a cor #a1a1a1:

Depois crie uma copia do texto existente e altere a cor para branco e os valores do drop shadow para #454545:

E já tem tudo o que é necessário para continuar a desenvolver a sua barra de navegação semelhante à Apple!

Abraços!

Artigos Recomendados

Tutorial: Criar uma Logomarca em Photoshop

Diogo Espinha — Fri, 16 Sep 2011 15:06:19 +0000

A utilização de Photoshop é ponto fixo para a maioria dos designers e webdesigners um pouco por todo o mundo. Neste artigo vamos-lhe mostrar como criar um Jelly Logo com Photoshop. Os procedimentos deste tutorial serão explicados detalhadamente e permitirá a qualquer pessoa que tenha algumas bases de Photoshop concluir o tutorial. Este tutorial é baseado no criado por Renyn, no website Tutorials20 denominado “Jelly Remake”.

1. INÍCIO

Comece por criar um novo espaço de trabalho, CTRL+N e escolha um tamanho grande, entre os 1000×1000 e os 2000×2000 px.

2. MÃOS À OBRA

Depois de ter o espaço de trabalho criado, seleccione a Ellipse Tool, SHIFT+U, e selecione a forma redonda. Crie um circulo grande, do tamanho que preferir, mas grande o suficiente para possibilitar a conclusão deste tutorial. Enquanto estiver a criar o circulo, mantenha a tecla SHIFT pressionada. Depois renomeie a layer do círculo para Origem, e de seguida seleccione a Direct Selection Tool, SHIFT+A.

3. MUDANDO A FORMA

Com a Direct Selection Tool, SHIFT+A, mude a forma do seu circulo para se parecer o máximo possível com a imagem. Durante o processo mantenha a tecla SHIFT pressionada.

4. CRIANDO UM GRADIENTE

Neste tutorial iremos necessitar apenas de um gradient, que será feito agora. Para isso, seleccione a layer Origem e clique com o botão direito do rato, e de seguida em Blending Options. Seleccione Gradient Overlay e crie o seu gradient com as cores da imagem e as opções seleccionadas por defeito. O objectivo é criar um gradient simples sem muito contraste, não complique.

5. COMEÇAR A MAGIA

Agora necessitamos de seleccionar a forma, para isso clique em cima da forma.

De seguida crie um novo layer, para tal prima SHIFT+CTRL+N. Neste momento não há mais necessidade de renomear os layers, seria uma perda de tempo, pois este ponto 5 será repetido várias vezes para chegar ao resultado final.

Agora tem a selecção da Origem, a forma e um novo layer. Seleccione o novo layer e seleccione a Paint Bucket Tool SHIFT+G. Seleccione a cor branca e preencha a selecção da Origem no novo layer com a cor branca.

Des-seleccione a forma branca que criou, premindo CTRL+D e seleccione a Move Tool SHIFT+V. Seleccione a forma branca e mova-a um pouco para cima enquanto mantém premida a tecla SHIFT.

Seleccione novamente a layer da forma da Origem. Para isso pode premir SHIFT+CTRL+D, este atalho vai carregar a última selecção que utilizou, e como só vai utilizar esta selecção, este atalho será muito útil. Quando estiver a selecção feita, pressione Delete e apague a área seleccionada. Seleccione a Move Tool, SHIFT+V, novamente e mova a forma na Origem. De seguida pressione CTRL+T e mantenha a tecla SHIFT premida. Redimensione até ficar com o tamanho que pretende, quando concluir ponha o Layer em Overlay 50%. Deverá ficar semelhante à imagem.

Apartir deste momento não existe nada de novo, apenas a repetição do processo descrito neste ponto 5, utilizando branco e/ou preto no preenchimento das novas layers, e movendo para cima e para baixo a layer. Neste momento você terá de se empenhar e utilizar toda a sua imaginação para criar um produto final de acordo com o seu gosto. No entanto, deixamos aqui um preview daquilo que irão ser os seus passos, e o resultado final.

Ainda uma imagem com um produto final:

Abraço e até já!

Artigos Recomendados

10 Tutoriais de Efeitos de Texto em Photoshop

Diogo Espinha — Fri, 05 Aug 2011 14:38:24 +0000

A utilização de Photoshop é algo muito mais comum nos dias de hoje. A necessidade de se saber trabalhar com este programa para aumentar as hipóteses de conseguir arranjar trabalho nas mais variadas áreas relacionadas com imagem e fotografia, ajudou a que Photoshop chegasse a um patamar ao qual poucos chegaram: É mundialmente conhecido e todos lhe reconhecem o seu valor. Para si que pretende aprofundar o seu conhecimento e praticar a sua habilidade com o programa, deixamos-lhe 10 Tutoriais de Efeitos de Texto em Photoshop!

1. 3D TEXT SCENE

2. MASTER 3D TYPE EFFECTS

3. STEAM POWERED TYPOGRAPHIC

4. SMOKE TYPE

5. ICE TEXT

6. EXPLOSION EFFECT

7. STAR WARS TEXT EFFECT

8. GOLD TEXT EFFECT

9. ERODED METAL TEXT

10. GRASS TEXT EFFECT

E VOCÊ, GOSTARIA DE PARTILHAR ALGUM TUTORIAL COM A COMUNIDADE?

Participe no artigo comentando, deixando a sua contribuição para a comunidade criativa. Fique também a conhecer o que os outros leitores partilharam!

Abraço e até já!

Artigos Recomendados

Guia de Comparação entre Fireworks e Photoshop – Parte IV

Diogo Espinha — Fri, 21 Jan 2011 15:47:13 +0000

Depois de termos entrado a fundo na criatividade com a revisão de Fireworks na Parte I e II, termos feito a primeira abordagem directa a Photoshop na Parte III, hoje surge o remate final deste Guia de Comparação entre Fireworks e Photoshop, onde iremos abordar entre outras coisas, as desvantagens da utilização de Photoshop e uma conclusão que vai ao encontro daquilo que temos vindo a escrever neste guia. Nos primórdios da Internet, os web designers eram forçados a utilizar qualquer programa que estivesse mais “à mão” para criar os seus websites, e como se poderá imaginar, ou para os utilizadores mais antigos da internet, como se poderá lembrar, os websites daquela altura eram pouco ou nada atraentes comparado com aquilo que existe hoje.

Naturalmente, o web design daquela altura nada tem a ver com aquilo que é praticado nos dias de hoje, ou mesmo nos anos seguintes em que começaram a aparecer algumas inovações, muito por culpa da constante e rápida evolução das tecnologias e o aparecimento de fantásticos e super completos programas de edição de imagem e web design, como Fireworks e Photoshop. Assim, e em jeito de conclusão, lançamos hoje o Guia de Comparação entre Fireworks e Photoshop – Parte IV.

Não perca os artigos anteriores deste Guia de Comparação entre Fireworks e Photoshop:

E AGORA?

Apesar de este tipo de serviço poder ser sub-contratado, no presente, o Web Design é uma parte essencial de qualquer negócio. A internet é um meio de comunicação muito poderoso e não ter um website do seu negócio deixa-o vários passos atrás dos seus concorrentes de mercado. O acesso às tecnologias está cada vez mais facilitado, inclusive existe software gratuito para tornar o Web Design mais acessível a quem não tem conhecimentos de perito, posto isto, não ter acesso a tecnologia não é desculpa para não ter um website. Enquanto a tecnologia continua a evoluir, chegam mais e mais produtos ao mercado e a escolha entre eles torna-se uma decisão complicada. No entanto, para aqueles que têm estado no ramo do web design há algum tempo e a sua escolha de eleição é Photoshop, a chegada de novo software pouco ou nada interessa, pois estão muito bem servidos com a sua aplicação que é bastante fiável, testada há vários anos e constantemente melhorada, e acima de tudo, é a aplicação a que estão habituados e treinados a trabalhar.

De qualquer modo, o leitor alvo principal deste guia é o novato que se está a iniciar no Web Design. E aí surge a questão: Qual a melhor direcção a tomar por um Web Designer novato? Deverá investir já tempo e dinheiro numa aplicação super completa e tudo o mais que já aqui foi falado, como Photoshop ou Fireworks? Ou deverá optar por fazer uma introdução em um software mais básico e depois dar o pulo para o grande software? Este tipo de questão levanta sempre muitas opiniões e discórdia, e admito que sendo um pau de dois bicos, qualquer das pontas do pau poderá estar correcta. Tudo depende do web designer e daquilo que ele pretende fazer.

DESVANTAGENS DA UTILIZAÇÃO DE PHOTOSHOP

Photoshop não é perfeito, ainda assim tem menos desvantagens apontadas do que Fireworks:

Ficheiros de maior tamanho -> Menor performance.
Não tem ferramentas nativas para trabalhos web, além da capacidade de guardar imagens para web.
É muito caro – Custa $699 enquanto que Fireworks custa $299 (Photoshop é 133% ($400) mais caro que Fireworks!)

De facto são poucos erros apontados a um programa tão extenso e completo como Photoshop. Mas fica no ar a pergunta: Será assim tão complicado resolver alguns destes problemas para aproximar cada vez mais a aplicação de uma possível perfeição?

DANDO UMA OLHADA NO PHOTOSHOP

Antes de escrever mais, há que realçar algo muito importante – Photoshop foi criado para edição de imagens. Isto torna-o o programa de eleição, muito destacado dos demais, para fotógrafos e qualquer um que trabalhe intensivamente em fotografia. Os criadores e programadores de Photoshop nunca tiveram a intenção de criar um software para Web Design, no entanto ele inclui várias ferramentas para tal. Photoshop é o programa ideal para designers que façam um pouco mais do que web design, devido ás suas capacidades (não muitas) para web design e (muitas) para edição de imagem.

Photoshop tem uma reputação colossal, é a aplicação gráfica mais popular e respeitada disponível no mercado. Certamente devido ás suas capacidades, rapidamente se tornou a base da industria, pelo que a maioria dos seus clientes irão esperar que você use Photoshop – provavelmente a maioria não conhece outro qualquer. Posto isto, poderá ter de explicar devagar e detalhadamente se optar por utilizar Fireworks integral/parcialmente e tiver de entregar ao cliente um ficheiro .PNG ao invés de um ficheiro .PSD.

DANDO UMA OLHADA NO FIREWORKS

À semelhança da olhada no Photoshop, antes de escrever mais, há que realçar algo muito importante – Fireworks foi criado para Web Design. A interface gráfica é muito fácil de utilizar e navegar, ao contrário do que acontece com Photoshop, onde facilmente nos perdemos no meio de tanto botão e navegação. Por este detalhe e outros que já mencionámos anteriormente, a curva de aprendizagem é bastante diferente entre os programas, sendo que Fireworks é muito mais fácil e rápido de aprender. Fireworks foi criado para criar ficheiros com o mínimo tamanho possível para ser viável utilizá-las num website, e é perfeitamente natural e compreensível até certo ponto que Fireworks não tenha as capacidades de edição de imagem de Photoshop, embora na minha opinião Fireworks deveria ser melhorado num item importantíssimo – o Anti-Aliasing de texto.

A reputação de Fireworks tem vindo a ser trabalhada e ultimamente tem tido um crescimento bastante acentuado, inclusivamente há agências que requisitam conhecimentos de Fireworks como um item necessário ao Web Designer. Uma das grandes vantagens de Fireworks é que o Web Designer poderá trabalhar várias páginas de uma vez só. Outra tem a ver com o facto de que é possível trabalhar com fotografia e imagens em vector – Isto é um pouco como usar Photoshop e Illustrator ao mesmo tempo, no mesmo programa.

SUGESTÃO

Se a interação entre Photoshop e Fireworks fosse perfeita e em harmonia, faria todo o sentido utilizar Fireworks para criar o wireframe, exportar para Photoshop e trabalhar os detalhes com técnicas não disponíveis em Fireworks, exportar para Fireworks para dar os toques finais na composição do website e finalmente exportá-lo para a web. Infelizmente isto nem sempre é possível, porque frequentemente há ficheiros .PSD que não abrem de forma correcta em Fireworks.

Níveis que desaparecem ou ficam alterados, estilos que desaparecem, são alguns dos problemas que o utilizador poderá enfrentar, e tudo junto só irá servir para perder tempo e ficar extremamente aborrecido com a situação. Assim de momento aquilo que se faz neste esquema é trabalhar apenas elementos específicos como os fundos . Especificamente pode-se tirar partido do PNG-8 em Fireworks para trabalhar os tamanhos de ficheiros que se exportam para a web. Eventualmente num futuro próximo poderíamos receber uma ótima notícia dando conta que a interação entre Fireworks e Photoshop tinha sido resolvida e não haveria mais problemas. Mas para já não passa de um sonho

E VOCÊ, TEM ALGUMA SUGESTÃO?

Nós na Escola Criatividade estamos sempre receptivos e gostamos muito de receber sugestões e comentários dos nossos fantásticos leitores. Tem alguma sugestão a fazer a este Guia de Comparação entre Fireworks e Photoshop? Participe já!

Abraço

Artigos Recomendados

Guia de Comparação entre Fireworks e Photoshop – Parte III

Diogo Espinha — Mon, 17 Jan 2011 16:12:03 +0000

Depois de publicadas as Partes I e II deste Guia, abordamos hoje, na Parte III, a criatividade em programa: Photoshop. Iremos agora entrar mais no campo do Photoshop, que é o porta estandarte da Adobe. Sejamos realistas, Fireworks sofre de uma síndrome à qual poderíamos chamar “irmão adoptado”. E isso é notório desde que a Adobe adquiriu a Macromedia em 2005: Só nas mais recentes versões (CS4 e CS5) é que recebeu actualizações significativas. Embora isto possam ser bons indicativos para o futuro do Fireworks, Photoshop terá sempre a maior atenção por parte da Adobe. E porquê? Bom, Photoshop é a aplicação que mais rende à Adobe, é mais vendida e por um preço mais alto. Além disso, Photoshop tem mais idade, e tira partido da sua idade através do feedback dos utilizadores ao longo dos anos. Se ao fim de todos estes anos Photoshop é considerada a aplicação mestra para trabalhar imagem, é porque o feedback dos seus utilizadores ao longos destes anos não pode ter sido mau. Fireworks continua a crescer a cada actualização, mas é expectável que seja o Photoshop a receber a maioria da atenção e actualizações no futuro. Desta forma, apresentamos ao leitor o Guia de Comparação entre Fireworks e Photoshop – Parte III.

Não perca os antigos anteriores deste Guia de Comparação entre Fireworks e Photoshop:

Este Guia de Comparação entre Fireworks e Photoshop tem já vários artigos, pelo que se tiver ideias ou sugestões, participe e deixe o seu comentário! Se desejar, poderá subscrever a nossa newsletter gratuita e receber os próximos conteúdos diretamente na sua caixa de email:

AS VANTAGENS DE UTILIZAR PHOTOSHOP

Embora não tenha sido na abordagem directa de Photoshop, já enumerámos várias comparações nos artigos anteriores, pelo que este artigo terá um pouco menos de informação que os seus precedentes. No entanto ainda há muito para expor, e assim compilámos mais alguns argumentos para o leitor reflectir, que poderá ler ao longo do artigo.

ESTABILIDADE

A versão CS5 trouxe francas melhorias em termos de estabilidade, mas em termos históricos, os utilizadores de Fireworks reportam mais problemas com ficheiros, erros e problemas gerais com o programa do que reportam os utilizadores de Photoshop. Isto não quer dizer que Photoshop esteja livre de erros, tem a sua quota parte garantidamente, mas tem um valor acrescentado por ter menos erros. Só por isso, o seu valor é justificável pela menor quantidade de dores de cabeça que terá ao utilizar Photoshop do que ao utilizar Fireworks. Provavelmente a maioria dos utilizadores Fireworks tiveram poucos ou nenhuns problemas com ele: É bastante raro Fireworks dar problemas com operações simples. Se estiver a utilizar a fundo o programa, as probabilidades de acontecer um erro são maiores, mas nada garante que um erro vá acontecer.

BASE DA INDÚSTRIA

Embora comece a aparecer uma procura de profissionais que saibam trabalhar com Fireworks, a procura de designers que saibam trabalhar com Photoshop é colossal e à escala universal. Practicamente todos os projectos da web usam Photoshop em alguma parte, e ter pelo menos um conhecimento médio sobre esse programa vai ser um item requerido para os trabalhos de design onde haja uma equipa envolvida. Enquanto que os seus clientes como freelancer não querem saber como você fez o trabalho, numa equipa é muito mais provável que troque ficheiros .PSD com os seus colegas do que ficheiros .PNG. Dito isto, se pretende trabalhar nessa indústria você tem que saber trabalhar com Photoshop.

É-LHE FAMILIAR

Para aqueles que estão acostumados ao Photoshop, a grande desculpa que dão para nem sequer experimentar Fireworks ou outro programa qualquer, é que estão habituados a trabalhar com Photoshop e foi com ele que aprenderam a gerir o rumo do seu trabalho. A grande maioria das pessoas que começaram a trabalhar com Photoshop mantiveram-se fiéis a ele, porque realmente funciona. Como se costuma dizer, em equipa que ganha não se mexe, e se tem funcionado com toda esse gente, aprendendo aquilo que é necessário também pode funcionar consigo. Experimente!

TUTORIAIS E RECURSOS

Fazendo uma avaliação realista, há imensos tutoriais online de todo o tipo para Fireworks, mas a quantidade astronómica de tutoriais e recursos online para Photoshop dá 15-0 nos de Fireworks. Desta forma é muito mais provável que encontre um tutorial online para o ajudar em Photoshop do que em Fireworks. Este é também um indicador de que Photoshop é mais difícil de aprender do que Fireworks, o que não invalida que seja possível aprender Photoshop, obviamente.

É SUPER COMPLETO

Já o dissemos anteriormente, Photoshop tem uma enorme panóplia de ferramentas. Um designer que use Fireworks quase garantidamente terá que abrir o Photoshop para efectuar trabalhos com técnicas mais avançadas de edição de imagem, ao passo que um utilizador Photoshop quase garantidamente que nunca irá abrir o Fireworks para fazer algum desses trabalhos. O núcleo das funcionalidades está no Photoshop, e embora o Fireworks tenha tido vários melhoramentos das suas ferramentas, os utilizadores Photoshop nem o sabem: Eles não usam Fireworks.

E VOCÊ, UTILIZA O PHOTOSHOP?

Não perca a continuação do Guia de Comparação entre Fireworks e Photoshop, se tiver ideias ou sugestões, participe e deixe o seu comentário! Se desejar, poderá subscrever a nossa newsletter gratuita e receber os próximos conteúdos diretamente na sua caixa de email:

Até já!

Artigos Recomendados

Guia de comparação entre Fireworks e Photoshop – Parte II

Diogo Espinha — Fri, 14 Jan 2011 16:53:20 +0000

Nesta Parte II do Guia de Comparação entre Fireworks e Photoshop abordaremos mais vantagens no uso de Fireworks, e falaremos finalmente sobre as suas desvantagens. Na Parte I abordámos a história do Fireworks e do Photoshop e fizemos a introdução ás vantagens da utilização de Fireworks, nomeadamente em relação à linkagem interna, páginas mestras, gestão de estilos e ferramentas de vectores. É importante frisar que este Guia de Comparação, tal como a maioria dos artigos na Escola Criatividade, tem uma vertente educacional, pelo que é perfeitamente natural que os mais habituados aos programas encontrem conteúdo que é extremamente básico e fácil de entender e perceber. Quem é que não se lembra de quando era novato e todas essas coisas que hoje assumem como simples, eram uma dor de cabeça? Por isso e para facilitar a aprendizagem e escolha por parte do leitor, apresentamos-lhe o Guia de Comparação entre Fireworks e Photoshop – Parte II.

Este Guia de Comparação entre Fireworks e Photoshop terá vários artigos, pelo que se tiver ideias ou sugestões, participe e deixe o seu comentário! Se desejar, poderá subscrever a nossa newsletter gratuita e receber os próximos conteúdos diretamente na sua caixa de email:

LIVRARIAS

As livrarias são uma parte importante e bastante útil para aqueles que utilizam de forma recorrente os mesmos estilos, símbolos, vectores ou outros elementos. Estes são guardados juntamente com as suas propriedades nas livrarias, possibilitando desta forma o seu uso posterior no mesmo ou em outros projectos. Tudo isto permite essencialmente poupar imenso tempo ao longo de um projecto, e n final do dia certamente irá ter mais tempo livre e agradecer a existência desta funcionalidade.

GRUPOS DE NÍVEIS

Fireworks

Photoshop

Os grupos de níveis existem tanto no Photoshop como no Fireworks, embora de maneira ligeiramente diferente, acaba por fazer grande diferença. Enquanto que no Photoshop isto é feito de uma forma manual (e diga-se, torna-se muito entediante passado algum tempo), no Fireworks é feito de uma forma mais natural e rápida, bastando para isso escolher os elementos e seleccionar “agrupar”, que pode também ser feito através do atalho de teclado CTRL+G.

GRADIENTES

Os gradientes em Fireworks são bastante melhores e têm muito mais para oferecer do que em Photoshop. Em vez de uma panóplia de ferramentas de gradientes, Fireworks fornece-lhe um vasto leque de maneiras de costumizar e gerir os gradientes para ficarem exactamente como pretende, não sendo forçado a utilizar ferramentas desnecesssárias.

OTIMIZAÇÃO DE IMAGEM

Enquanto que Fireworks suporta inclusive PNG-8 com transparência, Photoshop tem ferramentas básicas do estilo guardar para a web. Sim é verdade, Photoshop não suporta (até à data) PNG-8 com transparência! Comparações entre tamanhos de ficheiros revelam que Fireworks grava ficheiros com tamanho mais pequeno, que é crucial para websites carregados de imagens. Além disso, Fireworks está super otimizado para fazer otimização de imagem justamente da maneira que os web designers necessitam.

SUPER PERFORMANCE

Qual o ganho em não ter todas aquelas funcionalidades extras e chatas que Photoshop possui? Ficheiros mais pequenos e que se “mexem” muito mais depressa! Apesar de os ficheiros de Fireworks .PNG poderem conter muito mais complexidade que os ficheiros Photoshop .PSD, os .PNG têm uma performance bastante melhor na maioria dos computadores. Resumindo, isto significa menos tempo perdido a olhar para o computador à espera que ele processe o nosso pedido, e mais tempo ganho a trabalhar. Tudo isto também ajuda a que só consiga fazer determinadas operações em Fireworks, como fazer rapidamente um protótipo de um website ou de uma aplicação AIR, criar PDF’s interativos, brincar com Flash ou mesmo fazer a estrutura de um website tirando partido do slice.

APRENDIZAGEM RÁPIDA

Para aqueles que têm utilizado o Photoshop à imensos anos, a experiência da utilização de Fireworks poderá parecer-lhe um pouco bizarra, mas a verdade é que aqueles que nunca utilizaram nenhum dos programas, e o fazem, acabam por constatar que a curva de aprendizagem de Fireworks é muito melhor do que Photoshop. Photoshop tem como alvo os amantes da fotografia e Designers gráficos, e isto acaba por significar que existem imensas ferramentas que são inúteis para os Web Designers. A interface de utilizador do Photoshop super carregada a que os seus devotos seguidores estão habituados não tem nada a ver com a interface de utilizador do Fireworks: Ferramentas quanto baste, mais intuitivo e um look limpo. Qualquer utilizador que esteja disposto a investir 2 ou 3 horas de aprendizagem Fireworks, no final certamente terá percebido e assimilado a maioria das capacidades do Fireworks.

RECONHECIMENTO CRESCENTE

Desde há anos a esta parte que a popularidade de Fireworks tem vindo a crescer, muito por culpa da constante inovação da web e o seu crescimento, levando a que os recém chegados ao mundo do web design procurem soluções mais práticas, intuitivas e fáceis de utilizar. Inclusivamente um recente estudo da Sociedade das Agências Digitais (SODA) indica que perto de 20% das agências inquiridas procuram profissionais com capacidade de trabalho em Fireworks. Segundo o mesmo estudo, no ano anterior este número era tão pequeno que era ignorado.

DESVANTAGENS DA UTILIZAÇÃO DE FIREWORKS

Como tudo, Fireworks também apresenta algumas desvantagens, e dirão muitos Web Designers: Infelizmente!

O Anti-Aliasing de texto definitivamente necessita de uma melhoria.
Ficheiros .PSD mais complexos nem sempre abrem correctamente.
Não tem muitas das fantásticas ferramentas a que os utilizadores Photoshop estão utilizados – desta forma haverá sempre razão para voltar ao Photoshop.
A indústria ainda está muito centrada em Photoshop. Isto significa que terá sempre de saber como trabalhar com Photoshop quando necessitar de trabalhar com outros designers.

E VOCÊ, UTILIZA FIREWORKS?

Até Já!

Artigos Recomendados

Guia de comparação entre Fireworks e Photoshop – Parte I

Diogo Espinha — Sat, 08 Jan 2011 18:39:39 +0000

Quando se fala em Criatividade normalmente fala-se de Photoshop ou Fireworks. Hoje vamos perceber quais são as principais diferenças entre o Fireworks e o Photoshop, o que cada um deles significa em termos de capacidade de trabalho para os designers e webdesigners e quais as suas vantagens e desvantagens. Em última análise iremos tentar perceber se será ou não vantajoso utilizar ambos, ou utilizar um ou outro.

Fireworks teve o seu início com a Macromedia, fundada em 1992, resultado da fusão da Authorware Inc. e da MacroMind-Paracomp. Em Dezembro de 2005 foi comprada pela Adobe e integrada nos seus quadros, passando todos os seus produtos a serem denominados por Adobe. Fireworks surgiu no ano 1998, e até à data conta com 10 versões, a saber:

1998: Macromedia Fireworks
1999: Macromedia Fireworks 2
2000: Macromedia Fireworks 3
2001: Macromedia Fireworks 4
2002: Macromedia Fireworks 6 (Macromedia Fireworks MX)
2004: Macromedia Fireworks 7 (Macromedia Fireworks MX 2004)
2005: Macromedia Fireworks 8
2007: Adobe Fireworks 9 (Adobe Fireworks CS3)
2008: Adobe Fireworks 10.0 (Adobe Fireworks CS4)
2010: Adobe Fireworks CS5

Photoshop teve o início do seu desenvolvimento em 1987 através de um estudante Universitário chamado Thomas Knoll, que começou a criar no seu Macintosh Plus um programa para mostrar imagens a preto e branco num display monocromático. Chamou a atenção do seu irmão, John Knoll, empregado na Industrial Light & Magic, que recomendou que Thomas tornasse o programa num editor de imagem. Mais tarde nesse ano, e após uma pausa de 6 meses nos estudos por parte de Thomas para ajudar no desenvolvimento do programa ao qual foi dado o nome primário de ImagePro, este passou a ser denominado de Photoshop, em finais de 1988. Passado algum tempo os irmãos Knoll viajaram até Silicon Valley e fizeram uma demonstração do programa a engenheiros da Apple e a Russel Brown, director gráfico da Adobe. A Adobe ficou interessada no programa e adquiriu as licenças. Em 1990 foi lançado o Photoshop 1.0 exclusivamente para Macintosh. Até à data foram lançadas 28 versões do Photoshop, a saber:

1990, Fevereiro: Adobe Photoshop 1.0 (Macintosh apenas)
1991, Junho: Adobe Photoshop 2.0 (Macintosh apenas)
1992, Janeiro: Adobe Photoshop 2.0.1 (Macintosh apenas)
1992, Novembro: Adobe Photoshop 2.5
1993, Julho: Adobe Photoshop 2.5.1 (Macintosh apenas)
1994, Setembro: Adobe Photoshop 3.0
1996, Novembro: Adobe Photoshop 4.0
1997, Agosto: Adobe Photoshop 4.0.1
1998, Maio: Adobe Photoshop 5.0
1998, Junho: Adobe Photoshop 5.0.1
1999, Fevereiro: Adobe Photoshop 5.5
2000, Setembro: Adobe Photoshop 6.0
2001, Março: Adobe Photoshop 6.1
2001, Março: Adobe Photoshop 7 ( Introdução do suporte a Mac OS X )
2001, Abril: Adobe Elements 1
2002, Agosto: Adobe Photoshop 7.0.1
2002, Agosto: Adobe Elements 2
2003, Outubro: Adobe Photoshop CS (8.0)
2004, Outubro: Adobe Elements 3
2005, Abril: Adobe Photoshop CS2 (9.0)
2005, Outubro: Adobe Elements 4
2006, Outubro: Adobe Elements 5 (Apenas para Windows)
2007, Abril: Adobe Photoshop CS3 (10.0)
2007, Outubro: Adobe Elements 6
2008, Outubro: Adobe Elements 7 (Apenas para Windows)
2008, Outubro: Adobe Photoshop CS4 (11.0)
2009, Setembro: Adobe Elements 8
2010, Abril: Adobe Photoshop CS5 (12.0)

AS VANTAGENS DE UTILIZAR FIREWORKS

O Fireworks é uma aplicação gráfica, tal como Photoshop, e o que os diferencia é o utilizador alvo. O que leva as pessoas a escolher o Fireworks tem a ver com o facto de que foi feito especialmente para Web Designers. É leve, trabalha de forma rápida e a curva de aprendizagem é melhor e mais rápida que no Photoshop. Como é feito especialmente para Web Designers, é expectável que ao longo dos tempos vá crescendo e sendo acrescentadas melhorias, para acompanhar a evolução da indústria. Concluíndo, se é um novato no Fireworks, não irá ser incomodado com a complexidade e a curva de aprendizagem do Photoshop. Vamos então analisar todas as principais vantagens de utilizar Fireworks.

LINKAGEM INTERNA

A linkagem interna é exactamente aquilo que o nome sugere, inserir links nos documentos do Fireworks. Uma vez que o conceito principal é a construção de websites, esta funcionalidade permite construir um website inteiro sem ter de escrever uma única linha de código. Pode fazer linkagem interna mas também linkar para sítios externos, como é o caso da imagem. Para fazer linkagem interna bastaria meter o caminho e o nome do ficheiro a linkar. No final, quando tiver o trabalho concluído, é possível exportar todo o site como código. Há também uma particularidade, se exportar o trabalho como PDF, toda a linkagem irá permanecer, e poderá enviar protótipos para os seus clientes ou co-trabalhadores, mantendo toda a funcionalidade num formato de ficheiro acessível a todos.

PÁGINAS MESTRAS

Esta funcionalidade permite que se definam elementos que quer que apareçam em cada página. Também permite criar quantas sub-páginas entender, dentro do mesmo template, do mesmo website. Esta ferramenta é considerada super-poderosa porque ao fim ao cabo actua exactamente como um website online actua. Isto é 100% intencional por parte da produtora, que criou isto por forma a ter os mesmos comportamentos que uma página online teria. Tem a possibilidade de fixar elementos que necessite, como a navegação, o logótipo, fundos, ou outro que deseje, e alterar elementos entre páginas, como os conteúdos, imagens de conteúdo, etc. Se é utilizador de Photoshop a esta altura estará a pensar “Tudo bem, mas também consigo fazer isso no Photoshop usando os Grupos de Níveis, ou vários ficheiros PSD”. Certo, mas o que se pretende não é organização e simplicidade?

GESTÃO DE ESTILOS

Estilos no Fireworks são muito similares ao CSS numa página. Cada elemento poderá ter o preenchimento, tipo de letra, efeitos, etc e depois guardar isto como um Estilo, para poder ser re-utilizado mais tarde em mais elementos da página, da mesma forma que se utiliza as folhas de estilo em cascata, CSS. Basta alterar no estilo, que cada elemento usando esse estilo irá ser alterado de acordo. É particularmente útil quando estamos a lidar com várias páginas e temos o mesmo estilo espalhado por algumas delas, aplicando o conceito: Altere um, altere todos. No final de contas, irá poupar imenso tempo utilizando esta fantástica utilidade.

FERRAMENTAS DE VECTORES

O Photoshop oferece ferramentas rudimentares para trabalhar com vectores, mas Fireworks traz-nos algumas das ferramentas nativas do Illustrator. Provavelmente a melhor ferramenta para os web designers presente no Fireworks é o rectângulo arredondado, que inclui pontos de controlo para cada canto, tornando a tarefa mais fácil se pretender fazer alterações ao rectângulo. Pode criar um canto arredondado e os outros não, ou fazer qualquer combinação que satisfaça a sua necessidade enquanto web designer, tirando partido das funcionalidades e particularidades existentes.

Até já!

Artigos Recomendados

Guia de Comparação entre Fireworks e Photoshop – Parte IV

50 Templates PSD de Botões e Ícones

Diogo Espinha — Wed, 17 Nov 2010 17:50:13 +0000

Se está a desenvolver uma página web, um blog ou é um curioso ou mesmo um profissional do design, este artigo irá ser extremamente útil para si, não só pela variedade como também pela ótima qualidade do conteúdo, mais concretamente dos ícones e botões aqui referenciados. Com grande certeza podemos dizer que irá encontrar neste artigo grande parte daquilo que está de momento à procura ou já procurou anteriormente e não encontrou. A grande maioria destes itens são gratuitos e como já foi dito, são de grande qualidade.

1. 60 WEB BUTTONS

2. SMOOTH ICON SET

3. 24 BOTÕES BUTTON-DOWNLOAD.COM

4. PACOTE DE 60 ICONES DIVERSOS

5. SILK – PACOTE DE 700 ICONES 16X16

6. ICONES DE BANDEIRAS

7. BOTÕES DE ENERGIA

8. BOTÕES DE SUBSCRIÇÃO

9. 39 BOTÕES WEB 2.0

10. 8 ICONES DE REDES SOCIAIS COM TEMÁTICA DE NATAL

11. PACOTE DE ICONES FIREFOX

12. ICONES 3D DIGSBY

13. ICONES METEOROLOGIA

14. ICONES DE CARRINHO DE COMPRAS

15. PACOTE DE ICONES VECTORES

16. BOTOES DO WINDOWS

17. BOTOES DE CONTROLO DE ÁUDIO/VÍDEO

18. BOTOES ESTILO GRAFITE

19. BOTÕES DE ESTILO BRANCO

20. BOTÕES WEB 2.0

21. BOTÕES IVISTA

22. 2 BOTÕES

23. BOTÕES ESTILO GEMA

24. ICONES RADIUM NEUE

25. ICONES RADIUM

26. ICONES ICONICA

27. ICONES DE MENSAGENS INSTANTANEAS

28. PACOTE DE 12 ICONES VARIADOS

29. PACOTE DE 6 ICONES DE CD’S

30. 24 PACOTRES DE ICONES VECTORIAIS

31. PACOTE DE ICONES PARA COMÉRCIO

32. PACOTE DE ICONES ESTILO VIDRO

33. BUTTON STUFF

34. GLOSSY BUTTONS

35. BOTOES TEXTURIZADOS

36. BOTÕES DE REDE

37. BOTÕES ESTILO CARBONO

38. GLOSSY BUTTONS 2

39. BOTÕES COM CAVEIRA

40. + BOTÕES DE POWER

41. BOTÕES ESTILO IPHONE

42. BUTTON DOCKS

43. BOTÕES DE ON/OFF E START ENGINE

44. BOTÕES COM TEMÁTICA DIAMANTE

45. BOTÕES VARIADOS

46. BOTÕES 3D

47. BOTÃO METÁLICO MÁGICO

48. BOTÕES DE SIGNUP

49. BOTÕES/PINOS VARIADOS

50. ICONES TWITTER

Deseja partilhar mais recursos? Comente e deixe a sua contribuição!

Até já!

Artigos Recomendados

10 alternativas ao Photoshop – editores de imagens online

Paulo Faustino — Thu, 11 Feb 2010 16:52:55 +0000

Quantas vezes não teve já de trabalhar com editores de imagem em computadores que não tinham Photoshop instalado? Que acontece quando você precisa editar uma imagem e não tem um Photoshop à mão? Por isso e porque gostamos de lhe facilitar a vida aqui no Ponto Bit, recomendamos-lhe hoje 10 alternativas ao Photoshop, constituídas todas elas por editores de imagens online. Todos estes editores são bastante semelhantes ao Photoshop na sua essência. Outra grande vantagem destes editores é que não consomem recursos no computador, pelo que todas as suas imagens podem ser guardadas online também!

1. Pixlr

O Pixlr é um editor de imagens online simplesmente perfeito, que é desenhado para utilizadores não profissionais e permite a edição simplificada de imagens. Ele combina criação de imagens, edição, ferramentas de pintura, opções de ajustamento, entre outras opções realmente fantásticas.

2. Sumo Paint

O Sumo Paint é um editor de imagens online muito parecido com o Adobe Photoshop. Ele oferece layers, ferramentas de edição, ferramentas de pintura, suporte a múltiplos formatos, entre outras opções mais avançadas.

3. Splashup

O Splashup é uma ferramenta de edição poderosa e também um gestor de imagens. Com as competências que os profissionais utilizam e que os novatos necessitam, ele é simples de utilizar, trabalha em tempo real e permite-lhe, tal como o Photoshop, editar várias imagens em simultâneo. O Splashup corre em todos os browsers, tem suporte à grande maioria dos sites de partilha de fotografia e imagens, e oferece ainda suporte próprio de imagem, para que possa editar os seus trabalhos e continuá-los mais tarde.

4. PicMagick

O editor PicMagick é mais uma ferramenta de edição de fotografia online, que lhe permite tornar fotografias e imagens banais, em autênticas peças de arte, em poucos cliques. Este editor irá surpreendê-lo pela simplicidade e facilidade com que você irá conseguir fotografias e imagens fantásticas.

5. Photoshop.com

O Photoshop.com é a solução mais completa para gestão, edição, armazenamento e partilha das sua fotografias e imagens online, com tutoriais, inspiração e muito mais. O Photoshop.com está online a partir de qualquer browser, é compatível com telemóveis e versões mobile, e ainda compatível com os softwares Adobe Photoshop Elements 7 ou Adobe Premiere Elements 7. Com o Photoshop.com, você pode organizar, criar, enviar por email, visualizar ou armazenar facilmente as suas fotos ou imagens.

6. Pixer.us

O pixer.us permite-lhe manipular, editar e melhorar as suas fotografias e imagens, bem como aplicar filtros e utilizar ferramentas avançadas de edição de imagem. Tudo isto correndo o software a partir do browser do seu computador.

7. Phoenix

Editar fotografias com este editor de fotografias e gráficos, que na verdade faz muito mais do que ajustar brilho ou remover os olhos vermelhos, é uma experiência fantástica. A proposta da Aviary é tornar as criações o mais acessíveis possível, incluindo design gráfico, audio, fotografia e imagens. O Phoenix é apenas um dos editores disponibilizados gratuitamente em formato online.

8. Picnik

O Picnik torna as suas fotografias e imagens fabulosas recorrendo a ferramentas de edição extremamente simples e intuitivas. Modificar o conteúdo das suas imagens, é fácil, tal como o é a utilização de efeitos, fontes, formas e molduras. É fácil, simples e divertido.

9. Snipshot

O Snipshot é um editor de imagens online muito rápido. Você pode utilizá-lo a partir do seu browser, sem necessidade de downloads ou Flash.

10. Flauntr

Este editor de imagens oferece-lhe uma série de soluções do tipo “um-clique” para realizar modificações, adaptações e alterações às suas fotografias e imagens. Tudo isso é feito online e a partir do seu browser!

Até já!

Fonte