Curso Web Design | Como criar etiquetas no Corel DRAW

Link to Blog do Curso Web Design - Microcamp SP

Posted: 27 Jun 2013 07:16 AM PDT

Você precisa criar uma identificação para os seus documentos e pastas e quer criar etiquetas de maneira fácil e descomplicada? O programa Corel Draw X5 tem alguns recursos para ajudá-lo nessa tarefa, e nós do blog Web Design da Microcamp iremos demonstrar o passo a passo para que você mesmo possa criar suas etiquetas personalizadas.

Hoje, vamos fugir um pouco da área do Web Design e vamos falar de uma ferramenta que pode ser muito útil no seu dia a dia. Muitas pessoas utilizam o Corel Draw e a grande maioria não sabe que o programa oferece a opção para criar etiquetas. Esse recurso ajuda muito quando há a necessidade de manter tudo identificado com as informações essenciais para manter um ambiente organizado.

Por isso, vamos demonstrar de forma rápida e prática como utilizar o programa para fazer qualquer tipo ou tamanho de etiquetas.

Nesse tutorial, optei por utilizar a versão X5.

O Corel Draw possui mais de 800 formatos de etiquetas de 38 fabricantes diferentes em sua biblioteca interna. Para começarmos o nosso trabalho, abra o programa e crie um documento novo (Arquivo > Novo ou com o atalho Control + N). Para iniciarmos nosso trabalho e escolher o modelo da etiqueta que deseja utilizar, clique no menu Layout e logo em seguida na opção Configurar Página.

A janela de opções será aberta em sua tela. Nessa janela você deverá clicar na opção Etiquetas na barra de navegação lateral. Note que aparecerão vários modelos de diferentes fabricantes, como já mencionamos. Vamos selecionar a primeira etiqueta e confirmar a ação clicando no botão OK.

Note que a área de trabalho foi modificada com as opções de tamanho da etiqueta que escolheu. Você não precisa se preocupar em ter que desenhar várias em uma mesma folha. Utilizaremos apenas uma como base para a impressão de todas as outras etiquetas que faremos. Por enquanto, não é necessário se preocupar com esse detalhe.

Caso não encontre uma etiqueta do tamanho que se deseja, ou seja, do tamanho da etiqueta que adquiriu, você também poderá clicar na opção de Personalizar etiqueta e configurar manualmente as medidas. Para isso, se assim desejar, retorne ao menu Layout e na opção Configurar Página, escolhendo em seguida Personalizar Etiqueta.

Aqui poderão ser configuradas as seguintes opções:

Em Layout você pode definir a quantidade de fileiras e colunas que cada página terá.

Em Tamanho da etiqueta você pode definir a largura e altura de cada etiqueta.

Em Margens determina o espaçamento entre as etiquetas e as margens.

O Espaço entre colunas estabelece o espaçamento entre colunas horizontais e verticais.

Observação importante: Escolha um tipo de documento compatível com o tamanho da página, ok?

Ainda na janela Configurar Página você possui a possibilidade de aplicarmos um fundo no nosso documento. Para isso é só clicar na opção Fundo. Nessa janela você pode ativar o botão Bitmap e clicar em Procurar para escolher uma imagem em seu computador para ser aplicada como fundo. Ou poderá escolher a opção Sólido para aplicar uma cor única.

As opções que se encontram na seção Origem, servem para escolher se o bitmap será vinculado ou incorporado. Caso a sua escolha seja o de vinculado, sua imagem original sofrerá alterações. Já na opção incorporado, isso não ocorrerá.

Em Tamanho do Bitmap podemos manter seu tamanho original ou alterar as proporções Horizontais e Verticais.

Ativando a opção Imprimir e exportar fundo, o fundo será impresso ou exportado junto com o layout. Se essa opção estiver desativada, isso não será possível.

Agora vamos usar um modelo de uma etiqueta sem informações. Você pode colocar as informações que desejar:

Na sequência, vamos conferir como acontece a impressão do documento. Para isso você deverá clicar no menu Arquivo e logo em seguida na opção Visualização de Impressão.

