Fundamentos do Adobe Illustrator para Web Design: uma introdução aos conceitos básicos (I)

1. Primeiros passos no Illustrator: Ei, todo mundo. Este é Ryan Clark. Bem-vindo ao primeiro projeto da classe Adobe Illustrator para Web Design. Este primeiro projeto deve ser muito simples. Vamos apenas passar e vamos criar um novo documento, editar esse documento, olhar para nossa prancheta, apenas obter nossos rolamentos no Illustrator e ver algumas ferramentas que nos ajudarão com nosso fluxo de trabalho, algumas coisas que você pode simplesmente ignorar, já que não estamos realmente usando mais recursos centrados do Illustrator, e apenas começar e ficar confortável. Então, vamos realmente começar. A primeira coisa que vamos fazer é criar um novo documento. Então, para criar um novo documento, você basicamente vai até o menu Arquivo e selecione Novo. Alternativamente, você pode simplesmente usar o comando N para abrir isso. Este é o novo painel de documentos. Este é o lugar onde você vai configurar sua prancheta e obter tudo configurado para o seu site. Há uma série de predefinições que você pode escolher. Alguns deles já estão definidos para web. 1280 por 800 é o mais próximo do que queremos chegar, não importa que 80. Então, eu costumo ir com 1.200 porque é um pouco mais fácil configurar guias, que vamos chegar mais tarde. Você quer ter certeza de que suas unidades estão definidas para pixels em vez de polegadas ou picas ou qualquer uma das unidades de medida mais centradas no design de impressão. No que diz respeito às configurações avançadas, você quer se certificar de que você está no RGB. Tudo o que precisamos fazer é RGB porque ele vai ser visto através de uma tela. Efeitos raster, tipo da mesma idéia. Como não vamos imprimir nada disso na vida real, ele não precisa ter qualidade de impressão total em 300 PPI. Então, você pode mudar isso para tela e, em seguida, até o modo de visualização, defina-o para pixel, defina-o para pixel, para que todas as nossas formas que criamos em projetos posteriores sejam super nítidas e alinhadas. Explicarei isso quando chegarmos a ele. Mas vamos dar um nome a este novo documento. Vamos começar. Então, o documento aparecerá. Você pode ver basicamente do lado esquerdo aqui, você tem uma barra de ferramentas realmente básica. É aqui que a maioria das ferramentas está localizada. No topo desta área, você basicamente tem um conjunto contextual de opções. Essas opções serão alteradas com base na ferramenta selecionada. Então, se você tiver apenas a ferramenta de seleção direta como eu fiz agora, você vai ter um conjunto de opções. Se você disser criação de tipo e tiver escolhido algum tipo, então você terá um caractere suspenso, parágrafo suspenso, outras coisas assim. Isso é útil quando você está realmente trabalhando com elementos individuais em sua página. Aqui, temos uma série de paletes. Você verá que, na medida em que usando esses pellets, você basicamente apenas clica neles para abri-los. Você pode clicar neles novamente para fechá-los. Se houver alguns que você achar que você usa com mais freqüência ou nunca usa, você pode movê-los, puxá-los para fora e, em seguida, se livrar deles. Na verdade, é incrivelmente fácil personalizar basicamente essas barras laterais para obter apenas as ferramentas que você realmente precisa lá. Então, esta é a configuração geral. Este é o aplicativo em si. É bem simples. Tudo bem. Então, agora que conhecemos nosso caminho, vamos em frente e adicionar alguns guias ao nosso documento. Isso é basicamente apenas vai nos dar um layout realmente simples ou uma grade que podemos organizar os elementos do nosso site com. Será um pouco mais útil quando começarmos a usar algumas das ferramentas de alinhamento em projetos posteriores. Mas, por enquanto, vamos começar com uma linha de base realmente sólida. Então, vamos usar a régua para começar. Você pode usar uma régua pressionando o comando R ou subindo para Exibir, Réguas, Mostrar Réguas. Isso vai ligar a régua. Isso permite que você saiba exatamente qual pixel ou qual o tamanho sua prancheta e permite que você realmente entre em detalhes onde seus elementos estão sendo colocados. Então, vamos em frente e ampliar um pouco. Como nosso documento está configurado para ter 1.200 pixels de largura, sabemos que nossa linha central estará bem aqui em 600. Quero que o design do meu site tenha cerca de 800 pixels de largura. Isso é apenas muito arbitrário, mas apenas uma regra de ouro muito simples que eu desisto. Isso significa que vamos precisar enviar 200 pixels de cada um dos lados. Então, eu vou ir em frente e definir um desses aqui em 200, e depois aqui em 1.000. Então, agora, se reduzirmos o zoom, você pode ver que temos apenas uma linha central muito simples. Temos a nossa margem esquerda, e temos a nossa margem direita toda configurada. Isso é realmente tudo o que você precisa fazer no que diz respeito aos guias. Existem muitos sistemas de rede diferentes que existem. Há uma tonelada que foi escrita sobre isso. Vou postar um pouco disso no projeto extra para que vocês possam ver isso e ligar para alguns artigos. Você pode ficar tão complicado quanto você realmente quer ser. Para algo tão simples como apenas um site realmente rápido de uma página, tudo que você realmente precisa é uma linha central realmente sólida e, em seguida, você é margem é definida lá fora. Então, agora que temos tudo configurado, podemos ir em frente e podemos fazer uma última coisa que é editar rapidamente nossa prancheta. Então, digamos que você está trabalhando em um projeto e você percebe que sua prancheta é realmente muito pequena. O que criamos é quatro por três. Então, ele vai ser limitado com base em quanto tempo nosso site vai especialmente se for um site de uma página, como sites típicos de aterrissagem de uma página que duram para sempre e sempre. Então, se você precisar adicionar mais espaço à sua prancheta, você pode basicamente vir até aqui para a ferramenta Prancheta ou Shift+O. Vá em frente e clique nisso e ele irá colocá-lo nesse modo de prancheta. Neste modo de prancheta, aqui você verá a largura e a altura da prancheta. É muito fácil mudar. Então, digamos que queremos que ele realmente seja 2.000 pixels, você vai e escolhe 2.000 pixels e, de repente, você tem 2.000 pixels de altura. Digamos, uma coisa a observar sobre esta ferramenta é que este ícone aqui está basicamente determinando de onde todos os seus pixels estão vindo. Então, se queremos que os pixels sejam adicionados à parte inferior da prancheta, então precisamos colocá-lo aqui para que o ponto de referência seja o topo. Isso basicamente bloqueará tudo no topo e adicionará conteúdo embaixo dele. Mesma coisa com o fundo, se estamos trabalhando com o rodapé ou algo assim e queremos adicionar espaço acima dele, então nós referiríamos isso para o fundo, e então quando adicionamos nossos pixels eles seriam acima de quaisquer elementos já estavam em nossa prancheta. Isso é realmente tudo para o primeiro projeto. Agora que temos uma prancheta, temos um documento de trabalho, vamos avançar e no próximo projeto começar a trabalhar com formas no Illustrator. Obrigado. 2. Criando e editando formas: Ei pessoal, aqui é Ryan Carter de novo, e vamos começar nosso projeto sobre formas. As formas são realmente o núcleo do ilustrador e permitem que você crie seus elementos de web design com grande facilidade, e gerenciá-los, e agrupá-los, e alinhá-los incrivelmente simplesmente. Eu acho que realmente em seu núcleo é a maior razão para usar Illustrator para web design é apenas o quão fácil é lidar com todos esses elementos. Então, o que vamos fazer é basicamente começar aprendendo como criar algumas formas e, em seguida, como editar essas formas, em seguida, como movê-las, dimensionar , girar, todos os tipos de coisas que você pode fazer para tornar tipo de todos os pequenos pedaços diferentes do design do seu site. Então, primeiro vamos basicamente começar com o, vamos começar com a ferramenta Retângulo. Você vai notar que aqui nós temos a ferramenta Retângulo. Se você mantê-lo pressionado, você pode selecionar todos esses diferentes tipos de formas para criar. Você pode criar formas de duas maneiras diferentes. Você pode clicar e arrastar para criar uma forma, ou você pode clicar duas vezes, o que lhe dará uma caixa de entrada onde você pode digitar em dimensões específicas, se você sabe exatamente o quão grande a forma precisa ser. Você vai notar que se você clicar e arrastar para criar uma forma que você pode criar qualquer tipo de proporção, é totalmente fluida, você pode criar qualquer tipo de forma que você quiser. Se você manter a tecla Shift pressionada, o que acontece é que os lados permanecem em perfeita proporção entre si, que é como você pode criar quadrados perfeitos, círculos perfeitos, qualquer coisa onde os lados estão todos alinhados. Você pode editar formas de duas maneiras. Você pode usar a caixa delimitadora que é fornecida pelo ilustrador para alterar, arrastar, mover, modelar, mover ao redor dos lados, clicar e arrastar, alterá-lo assim, ou você pode alterar elementos individuais de uma forma usando a ferramenta de seleção direta. A ferramenta de seleção direta é esse cara aqui, é o pequeno cursor branco. Então, enquanto a ferramenta de seleção agarrou essa forma inteira como um todo, esta ferramenta vai selecionar pontos ou linhas individuais. Então isso vai permitir que você arraste elementos individuais dessa forma ao redor, e é assim que você vai criar algumas formas complexas. Vamos em frente e excluir essas formas e então vamos passar para editá-las um pouco mais. Então, além de editar e criar formas, você também pode editá-las usando algumas ferramentas integradas, e eu vou mostrar a vocês apenas algumas das que eu uso com mais frequência. Então, a primeira é a ferramenta girar, e a ferramenta girar está bem aqui, você também pode apenas pressionar R para selecioná-la. O que isso vai permitir que você faça é girar uma forma ao redor, e ficar meio tonto fazendo isso. A coisa legal sobre isso é que se você segurar Shift, então ele vai travar isso em 45 graus tipo de pontos de rotações para que você saiba que se você tem um quadrado perfeito e você quer que ele seja um diamante perfeito, então você sabe que você só vai querer girá-lo em 45 graus. Isso vem em super útil para fazer pequenos pontos em coisas, pequenos nubbins, pequenas setas, triângulos, tudo isso. Para criar um triângulo como esse, basta girar um quadrado, excluir um dos pontos, então você pode usar sua ferramenta de caneta para entrar aqui e conectá-los novamente, então você tem um triângulo. Então vamos em frente e excluir esse tipo de mudança para a escala. Então, o dimensionamento é uma das outras ferramentas úteis para editar formas. É bem aqui, a ferramenta de escala, eu costumo chegar apenas usando a tecla de atalho S. Então o que isso vai fazer é nos permitir aumentar ou diminuir o tamanho desta forma pela magnitude da escala, e manter pressionado o shift como as outras ferramentas, vai bloquear as proporções e nos permitir ter certeza de que, embora esteja ficando maior, não estamos perdendo seu tipo original de proporções modeladoras. Lá, ferramenta super útil. Então isso vai nos ajudar a tornar as coisas maiores ou menores quando estamos realmente mexendo com desenhos, tipo de fazer o logotipo maior, é como vamos fazer isso. Mas nós nunca queremos fazer isso, eu quero torná-lo menor. Então, essas são basicamente as principais maneiras que vamos editar formas, vamos mover as coisas ao redor. Uma das outras coisas que é realmente útil no Illustrator é a ideia de copiar formas. Então vamos em frente e excluir isso e então vamos trabalhar em mover coisas e copiar e colar. Então, às vezes seu elemento não está no lugar certo. Obviamente, você precisa colocá-lo. Você pode arrastar as coisas ao redor usando a ferramenta Selecionar como eu estou agora movendo-a, ou se você quiser, você pode manter pressionada a ferramenta Shift enquanto você arrasta, e isso só vai mover sua forma em torno de um eixo horizontal ou vertical ou um eixo diagonal, e isso é realmente útil para mover coisas ao redor quando podemos precisar ir apenas um pouco para o lado ou apenas um pouco para baixo. Nós não queremos perder onde estamos alinhados verticalmente ou horizontalmente, mas nós só precisamos tipo de delicadeza algo no lugar, super-útil. Outra ferramenta realmente útil é apenas usar as setas, que podem mover as coisas ao redor e, em seguida também mantendo pressionada a tecla Shift enquanto move as setas, irá mover as coisas 10 pixels de cada vez, o que é bom apenas uma espécie de empurrar as coisas quando você está olhando algo tão longe quanto como posicioná-lo. Além de mover as coisas, nós também, você sabe de vez em quando, nós vamos querer copiar formas ou repetir formas uma e outra vez para elementos que são realmente semelhantes. Então, a maneira mais fácil de fazer isso é na edição usando copiar e colar. Então as teclas de atalho são apenas Comando C, Comando V, que vai copiar um elemento e colocá-lo em outro lugar no quadro de arte, geralmente bem perto. Também podemos copiar algo e colocá-lo diretamente no mesmo local, tipo de em cima do outro elemento usando o Command F, que também vem muito útil de vez em quando. Um dos outros atalhos super úteis é a capacidade de arrastar e copiar ao mesmo tempo. Então, como você pode ver, eu tenho este pequeno círculo agradável, e eu mostrei antes que você pode segurar Shift e movê-lo, e ele vai movê-lo nesta linha de base. Bem, se eu manter pressionada a tecla shift e também pressionar a tecla de opção, você pode ver que o cursor muda para o cursor de cópia, e o que isso vai fazer é copiar este elemento aqui ou aqui, e fazer uma cópia perfeita disso no novo lugar onde eu disse para ir. Esta é a maneira mais rápida de copiar elementos e eu uso isso o tempo todo. Agora, a desvantagem de copiar elementos como este é que eles nem sempre estão uniformemente espaçados, e isso é um problema, porque queremos que as coisas sejam uniformemente espaçadas e super bonitas. Então, felizmente, o Illustrator resolveu esse problema para nós com um dos meus painéis favoritos nesta coisa toda, e é o painel Alinhar. Então nós vamos descer aqui para Alinhar, você pode tê-lo em seu painel de ferramentas já. O que isso faz é que ele toma várias formas e as alinha de certas maneiras. Você pode brincar com esse tipo de um pouco só para ver como eles funcionam. Vou mostrar-lhe alguns dos mais úteis. Normalmente, muitas vezes o que acontece é que temos vários elementos e vamos precisar bloqueá-los ou tipo de como todos alinhá-los à esquerda para a mesma linha, e isso é para isso aqui. Ele vai alinhá-los horizontalmente todos para a esquerda, que vai movê-los. Agora, um exemplo melhor é usar formas que são todas do mesmo tamanho. Deixe-me ir em frente e fazer alguns destes. Incrível. Então, agora você pode ver. Nós temos essas formas, eles estão um pouco fora. Se quiséssemos dizer, “Pegue todos esses elementos e centralize-os todos juntos em uma linha central, então poderíamos usar esse centro de alinhamento horizontal.” A mesma coisa com alinhá-los à direita e também alinhá-los à esquerda. Agora, uma ferramenta ainda mais legal que está neste painel é a distribuição. Então, o que isso é perfeito para é algo onde eu tenho três elementos e eu quero que eles tenham espaçamento perfeito entre si. Então, você pode ver que eu tenho três círculos. Este tem um pouco de espaço, este tem muito espaço. No que diz respeito ao meu design, quero que sejam iguais, quero que sejam perfeitos. Então, o que eu vou fazer é, eu vou pegar todos os três desses e eu vou usar os objetos de distribuição. O que isso vai fazer é distribuir esses objetos em intervalos perfeitos para que eles sejam exatamente o mesmo espaçamento. Eu uso isso uma tonelada absoluta. É perfeito para quando você tem um design que tem, digamos, quatro depoimentos ou para ícones que você precisa para alinhar aqueles de uma forma onde todos eles parecem uniformemente espaçados. Esta é a ferramenta para fazer isso e é super útil. Então, isso é basicamente para criar, editar, alinhar formas. O que vamos fazer agora é passar para um pouco mais complexas lidando com formas compostas e com grupos. Então, criar formas simples e alinhá-las é muito fácil. Onde entramos em situações um pouco mais complexas é quando temos muitas formas, muitos gráficos, muitos elementos que precisamos para todos interagir uns com os outros de certas maneiras. Então, vamos em frente e criar alguns cenários e mostrar a vocês como lidar com muitas formas que estão juntas. Então, uma das primeiras coisas que você vai notar é que quando eu criar uma nova forma ela sempre fica em cima da forma que eu criei primeiro. Agora, isso é útil se você sempre quiser que o formato esteja em cima, mas às vezes eu não quero. Então, o Illustrator tem basicamente uma pequena ferramenta rápida que permite posicionar um elemento em relação a todos os outros elementos ao seu redor. Tudo isso é gerenciado com o menu organizar. Então, no menu organizar, temos trazer para frente, trazer para frente, enviar para trás, enviar para trás. O que estes basicamente fazem é que isso permite que você mude onde um elemento fica tão longe quanto profundidade em relação a todos os elementos ao seu redor. Há também teclas curtas para que você possa enviá-lo todo o caminho para trás, enviá-lo todo o caminho para a frente, você pode movê-lo para baixo apenas um. Isto é muito fácil. É assim que você será capaz de empurrar elementos na frente e atrás de outros elementos que estão ao seu redor. Então, digamos que eu criei esta bela forma, mas eu queria movê-la por todo lado juntos. A maneira fácil de manter todos esses elementos juntos é basicamente criar um grupo. Então, o que você pode basicamente fazer é subir aqui para objetar e você pode usar a ferramenta Grupo, ou também apenas Comando G. Então , o que isso vai fazer é, ele vai pegar todos esses elementos, ele vai combiná-los em um grupo para que quando eu selecionar um deles, eu vou selecionar todos eles. Quando eu mover um deles, eu vou mover todos eles. Isso é realmente, muito útil quando você tem grupos complexos de elementos que você criou ou ícones, e dentro de contêineres e você quer movê-lo por tudo sem se mover em torno de elementos individuais de algo. Além de agrupar elementos juntos, também podemos combinar elementos em formas complexas. Então, digamos que eu queria criar uma bolha de conversa. Posso fazer isso usando um retângulo e um quadrado perfeito. Então, eu vou pegar o quadrado perfeito. Vou girar isto de lado. Vou mudar isto para cá. Digamos que eu tinha colocado descontroladamente e eu queria que ele fosse perfeitamente centrado, eu poderia realmente fazer isso simplesmente com a ferramenta de alinhamento que mostramos antes. Pegue esses e alinhe-os juntos. Se eu quiser que isto seja um pouco menor, vou levar isso para lá. Obviamente, esta forma geral é certa, mas temos um problema se estas são duas formas. Então, para mudar isso, podemos basicamente passar para o Pathfinder e usar o painel Modos de forma. Modos de forma é muito útil quando você quer criar formas complexas com coisas. O Pathfinder está aqui em baixo. Você provavelmente não vai usar estes uma tonelada, mas você definitivamente vai usar esta ferramenta Unite o tempo todo. Então, clicar em Unite basicamente leva essas duas formas e as combina em uma forma complexa que eu posso então me mover, e em vez de ser totalmente combinado e fazer a bolha de conversa que eu queria fazer. Então, isso é apenas como um simples run-through rápido, tanto quanto como criar formas mais complexas, como lidar com muitas formas que estão juntas. Então, você pode estar dizendo para si mesmo, “Brian, como todas essas coisas vão juntas? Por que você acabou de soprar através de tudo isso super-rápido?” Bem, vou em frente e mostrar a vocês como tudo isso funciona conjunto para criar um design de site simples. Então, vamos em frente e excluir isso e voltar para o nosso arquivo de projeto. Então, o que eu queria fazer é basicamente mostrar a vocês, como eu criaria as formas gerais que compõem uma página inicial protópica. Então, vamos passar por isso juntos. Então, vamos começar com uma área de cabeçalho. Eu não quero ficar super complicado agora, eu só quero denotar essa área de cabeçalho fazendo um grande retângulo. Vou mudar isso por aí. Vocês podem ver que vamos entrar em cores muito mais tarde, mas só por agora vamos em frente e fazer este cinza, seguir em frente. Então, agora eu vou empurrar isso para a posição para que ele fique muito bonito e se alinhe muito bem. Vou me concentrar nesta seção aqui em baixo. Então, eu gostaria de fazer uma área de depoimentos. Como parte dessa área de depoimentos, eu quero criar uma forma que seja uma captura de tela do site de alguém com uma bolha de conversa que tem como um avatar dentro dele. Então, para fazer isso, podemos combinar um monte de ferramentas de forma diferente. Então, eu vou começar com o retângulo arredondado. Vou fazer um cinto retangular arredondado assim. Isso é um pouco grande demais. Então, vamos mudar isso. Eu quero que isso sirva três de largura. Então, vá em frente e faça algo assim. Legal. Isso definitivamente deve funcionar. Tudo bem. Vá em frente e alinhe isso aqui com a minha regra assim. Agora, esses avatares. Eu quero uma espécie de avatar círculo. Eu acho que seria legal ter talvez um pouco de bolha sair do fundo um pouco, para fazer um pouco mais de uma forma complexa. Vamos tentar isso. Para ter certeza que essas coisas estão totalmente alinhadas, eu vou usar minha ferramenta de linha, ferramenta de linha forte. Sim, esses caras estão todos alinhados bem perfeitos. Mova isso só um pouco. Mova isso só um pouco. Eu vou em frente e unir esses dois juntos. Isso é fixe. Temos um carinha, mas eu só tenho um. Então, eu vou mudar isso. Vou pegar estes. Eu vou agrupá-los juntos para que eu possa movê-los um com o outro, e eu vou usar esse comando mover e copiar como eu mostrei a vocês antes. Vou mover um todo o caminho até aqui para a direita. Então eu vou mover um para o centro. Você pode ver que estes não estão uniformemente espaçados. Então, eu vou pegar todos os três. Volte para a ferramenta de alinhamento e use este centro de distribuição horizontal. Agora, eu tenho três elementos da minha pequena área de depoimentos, e todos esses três elementos estão perfeitamente dispostos um com o outro. Isso é apenas ter um tutorial muito rápido que mostra, como você pode usar as formas para projetar pequenos elementos complexos e colocá-los em torno de seu design realmente simples. 3. Tipografia e cor: Nesta parte da aula vamos falar sobre tipo e cores, e eu acho que eu vou realmente fazer isso no contexto deste site que estávamos trabalhando antes do projeto dois. Tipo é incrível no ilustrador. Eu acho que o ilustrador lida com tipo incrivelmente bem. Acho que lida melhor com isso do que no Photoshop. Eu acho que é realmente um dos pontos fortes do programa, já que muito de um web design é tipo. Eu acho que ter uma ferramenta que gerencia bem é incrivelmente útil, e eu estava sempre batendo minha cabeça contra a parede tentando fazer o Photoshop para fazer as coisas que eu realmente queria. Então, vamos primeiro falar sobre como criamos o tipo no Illustrator. Primeiro, usamos a ferramenta de texto. Você vê aqui bem rápido. É por aqui. Você pode usar a tecla de atalho T, para chegar a ele. Clicando, lhe dará um, uma área ou lhe dará um cursor para, em seguida, digitar o seu tipo. Então, podemos, “Isto é uma manchete.” Esta manchete é ousada, feia, e eu gostaria de mudá-la para outra coisa. Então, você pode ver aqui em cima nós temos algumas predefinições realmente rápidas para o seu personagem. Esta é a família das fontes. Este é o estilo específico da fonte, tamanho, parágrafo. Isso é realmente tudo o que você geralmente vai precisar, a menos que você esteja lidando com os parágrafos e coisas, mas se você precisar fazer ajustes individuais, você pode clicar aqui no painel de caracteres. Este é o lugar onde você vai obter todos os seus elementos de caráter. Há tamanho, altura da linha, escala, que nunca, nunca, nunca, nunca, nunca, nunca, nunca, use dimensionamento de tipo porque ele vai distorcer suas fontes, e ele vai ser super feio, e este é o kerning, se você quiser kern coisas para fora. Tudo isso provavelmente é coberto em outras classes. Isto está bem aqui embaixo embaixo do parágrafo. Aqui é onde você vai ver todas as suas opções de alinhamento, justificativa, espaço acima, espaço abaixo, isso é quando você realmente vai estar lidando com toneladas de tipos. Você pode precisar disso para alguns projetos, você pode não. Uma outra coisa para tomar nota é o hifenato. Portanto, a hifenização automática é incrível quando você está trabalhando em um livro ou algo que você vai imprimir, mas não é incrível quando você está trabalhando com sites porque sites não hifenizam palavras. A maioria dos navegadores não tem nada realmente integrado, maioria dos sites não hifenizam automaticamente as coisas quando ficam muito longas. Então, a fim de ver o pano real do seu tipo, e ter uma representação realmente precisa do que um visitante vai ver. Você quer ter certeza de que o hifenato está desligado. Então, primeiro eu quero fazer uma manchete para o nosso site apenas o meu site geral. Está bem. Então, primeiro eu vou lidar com a minha manchete. Vou mudar a fonte aqui para museo sans, que é o que usamos. Vá em frente e mude isso como as nove centenas, bom e grande. Isto é uma manchete. Uma grande manchete incrível. Você notará que você pode usar as mesmas ferramentas de dimensionamento, ferramentas de edição e ferramentas de seleção que passamos no tutorial de formas. Na maior parte, sua linha de texto é tratada como uma forma. Você quer ter certeza de que, quando você estiver dimensionando, você não está dimensionando apenas clicando e arrastando, porque isso vai realmente distorcer o seu tipo. Pretende certificar-se de que está sempre a manter a tecla Shift pressionada para garantir que a proporção do tipo permanece a mesma. Então. Eu vou em frente, e construir uma pequena manchete centrada. Vamos ver. Ok, então agora que temos nossa manchete, vamos em frente e talvez fazer algum subtexto. Então, vamos fazer isso. Então, vamos usar a ferramenta de texto. Se eu clicar na ferramenta de texto como eu fiz antes e copiar em digamos um monte de lorem ipsum, vai ser um problema, porque a ferramenta de tipo normal por si só não tem nenhum recipiente. Então, vamos em frente, e deletar isso. O que queremos fazer é usar a ferramenta de texto e clicar e arrastar para definir uma caixa delimitadora para o nosso tipo. Então, uma vez que definimos essa caixa delimitadora clicando dentro dela vai manter todo o tipo dentro de lá. Então, vou apertar o comando A para pegar tudo. Obviamente, eu não quero que toda essa cópia tenha 48 pontos de altura, nem quero que seja super ousada. Então, vamos movê-lo para 500. Então, isso é bom e legível. Ninguém em sã consciência quer ler tanto no topo de um site, primeiro vai fingir que é deste tamanho. Você notará que pode alterar a caixa delimitadora. Se algo não se encaixa dentro da caixa delimitadora você vai ver este pequeno plus vermelho, para indicar que há mais tipos que não se encaixam. Então, você pode basicamente mudar isso e movê-lo. Isto vai dar-nos apenas uma manchete super simples e sub-cópia. Agora, digamos que nossas linhas estavam um pouco próximas, talvez queiramos afastá-las um pouco mais. É aí que algo como a altura da linha vai ser útil. Como regra geral, eu geralmente gosto de manter as coisas cerca um ponto cinco vezes o tamanho do tamanho da fonte, mas para algo onde, onde é um pouco maior, talvez seja sub-cópia, cópia de título. Gosto de manter apertado, talvez 30. 30 é um pouco melhor do que 28. Dê um pouco de espaço para respirar. Então, você pode ver se reduzimos o zoom. Agora temos uma manchete muito bonita. Lá em cima, mantenha nosso subtipo, lá em cima. Vamos passar para esses depoimentos. Então, eu quero criar apenas um estilo muito bom tipo para esses depoimentos. Diga que quero fazer algumas coisas, o que a pessoa disse, talvez de onde veio, quem é. Isso soa como um grande testemunho. Então, vamos pegar tudo isso, torná-lo apenas tamanho normal de cópia do corpo, digamos 12, talvez reduzi-lo para o tamanho 300. Obviamente, este é o deixar aqui é muito. Queremos descer para 18, levar tudo isso . Obviamente, nós realmente não queremos eles centrados também, ele fica um pouco engraçado lá em baixo, então nós vamos levar isso. Venha até aqui para o alinhamento. Alinhe à esquerda, acho que talvez um pouco maior, que parece pequeno. 14, 21. Bot-a-coisa-bot-a-boom, aqui vamos nós. Então, vamos cortar isso para que eles não sejam incrivelmente longos. Agora, o que podemos fazer é vir aqui e dizer que foram feitas por um cara. Quero que o cara se destaque um pouco. Eu vou em frente e fazer este 900, e talvez ele seja como eu. Ele é de Dayton Ohio. Eu não quero que isso seja super ousado também, então eu vou empurrar isso de volta para 500, e talvez empurrá-lo para baixo em tamanho só para que não seja um super na sua cara. Você também pode fazer algumas coisas legais aqui em cima. Se você olhar na ferramenta suspensa. Você pode fazer as coisas todas em maiúsculas, o que é ótimo, se você quiser que algo sempre esteja em todas as maiúsculas. Você também pode fazer algumas outras opções. Um pouco de um mais complicado, sobrescritos, subscritos, você pode querer pequenas tampas. Normalmente, todas as tampas são as que eu uso com mais freqüência. Então, isso é lá em cima. Está bem. Então, agora que temos isso, vamos querer talvez mudá-lo um pouco. Eu realmente não quero que flua todo o caminho tão longe. Por uma questão de talvez fazer as coisas não tão feias, eu vou apenas cortar essa palavra fora um pouco, mas muito parecido com nossas formas que criamos anteriormente você pode usar as mesmas ferramentas para basicamente garantir que estes são espaçados uniformemente com o resto do tipo. Então, queremos que estes para a esquerda alinhe para os blocos de gráficos acima dele. Então, eu vou pegar todos esses elementos, e eu vou usar minhas ferramentas alinhadas com certeza aqui em cima, e então me mover, e alinhá-los um pouco, e isso vai criar uma área de depoimento realmente agradável Aqui em baixo. Então, agora que temos algum conteúdo recheado, como fazemos com que pareça legal, porque eu gostaria que meu site usasse algumas cores. As cores são importantes e as cores também são, são realmente incríveis no Illustrator, e uma das razões pelas quais eu amo usar este programa. Então, a paleta de cores é realmente onde você vai estar fazendo a maior parte do seu trabalho. Mudando suas cores, mexendo com elas, para ter certeza de que elas são absolutamente perfeitas. A única coisa que eu quero apontar que vai ser super útil para mais tarde é esta ferramenta hexadecimal aqui. Agora, esta ferramenta, RGB cores típicas qualquer coisa em uma tela é um valor RGB. Então, essa vai ser a maneira mais fácil de descobrir quais cores você quer usar, mas quando você pega essa cor você geralmente não pode dar a um desenvolvedor uma cor RGB, menos que eles estejam usando alguns valores RGBA CSS 3 extra complicados. Então, o que você vai querer confiar é no valor hexadecimal. O valor hexadecimal é o que o navegador usa para descobrir qual é essa cor. Então, vamos realmente começar a colorir alguns destes. Então, e se eu quiser que esta área de cima seja azul? Vamos em frente e escolher um azul muito bonito. Vou usar o azul que está mais próximo do meu coração, 0093da. Isso é muito azul. Então, nós temos uma grande área de cabeçalho azul agradável. Talvez eu queira que a manchete apareça e seja branca. Talvez eu queira que isto seja mais um trenó em vez de preto clássico. Então, você pode mover e arrastar esses elementos para mudar as cores para encontrar os que você gosta. Agora, o verdadeiro problema é e se eu quiser usar essas cores repetidamente, e de novo, e de novo? Bem, a resposta é bem simples. Você pode clicar em qualquer forma, pegar sua cor, clicar e arrastar e adicioná-la às amostras. Agora, o que isso vai fazer, é isso vai salvar essa cor, para que possamos referenciá-la, e usá-la repetidamente, e de novo, e de novo. Então, eu quero salvar este trenó, e eu também quero salvar este azul. Agora, você notou da última vez que eu peguei isso daqui. Você também pode pegá-lo daqui, e puxá-lo para lá também. Então, isso vai ser realmente útil para criar uma paleta que você usa mais, e mais, e mais, novamente para ter certeza de que as cores que você está usando são exatamente iguais. Se isso ficar um pouco confuso aqui, o que às vezes acontece, você pode ir até aqui e selecionar todos os não utilizados. Isso vai pegar todas as amostras que você não está usando. E então você pode arrastar amostras até a lixeira para excluí-las. Então, isso basicamente vai nos dar preto e branco e as duas cores que definimos como nossas cores para nosso design. Então, vou mudar-me para cá e vou fazer a mesma coisa com estes. Vou pegar esses caras. Eu vou torná-los desta cor manhosa. Agora, quando eu pegar um bloco inteiro de texto, ele realmente vai colorir tudo dentro dele. Se houver um elemento específico do texto que você deseja ter uma determinada cor, então você pode entrar com sua ferramenta de texto, e selecionar apenas isso, e então subir e denotar a cor que você acha que deve ser em vez disso. Então, eu vou ir em frente e fazer estes azuis, talvez eu não queira que isso se destaque tanto, então eu vou talvez torná-lo um pouco mais claro cinza. Então, espero que tudo isso lhe dê uma alça sobre como você usar cores e tipos para adicionar um monte de personalidade e obter algum conteúdo real em seus projetos de site. 4. Adicionando estilos e efeitos: Olá novamente, e bem-vindos ao quarto projeto desta turma. Este projeto é tudo sobre estilo e adição de estilo para os vários elementos do seu site. Então, a fim de ilustrar todos esses pontos, vamos começar apenas fazendo um botão realmente legal na parte superior do nosso site para tipo de dar a todos um chamado à ação geral. Então eu vou seguir em frente e começar apenas com um quadrado básico. Eu vou criá-lo aqui em cima, movê-lo para o centro para que ele fique muito bem. Então acho que vou escolher alguma coisa, vamos em frente com a nossa ficha. Só para que seja bom e pesado. Vamos dar a este botão um rótulo que apenas diz, “Faça algo incrível”, vamos torná-lo branco para que ele fique afastado e nós vamos apenas centralizar os alinhamentos também. Incrível. Agora temos o botão sentado aqui, mas não parece tão bom. Então, vamos começar dando-lhe uma fronteira. Então, os pensionistas estão bem aqui, é tecnicamente chamado de derrame. Você pode colorir seu traçado como faria qualquer forma normal usando esta paleta de cores aqui em cima. Então, eu vou em frente e apenas torná-lo branco por enquanto. Para realmente mudar a forma como o traço parece, para adicionar qualquer tipo de elementos extras, você pode vir aqui, a parte mais importante disso é basicamente o peso onde você pode tipo de mudar a maneira que sua fronteira funciona, quão grosso é, e como ele rodeia o objeto em que ele está. Então você pode alinhar essa borda para o meio, você pode alinhá-la para o interior, ou você pode alinhá-la para o exterior. Mas você pode ver porque eu tenho uma forma quadrada, os pontos de todas as minhas fronteiras são quadrados. Uma coisa que eu posso fazer é basicamente escolher esta ferramenta de canto para entrar e dizer ao ilustrador que eu não quero que esses elementos tenham um ponto de canto super, super afiado, eu quero que eles sejam um pouco arredondados. Isso funciona muito bem, e apenas dá alguns de seus elementos mais quadrados uma sensação um pouco mais suave. Eu realmente não quero que isso seja branco porque ele se destaca um pouco demais. Então, eu vou talvez selecionar uma cor personalizada. Vamos em frente e escolher a cor de fundo e então, talvez eu queira que seja um pouco mais escuro do que o fundo. Sim, isso é bom. Então vamos em frente e adicionar um gradiente aos nossos botões apenas para deixá-lo ficar um pouco fora. Vamos para a barra de ferramentas de gradiente, vamos selecionar o botão que queremos dar um pouco de profundidade. Nós vamos selecionar o tipo de gradiente que queremos, vamos usar um gradiente linear, modo que é um 90 negativo, então isso é apenas bom e vai para cima e para baixo. Você pode basicamente pegar essas cores e arrastá-las para baixo em seu elemento para alterar as diferentes cores que compõem seu gradiente, qual cor ele está fazendo a transição. Você pode criar várias etapas no meio clicando em outros pontos ao longo deste gradiente, e você pode clicar neles e arrastá-los para eliminá-los, que parece bom. É apenas um gradiente muito simples para dar a esse botão um pouco de profundidade para que as pessoas que visitam seu site definitivamente vão querer clicar nessa coisa. Agora, além de adicionar gradientes a coisas, você também pode usar um conjunto de estilos de camada e efeitos que o ajudarão a editar suas formas e dar-lhes um pouco de estilo adicional. Então vamos explorar alguns desses. Um dos que eu uso mais frequentemente é na verdade o raio da fronteira. Então você pode ver que nós temos um simples botão quadrado. Mas, eu pessoalmente amo um botão de canto arredondado agradável. Então, eu vou subir aqui para afetar cantos arredondados estilizados. Agora isso vai me dar uma pequena caixa de diálogo que me pergunta, quão arredondado eu quero que eles sejam. Você pode ir em frente e visualizá-los apenas clicando neste pequeno botão de pré-visualização aqui. Eu costumo fazer em algum lugar em torno de cinco pixels, isso é o que geralmente me parece bom. Então agora temos alguns cantos arredondados em nosso botão, vamos explorar alguns dos outros efeitos que nos ajudarão a adicionar um pouco de profundidade. Nós vamos para a área de depoimentos para realmente experimentar isso. Então, eu vou pegar todas essas formas, vamos em frente e torná-las brancas. Quero fazê-los ficar um pouco fora da página. Então, para fazer isso, vou usar todos eles. Vou usar o brilho exterior. Agora, eu prefiro brilho externo para soltar sombras só porque é um pouco mais fácil de gerenciar, e porque com brilhos externos o brilho é uniforme e começa no centro de uma forma em vez de parecer que tem luz direcional. Então, para mim esta é a maneira preferível de adicionar um pouco de brilho ao exterior. Então, eu quero ir em frente e mudar o modo para multiplicar, isso vai nos dar um brilho agradável todo o caminho ao redor. Eu não gosto que isso seja super escuro, então eu costumo ir para algum lugar por volta dos 25 ou 15, talvez apertar o borrão um pouco. Eu realmente quero que seja sutil, então eu vou ir em frente e fazer isso, depois tirar isso. Então você pode ver que apenas adicionando um pouco de brilho ao lado de fora desses elementos, eles realmente começam a sair da página um pouco, e essa é uma maneira super fácil de dar uma profundidade mínima sem soprar as coisas muito longe. Se você adicionar esses efeitos a coisas, você sempre pode editá-los super facilmente mais tarde usando o painel de aparências aqui. Então o que o painel de aparência faz é, ele diz tudo sobre uma forma e o que está sendo aplicado a ela. Então você pode ver que não há traçado, tem um preenchimento branco, tem um brilho externo, tem opacidade padrão. Você pode visualizar essas coisas desativando-as e ativando-as, você também pode clicar duas vezes em um efeito para editá-las rapidamente e alterá-las. Talvez isso fosse um pouco mais leve e eu queria que fosse mais escuro, então eu poderia entrar e ajustar isso imediatamente. Você também pode pegar todos os efeitos e simplesmente excluí-los completamente, agarrando-os e movendo-os aqui para o lixo. Isso irá reverter as coisas de volta ao que eram antes de terem qualquer estilo aplicado a elas. Então, esse é o rápido run-through de estilos de camada, gradientes, bordas e apenas como você pode embelezar seus elementos para torná-los mais interativos e dar-lhes um pouco mais de profundidade. 5. Adicionando imagens: Então, com os últimos quatro projetos que passamos por cima, como configurar seu documento, como criar formas e como criar os elementos do design do seu site, mas isso deixa de fora uma das maiores partes do web design e isso é imagens. Então, este projeto vai ser sobre como importar imagens para o seu documento, gerenciar imagens, e apenas usá-las em geral. A primeira coisa que vamos rever é como realmente colocar imagens em seu documento. Então, a maneira mais fácil de capturar imagens e puxá-las para o documento é, na verdade, apenas arrastá-las para o documento. Eu fiz isso com algumas imagens aqui que vamos usar no tutorial e isso também deve estar no arquivo ilustrador que eu forneço mais tarde, mas essa é realmente a maneira mais fácil de jogar coisas aqui. A outra maneira que você pode fazer isso é vir até aqui para o comando Lugar, e você será capaz de pegar, e selecionar uma imagem de qualquer outro lugar no seu computador, e isso apenas irá colocá-la dentro do seu documento. Então, uma vez que você tem uma imagem que você quer usar como eu vou usar este café cinza como apenas um fundo geral para a minha área de cabeçalho. Então, eu vou escalá-lo um pouco, que ele se encaixe. Vou usar o comando para empurrá-lo para trás. Então, isso é todo o caminho atrás e então eu vou usar uma ferramenta super legal chamada máscara de recorte. O que uma máscara de recorte faz basicamente é, ela pega uma imagem de ilustração grande, qualquer coisa que seja realmente grande, e usa outra forma para basicamente cortá-la nessa forma mestre. Então, a maneira mais simples de fazer isso é basicamente ter duas caixas. Vou em frente e fazer isso com o cabeçalho. Então, você basicamente faz isso pegando as duas formas. Verifique se a forma que você deseja cortar está atrás da forma que você deseja realmente ser a máscara. Vamos até aqui para Object, Clipping Mask e Make. Agora, você pode ver o que isso fez. Levou toda essa imagem grande, cortou-a para o tamanho da forma do cabeçalho que eu tinha criado anteriormente. Então, o que você pode fazer para realmente editar é que você pode usar a ferramenta de seleção direta, que permitirá que você pegue o elemento em si, e você pode fazer coisas como colorizá-lo. Mas agora, tem essa imagem dentro dela. Então, eu quero um pouco desse azul para mostrar. Então, eu estou realmente indo para usar a ferramenta de seleção direta, para selecionar esta imagem, e então eu vou vir aqui, e talvez mudar a opacidade para baixo. Vamos apenas ir com talvez algo como 30, que parece um pouco melhor. Eles podem vê-lo fantasmagado lá atrás um pouco, apenas dar-lhe um pouco de personalidade. Então, você pode ver máscaras de corte em algo talvez um pouco mais complicado aqui embaixo. Então, eu vou pegar alguns dos meus colegas de trabalho favoritos e transformá-los em avatares. Então primeiro, como antes, alguém vá em frente e mande isso para trás. Vou tomar esta forma, já que faz parte de um grupo. Vou em frente e desagrupá-lo, para que possa ser tudo por si só. Então, eu vou usá-lo como uma máscara, e você pode ver que ele leva isso, e você pode até usá-lo para formas compostas, bem, que eu acho muito legal. Então eu quero fazer isso com o resto desses caras. Coloque-o, mande para trás, grupo que vamos apenas [inaudível] isso. Agora você pode ver que eu estou usando a ferramenta de seleção direta, e eu posso realmente mover essa imagem para apenas tipo de colocar tudo onde eu quero, eu posso dimensionar essa imagem de volta lá, usar as ferramentas de seta para realmente posição que, onde eu acho que ele deve ir e onde ele realmente parece o melhor. Você não precisa fazer todas as edições antes de colocar as coisas nas máscaras de recorte. Então, agora temos três caras legais, relaxando em nossa seção de depoimentos. Eles são todos alguns caras, e eles disseram algumas coisas que são legais sobre, qualquer que seja o meu site falso. Eu estou indo para ir em frente e realmente ilustrar outra coisa legal sobre máscara de recorte, e isso é que você pode realmente cortar máscaras dentro de uma máscara. Você pode fazer todo o recorte que quiser, você pode ver que esta é realmente uma máscara de recorte também. É apenas uma interface que foi cortada dentro deste pequeno quadrado arredondado muito bonito. O que eu vou fazer é, na verdade, usar este mesmo recipiente aqui em cima para realmente colocar isso no cabeçalho também. Então, veja, eu vou pegar essa caixa delimitadora, da minha imagem da cafeteria. Eu vou copiar isso, e então realmente colá-lo no lugar, e você pode ver que ele cola exatamente onde estava antes. Então eu vou usar esta forma como a máscara de recorte para a minha interface. Agora eu posso realmente pegar isso e eu posso movê-lo em torno tanto quanto a profundidade está em causa também. Então, se eu quiser, posso fazer outras coisas como, vir aqui para mover isso um pouco para cima. Ele tem uma pequena borda agradável na parte inferior, eu vou talvez, Eu posso clicar duas vezes aqui para realmente editar o que está dentro de uma máscara de recorte. Isso só vai me deixar lidar com o que está dentro daquela máscara de corte, e eu posso meio que aguentar isso talvez, eu não quero que ele seja tão alto para realmente entrar no lixo. Então, eu vou mover isso para baixo, ou talvez deixar meu botão um pouco menos enorme porque é bem grande. Vamos levar isso aqui, ao longo de projetar seu site, você vai acabar com um monte de imagens aqui, e é fácil perdê-las de vista. As coisas realmente boas que o ilustrador incorporou nele é um painel Links. Você pode ver bem aqui, eu só vou arrastá-lo para cá. Isso informa todas as imagens, que estão vinculadas dentro do seu documento. Agora, há dois tipos de imagens dentro de um documento ilustrador. Há imagens incorporadas e há imagens vinculadas. As imagens incorporadas são ótimas porque elas são realmente incorporadas ao seu documento. Mas isso também é uma espécie de queda deles, porque quanto mais imagens incorporadas em vez de um documento, maior o tamanho do arquivo do documento fica. Se você quiser manter o tamanho do seu arquivo pequeno, então você pode simplesmente vincular a imagens externas como fizemos com a imagem da nossa cafeteria usando a ferramenta local. Isso irá mostrar apenas como uma imagem, enquanto imagens incorporadas, imagens que são colocadas diretamente em nosso documento, mostram com esta pequena ferramenta incorporada. Outra pequena coisa legal sobre este painel, é que ele tem um botão de link real e também um ir para o botão link. O botão ir para o link, vai realmente permitir que você selecione uma imagem e ele irá levá-lo diretamente para onde essa imagem está dentro do seu documento, e selecioná-la para você. Realmente útil se você tem toneladas de imagens, e você está tentando mudar para fora dizer uma delas e você só quer encontrar onde ele é muito rápido. Isso é realmente uma espécie de essência de como as imagens funcionam no ilustrador, e como você pode adicioná-las ao seu documento, para tornar as coisas um pouco mais pessoais. Então, agora que temos esse tipo de imagens lá dentro, vamos rapidamente criar o resto do design do site e eu vou mostrar a vocês como eu faço as coisas à medida que eu vou. Então, nossa área de manchete está muito bem definida. Nós temos uma grande manchete, algum tipo de subtipo, e geralmente, você vai ter algumas explicações lá em cima quando, chamada à ação, gráficos legais, um pouco de área de depoimento. Vou em frente e criar uma pequena regra para basicamente separar isso do resto. Em vez de ser branco, eu gostaria que isso provavelmente tornasse esse tipo de cor lustrosa. Não, muito escuro. Vamos fazer isso realmente cinza claro. Feito. Isso parece incrível. Então, eu realmente gosto dessas caixas, então eu vou usar essas caixas novamente para talvez uma pequena área aqui em baixo que chama alguns de digamos seus recursos do meu aplicativo que eu estou construindo. Eu ia usar este tipo novamente porque é apenas lorem ipsum. Pode basicamente, vamos ver, espalhar isso para que vá para duas contagens. Podemos voltar a ligar os nossos guias para sabermos como fazer isso. Vamos em frente e fazer isso. Adicione algumas linhas aqui. Eu vou dizer que isso é uma característica de algum tipo. Agora, digamos que eu quero que ele imite alguns dos outros tipos que estão em torno do meu documento. O que eu posso fazer com a ferramenta conta-gotas é basicamente ir e encontrar outro conjunto de tipo e clicando nele, Eu posso imitar esse tipo completamente. Então, você pode ver que ele copia tudo, desde a fonte até o espaçamento até o alinhamento. Então, eu vou mudar isso de volta para dar um pouco de alinhamento. Agora isso é aqui, mas essas coisas estão bastante espaçadas um pouco longe demais para o meu gosto, então eu vou pegar isso, eu vou deletá-lo, e eu vou usar um recurso de parágrafo. Certifiquem-se de que têm este tipo. Então, este é o espaço após parágrafos e isso realmente permite que você basicamente digite uma quantidade de espaço que você deseja vir após apenas uma linha específica ou uma quantidade de texto que você selecionou. Eu uso isso muito para essa coisa exata, que é você pegar um título, você quer adicionar um pouco de espaço extra, você não quer seu grande título, e toda sua pequena cópia corporal apenas sentar-se bem ao lado do outro. Então, basicamente, podemos usar isso. Também podemos fazer outras coisas legais como agarrar isso e aparecer, talvez mudar sua cor para que todos esses recursos sejam chamados com azul. Talvez queiramos puxar isso um pouco mais apertado para que ele se encaixe e, em seguida, centralizar essas coisas horizontalmente só para que não tenhamos este espaço funky aqui em baixo. Podemos fazer isso aqui em cima com o nosso alinhamento. Use o horizontalmente alinhado verticalmente e então sabemos que tudo está bem ao lado um do outro. Agora, se eu quisesse que isso dissesse que talvez você queira criar um segundo conjunto destes, podemos usar que arrastar e mudar tudo permitir manter pressionada a tecla de opção para basicamente criar outro conjunto desses que são apenas os mesmos espaços um pouco próximos. Então, vou deixar isso aqui um pouco. Todos os bons sites têm um rodapé. Então, eu vou talvez denotar isso. Vamos criar um pouco. Vamos criar uma área mais ajustada. Pegue isso com o espaçamento para ser praticamente o mesmo que o que está lá em cima, então talvez puxe isso para baixo. Incrível. Isso funciona muito bem. Eu vou entrar aqui com o meu tipo, e vamos em frente e dar um bom, vamos ver, Copyright 2014, Ryan Clark, Todos os direitos reservados. Não copie as coisas. Vamos usar esse cara aqui para deixar o erro de digitação branco. Então, selecionador de cores. Agora precisamos de direitos autorais. Todos os direitos autorais precisam de um símbolo de copyright real. Então, vou mostrar a vocês como podem ter acesso aos glifos do seu tipo. Basicamente, você quer ir até uma janela. Eu quero ir aqui para baixo digitar, abrir seus glifos, e isso abre seu painel de glifos. Isso basicamente mostra todos os caracteres de sua fonte inteira para que você possa cavar através, a menos que você conheça os atalhos e encontre exatamente o que deseja. Então, o que você quer? Direitos autorais. Clique duas vezes como está no seu tipo. Super legal. Vamos apenas ir em frente e fechar isso. Os direitos autorais não precisam ter 24 pontos de altura, então podemos ir em frente e fazer isso 11. Vai arrefecer aqui em nossa área de rodapé. Bom, centrado. Então, isso só vai para o esqueleto do site super simples. Se eu fosse continuar em frente a isso por uma hora, provavelmente lançar alguns exemplos de sites talvez dessas pessoas ou algum tipo de imagem contextual, outro tipo de imagem para adicionar lá atrás, uma coisa que eu posso mostrar a vocês como se quisessem talvez fazer esses pop off do fundo um pouco, você poderia entrar e adicionar apenas uma borda branca muito agradável, talvez dar um pouco de tamanho extra para que ele se destaca um pouco. Você pode voltar e eu pego esse cara. Você também pode usar o conta-gotas para copiar estilos de forma que são apenas super, super úteis. Então, eu vou pegar estes e dar a eles a mesma fronteira. Então, agora esses caras sobem um pouco essas formas de fundo para que eles não estejam tão em cima deles. Então, como eu disse, este é apenas um esqueleto muito, muito geral. Na verdade, vou incluir isto no arquivo da turma só para que vocês o tenham e possam usar e mexer com ele se quiserem. Isso é melhor. Ninguém gosta de filtros super brilhantes. Então, espero que tenham gostado desta aula, tirado algumas coisas dela. Felizmente, eu não brilhar sobre nada muito mal, mas estas são realmente as ferramentas que eu uso todos os dias para construir sites para Ferb e para outras pessoas, para os meus clientes. Eu acho que o Illustrator é uma ferramenta absolutamente fantástica para Web design apenas baseado na forma como ele lida com formas e com o tipo, que são realmente o núcleo de qualquer site. Então, esperamos que estejamos desenvolvendo essa classe no futuro para adicionar alguns recursos mais avançados e passar por coisas ainda mais legais que o Illustrator faz. Mas este é apenas um ótimo ponto de partida. Então, continue trabalhando. Atirem-me as perguntas que tiverem. Estou sempre por perto. Estou no Twitter na Ryanvsclark. Mal posso esperar para ver o que vocês inventaram sobre os seus projetos para a aula e obrigado por seguirem . Tchau caras. 6. Explore o design na Skillshare: maneira.