O que todo Web Designer Precisa Saber – Ferramentas de Web Design
O que todo Web Designer Precisa Saber – [Parte 02] – Ferramentas de Web Design
Saiba quais ferramentas você precisa dominar para conseguir um trabalho na área de web design.
David Arty | Publicado em 21 de janeiro de 2014
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
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?
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:
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.
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.
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.
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:
Entenda as diferenças entre Bitmap e Vetor
Por Luiz Casemiro
Mas peraí! Você falou de imagens vetoriais… o que são imagens vetorias? Existe mais de um tipo de imagem? Mais que raios?! Caaalma pequeno gafanhoto.
Existem 2 tipos básicos de imagem quando estamos falando de design digital, o bitmap e o vetor.
O Bitmap, ou mapa de bits , se trata de uma imagem construída pixel a pixel, através de uma relação absoluta, com o computador interpretando código e "pintando" cada pixel com sua cor estabelecia no fechamento do arquivo. Basicamente é um arquivo que carrega o número de pixels, suas cores e só. É só dar o zoom máximo em algum arquivo e conferir que a imagem não é nada mais que isso: cada pixel uma cor. Os formatos de arquivos bitmap incluem , BMP, JPEG, PNG, GIF e PSP.
A Imagem Vetorial (Vetor) é constituída por vetores, ou seja, cálculos matemáticos. Se trata de uma imagem que carrega no seu arquivo uma relação entre diversos pontos e curvas que formam uma imagem. Pensa no seguinte: o arquivo envia informações para o programa sobre onde aquele ponto ou aquela curva devem estar, ele diz por exemplo que a curva X fica a tal distancia da curva Y, o programa interpreta essa informação e desenha novamente toda vez que o arquivo é aberto. Os formatos de arquivos vetorais incluem EPS, WMF, DWG, SVG, CDR e AI.
"Tá beleza, não entendi nada." Caaaalma cocadinha.
Na prática o que você tem de saber é o seguinte: um bitmap é bem menos flexível na questão do redimensionamento, se você quiser aumentar a imagem, as informações de cores irão se tornar insuficientes para o programa preencher toda a área, sua imagem vai estourar, vai ficar tudo borrado, sem definição. Bitmap é para ser usado do tamanho que foi feito ou menor, porque na diminuição a perda de informação é mínima, quase imperceptível. Esticar um bitmap é um dos pecados capitais do design, tome muito cuidado. Fotos são bitmaps devido a sua complexidade de cores.
Já o vetor foi feito com justamente essa limitação do bitmap em mente, como ele carrega informação relativa, o programa que está interpretando é capaz de aumentar e diminuir o documento sem comprometer a qualidade da imagem, sério, dá para você fazer um ícone ficar do tamanho de um outdoor! Logos e logotipos são construindo com vetores devido a necessidade de redimensionamento, para aplicação em diversas mídias, e precisão dos traços.
Mas é claro que não para por aí…
Os dois formatos tem suas limitações e suas funções específicas, com mais tempo de estudo e experiência, você vai aprender a trabalhar com os dois em conjunto, sabendo aplicar um ou outro dependendo da sua necessidade.
Luiz Casemiro – Web Designer
Portfólio | Facebook | Twitter
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.
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
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.
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.
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.
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.
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.
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!
[Infográfico] O que todo Web Designer Precisa Saber – Conceitos de Web Design [ Parte 01]
WYSIWYG ↑
É uma sigla em inglês que significa "What You See Is What You Get" ou "O que você vê é o que você obtém". Esse termo é usado para definir softwares onde você já vê o resultado , algo muito similar , enquanto cria.