Note que automaticamente sua etiqueta será dividida em todo o documento.

No canto esquerdo da Janela temos uma ferramenta interessante chamada Layout de Imposição.

Ela permite imprimir mais de uma página de um documento em cada folha de papel. Note a visualização do seu documento:

Depois de escolher as configurações desejadas, clique no menu Arquivo e logo em seguida Imprimir esta Folha agora.

Agora é só esperar a Impressora fazer a sua parte e conferir se o seu trabalho está da maneira como desejou.

Gostou? Você quer outras dicas ou tutoriais sobre Corel Draw? Você pode postar os seus comentários e deixar a sua contribuição. Não esqueçam também de curtir e compartilhar com os amigos… O Blog do Web Design agradece. Até o próximo post!

A Hierarquia Visual no Web Design

Posted: 27 Jun 2013 05:46 AM PDT

Hierarquia visual é um dos princípios mais importantes por trás de um design eficaz. Este artigo irá examinar por que o desenvolvimento de uma hierarquia visual é crucial para o web design, a teoria por trás disso e como você pode usar alguns exercícios básicos em seus próprios projetos para colocar esses princípios em prática.

Design = Comunicação

Na sua essência, o projeto é toda a comunicação sobre o visual: para ser um designer eficaz, você tem que ser capaz de comunicar claramente suas ideias para os usuários, ou então irá perder a atenção deles. Pessoas são volúveis – e se você lhes der um bloco maciço de informações, as chances são de que 99 em cada 100 pessoas não se preocupem em ler o conteúdo do seu site/blog. Por quê? Porque a maioria das pessoas pensa muito mais visualmente do que processando dados e informações.

Para descobrir por que isso é verdade, é importante entender um pouco sobre a maneira como as pessoas vêem as coisas. Ao invés de pegar as informações visuais e processá-las de maneira uniforme, elas organizam o que vêem em termos de “relações visuais”. Veja a imagem a seguir com atenção:

Ao ver esta imagem, você não pensa inicialmente em dois círculos; em vez disso, você processa algo como "um círculo preto ao lado de um círculo vermelho menor". A razão é muito simples: quando apresentado a algo tão simples, uma pessoa vai tentar encontrar uma maneira de diferenciar os dois. Um círculo pode ser maior ou menor, ou de uma cor ou de outra, e estas diferenças nos permitem distinguir entre objetos e dar-lhes significados únicos.

Vamos agora olhar para uma imagem mais complexa:

Provavelmente, agora você classificou a imagem acima como "um conjunto de círculos e um quadrado". Isso é normal. A complexidade na verdade reforça o nosso desejo de “classificar” os objetos em termos de relacionamentos. Diferenças de escala sugerem que um objeto está mais perto de nós do que o outro ou que um é mais dominante do que o outro; Variações na cor podem sugerir que um objeto tem uma personalidade única que o diferencia de outro objeto. Muita informação pode ser entregue em apenas uma única imagem usando algumas ferramentas muito rudimentares. Entender que as pessoas vão ver nossos projetos em termos relacionais é fundamental para fazer de você um designer melhor e mais eficaz.

Mas vamos voltar ao Web Design. Embora possa parecer que criar diferenciações ou semelhanças seja o suficiente para repartir informações, a nossa tarefa como web designers é a de quebrar essas informações em pequenos pedaços visuais e relevantes para tornar a comunicação mais eficaz na hora de passar uma mensagem.

Os princípios da Hierarquia

Há uma centena de explicações sobre o porquê as pessoas vêem as coisas em relacionamentos. Talvez a explicação mais prática seja que essa é simplesmente a maneira mais fácil que nossos cérebros utilizam para categorizar informações: agrupando elementos visuais similares e organizando-os em padrões significativos.

Considere a seguinte imagem de dois blocos de texto:

