Eae! Td bele?
Neste artigo continuaremos com a pequena série sobre “O que todo Web Designer Precisa Saber”.
No primeiro artigo (se você ainda não leu, clique aqui para ler) apresentamos os conceitos que você precisa estudar para se tornar realmente um Web Designer.
Nesta segunda parte irei apresentar as ferramentas que você precisa saber manusear para conseguir um trampo na área.
Para conseguir atuar na área não basta somente a parte teórica. Somente com a teoria você não vai conseguir um emprego ou um freela. E as ferramentas servem para te ajudar a fazer isso: para você colocar em prática aquilo que tudo estudou.
Antes, quero frisar que existe sim mais ferramentas que usamos no dia a dia, como por exemplo, de prototipagem, de coletas de dados, de organização de tarefas, de definição de cores , entre outras. Porém a pretensão deste artigo é focar nas principais ferramentas requisitadas pelo mercado e que vemos constantemente exigidas nas vagas de emprego oferecidas por aí.
Também não irei me aprofundar muito nos softwares citados. O artigo é mais informativo do que instrucional. Aqui eu não irei ensinar como usar tal software ou como criar tal efeito.
O objetivo aqui aqui é criar um guia para os galuchos candidatos a web designers, bele?
Are you ready? Ok!! Lest’s go!!!
Neste artigo você receberá dicas sobre:
- Ferramentas de Edição gráfica
- Ferramentas de Linguagem web
- Ferramentas de Editores de código
- Outras ferramentas
Edição de gráfica
Para criar layouts, ilustrações, ícones, montagens, tratar fotos, entre outros, você precisará de algum editor visual. Então, vamos ver quais são os principais?
Adobe Photoshop
O Photoshop é um programa de edição de imagens profissional.
É o software de edição visual mais conhecido e usado no mundo.
Os seus recursos são otimizados para edição e tratamento de imagens digitais (Bitmaps) e trabalhos de pré-impressão.
Além de imagens digitais ele também possui algumas funções dos programas típicas dos programas vetoriais.
Então no PS, você pode criar quase tudo: layouts de sites, ilustrações, animações simples, fatiar imagens, montagem de fotos, tratamentos de fotos, etc.
Por isso ele é o programa mais usado para a criação de layouts, mesmo não tendo sido projetado inicialmente para isso.
Ele é praticamente o software de porta de entrada para quem inicia na área.
Saber manuseá-lo é essencial. Isso é um requisito fundamental nos dias atuais.
Alternativas gratuitas:
Adobe Fireworks
O Fireworks é uma ferramenta para desenvolvimento de Layouts web.
Com o FW podemos criar e editar imagens para a WEB, além de animações simples.
Os seus recursos são otimizados para a web. Ele tem uma ótima compressão de imagens, cria links, fatia imagens, exporta PNGs transparentes com melhor qualidade, cria sprites, etc.
Seu uso e interface são muito semelhantes ao do Photoshop. E ele é integrado com outros softwares da Adobe. Você pode tranquilamente abrir um PSD (arquivo de photoshop) no FW.
Na verdade ele é a ferramenta da Adobe para a criação e interfaces web (apesar da grande maioria usar somente o Photoshop).
O Fireworks foi feito para Web Designers.
Apesar de certo preconceito de alguns Web Designers, ele é o programa mais otimizado para criação de peças para a web, além de também ser mais fácil e intuitivo que o Photoshop.
Alternativas gratuitas:
Não existe a melhor ferramenta para o Web Designer.
A melhor sempre será aquela que lhe oferece uma melhor experiência, que você se sente mais confortável e que lhe auxilie a entregar os melhores resultados.
Adobe Illustrator
O Illustrator é uma ferramenta para criação de imagens vetorais.
O AI é o software de vetores mais usados hoje em dia. E com certeza é o mais poderoso programa de imagens vetorais.
Com ele pode-se criar diversas peças de design: ilustrações, folhetos, panfletos, livros, layouts, banners, cartões, infográficos, ícones, etc.
Ele também tem integração com outros softwares da Adobe.
Corel Draw
O Corel também é uma ferramenta para criação de imagens vetorais.
Hoje em dia seu uso caiu um pouco, devido a ascensão do Illustrator, mas mesmo assim ainda é bastante usado, principalmente aqui no Brasil.
Normalmente iniciantes preferem o Corel por sua facilidade de uso ser um pouco maior, ser mais leve e o mais barato.
Alternativas gratuitas apara Illustrator e Corel:
Linguagem web
Um projeto de interface para web interage com muitas áreas vão além do visual, por isso é importante você conhecer o funcionamento de uma interface web por inteiro.
Você não precisa ser especialista em tudo, mas precisa saber para quem está criando e o que está criando. Portanto, é importante você conhecer as camadas web.
Veja a seguir.
HTML: HTML é a abreviatura de “HyperText Mark-up Language” ou Linguagem de Marcação de Hipertexto
Usamos o HTML para construir sites. Ele apresenta o conteúdo no navegador e para vincular, através de urls , arquivos externos como imagens, vídeos, páginas, etc.
CSS: CSS é a abreviatura de Cascading Style Sheets ou Folhas de Estilos em Cascata.
É uma linguagem para estilos. Usamos o CSS para adicionar estilo a uma página HTML. Ele altera a forma como será exibido o conteúdo. É pelo CSS que damos “formas e cores ao nosso site”.
JQUERY/JAVASCRIPT: Javascript basicamente é uma linguagem de programação desenvolvida para a internet.
O JS Adiciona comportamento interatividade na página, modificando assim sua utilização e proporcionando diferentes experiências ao utilizador da página.
JQuery é uma framework para desenvolvimento de javascripts. Ele ajuda os desenvolvedores a criarem de forma mais rápida e estável os scripts.
Mesmo que você trabalhe apenas como um “web design criativo” (daqueles que não botam a mão em códigos) é importante você conhecer o funcionamento do html, pois seu layout será usado nele. A mesma coisa aplica-se ao JS e, principalmente, ao CSS.
CMS: CMS é a abreviatura de Content Management System ou Gerenciamento de Conteúdo. São plataformas que lhe permitem criar sites dinâmicos, com banco de dados, com gestão de conteúdo, sem a necessidade de se ter conhecimento sólidos em linguagem de programação.
Alguns CMS: WordPress, Joomla, Drupal
Editores de código
Adobe Dreamweaver
O Dreamweaver é uma ferramenta de edição de códigos. É o programa do pacote Adobe para o desenvolvimento de aplicações web.
O programa permite a criação e edição de páginas para a internet sem a necessidade de se lidar com códigos. É um programa WYSIWYG ↓.
Sua interface é semelhante com as de programas de edição de imagens da Adobe. Essa facilidade, aparentemente, que o DW oferece pode ser uma grande armadilha.
Os códigos gerados automaticamente pelo DW são sujos. O DW insere coisas inúteis, ultrapassadas e fora dos padrões. Nunca crie um site assim. Saiba o que você está fazendo.
Ele é ótimo programa, mas não use o modo visual do DW. Faça você mesmo o seu código.
Notepad++
O Notepad++ é um programa para de edição de códigos.
Ele é leve e gratuito.
Suporta uma gama maior de linguagens e também tem funcionalidades WYSIWYG.
Alternativas:
Outras Ferramentas
Adobe Flash
O Flash é uma ferramenta pra a criação de animações. Com ele pode-se criar desde banners simples até games complexos.
Sua interface é simples de usar. Ele possui uma time-line muito parecida com as encontradas nos editores de vídeos.
No desenvolvimento web ele foi colocado de lado (graças ao bom Deus) devido a evolução do HTML/CSS e dos padrões web. Praticamente não se usa mais o FL quando se trata de web. Mesmo assim é bom você conhecê-lo, pois ainda se usa o FL na criação de pequenos banners promocionais.
Adobe Indesign
O Indesign é software de diagramação e organização de páginas. Ele é o subtituto do antigo Adobe PageMaker.
O ID é o campeão quando o assunto é edição e diagramação de jornais, revistas e afins. É uma ótima ferramenta para se trabalhar com tipografia e muito usado em agências de publicidade, gráficas, etc.
No desenvolvimento web ele não tem muita utilidade. Apesar das suas opções lhe darem suporte para a criação de layouts de site e opções de exportação para web, isso não faz dele um software muio útil para o desenvolvimento de sites.
Alternativa:
Conclusão
Saber usar bem os programas também é importante . Isso lhe ajudará a evitar problemas e otimizará o seu tempo e a qualidade dos seus trabalhos. E também pode ser o fiel da balança para você conseguir um emprego ou não.
Mas, não esqueçam que web design é algo multidisciplinar e existem ainda mais coisas para você estudar, pesquisar e aprender. Saiba que é importantíssimo você conseguir unir o conhecimento com a técnica: os conceitos mais as ferramentas.
E assim chegamos ao fim deste pequeno guia sobre as ferramentas de um Web Designer.
Espero que tenha gostado.
E você já saber usar essas ferramentas? Já estudou alguns dos conceitos? Tem dúvidas sobre alguma coisa? Usa outra ferramenta que não citei aqui?
Deixe seu comentário. Compartilhe! Participe!
Atém mais.
Abraço.
Primeira Parte:
[Infográfico] O que todo Web Designer Precisa Saber – Conceitos de Web Design [ Parte 01]