No exemplo acima, vemos a forma mais rudimentar de um sistema de hierarquia visual aplicada ao texto. As informações em cada um dos dois exemplos não é diferente, mas como ele foi "quebrado" com títulos isso muda dramaticamente a maneira como o percebemos. Quando falamos de hierarquia visual em termos de tipografia, isso é o que queremos dizer. A proximidade, a escala e a semelhança da formatação de texto permite que o leitor o organize mentalmente na busca da melhor leitura. A hierarquia dá aos títulos mais significado do que a outra informação, e torna a distinção entre a chamada e o conteúdo mais fácil para ser processado visualmente.

Tudo bem, até agora isso é tudo muito básico, certo? Vamos dar um mergulho em alguns exemplos mais profundos de como você pode aplicar este princípio básico para alguns projetos mais sofisticados:

As ferramentas hierárquicas

O Tamanho

Os objetos que são maiores demandam mais atenção. Utilizar o tamanho como hierarquia é uma forma interessante de guiar o olhar de um leitor a uma área específica da página. Como essa ferramenta é uma das mais poderosas formas de organização, é importante correlacionar tamanho com importância em um projeto. Os maiores elementos devem ser os mais importantes na maioria dos casos, e os menores elementos deve ser o menos importantes.

Site da C&A coloca tamanhos diferentes nos elementos que deseja destacar primeiramente e secundariamente. Um pouco de contraste aqui ajudou a reforçar esse destaque.

A Cor

A cor é uma ferramenta interessante, pois pode funcionar tanto como uma ferramenta organizacional, bem como uma ferramenta de personalidade. Cores fortes e contrastantes em um elemento particular de um site vão exigir atenção (por exemplo, com botões ou mensagens de erro ou hiperlinks). Quando usado corretamente, a cor pode se tornar um dos mais sofisticados tipos de hierarquia. Ela pode afetar tudo, desde a marca do site até a classificação da informação dentro de uma página:

A Globo.com utiliza cores para representar diferentes categorias de notícias, por isso é fácil encontrar um determinado tipo de informação com base em sua divisão de cores.

Contraste

Contraste pode demonstrar a importância relativa de um objeto ou bloco de objetos. Mudanças dramáticas no texto, de tamanho ou cor transmitem a mensagem de que algo está diferente e isso requer atenção. Mudar de uma cor de fundo clara para um fundo de cor escura pode separar rapidamente o conteúdo do núcleo de uma página de um rodapé, por exemplo.

O contraste entre o corpo arejado e claro e a seção de rodapé, mais escuro, cria uma hierarquia distinta de informações.

Alinhamento

Alinhamento cria ordem entre os elementos. Pode ser tão simples como a diferença entre uma “coluna de conteúdo” e uma “coluna lateral”, mas o alinhamento também pode assumir funções hierárquicas mais complexas. Considere, por exemplo, o poder da informação colocada no canto superior direito da página web. Usuários em geral esperam que as informações nessa parte da tela estejam associadas com áreas de login e senha, carrinhos de compras, etc.

Esse modelo utiliza um layout inspirado em grade para desenvolver uma hierarquia visual orientada

Repetição

Repetição atribui significado em relação aos elementos; Se todo o texto de parágrafo é cinza, quando um usuário vê uma nova caixa de texto em cinza em outro lugar da página, ele deduz que aquela é uma caixa de texto que tem uma relação com a anterior. O mesmo serve quando o usuário encontra um link azul ou um título em preto, ele irá criar associações entre todos esses itens e suas funções específicas.

O UOL cria elementos repetitivos, como títulos e subtítulos, e só quebra a repetição quando quer chamar a atenção.

Proximidade

Proximidade separa os elementos uns dos outros e cria sub-hierarquias. Dentro de uma página pode haver elementos que estão separados um do outro por um espaço. E dentro esses widgets pode haver uma nova hierarquia de título, subtítulos, e conteúdo. A proximidade também é o caminho mais rápido para associar conteúdo semelhante. No exemplo a seguir, é fácil de encontrar certos tipos de conteúdo simplesmente com base na proximidade com o outro.

O site da MicrocampSp tem vários elementos que que reforçam o sentido de proximidade.

Aliás, o site da MicrocampSP tem grandes qualidades hierárquicas: cor, contraste, alinhamento, repetição podem ser notadas aqui.

Aliás, o site da MicrocampSP tem grandes qualidades hierárquicas: cor, contraste, alinhamento e repetição, entre outras, podem ser notadas aqui.

Densidade e espaços em branco

Criar uma variedade de elementos em um espaço muitas vezes pode torna-los “pesados” e desordenados; Quando os elementos são espaçados demais, eles podem perder as relações um com o outro. Quando uma página é projetada da maneira correta, o olho vai reconhecer facilmente os elementos que se relacionam.

Utilizando os espaçamentos e mantendo uma abundância de espaço em branco na página, torna-se mais fácil para as pessoas movimentarem o olhar e encontrar as caixas pequenas, com bastante conteúdo.

Ficou fácil perceber qual conteúdo deve ser observado com mais atenção, não é?

Quando a hierarquia falha

É importante notar que a hierarquia pode ser usada tanto para o bem e o mal. Pense em todas as propagandas irritantes com Flash, janelas pop-up, banners com estrelinhas piscando, entre outras pragas que tem atormentado a web com o passar dos anos. Enquanto esses anúncios conseguirem a atenção do usuário (e, bem, essa é mesmo a função deles, enfim…), isso pode destruir a hierarquia visual dentro de um site. Da mesma forma, se um designer cria uma hierarquia visual de tal forma que algumas peças chave de informação são quase impossíveis de encontrar, ele terá falhado em sua tarefa. Boa hierarquia visual não é sobre gráficos loucos e selvagens ou os mais novos filtros do Photoshop, trata-se de organizar a informação em uma forma que é útil, acessível e lógica para o visitante do site.

Por que Hierarquia deve ser relevante para Web Designers

Nós, como indivíduos, sempre tivemos um grande senso de organização visual. No entanto, como sociedade, estamos sendo bombardeados com um tsunami de informação visual nas duas últimas décadas. Como resultado, as pessoas hoje em dia são hipersensíveis a hierarquia visual. Este é especialmente o caso na web onde os estudos têm demonstrado que os internautas regulares já aprenderam a fazer sua própria”varredura” de conteúdo; buscar automaticamente informações que são relevantes para os seus interesses e descartando a informação que não é.

Devido a isso, aprender sobre hierarquia visual não é opcional, é obrigatório. Como as típicas plataformas expandindo-se a partir do monitor tradicional para telefones, tablets e até mesmo televisores, está se tornando cada vez mais importante que nós usamos sistemas visuais fortes e claros para se comunicar com os internautas.

Um exercício para testar hierarquia visual

Para concluir, eu gostaria de terminar com um exercício muito simples. Como exemplo, vamos usar um site que você frequente, ou um projeto que você trabalhou recentemente. O exercício é assim:

1) Liste os principais pontos de informação que os visitantes estão procurando.

2) Atribua valores (1 a 10) de acordo com a importância do conteúdo para o visitante.

Agora, olhe para o projeto real novamente e faça o seguinte:

3) Atribua valores (1 a 10) de acordo com a real importância visual do projeto;

4) Considere o seguinte: a hierarquia corresponde a importância real projetada?

Na maioria dos casos, a resposta será “não”. Há muitas razões para isso – demanda dos clientes, designers inexperientes, design por comissão – ou por vários outros motivos que você possa imaginar. Em alguns casos, o designer pode até querer enganar o usuário . Seja qual for a razão, a compreensão da hierarquia visual e sua interpretação é uma maneira de melhorar a maneira como você vê o web design através de uma nova luz. Esperemos que isso o ajude a aprimorar o seu próprio trabalho também!

Gostou do tema? Tem alguma outro para acrescentar ou sugerir algo para o próximo Post? Deixe o seu comentário no espaço abaixo dando a sua sugestão e lembre-se: o blog do Web design é feito para você! Queremos saber a sua opinião e receber mais sugestões sobre nosso trabalho.

Um grande abraço e até o próximo Post!

Páginas

quinta-feira, 27 de junho de 2013