Design de UI e web design usando o Adobe Illustrator CC

1. Introdução: Oi lá. Meu nome é Dan e sou instrutor certificado pela Adobe para o Illustrator. Nesta série de vídeos, usaremos o Adobe Illustrator para criar um projeto de design da Web e da interface do usuário juntos. Usaremos projetos do mundo real. Vamos começar com o nosso portfólio. Você sabe o portfólio, aquele que você tem planejado construir para sempre, mas não tem rodada. Vamos construir isso agora juntos. Fiz este curso para iniciantes. Você realmente não precisa de nenhum conhecimento prévio do Illustrator ou de qualquer outra experiência de design. Vamos começar com o super básico. Não importa se você deseja usar o Illustrator para aplicativo ou web design, as técnicas são as mesmas. Vamos passar por todo o processo de interface do usuário. Mostrarei a você como usar o Illustrator para criar sitemap e, em seguida, criar seus primeiros wireframes. Em seguida, começaremos a projetar nosso tablet móvel e site de desktop usando fontes de sites, cores e imagens responsivas. Criaremos nossos próprios ícones e logotipos personalizados, aprendendo a usar a ferramenta Caneta e a incrível ferramenta Construtor de Formas. Quando terminarmos, você saberá exatamente o que se espera de você como designer de interface do usuário, fornecendo imagens retina responsivas e código CSS para que seu maravilhoso web design seja reproduzido perfeitamente como um site. No final desta série de tutoriais, há um projeto. Ele tem tarefa definida que você precisa fazer para um cliente adequado, e você pode usar isso como parte de seu portfólio para ajudar a construir isso. É como dever de casa, só que vou chamar de desenvolvimento de portadores. É hora de aprimorar suas habilidades, conseguir um emprego melhor, e impressionar seus clientes. Não sei, começam a acenar quando começo a falar, como se estivesse num musical. 2. Já sou um designer de UI/UX?: Agora a questão é, depois deste curso, eu vou ser um designer de UX de barra de interface do usuário? Você vê isso em todos os lugares, eles andam de mãos dadas. São coisas muito diferentes. Após este curso, você pode dizer: “Sim, eu sou um designer de interface do usuário”. Eu posso construir interfaces de usuário, como sites que estavam indo para fazer, e design de aplicativo que é interface de usuário. - Sim. Usamos ferramentas como o Illustrator, entre outras que você poderia usar para ser um designer de interface do usuário. Agora, em termos de UX, experiência do usuário, isso é uma chaleira totalmente maior de peixe ou uma coisa diferente. Você usará o design de interface do usuário como parte de ser um designer de UX, mas há muitas outras coisas que fazem um designer de UX. Há muito mais em torno como definir objetivos, há pesquisa, há testes, e então há passar por toda a fase de construção de um projeto também. Agora não vamos cobrir o design de UX neste curso. Eu tenho um outro curso completo sobre ser um designer de UX, então vá ver isso. Isso está se concentrando mais na interface do usuário, que é uma parte da UX, mas não a coisa toda. 3. Design de UI no Photoshop vs Illustrator vs Sketch vs InDesign vs Adobe XP: Neste vídeo, vamos falar sobre quais produtos fazem o quê, porque a Adobe tem muitos deles. Há alguns outros concorrentes também sobre web em design de interface do usuário. Vamos falar sobre os principais produtos da Adobe. Falaremos sobre o InDesign versus o Photoshop versus o Illustrator, qual deles você deve usar. O que você deve usar é o Photoshop ou o Illustrator. Photoshop tem uma pequena vantagem sobre o Illustrator, principalmente para mim é algo chamado de visualização do dispositivo. Se você tem habilidades no Photoshop, eu tenho um curso completo do Photoshop, é exatamente como este Illustrator 1 fazendo UI web design, então vá verificar isso. Mas estamos aqui para aprender Illustrator. Photoshop tem a ligeira vantagem para especialmente web design sobre o Illustrator, mas não o suficiente para dizer não use nenhum deles, ambos são bastante incríveis. Illustrator vamos olhar para ele este curso completo, e é perfeito para web e interface do usuário, mas também lhe dá habilidades em termos de design de logotipos e símbolos. Muitas pessoas vão aprender o Illustrator porque tem dupla finalidade. Você começa a usá-lo para um monte de coisas diferentes, bem como impressão, bem como web. Vamos falar sobre o InDesign. O InDesign seria impossível para mim. Você pode fazer o web designer, há um arquivo, um novo documento e você pode escolher alguns recursos da Web, mas está faltando muito dos itens que o ajudam a desenvolver a interface do usuário para Web e aplicativos que eu usaria se você fosse alguém que só tivesse o InDesign o problema é que você não conseguiu um emprego como web designer usando o InDesign. Então, sim, o InDesign está perdendo muitos recursos. É só para documentos. É mais como uma grande versão do Word. O próximo grupo deles é algo chamado XD, Experience Design da Adobe, é novo, ainda está em pré-visualização, é muito legal, mas ainda está em pré-visualização e está faltando muitos recursos. Eu usei algumas vezes e é muito bom, mas não é como um produto completo de produção ainda. Eu ainda estou usando coisas como Illustrator e Photoshop, enquanto XD eventualmente, eu sinto que ele será o produto a ser usado para web design talvez. Isso é definitivamente um que é extensivamente se concentrar mais no desenvolvimento de aplicativos do que na web. Acho que essa será a sua casa. Será para desenvolvedores de aplicativos ou designers de aplicativos. Coisas como o Illustrator e o Photoshop permanecerão para a comunidade de web design. O último produto a falar é algo chamado Sketch. Está fora do reino da Adobe. É outro produto concorrente. O produto com o qual ele mais concorre é o Experience Design Adobe XD, porque é mais um design de aplicativo. Se eu fosse agora ser um proprietário completo da Adobe fazendo aplicativos, eu estaria me certificando de que minhas habilidades de Sketch eram muito boas também. Você pode fazer tudo no Illustrator, é totalmente bom, seus desenvolvedores de aplicativos não vão odiá-lo, mas Sketch é bastante no momento em termos de procura de emprego. Então Sketch é um produto muito legal para usar, mas é especificamente para o aplicativo. Você pode usá-lo para a web, não é problema com isso, mas eu sinto que o Photoshop e o Illustrator são melhores em fazer essas coisas da web. Há muito mais produtos maduros e eles têm muitas outras possibilidades para fazer outras coisas. Sketch é apenas realmente especificamente para aplicativo e web design, enquanto esses outros dois produtos têm muito mais escopo em termos de outras coisas que você pode fazer com essas habilidades. 4. Qual é a função do Illustrator ao projetar um site: Então, qual é o papel dos Illustrators em todo esse negócio? Ok, então, como um web designer, você pode decidir terminar nos limites de onde o Illustrator pára, e o que você deveria fazer, dizer que você é o designer, você teria que trabalhar com o desenvolvedor ou web designer, ou web designer front-end, alguém que faz o HTML e CSS porque próprio ilustrador não faz realmente um site. Ele o desenha, a aparência e a sensação, obtém tudo na posição certa, as cores, as fontes, e usamos isso como um modelo para construí-lo em código. Ok, agora, é aí que você pode terminar. Você pode apenas entregar no final aqui. Se eu fosse seu web designer, estaria esperando um monte de JPEGs, PNGs e SVGs, então apenas imagens. Gostaria que me dissesse que fontes são, que cores são, quais são os tamanhos, quais são as caixas coloridas, quão longe elas estão umas das outras. Eu vou querer essas coisas e isso vem de você para mim como CSS, e vamos olhar neste curso como isso é feito. Ok, então você pode decidir ir um pouco mais longe e você quer fazer todo o processo de web design. O que eu vou fazer é transformar esse design específico que estamos fazendo aqui no Illustrator ele e nós vamos realmente construí-lo no Dreamweaver também, apenas para torná-lo uma série completa agradável. Então, se você é mais baseado em impressão e se você só quer ficar desse lado, ilustradores onde você terminar. Mas se você quiser seguir em frente um pouco mais e talvez obter uma pequena introdução ao código, talvez não seja tão assustador quanto você pensa, espero, você vai movê-lo para algo como Dreamweaver e construir o site completo nisso. Então esse é o papel do Illustrator. 5. Baixe os arquivos de exercício, arquivos concluídos e folha de consulta: Tudo bem. A primeira coisa que precisamos fazer é pegar os arquivos de exercícios. Haverá um link na descrição ou nos sites aqui em algum lugar. Podemos sair e pegar os arquivos de exercícios, e eles são apenas as imagens que vamos usar, qualquer texto que usarmos, qualquer recurso que eu fale. Então faça o download deles, e a outra coisa que vai estar lá em cada vídeo específico, haverá um link para algo chamado arquivo completo, e isso significa que quando estamos fazendo algo em um curso, quando eu chegar ao fim, eu vou clicar” Salvar”, e eu vou colocá-lo em uma pasta especial, e nomeá-lo como o vídeo para que se você está fazendo isso e o seu não parece igual, você pode baixar minha versão, conferir, abrir o Illustrator e ir, “ Oh, é assim que ele fez isso”. Então você apenas compara esses dois, eles são chamados de arquivos completos e eles estão apenas em vídeos onde eu realmente faço qualquer coisa. A última coisa é a folha de batota. A folha de truques é algo que eu faço e haverá um link na tela sobre hereish, Taylor, vá, e você pode ir lá e é um PDF para download, imprimi-lo. Há uma versão de vídeo também, compartilhá-lo por aí e é só isso. Quando terminar este curso, você vai ser como, “Estou bem agora. Eu quero ir mais rápido, quais são todos os atalhos”. É para isso que serve a folha de batota. Vá e baixe tudo isso e então vamos para o próximo vídeo. 6. Preparando suas preferências do espaço de trabalho e do Illustrator para o trabalho com UI: Oi. Neste curso, o que vamos fazer é analisar a configuração nosso Illustrator para trabalhar com design da Web e do aplicativo. Há algumas coisas que precisamos mudar causam o momento por padrão, quando você instalá-lo e enquanto você está usando, é assumindo que você está lidando com material baseado em impressão. Então está usando medidas físicas e como milímetros, centímetros ou polegadas. Então precisamos ir e mudar algumas coisas. A primeira coisa que vamos fazer é abrir um novo documento. vamos para Arquivo Novo e há muito ao longo do topo aqui vamos para Web e vamos começar com Comum e basta clicar em “Criar”. Legal e o que vai acontecer é que vai ser padrão para algumas coisas que precisamos mudar. Então, para fazer isso, vamos para o Illustrator CC e vamos para Preferências e vamos para as Unidades primeiro. Se você estiver em um PC, ele estará em Editar Preferências, portanto, em Editar e até a parte inferior aqui ele irá dizer Preferências. Então, sob Mac, ele está aqui e nós vamos para Unidades. Esta é a primeira coisa a mudar, é General, seu provavelmente vai ser definido para polegadas se você está na América e se você está algum lugar que não usa polegadas ele vai ser definido para milímetros ou centímetros. Precisamos mudá-lo para pixels. Essa é a medida que usamos quando estamos lidando com design de interface do usuário, vamos escolher pixels. Mesmo com o traçado, ele lida com pontos tradicionalmente, mas precisamos lidar com pixels e o mesmo com o Tipo. As fontes são projetadas para usar tamanhos de pixels em vez de, eles não estão longe, pixels e pontos não estão tão longe em termos de medidas, mas usar pixels. Ok e vamos clicar em “Ok”. A outra coisa que precisamos fazer é configurar nossos documentos da mesma forma em termos de nosso espaço de trabalho. Você pode ver aqui o meu está todo confuso porque eu tenho andado brincando com ele. O que você precisa fazer é ir para o topo aqui, ir para a janela, ir para o espaço de trabalho e o seu provavelmente está definido como Essentials e parece algo parecido com isso, mas vamos para o Window, vá para o Workspace e vamos configurá-lo para Web sem surpresa, não Sem surpresa. Você pode ver se o seu ainda está misturado como o meu, o que podemos fazer é voltar para a Web, e eu vejo que isso é Web, mas vamos dizer Reset Web, por favor. O que ele faz é reiniciá-lo, um espaço web, essa coisa sempre aparece e é um pouco irritante, vá embora. Essa é a interface para garantir que o seu se pareça com o meu, para que possamos seguir em frente. 7. Sitemap vs Wireframe: Neste vídeo, vamos falar rapidamente sobre o que é um sitemap versus um wireframe. Esses dois podem se confundir quando falo com as pessoas, então é muito fácil mostrar a você. Isto, meus amigos, é um sitemap. É como um fluxograma de mostrar quais páginas vão para onde em seu site. Um wireframe é uma maquete de sua página, mas apenas usando gráficos realmente básicos, então espaços reservados para imagens, espaços reservados para texto, e nós não estamos realmente incluindo o logotipo, apenas escrevê-lo lá. É apenas para divulgar ideias em algum tipo de ordem sobre onde as coisas podem ir, em vez de trabalhar em desenhos, cores e fontes imediatamente. Isso é o que é chamado de wireframe, e isso é o que é chamado de sitemap. Vamos para o próximo vídeo. 8. Criando um sitemap no Illustrator: Ei! Neste vídeo, vamos olhar para fazer um mapa do site. Agora, podemos fazer isso em alguns programas. Vou mostrar a vocês como fazer isso no Illustrator porque é uma aula do Illustrator, mas depois vou mostrar por que não faço isso no Illustrator, principalmente porque leva tanto tempo. Vamos sair rapidamente. Primeiro de tudo, vamos falar sobre como eu tradicionalmente faço isso. Vou fazer um Sitemap apenas à mão no meu caderno. Agora, se eu estou lidando com meu próprio site, é apenas à mão; é isso, game over. Eu desenho-o. Agora, se eu estou fazendo isso para um cliente, eles estão esperando um nível mais alto de apresentação, então eu vou fazê-lo no Illustrator ou eu vou fazê-lo em algo chamado Muse, que eu vou mostrar rapidamente em um segundo. Mas não há nenhuma ferramenta real especificamente para isso. Vamos usar o Illustrator para começar. Vamos para File, New, e vamos fazer, provavelmente porque vai ser impresso e enviado para o cliente, vai ser A4 e eu vou fazer isso paisagem. Eu vou criar, se você nos EUA, ir para a letra. Tudo o que você faz, não é particularmente emocionante, é pegar ferramenta retângulo. Vou dar o meu preenchimento branco ou não, e vou colocar uma linha preta ao redor do lado de fora. Em termos do traço, vou configurá-lo para um pixel. O seu pode estar definido para o ponto ainda. Não se preocupe, use apenas um ponto por enquanto. Vamos mudar isso daqui a pouco. Sitemap é mostrar ao cliente o fluxo do site de onde as coisas estão indo para ir, como ele vai ser estruturado. Então o que você pode fazer é desenhar uma caixa e pegar uma ferramenta de texto e você diz que esta é a sua página inicial. Vou centralizar esses dois juntos selecionando os dois, e no topo aqui eu tenho algumas opções e há aquele ali que diz centro. Agora vou desenhar a minha próxima página. Eu provavelmente vou mover isso um pouco mais e eu vou copiá-los e colá-los. Então edite copiar, editar , colar, eu vou alinhá-lo. Este aqui vai ser a minha página do produto. Ótima. Vou digitar isso usando meu teclado. Próxima página, e você pode ver que é um pouco monótono. Não é tão ruim, depende de quão grande a estrutura precisa ser. Eu vou entrar aqui e esta vai ser a minha página Sobre Nós. Eu provavelmente deveria centralizar este texto para facilitar, mas você entendeu a idéia. Agora, eu preciso juntá-los, e há uma ferramenta de segmento de linha aqui. Agora o seu pode estar escondido debaixo de alguns destes. Então clique e mantenha pressionado e agarre o segmento de linha. Vou clicar em segurar e arrastar. Você pode ver que se junta a esses dois. Este aqui, é muito bom em alinhar as coisas. Se sua coisa não está se alinhando, você pode ver o meu, ele tem esse lindo Intersect, todos esses como, ver essas linhas cor-de-rosa pulando em todos os lugares. Você pode ativar e desativar isso na exibição, e há um chamado guias inteligentes. Então eu tenho isso no momento, você pode ver que o meu próprio aqui não está realmente desenhando uma linha, você vê isso deixado lá para trás. É porque quando eu comecei a desenhar, você pode ver que eu não tenho derrame, nenhum preenchimento, e isso pode cortar você. Então eu vou pegar minha flecha preta. Eu os tenho selecionados ainda, e eu vou dizer, você meu amigo precisa de um golpe negro. Você pode ver que o traço é o forro do lado de fora. Este primeiro aqui é o preenchimento, e como esta é uma linha, ele não tem um preenchimento. Esse cara aqui ainda existe, mas ele não tem derrame, sem preenchimento, então ele não imprime, então ele não é muito útil. Vou excitar esse cara. Isso é bom. Agora queremos construir isso. Então queremos pegar a ferramenta de segmento de linha e começar a desenhar esta. É isso. Há apenas um monte de caixas, um monte de copiar e colar, um monte de linhas para eles, certificando-se de que eles se encaixam. Então não é super tinha. Mas se eu vou fazer um wireframe, eu provavelmente não vou construí-lo desta maneira. Vou entrar em algo chamado Muse porque é super fácil e faz parte da licença da Creative Cloud. Então, se você tem esta versão mais recente aqui, você terá o Muse, e se você usá-lo, você pode totalmente usar o Illustrator. Continue com o Illustrator, continue construindo essa coisa. Então, provavelmente, onde o maior problema vem não é tanto construção, é quando precisamos mudar as coisas, precisamos mover isso para cá. Isso precisa vir também, então estamos selecionando todos esses ajustes, e esses ajustes se tornam um pouco mais difíceis. Então vamos saltar para o Muse e por que eu amo isso por apenas fazer o grampo. Então baixe e instale o Muse, você não precisa. Vou fazer um novo site. Em termos de largura da página, não estamos preocupados com isso no momento. Eu só vou clicar em OK, e nós vamos ficar aqui na verdade. No Muse, só para que você saiba, é um programa de Web Design sem usar nenhum código. É muito legal e eu tenho um curso sobre isso se você quiser ir e fazê-lo. Mas vamos usá-lo neste caso. Faz parte do processo do Illustrator e do design da interface do usuário por causa dessa bela exibição do plano. Por isso, certifica-te de que estás no plano. Você pode ver aqui eu já tenho uma página inicial que é útil. Então eu posso clicar neste pequeno botão Plus e você pode ver, hey, eu posso colocar na minha página do produto. Quando eu digo página do produto, é como se estivéssemos construindo um site para widgets, que é onde os widgets iriam lá. Agora, vou colocá-lo na minha página Sobre Nós e você pode ver o quão rápido é esse fluxo de trabalho. Entre em contato conosco. Então, quando vamos para produtos, podemos dizer, eu gostaria, dizer produto, e soletrar produto A. Você pode fazê-lo produto A, e assistir isso. É aqui que é bom. Você pode ver que ele fez isso, juntou essas linhas, tem um pequeno fluxograma legal rolando. Torna-se muito fácil construir um mapa do site. Pode continuar construindo isso. Você pode continuar adicionando bits, você pode movê-los. Então, observe, a página “Sobre Nós” precisa estar lá. Você pode ver que este interruptor é redondo e é provavelmente por isso que eu mais gosto. Agora, dependendo do tipo de fluxograma ou mapa do site que você está fazendo, você pode fazer isso aqui em cima. Você pode ir horizontal ou vertical, o que quer que o exiba de forma mais clara para o seu cliente ou para si mesmo. Então eu vou voltar a isso, o tamanho. Você pode torná-lo grande ou pequeno para caber em muitas peças diferentes, e é isso. Eles já estão rotulados. Eles têm linhas-pequenas e fluxogramas. Agora, a pergunta pode ser, o que eu faço com ele agora? Não há Exportar PDF do Sitemap, que deve ser uma função muito legal no Muse, não é. Tudo o que faço é tirar uma captura de tela e, em seguida, editar também no design ou no Illustrator apenas como uma imagem. Então esse é o meu fluxo de trabalho. Você pode não gostar deste preto aqui. Você pode fazer algumas coisas básicas. Você pode passar por instalar as fontes e tudo mais, mas você pode fazer algumas coisas. Diga que quer colocar isso, vou para o Adobe Muse na parte superior e vá para Preferências. Se você estiver em um PC, essas preferências estão ocultas em Editar na parte inferior aqui. Então eu vou para as preferências. O que você pode fazer é mudar o pano de fundo para esta cor mais clara aqui. Em seguida, você pode fazer uma captura de tela em um PC. Na verdade, havia um botão chamado captura de tela. É perto de onde estão os botões Home e End Page Up. Em um Mac, ele será Command Shift 4 e, em seguida, basta clicar em Manter pressionado e arrastá-lo para fora. Vou tirar uma captura de tela. Então o que eu faço é abrir o Illustrator. Livrem-se de vocês porque demoram muito. Então eu vou para File, Place, e das minhas capturas de tela, aqui está você, coloque-as lá. Então eu desenho em torno dele. Eu poderia colocar em coisas como o nome do trabalho, o nome do cliente, esta versão do Sitemap. É muito importante. Então, há um que eu fiz, quase me preparando, atribuição da interface do usuário lá. Então eu tirei uma captura de tela da versão preta. Acabei de adicionar o nome do meu cliente, o nome minha agência de design. Eu dei-lhe uma versão, e coloquei o meu logotipo, só para marcá-lo e dar-lhe um pouco, eu acho, olhar e sentir para o seu cliente que você está entregando. Então lembre-se à mão é perfeitamente bom quando você está lidando com seus amigos, seus amigos, e seus pais. Acho que não vou mais longe do que isso, mas quando há um cliente pagante, muitas vezes essa expectativa ou esse nível em uma reunião seria esperada. Você pode usar o Illustrator, arrastar caixas e juntá-las. Nada de errado com isso, ou você pode pular para o Muse e usar essa ferramenta legal, tirar uma captura de tela, despejá-la aqui. Então, isso é configurar um sitemap para o design do seu site. 9. Quais tamanhos de tela usar para o web design de desktop e dispositivos móveis: Ei aí. Neste tutorial vamos fazer essas pranchetas no Illustrator. Este vai ser o nosso tamanho de desktop, este vai ser o nosso tamanho de tablet, e este vai ser o nosso tamanho de celular. Vamos descobrir quais tamanhos precisamos para fabricá-los primeiro, e então vamos construí-los no Illustrator. Precisamos descobrir quais tamanhos usar e isso pode ser um pouco difícil porque ele muda ao longo do tempo e há tantos tamanhos de dispositivos, mas eu tenho alguns conceitos básicos para você usar que o que a maioria das pessoas usa, e se você quiser ser mais informado sobre o que está saindo, ou quais dispositivos estão lá, há um site muito legal chamado mydevice.io/devices. Então vá para esse URL inteiro lá de uma só vez. Ele só lhe dá coisas interessantes sobre quais tamanhos. Agora ignore essas alturas físicas e larguras, use as larguras CSS. Isto é o que usamos como nossos designers, isto é pixels de largura, e podemos ver que o novo iPhone 7 tem 375 pixels de largura. Isso lhe dá um bom indicador de talvez meu celular precise ser sobre isso ou pelo menos incluí-lo porque é um dos telefones mais populares. Você pode ver o 6 mais, o grande telefone gigante é ainda maior e eu ignoro esse, eu deixo ele lidar com o tamanho do tablet porque é um telefone tão grande, é aquela coisa grande favorita. Cobre o iPhone 6 e você pode ver todos os anteriores também não obter acima de 375 mesmo. Então eu costumo escolher o meu tamanho móvel para ser 400 para incluir todos esses, mas você estará excluindo um casal. O gigante favorito, acho que tem alguém aqui em baixo como o Nixes 6. Era um pouco maior, é um telefone grande. Abrange a maioria deles. Passaporte Blackberry, é enorme. Então isso é para celular. Você pode ver aqui embaixo para o tablet logo abaixo. Você pode começar a olhar para esses. Ignorei o iPad Pro. Por quê? Porque é tão grande quanto uma área de trabalho. Se você já foi a uma Apple Store e ver o MacBook, iPad Pro eles são enormes. Eu não desenho para aqueles para tablet. Eu deixo esses para usar o tamanho da área de trabalho, mas eu cubro este. Então esse é o tamanho que uso para o tablet 768. Agora não há nenhuma razão para você não escolher especificamente outros tamanhos. Se você estiver trabalhando com um desenvolvedor ou web designer após este projeto, pergunte a ele. Diga, hey, eu estou projetando o site que tamanhos você precisa, e eles podem te dar aqueles que o diferente que eu estou dando aqui, mas estes serão realmente típicos. Então 400 para o celular, 768 para o tablet, e então você começa para a área de trabalho. Desktop é um pouco diferente, é para isso que você quer projetar, e eu vou te dar o que eu faço. Vamos fazer File, New. Vamos começar com o desktop é o nosso primeiro design, e você pode ver se temos uma web. Temos um monte de tamanhos diferentes aqui. Há web, mínimo, tamanho grande, comum, você pode escolher qualquer um desses, realmente não importa. O que eu gosto de começar é 1200 de largura, principalmente porque é divisível por nossas redes que vamos aprender um pouco mais tarde. Ainda é um tamanho comum. A altura vai mudar muito quando estivermos trabalhando, então vamos deixá-la em qualquer altura que ela for padrão, e vamos mudá-la depois porque depende do conteúdo. Orientação vai ser paisagem, e nós não vamos adicionar nenhuma lâmina ou qualquer coisa, e nós vamos ter certeza de que seu RGB. Vamos clicar em “Criar”. Ótima. Então esta é a página 1, eu vou diminuir um pouco segurando Comando menos, ele amplia para fora. Agora vou me mover segurando a tecla da barra de espaço, clicando e arrastando. Então, se você manter pressionada a tecla da barra de espaço no teclado, clique e arraste, ou você pode usar esses pequenos controles deslizantes ao redor. Eu tenho este primeiro e eles são chamados prancheta em vez de páginas. O que preciso fazer agora é criar outra prancheta para o tamanho do meu tablet. O que eu vou fazer é que há algumas maneiras, a maneira mais fácil é chegar aqui em cima. Há uma chamada ferramenta prancheta, clique nele. Isso me permite mudar o tamanho disso se eu quiser. Mas o que eu vou fazer é eu vou clicar nesta pequena opção aqui, ele diz nova prancheta. Pode ver que meu cursor fica carregado com uma duplicata desse cara. Você pode clicar em qualquer lugar. Ele vai dizer que você, saia daí. Vou deslizar através da minha barra de espaço. Agora, quão grande deve ser o tablet? Nós vamos estar fazendo a largura e altura, não a coordenada x e y, neste caso estamos na largura e altura. Agora já falamos sobre isso antes. Quão grande é que vai ser? Vai ser 768. Qual é a altura que vai ser? Vai depender do conteúdo. Nós vamos projetá-lo provavelmente um pouco mais, mas não estamos preocupados com isso no momento, então não enfatize a altura que isso é. Vou movê-lo um pouco. Então, está ao lado da minha área de trabalho, e agora vou fazer a minha versão móvel. Agora eu não posso ter um novo de novo, mas isso é fácil, você já fez isso. Se você manter pressionada a tecla Option no Mac ou a tecla Alt no PC, e puder ver o cursor mudar para essa pequena seta dupla, significa que vai duplicá-la, e acho que essa é a maneira mais fácil de arrastar outra versão. Você pode manter a tecla Alt pressionada e arrastar para fora muitas versões. Só quero três no momento. Então eu vou ter meu desktop, meu tablet e agora meu celular. Minha versão móvel, já falamos sobre isso antes. Estamos usando largura. A largura neste caso vai ser 400. Engloba todas as novas versões do iPhone lá até sete agora, mas quem sabe o que vai ser? Isso nos dá um pouco de espaço para brincar. Se acabar sendo algo estúpido como o 380, não precisamos voltar e redesenhar nosso site para celular. A altura novamente, vai mudar dependendo do conteúdo. Então é muito mais fino. O que faremos antes de nos afastarmos disso. Criamos nossas páginas, temos uma versão para tablet móvel e desktop, vamos nomeá-los, e precisamos encontrar sua guia pranchetas. Se você não conseguir encontrá-lo, vá para Janela e vamos até Pranchetas. Meu primeiro, Artboard 1, vou clicar duas vezes nele, e este será chamado de minha área de trabalho, e eu vou dar um nome para que todos saibam que estou usando 1200 pixels. Não muda nada, é só um rótulo. prancheta 2 é meu tablet e 768 pixels de largura, e meu celular será de 400 pixels. Ótima. Vou diminuir o zoom. Lembre-se de Command menos ou Control menos em um PC, barra de espaço para se mover. Estamos chegando lá. Vamos salvá-lo, File, Save. Agora para este curso eu vou colocar tudo na minha área de trabalho, eu vou fazer uma nova pasta, e este vai ser o meu portfólio Dan, e eu vou dar-lhe V1. Na verdade, você percebe o nome da pasta, então vamos chamá-lo de Portfólio do Dan para criar, e agora o nome real disso, então isso vai ser chamado de Portfólio do Dan. Dê o seu nome, porque vamos construir um para você enquanto estamos indo junto e dar-lhe V1. Precisa de algum número de versão, pode ser números ou letras, nunca chamá-lo de final. Final é o beijo da morte. Você provavelmente tem arquivos chamados final 2, final revisitado, final novo, então apenas V1 e você vai acabar com muitas versões diferentes. Vamos clicar em “Salvar”. Deixe tudo por padrão aqui, e vamos clicar em “Ok”. Que meus amigos é como escolher os tamanhos e criar suas primeiras pranchetas para o nosso design. 10. O que é um sistema de diagramas e design para dispositivos móveis responsivo: Ei aí. Neste vídeo, o que vamos fazer é falar sobre sistemas de grade e web design responsivo. Então, quando as pessoas falam sobre responsivo, tudo isso significa é que vou projetar um site que responda ao dispositivo diferente que estou usando. Então, pode ser que se eu estiver visualizando, digamos este site aqui, meu site, bringyourownlaptop.com em um desktop, ele se parece com isso. Mas quando chega a um tamanho móvel, diga algo assim, você pode ver que o site muda para melhor usar propriedade da tela ou o tamanho da tela para essa exibição. Você pode ver que esses caras estão um pouco alterados. Eles vão lado a lado, mas quando estão na área de trabalho, há quatro em uma fileira em vez de dois em uma fileira. Quando chega ao celular, ele muda ainda mais. A grande mudança está no celular. Decidi que aquela grande imagem no topo, aquele bonitão sorridente aqui desaparece. Ele não é útil em dispositivos móveis. Estou correndo em uma propriedade imobiliária. Então eu estou indo direto para o básico e usando alguns pregos aqui. Então isso é empilhado um em cima do outro em uma coluna, mas tablet, é em dois e quando ele está fora na área de trabalho, é quatro. Assim, esses ajustes podem melhor usar o tamanho da tela, é o que é chamado de web design responsivo. Então, o que estamos fazendo quando usamos o Illustrator é que precisamos projetar para essas três visualizações. Para que quando o site está sendo construído por você ou pelo desenvolvedor, eles saibam o que eles precisam para ajustar o tamanho todos os seus sites para se parecer com aqueles tamanhos de tela diferentes. Agora, a próxima coisa a olhar é o que é um sistema de grade. Porque essa é a maneira mais comum de dividir este site é, o que acontece é que há uma grade de 12 colunas subjacente que corre ao longo de todas as páginas da web, e é assim que você divide o conteúdo. Então o que acontece é que é muito semelhante se você estiver no design de revistas parentais, uma grade de 12 colunas em um jornal se acostuma para ajudá-lo a obter consistência em muitas páginas. É o mesmo aqui no web design. A maneira mais fácil de vê-lo é na nossa versão final. Então este é o nosso projeto final. Há a versão para desktop, a televisão e o celular. O que acaba acontecendo é assistir a isso, se eu ligar as grades que eu tenho, você pode ver que eu dividi a área de trabalho, mesmo certificando-se que eu tenho em mente este 12 colunas. Eu não teria isso a meio daqui ou a meio desta coluna, todos eles vão para igual a 12. Então esse cara aqui é quatro deles. Então 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, todos somam 12, espero. Minha matemática é ruim. Mas isso significa que esse cara no topo aqui, esta linha está na verdade abrangendo todos os 12, e tudo bem. Esses caras aqui precisam ser ajustados um pouco. Meu projeto, eles estão abrangendo essas duas colunas aqui. Preciso alinhá-los um pouco melhor, e esse cara aqui, ele se estende por tudo porque não há nada aqui. Então vamos olhar para o que fizemos e redesenhar para o tablet. Agora o que fazemos é que eu poderia colocar 12 colunas aqui, mas vocês podem imaginar se eu comprimir 12 dessas colunas até aqui, mesmo que tecnicamente tudo se torne um pouco mais difícil de projetar com centenas de linhas atravessadas, fica ainda pior quando chega ao celular. Você pode ver o que eu fiz e o que você vai fazer como designer é, eu não preciso de todos os 12. Esse ajuste finito é demais para mim. Você pode gostar e você pode manter suas 12 colunas. Acabei de colocar seis aqui, então 1, 2, 3, 4, 5, 6 e dividi-los uniformemente. Então, há um que abrange três, aquele que abrange três. Então ainda é divisível por 12. Você pode ver que isso se estende como metade dele, que seria seis e que seria seis. Então ainda estamos usando a grade de 12 colunas. Mas visualmente, é muito difícil ver tantos deles. O que decidimos aqui é que vou desligar as grades, é assim que eu quero que pareça quando estiver em um tablet. Quando for feito em um celular, quero mudá-lo novamente. Então nós mudamos um pouco neste, a navegação mudou aqui em baixo, e nós usamos praticamente todo o caminho para baixo. Usamos a largura completa, que é as 12 colunas inteiras. Quero voltar a ligar as grades. Quando estou trabalhando a partir de dispositivos móveis, muitas vezes eu apenas lido com duas colunas. Então são seis desse lado, seis desse lado. Eu só usei dois só para facilitar um pouco. Você pode colocar 12 lá, mas torna-se uma verdadeira dor de cabeça para alinhar as coisas. Então esse é o sistema de grade e é assim que os web designers do outro lado, dividem seu conteúdo. Você não pode fazer 13 porque é muito difícil dividir o meio porque é um número ímpar. Então números pares, na maioria das vezes são 12 colunas. Então vamos no próximo vídeo, veja como fazer essas colunas para que você possa projetá-las. 11. Como criar um diagrama de 12 colunas responsivo no Illustrator: Olá pessoas maravilhosas. O que vamos fazer neste é que vamos realmente adicionar esses guias para nossas visualizações para que possamos usar essa grade de 12 colunas adorável e começar com nosso design. Vamos fazer isso. Agora vamos fazer nossas grades, antes de você, se você mover o quadro de aplicativos, as grades não aparecem para o passeio facilmente. Basta colocá-los para fora como você quiser. Realmente não importa como você tem suas placas de aplicativos, mas eu vou alinhar o meu desta forma, talvez um pouco mais perto. Agora eu estou movendo com a placa de aplicativos também. É esse cara lá embaixo que move suas páginas. A primeira coisa que precisamos fazer é pegar nossa ferramenta de retângulo, clicar nesse cara aqui. Você pode estar preso na ferramenta círculo ou ferramenta retângulo arredondado abaixo pegar a ferramenta retângulo para mim. Em termos de tamanhos, eu quero um preenchimento branco ou nenhum preenchido. Esse é o centro da caixa e esta é a linha ao redor do lado de fora e eu quero que isso seja qualquer coisa menos algo que possamos ver em um fundo branco, então preto funciona para mim. Vou clicar em “Segurar e arrastar ”, e podem ver que o meu está a tentar estalar. Você pode ver que é claro que a pequena palavra é o Intersect dele. Se o seu não estiver ajustando a ele, vá para Exibir e ative essa coisa chamada guias inteligentes ou comando U em um Mac ou Control U em um PC. É muito útil para usar, especialmente nesta fase. Eu vou ampliar um pouco, lembre-se de comando menos ou Controle menos e eu vou desenhar uma caixa em toda a coisa. É um pouco de um faff, um pouco. Temos uma caixa grande, e agora o que vamos fazer é dividi-la em colunas. Encontramos isso em Object e depois em Path, e então há um que diz dividido em grade, e este divertimento colegas caixa, nós não queremos linhas, queremos colunas, os altos e baixos. Vamos colocá-lo até 12 e em termos de larguras, não estamos preocupados com isso, o que estamos preocupados é com a sarjeta. As colunas que você viu no início lá, há lacunas entre elas, e há um tamanho muito comum para elas. Poderá ter de verificar com o programador ou com o CMS que está a utilizar. Na maioria das vezes, a calha entre eles está em cada lado da coluna é de 15 pixels. Isso é de cada lado, quando eles estão próximos um do outro, eles somam 30. Aí está sua calha definida para 30 pixels e vamos clicar em “12" e certifique-se de ativar Adicionar guias. Eu vou mostrar na pré-visualização para que você possa ver do que estamos falando. Teria sido mais fácil. Você pode ver que eu tenho 15 pixels e, em seguida, 15 pixels de cada lado dessas colunas, juntos eles fazem 30. Vamos clicar em “Ok”. Agora o que eu quero fazer é, o que eu realmente quero é pegar minha seta preta, minha Ferramenta de Seleção, e eu clicar nessas guias que foram feitas, então eu vou clicar com o botão direito do mouse neles e ir para Desagrupar. Eu não quero este horizontal, eu só quero que a coluna não é essas linhas aqui. O que podemos fazer agora é passar, na verdade vou selecionar esses caras aqui. Se você já usou o Illustrator antes de pensar, ótimo eles são guias. Eles são como linhas físicas que estão na coisa usar esses guias. O que eu preciso fazer agora é, eu vou baixá-los para baixo, só para que eles se encaixem no topo lá. Eles cutucam o fundo aqui e o que eu vou fazer é estendê-los até o fundo. Eu tenho todos eles selecionados. A maneira mais fácil de selecionar todos eles, se você é novo, Black Arrow, selecione todos apenas os tops tippy deles porque nós os desagrupamos, ele deixou esses caras para trás. Eu vou arrastá-los para medir até o topo e descer aqui embaixo, eu vou rolar para baixo, e eu vou arrastar isso para baixo bastante longe. Eu não tenho idéia de quanto tempo esta página vai ser e é mais fácil fazê-lo aqui quando eu arrastá-lo para baixo. Eu tenho tudo isso feito, eu tenho eles ainda selecionados. Não se preocupe que um é mais escuro que os outros. Eu cliquei nele por acidente, ainda vou trabalhar e nós vamos descer para ver. Vamos aos guias. Tem um aqui que diz “Faça guias”. Sei que sentimos que já fizemos isso, não se preocupe. Esses são guias apropriados agora. Agora o que posso fazer é ir para Minha visão e posso ir para Guias. Por padrão, o seu já pode estar bloqueado. Se estiver escrito desbloquear guias aqui, não clique nele. Mas o seu é provavelmente como o meu e diz Guias de Bloqueio que significa que não posso movê-los agora. Consegui batê-los, mas agora não posso. Agora, todo esse lixo que isso foi deixado para trás, há um pouco disso. Foi embora. É assim que se transforma em uma grade de 12 colunas. Você pode rebobinar e tocar essa coisa algumas vezes, ele fez para mim quando eu comecei a fazer isso, então não se preocupe. É assim que você configura suas colunas. Agora o que nós também vamos fazer é, porque eu odeio projetar direito a esta borda aqui. O que eu faço é pegar meu quadro branco como eu estendê-lo um pouco, só para que eu tenha alguma área de jogo. Só significa que é mais difícil projetar dentro dessa caixinha e você quer dizer que ele atrapalha tudo até esta idade e simplesmente não parece certo. Vou te mostrar o que parece aqui. Você pode ver aqui eu tenho esta área aqui e é espaço em branco. Sei que nem sempre está lá, mas muitas vezes está lá. Expandi-o como designer só para poder ver alguns pedaços extras. Eu sei que a largura entre esses dois guias é 1200, que é perfeito e uma pequena dica rápida para você é se você arrastar isso para fora, digamos este cara à esquerda aqui, se eu segurar minha tecla Opção no Mac, bem, o Tecla Alt em um PC, você pode ver que há ambos os lados, apenas me dá um pouco de espaço de manobra. Agora, mesmo eu dizendo para não movê-los, nós vamos movê-los junto. Não há guias por aqui, então estamos bem. É duro e repita para o resto deles. Vamos fazer o próximo para o tablet e vamos fazer este juntos. Vou arrastá-lo para fora, vamos torná-lo um pouco mais rápido, vamos para Object. Vamos pegar o Caminho, vamos para Split Into Grids e eu vou dizer, vamos fazer 12 desses caras. Eu falei sobre isso mais cedo, 12 é muito, então eu reduzi para seis porque é divisível por 12. Você pode colocar 12 aí, eu gosto de seis para cortar. A sarjeta entre esses caras ainda vai ser 30 e eu vou clicar em “Ok”. Não, vou dizer “Faça Guias”. Vou clicar em “Ok”, e eu cuido disso. Saiba que o que vamos fazer é que eu vou selecioná-los. Vou clicar com o botão direito do mouse neles e dizer Desagrupar, e eu vou clicar apenas nos tops tippy para esses caras, e eu vou carregá-los para baixo e então eu vou dizer View, eu vou ir para guias, eu vou dizer Faça Guias, e eu não tenho que ir e bloqueá-los novamente, eles estão todos bloqueados por padrão. É como geral você não bloquear caras particulares, você bloquear todos os guias em todas as páginas. Se eu for aos guias agora, você pode ver que eu posso destrancá-los, mas eu não posso bloqueá-los porque eles já estão trancados. Posso selecionar tudo isso, adeus. Pegue a ferramenta de placa de aplicativos, mantenha pressionada a tecla Alt no PC ou a tecla Option no Mac arraste os lados para fora, basta dar-me um pouco de uma sala de jogos e vamos fazer a próxima. Agora, eu quero que você saia e faça o próximo sozinho. Você pode pausar o vídeo e ver que você pode dar-lhe uma rachadura. Eu vou fazer isso aqui e você pode avançar para o próximo filme se você tem a idéia. Eu tenho este selecionado, ele realmente não precisa ir para o fundo. Esse é o meu TOC e lembre-se, nós vamos para o objeto e nós vamos para o caminho, e nós vamos para baixo para dividir para a grade. Neste caso, vamos usar apenas dois. Eu poderia colocar quatro se você preferir, se você vai fazer algumas coisas legais aqui no celular, eu não vou. Vou colocar a calha em 30. Eu continuo pensando, ok, você vai fazer isso também. Certifique-se de clicar em “Adicionar guias”. Esqueça isso toda vez, clique em “Ok”. Temos nossos 10 guias, vamos selecioná-los, clique com o botão direito neles. Estou usando minha flecha preta. Vá para Desagrupar. Eu vou selecionar apenas os tops tippy para eles, pegar um deles, e arrastá-lo para baixo. Alinha-se no topo. Ótima. Agora vou fazê-los um pouco mais. Eu tenho que fazer por esses caras, eu vou pagar por isso mais tarde. Está tudo bem. Arrasta isto para baixo. Agora vamos para Exibir, vamos para Guias, e vamos para Criar Guias e então ele já está bloqueado, então podemos pegar todo esse lixo que sobrou, clicar em “Excluir” e agora temos uma grade de 12 colunas em todos eles, que nós temos confortavelmente apenas para baixo seis e dois sobre estes aqui. Eu vou usar a ferramenta de placa de aplicativos sobre isso, e apenas sair um pouco. Vou apertar “Salvar”. Tudo bem, pessoal? E é assim que criar uma grade de 12 colunas no Illustrator. Se você é preguiçoso como eu, você faria o download de um modelo e será isso aqui. Vou deixar isso nos arquivos de exercícios. Vou chamá-lo de grade de 12 colunas no Illustrator, modelo ou algo assim. Vai estar lá dentro. Você pode simplesmente abrir isso e ir em frente com essa. 12. Criando um wireframe de baixa fidelidade desenhado à mão: Neste vídeo, vamos olhar para fazer wireframes, mas vamos fazer alguns desenhados à mão de baixa fidelidade. Começo sempre com isto, desenho-o no meu livro e começo a trabalhar assim. Muitas vezes, se é meu próprio trabalho, não vou mais longe do que isso. Eu não faço mockup belas no Illustrator porque não há nenhum ponto, não há ninguém para impressionar além de mim mesmo, e é um pouco de ideação é wireframing, e eu trabalho com eles. Mas se você vai enviar para os clientes, seria estranho sair com apenas os desenhados à mão. Você quer fazer sexo um pouco usando o Illustrator para fazer seus wireframes parecer realmente bom. Deixe-me mostrar-lhe como eu faço com meus apenas desenhados à mão primeiro e depois o próximo vídeo vamos fazer o Illustrator. Em termos de wireframes, este é o nível que estamos olhando. Isso é um arame. Vamos dar uma olhada em alguns outros wireframes e algumas outras coisas. Mas você pode ver o nível deles, é apenas para obter idéias para baixo. Às vezes eu coloco um pouco mais de cuidado neles, mas não muito. Há alguns que eu gosto, está neste nível agora. Eu entregaria isso ao cliente? Digamos que estou procurando em um processo onde eu fui contratado como este consultor de UX e eu estou indo com wireframing, eu colocaria um pouco mais de esforço nele, não uma quantidade enorme, porque o que eu não quero fazer é, eu tive discussões onde Board no Photoshop maquetes, e é a hora de falar sobre recursos básicos e layout onde as pessoas começaram a escolher cores e escolher fontes ou o que eu não gosto. Não podemos chamá-lo assim, então mantenha a linguagem fora, use Lorem ipsum, use carrapatos rabiscos valina, vamos ter um bom senso disso, mas sem entrar em detalhes demais. Se você é super especial, você pode ter um pouco de cor. Bem, olhe, destacando, mas é só isso. Esses são meus wireframes, e isso realmente funciona para mim em termos de idéias. A outra coisa é que eles não fazem apenas um wireframe, você vai para sua lista de recursos, e você começa a adicioná-los aqui, não basta fazer um wireframe, eu acho que eu preciso fazer cinco. Mesmo que seu primeiro, você faça este, que foi legal, então o segundo, então o terceiro, e o quarto, e não é até que você consiga alguns através deles que você realmente resolver alguns bugs porque você pode chegar aqui, isso é ótimo. Se forçares a fazer um segundo, sabes que é uma porcaria porque essa era a boa. Então você faz o terceiro, e você diz : “Eu estou passando pelo processo.” Mas eu sei que muitas vezes quando eu faço todos os cinco e eu me forço a, Número 3 é o vencedor. Se você tivesse parado no Número 2, você nunca teria tido aquele layout incrível para o Número 3, então force-se a passar e fazer mais do que apenas um layout. 13. Criando um wireframe de alta fidelidade no Illustrator: Neste vídeo, vamos fazer disso um wireframe. É um arame. Também é apenas caixas cinzentas e algum tipo. Simpático e simples. Vamos chegar a ele. Vamos começar a construir uma armação. É como o nosso sitemap, temos muitos retângulos e algum tipo. Haverá alguns truques e dicas para vir junto. Mas se você está bastante confiante com ilustrado já, você pode querer pular ao longo deste, mas ok, então primeiro de tudo, eu vou pegar uma ferramenta de retângulo. E eu vou começar com, nós poderíamos usar caixas brancas, ok? Eu gosto de usar apenas um pouco de cinza na caixa ok, e um traço preto estão do lado de fora com um pixel. E isso só significa que eu vou desenhar a caixa que vai representar meu, meu logotipo vai sobre lá. Eu gosto desse tipo de off-white apenas para o tipo de tornar mais fácil e claro com os diferentes elementos. Ok, agora em termos de elementos para impressionar as pessoas quando você está em sua reunião, chamá-lo de “página de móveis” e manter a cara reta. Ok. É tipo de nome para este tipo de coisas. Ok. Que o [inaudível] na página. Ok. Roubado da impressão, mas impressiona as pessoas. Parece que você está no negócio. Certo, a outra coisa a fazer é tentar não projetar tão longe. Eu vou diminuir o zoom em 50%, ok, só para eu poder ver os diferentes motores de popa, mas você quer estar projetando essa coisa ou pelo menos zombando do tamanho real, ok? Então, o que ele vai parecer em um site real não tipo de ampliado ou ampliado muito longe porque você vai tomar algumas decisões ruins em termos de design. Para fazer isso, você aperta “Command One”, ou “Control One” em um PC, ou no longo caminho, “View”, e há um aqui que diz “Tamanho real”. Isso é o que vai parecer em um site de verdade. Então eu sinto que o logotipo agora é um pouco alto demais. Ok. E você tem que ter certeza quando você está arrastando essas caixas que você faz isso dentro das colunas. Não tente fazer isso. Ok. Onde ele meio que atravessa uma dessas calhas. Ok. Tem que se alinhar com a borda de uma dessas colunas e não pode atravessar uma das calhas. Ok, então coluna para coluna, e eu vou adicionar um pouco de tipo apenas para indicar que isso, eu vou clicar uma vez aqui e digitar o logotipo. Certo, tamanhos de fonte. Realmente não importa. Dezesseis pixels é cerca de 12 pontos na vida real. Então, se você tem que imprimir isso fora, ok, é legal e elegível. E sim, vou começar a desenhar isso. Vou copiar e colar esse cara selecionando os dois segurando “Shift” e depois ir “Copiar” e “Colar”. É isso, ele copia e cola ou “Controle V”, “Controle C”. E eu vou fazer isso minha navegação, ok, mas não entre as colunas. Ok. E em termos do texto aqui. Eu só vou arrastá-lo para cima. Pode ser um pouco difícil arrastar este texto, especialmente quando você está ampliado um pouco, veja isso, você acaba meio que arrastando as bordas dele. Então, quanto mais você ampliar, mais fácil é mover as coisas. Ou você pode apenas usar suas teclas de seta no teclado se você segurar “Shift” enquanto você desenha, eu estou usando as teclas de seta no teclado, eu estou usando as teclas de seta no teclado, tipo de como fazê-lo em grandes pedaços. Então eu vou enfiar um no meio lá. E, na verdade, deixe-me mudar o texto. E eu vou esbarrar isso um pouco. Voltar para “Command One” no meu Mac ou “Control One” no seu PC, “Tamanho Real”. Agora, às vezes é muito difícil ver com todas essas colunas também. Então, há um atalho muito bom para ligar e desligar as colunas. O caminho mais longo está sob o “View”. E este é um aqui e “Guias”, ok, e “Guias Altas”. Ok, mas você pode ver aqui este é o comando de atalho e o ponto-e-vírgula ou ponto e vírgula de controle em um PC. Estou apenas a atacar, estou a manter o comando pressionado e a escrever o ponto-e-vírgula. Eu uso isso o tempo todo quando eu estou projetando causa como necessidade de alinhá-lo, preciso vê-lo e você alinhá-lo limpo para vê-lo. Bom. próxima parte vai ser um grande, o que é chamado de caixa de herói. Ok, então eu vou pegar minha ferramenta de retângulo aqui, escolher todas as minhas cores e coisas, ok, então preto off-white no lado de fora um pixel. E eu vou desenhar o que é chamado de caixas de herói, esse tipo de grande laje no meio. Às vezes ele gira. Ok. Mas é o tipo grande de : “Ei, isso é o que fazemos e damos as boas-vindas”. Ok, então essa é a caixa e eu vou adicionar um pouco de tipo a ela. E neste caso, o que eu fiz anteriormente foi clicar uma vez e digitar “OK” e digitar para sempre. Ok, o que eu quero é o que é chamado de caixa de largura fixa. Então eu vou excluir isso usando o “Delete” no meu teclado. Ok. E o que eu vou fazer é pegar minha ferramenta de texto de novo, que é esse cara aqui, certo, o T maiúsculo e eu vou ter certeza de começar deste lado da minha coluna. E eu vou clicar e arrastar. E se você arrastar uma caixa para fora, isso significa que ele vai ter como uma largura fixa apenas significa, como ver que ele vai tipo de estrondo até a borda e, em seguida, loop de volta ao redor. Agora, este texto é muito pequeno. Eu quero isso como grande, como inspiração venha trabalhar com a gente coisa e nós vamos colocar lá. E eu só vou aumentar o tamanho do arquivo, desculpe, o tamanho da fonte para algo bem grande. Certo, um atalho legal é com tudo selecionado como se estivesse aqui. Mantenha pressionada a tecla “Command Shift” e toque na tecla de parada completa. Ok, então “Control Shift” em um PC e digite a tecla de parada completa no teclado. Ok e isso só faz com que seja agradável e grande. E cólon, desculpe, vírgula torna menor. Então, para cima, eles são meio que ao lado de cada um, para cima e para baixo. Algo que se pareça com isso. Se odeias hífens como eu, como toda a gente. Ok. Você pode fazer é selecionar tudo. Então, cliquei triplicamente e selecionei tudo. E você pode ir para a guia de parágrafo aqui e sintonizar o hifenato. Vá embora, hifenização. E, eu provavelmente vou ter que fazer um triplo clique nele novamente e fazer minha fonte um pouco menor, então ele fica lá dentro. E eu pego minha flecha preta, levanto essa caixa para meio que, isso é o que eu quero. Então, a próxima coisa que eu quero é que há um botão de chamada à ação aqui em baixo. Por que ele vai lá, eu não sei. Tornou-se estilo que você precisa de grandes citações inspiradoras que definam você. E então você precisa de um botão embaixo, ok, esse é o seu tipo de call-to-action, como, “Venha comprar essa coisa ou entre em contato comigo ou algo do tipo [inaudível]”. Aí está o meu botão e você pode ver o meu meio que entrou por defeito no centro negro, mas sem açúcar do lado de fora. Eu queria ser como o resto dos botões. Então o que você pode fazer é começar a usar a “Ferramenta Conta-gotas”. Então eu desenhei este com a “Ferramenta Conta-gotas”. Certo, porque é selecionado e eu clico nesse cara e você diz que ele vai roubar o estilo desse cara. Ok, esta navegação em cima. Então eu vou clicar sobre isso, pegar meu logotipo, copiar e colar. E você vai ser minha revista chamada Ação. Eu provavelmente não colocaria uma revista nele se você estiver enviando para um cliente. Sou muito profissional sobre tudo isso. Então a próxima coisa que quero fazer é colocar algumas miniaturas aqui embaixo. Eu vou colocar três deles, ok, e eles vão abranger quatro colunas cada, ok, para fazer o 12. Mas a parte inferior das páginas ficou aqui. Então eu vou pegar o retângulo, desculpe, a ferramenta prancheta. Ok, e eu vou diminuir um pouco para que eu possa ver tudo, um pouco longe. E eu vou torná-lo um pouco maior. Então eu só vou pegar o fundo. Você pode fazer isso, desde que você sabe, eu muitas vezes apenas fazê-lo muito longo. E depois, quando terminar, arraste-o para cima em vez de continuar a ter que movê-lo para baixo cargas. Ok, de volta ao comando um para chegar ao tamanho certo, é você aí. Então ferramenta retangular, eu vou ter um preenchimento do meu off-white. Eu vou ter. Eu tenho isso selecionado. Consegues ver o meu carrapato seleccionado quando eu estava a mudar isso? Ok. E isso significa que mudou meus carrapatos para ter essa cor esbranquiçada, então está lá, mas é a cor errada. Então, não faça isso. Tinha “Desfazer”. Ok, eu não vou ter nada selecionado. Seta preta clique sobre o fundo, feito. Certo, pegue minha ferramenta de retângulo. E eu vou desenhar algo mais ou menos desse tamanho. Vai gastar colunas inteiras. Ok, [inaudível] perfeito. Agora, para indicar que não é como, isso é um botão, meio que para indicar que é uma imagem. As pessoas colocaram uma cruz nele. Ou eles usam esse tamanho especial de imagem. Você pode vê-lo ali, aquele tipo de paisagem que você está olhando coisa. Então o que vamos fazer é pegar a ferramenta de segmento de linha e vamos desenhar isso. Agora eu poderia começar a arrastar este aqui, mas eu não vou acertar o ângulo, então é mais fácil pegar a seta preta, clicar fora, ter certeza que ele acabou de selecionar este cara. Eu vou para editar, copiar, colar, e no topo aqui podemos ir para “Objeto”, “Transformar” este que eles chamaram de “Reflect”. Eu vou usar horizontal, clique em “OK”, e é apenas uma espécie de virado para cima agora, eu só vou apertá-lo perto dele. Não me preocupo muito, porque vou selecionar todos os três. E há um aqui em cima que diz alinhar horizontalmente e verticalmente. Alinhe meu retângulo de backup. Vou agrupá-los e depois ir para “Object” do grupo principal. E eu vou manter pressionada a tecla “Alt” e clicar e arrastar uma para fora. E isso meio que faz duplicar enquanto estamos arrastando. Então mantenha pressionada a tecla “Alt” e você notará que quando você segurar “Alt”, ele simplesmente se move e muitas vezes se alinha. Você pode forçá-lo a enquanto você está arrastando. Então estou segurando “Alt”. Você pode segurar “Shift” também. E faz tudo alinhado, para cima e para baixo. Ótima. E então, na maior parte do tempo que eu fazia essas cruzes, as pessoas imaginam. Você pode ver este gráfico aqui com a luz, que é como uma imagem universal, “Eu sou uma imagem”. Ok, você pode adicionar essa complexidade extra a ele. Não há drama de verdade para isso. Você pode, você pode gostar e você só usa a ferramenta de segmento de linha e começa a desenhar montanhas, ok? Você pode aumentar a largura do traçado para corresponder a isso. E se você está procurando a ferramenta de elipse, ela está logo abaixo da ferramenta de retângulo aqui. E você pode zombar da sua própria versão disso. Tudo bem, então eu tenho minhas imagens. O que quero fazer agora é terminar algumas coisas. Este é o lugar onde você pode pular junto porque vai ser apenas um pouco repetitivo. E o que eu vou fazer é provavelmente parar este vídeo agora mesmo. E o próximo vídeo você pode pular porque, sou eu apenas preenchendo isso e eu vou alinhar a versão tablet também. Sim, não vai ser super excitante, mas então eu vou te ver no próximo vídeo ou no vídeo depois disso. 14. Criando os wireframes para dispositivos móveis no Illustrator: Pessoas adoráveis, isto é o que vamos construir neste tutorial. Vamos terminar com este topo, construir o tablet e versões móveis do nosso wireframe. Eu não vou ficar ofendido se você simplesmente pular para o próximo vídeo porque ele está literalmente apenas fazendo a mesma coisa, mas trabalhando para uma grade diferente. Aprendemos muito mais? Aprendemos a fazer uma linha listrada aqui. Se você quer ficar por aqui para a linha listrada, vamos para isso. Precisamos terminar nossa visualização da área de trabalho, então vamos apenas adicionar outra linha de imagens. Vou selecionar todos esses três caras. Mantenha pressionada a minha tecla Alt, arraste-os para baixo, legal. Vamos adicionar alguns ícones sociais na parte inferior, então minha ferramenta de retângulo, lá está. Ele vai ter nenhum preenchimento, [inaudível] fora de preenchimento branco, e um traço preto, e meus ícones sociais vão chegar através, não exatamente certo. Mas esses serão os meus ícones sociais. Agarrar esta cópia apenas para que as fontes sejam exatamente as mesmas. Como eu disse, como agarrar quando você está em certos níveis, você tem que agarrar isso bem no meio. Este vai ser o meu ícone social. Social, não sei soletrar bem social. Ícones sociais e colocá-lo no meio, meu meio estava aqui. Copie e cole isso, e este será o meu direito autoral. O que eu poderia fazer apenas para economizar algum tempo, posso digitar e obtê-lo para escrever uma linha para que ele vai copyright, copyright 2017. Coisa interessante está sob “Tipo”, o símbolo de direitos autorais está sob algo chamado “Glifos”. Para usá-lo, clique duas vezes nele, você verá que ele aparece lá, feche Glifos. Painel útil que foi. Vou colocar na companhia de amostras. Ótima. Flecha preta, mova-a para que fique naquela coluna ali. - Legal. Esse é o meu acabamento de desktop. O que eu vou fazer é eu vou diminuir um pouco e eu vou pegar minha prancheta também. Eu vou pegar você de baixo aqui, arrastá-lo para cima, e eu quero dividi-lo para estofar lá em baixo, ótimo. Voltar à minha ferramenta de seleção, e vamos começar com a versão tablet. A maneira mais fácil que eu encontrar para começar é apenas copiar e colar o curso. No meu caso, eu poderia pegar esses caras. Você pode copiar e colar e arrastar ou eu mantenho Alt frequentemente quando eu estou arrastando, alinhá-los lá em cima. Minha caixa de cabelo precisa vir como a primeira. Ótimo, e esta caixa de logotipo provavelmente vai ser exatamente o mesmo tamanho neste lado e minha navegação; Eu sei que minha navegação é razoavelmente pequena. Vai caber aqui. Poderá ter de ajustar o tamanho do seu logótipo no tablet. É apenas uma questão de descobrir o que parece bom no tamanho do tablet, o layout diferente que você planeja usar. Eu vou passar, a grande mudança para mim é que eu gostaria de apenas fazer dois desses caras, então eu vou trazê-los para o outro lado. Na verdade, o que eu posso fazer é trazer um através porque eles vão ter que ser redimensionados. Eu só vou fazer um deles e depois duplicá-los. Isso está alinhando com tudo, ampliando um pouco, Comando 1 só para ter certeza que está perfeitamente alinhado, e eu vou arrastá-los um pouco, e eu vou segurar Alt, e eu vou fazer dois desses caras. Vou fazer minha prancheta maior. Apague um pouco, quero maior. Perdi as minhas grades aqui em baixo. É um pouco irritante, mas vou ser capaz de resolver isso. Eu vou querer que eles vão três por três. Você viu uma das coisas boas que acontecem. Consegue ver ali à direita? Aqui eu não posso largar o meu rato, mas no lado direito ali diz: “Você gostaria que as lacunas fossem as mesmas.” Algumas das coisas legais que você pode fazer com o Illustrator. Legal, então a próxima coisa que eu quero junto são os ícones sociais, eu vou diminuir o zoom novamente. Isso é apenas reconstruí-la aqui. Agora, eu não posso ver meus guias então eu vou ter que mostrar a vocês como isso funciona. Vou alinhar estes. Eu provavelmente posso apenas me safar com, você pode ver que realmente se encaixa com os caras lá em cima. Mas você pode ter a pergunta : “Como posso consertar isso?” O que eu preciso fazer é duas coisas, é mais fácil se eu mover esses pedaços aqui por um segundo. Em seguida, vá para “Ver”, vá para “Guias” aqui e vá para “Desbloquear Guias”. Agora, eu posso selecionar todos esses caras. Com a seta preta, não é tão útil quanto a seta branca. A seta branca, e eu seleciono todos eles. Eu pego esses pequenos pontos de ancoragem finais, que você vai aprender mais sobre mais tarde. Você pode ver que eu posso arrastá-los todos para baixo agora. Você quer arrastá-los para baixo. Talvez você possa segurar Shift para arrastá-los diretamente. Perfeito. Vou voltar a trancar os nossos guias. Trave guias, por favor. Vou pegar a pilha de volta. Guias de volta para a posição, o que eu recebo a mesma lacuna. - Legal. Minha prancheta vai ter que ficar um pouco menor. O que eu provavelmente vou fazer é que meus ícones sociais vão ficar menores quando chegar ao tablet, e talvez eles vão compartilhar o espaço aqui. Eu poderia ter que mudar isso um pouco quando eu tenho os ícones reais na cena, dependendo de quanto o cliente tem. Agora, eu tenho um pouco de trabalho. Último bit é a versão móvel. Posso chegar mais cedo, e conseguir que este guia seja bem mais alto. O que eu vou fazer neste caso é, eu comecei com desktop e mudei para tablet e, em seguida, para celular. Acho que é assim que trabalho melhor. É muito comum e legal, eu sinto, começar o celular primeiro. É o mais difícil de projetar e eu concordo, mas eu acho que as pessoas que vêm ao meu site, desktop é uma grande maioria, então eu gasto mais do meu tempo no desktop e eu peer back para celular. Há muitas pessoas que argumentam que essa é a maneira errada de fazer isso. Se você estiver fazendo o design do aplicativo, não adianta fazer uma versão desktop, então você começará com essa tela menor, e é a mais difícil de projetar, então depende de você. Eu vou pegar alguns pedaços que eu preciso, e eu provavelmente vou pegar todos esses caras. Vou segurar o Alt, arrastá-los para o outro lado. Você pode fazer o seu um por um, e o que eu definitivamente vou ter que fazer é, as navegações não se encaixam, então nós vamos movê-lo para baixo, basicamente é chamado de sanduíche de navegação. Vou pegar meu logotipo e movê-lo para o outro lado. Nesta parte de cima, ao longo de cima aqui, vamos desenhar um menu de hambúrguer ou um sanduíche de navegação, então essas três linhas listradas, e vamos usar apenas três linhas listradas. Eu vou desenhar um, eu vou desenhar dois, eu vou desenhar três, pode não ter nenhuma luta aplicada a eles. Antes de começar a desenhar, você provavelmente deve verificar se você tem uma linha preta selecionada. Vou fazer o meu separadamente. Eles ainda estão lá. Eu vou pegar vocês, seu preto e eu vou fazer o golpe maior. Esteja na visualização real para que você possa ter uma noção do tamanho que eles devem ter, não há tamanho definido para eles. Vou me certificar de que estão separados corretamente. Lá em cima, há um que diz “distribuir centros” e apenas alinha todos eles. É o que vou fazer pelo meu sanduíche de navegação. Grids off, grades em, é sobre o tamanho certo, talvez um pouco grande, mas tudo bem. O que vai acontecer aqui é que isto vai descer para as minhas grades de volta. Minha imagem de herói grande vai ser muito menor e o texto aqui, embora eu não mudei o tamanho da fonte aqui porque eu permiti um pouco mais de espaço. Quando ele chegar ao celular, eu definitivamente vou ter que mudar o tamanho da fonte para algo menor. O que eu poderia fazer é realmente apenas ter certeza que eu tenho, então ele termina neste “diam”. Eu vou torná-lo um pouco menor, e você vai notar que aqui eu não vou me alinhar com a grade. Há alguns truques que podemos fazer para forçar isso a acontecer. Onde é que está? Diam, então eu vou deletar, assistir [inaudível], então tudo se foi e talvez alinhá-lo bem. A outra coisa que eu vou fazer é selecionar tudo, e eu vou mudar o formato aqui. Há coisas que você pode fazer facilmente, como quando ele vai de tablet para celular, eu vou me certificar de que ele se alinhe no centro, e isso vai ficar tudo bem. É uma coisa boa e fácil de se fazer. mesmo com esse cara, ele vai ser centrado aqui como um grande botão. Ele está lá, legal, e o tamanho da fonte fica um pouco menor. A próxima coisa que quero fazer é ter certeza que isso está alinhado, eu não fiz isso. O que eu vou fazer é eles vão apenas empilhar um em cima do outro então eu vou copiar e colar um, movê-lo através e fazer você sair para encontrar os lados lá. Na verdade, vai ser maior no celular do que em qualquer outro ponto de vista. Eu posso ver a partir desta vista aqui, eu tenho que ter certeza de que essas coisas estão alinhando perfeitamente. Você entra lá, legal. De volta ao Comando 1. O que eu também vou fazer é em vez de ter seis, eu vou cortá-lo para que na verdade nós só temos quatro desses. Por quê? Principalmente porque quero mostrar como é, como desligá-los quando começamos a construir nosso site. Podemos desativá-los em código para termos apenas quatro deles indo, e apenas para que não seja tão epicamente longo. Você pode ver aqui eu tenho quatro deles já e as páginas também já são muito mais longas do que a versão tablet, é um monte de rolagem. O que eu vou fazer aqui embaixo é pegar esse ícone social e eu vou empilhar esses caras de forma diferente, então eu vou tê-los em cima um do outro porque eles simplesmente não poderiam ir lado a lado aqui e isso é algo que você pode fazer em código também. Fácil o suficiente. Certifique-se de copiá-los quando estiver arrastando-os. Toque um pouco em torno dele, pegue este, e eles vão ficar centrados um no outro. O espaçamento é bom, ferramenta prancheta. Tudo bem, e isso vai ser nosso wireframe. Este pode ser o maior, mais longo chato de todos os tutoriais aqui no Illustrator. Prometo que vamos entrar em algum super fantástico, divertido design de cores usando a mente explosiva imagem próxima, eu prometo. Certo, próximo vídeo. 15. Inspiração para seu web design: Agora, estamos entrando na fase de design. Fizemos alguns sitemaps e wireframes, e eles não parecem muito sexy. Agora, é hora sexy. Vamos passar e ver onde me inspiro. Você pode ter suas manchas. Isto, acho que é provavelmente o melhor de todos os sites. Chama-se Awwwards, mas com dub, dub, dub lá dentro. Boa mordaça. Tem “Sites do Dia”. Se você criar um site brilhante, enviá-lo para eles, você pode se apresentar, dirigir algum tráfego, e você recebe elogios de designer doces. Só tem coisas muito bonitas, muitas e muitas coisas bonitas. Apenas passe algum tempo olhando por aqui. Você pode ter um olhar específico que você está procurando. Você pode ser um ilustrador, vá e dê uma olhada nas ilustrações de outras pessoas. Você tem que usar esse pequeno ícone, não é? - Sim. Em todos os outros lugares se você clicar, ele simplesmente abre uma página em Awwwards, o que é bom. Ele dá rankings das pessoas e outras coisas, mas você quer realmente olhar para a página em si. É um site muito legal, Mitchlana. Desculpe, Michelle Lana. Awwwards.com é um ótimo site. Eu uso behance.com é outro brilhante. Eu passo meu tempo pensando, “Eu gosto disso”, e começo a me apropriar idéias para construir algo ou ter um sentimento sobre o que eu quero trabalhar. Isso é inspiração para o seu web design. 16. Iniciando seu web design usando modelos do Illustrator: Neste tutorial, vamos ver como começar a partir de modelos. Você pode ser realmente novo em design em geral, você pode ser um estudante, você pode ser jovem, você pode ser mais velho e você nunca fez isso antes, qualquer que seja a razão que você pode estar um pouco mais assustado com todo o design processo, o que é que vai parecer? É bom começar com um modelo, e há muitos modelos ao redor. Alguns dos mais fáceis estão incorporados na nova versão do Illustrator, estamos em 2017 no momento. Se formos para Novo ou Arquivo Novo, há essa pequena janela Novo Documento, se você for para a Web, verá que por baixo há um monte de modelos, você pode ver se eu rolar para baixo. São para todos os tipos de coisas. Essa é uma página de destino um, que é alguns gráficos de apresentação, alguns ícones de mídia social, há todos os tipos de diferentes. Mas em termos de design de uma página web, você pode ver isso em wireframes, olhe para aquilo. Por designs de páginas, você pode começar com um desses e começar a mudar, eles estão aqui para ser usados, eles são usados comercialmente. Você pode decidir, eu vou começar com este aqui porque combina com o que eu quero fazer. Você clica duas vezes nele e você apenas começa a passar e brincar com as cores, as fontes, ele faz o download eventualmente e você mudá-lo com suas imagens. Digamos que você não está vendendo um aplicativo, você está vendendo cookies, você pode trocá-lo com sua imagem aqui e que é uma boa maneira começar e apenas tem os bits que você pode não ter pensado sobre, então você pode apenas usar esta página inicial e, em seguida, todos o resto destes. Esta é uma ótima maneira. Há alguns outros modelos lá dentro. Outro lugar legal que você pode ir é, sob este aqui, sob sua licença da Creative Cloud, seu aplicativo da Creative Cloud. Há um, Assets, e há um aqui chamado Mercado. Se você clicar em “Mercado” e aqui a opção de pesquisa, você pode dizer Web UI. Aqui está um monte de coisas pré-fabricadas que podem ser usadas comercialmente, então você pode começar com estes, é uma ótima maneira de olhar pro realmente rápido. Há um monte de coisas de aplicativos aqui e um monte de coisas da web também. Alguns deles são realmente grandes, alguns deles apenas pequenos componentes, mas esta linha parece continuar para sempre. Para usá-los, digamos que você gosta desta coisa Web UI aqui, como a aparência deste para o seu site, você pode clicar sobre isso e dizer download para, muitas vezes as pessoas vão apenas baixá-lo para sua biblioteca, é chamado Minha Biblioteca, o que eu vou fazer é clicar sobre isso e baixá-lo para um que eu fiz chamado, você pode ver aqui, Criar Biblioteca, Eu criei este chamado Dan Portfolio. O que vai acontecer é, esperançosamente, você pode vê-lo acontecendo aqui em Janela, Bibliotecas, que está lá. Está baixando um cara que eu poderia começar a usar, leva um tempo para baixá-lo com a rede, e depois arrastá-lo. Você pode ver aqui, que é uma interface do usuário que você pode começar a usar e alterar e adicionar ao seu design, alterar suas fontes, usar suas cores, é uma boa maneira de começar a partir de um modelo. Isso é tudo para a nossa partida a partir de modelos. Nós vamos fazer o nosso próprio e vai ser incrível. 17. Trazendo seu logotipo vetorizado para o layout: Ei aí. Neste vídeo, vamos trazer o nosso lindo sexy logotipo vetorial e vamos deixá-lo na barra de navegação, jogar com a opacidade, e adicionar um pouco de tipo para nossa navegação. Tudo bem, vamos entrar nisso. Você pode começar , obviamente, substituindo coisas que eu costumo passar. Isto é o que eu usei para levar minhas idéias para o cliente, mas não é algo que eu ache útil para começar. Eu pensei mais sobre o produto e eu vou manter meus quadros y perto, eu vou imprimi-los e colá-los perto, mas eu não gosto de trocá-los o textualmente, não é esse tipo de processo de design. O que eu faço é parar. Vou usá-los como guia, não me entenda mal. Eu só vou deixar o conteúdo empurrar, mover e sacudir como ele precisa. Porque eu tenho imagens do cliente agora e eu tenho logotipos deles, e tudo mudou um pouco. Vou trazer o meu logótipo. Só para me dar a minha primeira parte, e provavelmente vai conduzir muitos dos desenhos, especialmente cores, talvez fontes. Então vamos trazê-los primeiro. Agora, quando você estiver encontrando logotipos do seu cliente, certifique-se de que é uma versão vetorial. O que vamos fazer é ir ao “File” e vamos ao “Place”, este aqui. Agora, arquivos de exercícios, eu tenho muitos logotipos. Existem cinco versões. Então JPEG e um PNG são ruins, SVG, EPS ou um arquivo AI são bons. Vou te mostrar a diferença entre os dois. Digamos que todos estes três são muito parecidos, praticamente iguais. Esses caras também têm um trabalho muito parecido. Vamos trazer o PNG e vamos trazer, digamos, a versão EPS, ou digamos o SVG. Vamos ver a diferença entre os dois. Algo chamado pixels versus vetor ou bitmap versus caminhos. O que eu vou fazer é arrancar meus guardas fora e eu vou fazer zoom. Eles parecem exatamente iguais. Mas veja o que acontece quando eu começar a escalar os dois. Se eu pegar esses caras e começar a escalá-los. Agora, é grande. Você pode ver um começa a pixelizar, parece horrível, e este outro aqui permanece agradável e cristalino. Se você tiver a opção, o cliente dirá: “Qual versão você deseja?” Certifique-se de obter a versão vetorial. O vetor é SVG, EPS ou AI. Às vezes, pode ser um PDF. Mas fique longe dos PNGs. PNGs são úteis porque têm transparência. Se você só tem, digamos, um JPEG e um PNG, obter a versão PNG, não vai escalar muito, isso não vai nos ajudar com nossa capacidade de resposta. Não é o fim do mundo. Vamos compará-lo com a versão JPEG. JPEG é um perdedor claro porque ele tem um fundo branco. Ele ainda tem os mesmos pixels, ele ainda pixeliza, mas você pode ver, pelo menos, o PNG tem um fundo transparente. Muitas vezes, nem sempre. Adeus, pessoal. Vou trazer o nosso SVG novamente só porque veio através do tamanho certo. SVG, ótimo. Este vai ser o meu logotipo para o meu slide. Lembre-se, estar trabalhando um Comando 1 pixels reais. Você vai notar que o logotipo L tem um fundo branco, é porque o que eu quero fazer é ligar meus guardas de volta. Se você esqueceu, isso é dois pontos de comando ou dois pontos de controle, eu vou fazê-lo bater até talvez um pouco mais em cima porque o que eu vou fazer é eu vou pegar minha ferramenta de retângulo e eu vou colocar uma barra de navegação no topo. Eu vou torná-lo semitransparente mais tarde que você possa ver por baixo e deixar tudo legal. Vou movê-lo para que eu possa ver os dois lados. Lá vamos nós. Eu vou desenhar um retângulo aqui, ele vai atravessar 12 colunas. Eu vou dar-lhe uma cor de preenchimento de preto, e eu vou dar-lhe nenhum golpe, então a pequena linha vermelha através dele significa nenhum traço. Um pouco da opacidade um pouco. Fica um pouco cinzento e eu vou colocar coisas para trás. Na verdade, quando construímos nosso site, vamos fixá-lo no topo, então isso significa que ele vai rolar para baixo quando começarmos a rolar e ele vai ficar no topo e sempre seremos capazes de ver o logotipo na navegação. É legal. Agora, no momento em que o logotipo está no lado errado, esta caixa está no topo, então basta clicar com o botão direito do mouse nela. Se você estiver em um Mac, mantenha pressionada a tecla Control e clique com os botões que você tiver. Em um PC, é um clique com o botão direito do mouse preguiçoso e vá para o que diz “Organizar” e vá para “Enviar para Voltar”. Você pode ver, eu tenho meu logotipo adiantado. Legal. Vou tocar nele para que fique ali, desligue meus guias e fique bem. Agora, o que eu quero fazer é colocá-lo no texto para minha navegação. Vou pegar a ferramenta Tipo e clicar uma vez. Não importa para onde vai, e eu vou falar sobre nós. Vai ser Sobre Mim porque é o meu portfólio. O que eu vou fazer é copiar e colar na coluna ao lado dele, e haverá outra página chamada Fale Comigo. Talvez eu tenha o botão My Portfolio também. Decidi manter as imagens que tínhamos no fundo para chegar ao nosso portfólio. Isto é igual a estes tipos aqui. Vou fazê-las brancas. Então, com essa seta preta, nós os selecionamos. Posso pegar minha ferramenta Type agora. No topo aqui, eu posso ir e mudar a cor para branco. Na verdade, o que eu vou usar é este esbranquiçado todo o caminho através dele. Eu não sabia por que eu gosto, é só uma pequena dica sobre o branco. Parece branco, basicamente. Nós adicionamos nosso tipo, vamos entrar em fontes de estilo em um filme logo após este, vamos apenas usar Arial para o momento. A próxima coisa que quero fazer é trabalhar com um pouco de cor. Vamos fazer isso no próximo vídeo. 18. Usando o Adobe Color: Neste vídeo, vamos falar sobre como adicionar cor ao seu site. Vamos começar a usar algo chamado Adobe Color CC. Ele costumava ser chamado de mais legal, se você se lembra dele, mas se você acessar color.adobe.com e entrar com sua licença da Creative Cloud, você chegará aqui. Se você tem uma versão pirata, isso não vai funcionar tão bem, pedaços dela vai funcionar, ok? Mas esperamos que tenha uma versão legítima. O que vamos fazer é pular criar e ir para um chamado explorar. O que isso é realmente para, é para pessoas que, mesmo designers experientes, como eu me vejo apoiando nas mesmas cores toda vez que faço um design. Se vieres ter comigo e fores padeiro e precisares de um website, provavelmente vai ser verde e cinzento no momento. Se você é, sei lá, uma companhia aérea internacional e precisa de trabalho feito, provavelmente vou torná-lo verde e cinza. Estou preso em uma armadilha de usar verde e cinza. Para escapar da minha armadilha, eu uso esse recurso “Explorar” no Adobe Color. O que significa é que posso entrar aqui, passear e explorar. Eu acho que por padrão está ligado, Eu não tenho certeza, mas ir para “Mais Popular”, Eu gosto de todos os tempos, talvez este mês. Ele só vai lhe dar as coisas que outras pessoas estão baixando, as cores mais populares e muitas vezes coisas muito legais vem ao topo. Vamos com “Todos os Tempos” e estes aqui, sim, montes de cores. O que acontece é que, como você fez login, o que você pode fazer é dizer que você gosta de “Tech Office”. Você pode clicar no que diz é, “Salvar”, e ele vai dizer como, você pode renomeá-lo se quiser. Você pode dizer que eu gostaria que você colocasse no meu, lembre-se que fizemos aquela biblioteca [inaudível] chamada portfólio Dans. Você pode fazer um novo aqui, bem no fundo, “Criar Nova Biblioteca” vai simplesmente enfiá-lo em sua, onde está, minha biblioteca. Mas eu vou colocar o meu como portfólio Dans, você pode mudá-lo. Tudo bem, mas eu vou clicar em “Salvar” ea coisa legal sobre isso, é magicamente, espero que se eu ir para ilustrador agora e portfólio Dans, às vezes você pode clicar que. Vou fazer isto um pouco menor. Há lá, há as cores e eu posso começar a usá-las. Eu posso decidir que na verdade eu vou usar isso para a cor. É apenas uma boa maneira de começar a desenhar coisas e você diz, “Ok, agora as coisas estão começando a funcionar em termos de quantas têm cor.” Porque eu comecei com este palpite de cor modelado. É uma boa maneira de ir com suas cores. O que você pode fazer para esta classe, é você pode ir para o mesmo site, e ir para “Explorar” e ir para “Pesquisar” e digitar BYOL. Espero que encontres alguns dos que estou a usar. O que estou usando nesta classe é chamado de ilustrador de portfólio BYOL. Baixe esse e usaremos isso para este curso. Se você está trabalhando em uma agência maior, é uma ótima maneira de moldar as cores da marca. Você pode carregá-los e há algumas maneiras diferentes de ir para “Criar” e você pode ir até aqui e dizer na verdade, então CMYK, você pode começar a digitar e alterá-los, e, em seguida, clicar em “Salvar” e eles acabam nesta explorar Coisa. As pessoas podem pesquisar e compartilhar e isso torna muito fácil, sim compartilhar cores brilhantes. Então vamos baixar o Bring Your Laptop um, meio que esqueci que cheque BYOL, e eu clico em “Salvar”, colocá-lo no portfólio Dans. Ótimo, legal. Illustrator clique no pequeno ícone da Creative Cloud, e lá está ele. Vou clicar nesse cara e dizer: “ Exclua, não preciso de você. Legal e ótimo, então temos nossas cores. Vamos seguir em frente agora e olhar para, digamos, porque isso vai ser uma marca para esta empresa falsa em particular ou portfólio falso que estamos fazendo e se você tem realmente cores específicas e um logotipo para trabalhar, eu vou para mostrar como fazer isso no próximo vídeo e obter essas cores. 19. Combinando cores de marca usando o Adobe Illustrator: Ei, neste vídeo, vamos olhar para o tipo de puxar cores de logotipos de marca existentes para usar dentro de seu design de interface do usuário. Digamos que estamos fazendo algum trabalho para uma empresa e você tem o logotipo deles. Você pode trazê-lo e nós vamos para o File Place, e neste exemplo, nós vamos apenas usar o Google Logo.png, trazê-lo para dentro. Digamos que eu queira desenhar alguns elementos, digamos que é a nossa caixa de herói no fundo aqui. Mas eu quero que ele combine com as cores do Google, vamos fingir que é uma cor aleatória para começar, não aleatória o suficiente. Com ele selecionado, o que você precisa fazer é pegar a ferramenta conta-gotas, o conta-gotas é ferramentas meio que se escondem aqui em baixo. Tudo que você precisa fazer é com qualquer coisa selecionada, basta escolher uma cor dele, e você pode ver que ele vai parar de puxar as cores da marca a partir disso. Quão preciso será? Bastante preciso. Digamos que você queira adicioná-los, mas para usar mais tarde em vez de ter usado a ferramenta conta-gotas toda vez, o que você precisa fazer é mudar para o painel de amostras. Agora, seu painel de amostras, se você não conseguir encontrá-lo, ele estará em Janela até Amostras, ligue-o e pense em switches como cores pré-fabricadas e pré-misturadas prontas para uso. O que vamos fazer é, vamos escolher este azul, então aqui está ele, então, o que você pode fazer é subir no topo aqui, drop-down e é uma opção que diz Nova Swatch. Ok, dê-lhe um nome, eu vou chamar o meu Google Blue, e clicar. Você pode ver que estão ambos na minha biblioteca, e é aqui embaixo, minha biblioteca de amostras. Então, basta trabalhar o seu caminho através das cores, eu pego a ferramenta conta-gotas. Vermelho, aqui, novo Google Red está lá, e é aqui embaixo o painel de amostras. A razão pela qual é bom tê-los em suas amostras, descobriremos isso um pouco mais tarde. Você vai descobrir que essa coisa de biblioteca, é incrível para a maioria das coisas. É novo e ainda não é perfeito para tudo, então às vezes você também precisa deles no painel de amostras. Ok, incrível. Isso é como extrair cores de marca de logotipos existentes para começar a usar em vez de tentar descobrir o que todas essas cores são. Ok. Lá vai você. 20. Usando as fontes de web certas do Google Fonts e Typekit: Neste vídeo, vamos olhar para trazer fontes seguras web muito específicas do Google Fonts e Typekit, como este cara sexy aqui e estes pouco Plain Jane, mas fontes muito legais até o topo aqui. Então o que nós temos, e nós apenas usamos texto simples e velho. Você pode ter usado Arial, mas o Illustrator padrão adora Myriad Pro. O que precisamos fazer agora é trocá-lo para fora para a fonte que queremos usar. Agora, você não pode simplesmente olhar sua lista e ir, eu quero escolher todas essas fontes que eu tenho na minha máquina. Você pode ter centenas, você pode ter apenas alguns. Você não pode simplesmente ir e escolher qualquer um deles. Eles precisam ser especificamente fontes que podem ser usados on-line, essencialmente apenas ser licenciados on-line, e se eles são pagos para pagar por essa licença e se eles não são comercialmente utilizáveis ir para e usá-los. Há dois lugares principais que você vai fazer se você for uma pessoa do Illustrator. Há um chamado Google Fonts ou Typekit. Agora, na minha experiência, depende do que você está fazendo. No Google Fonts, acho isso mais fácil. Eles são um pouco mais difíceis de implementar, mas eles são melhores em termos de licenciamento. O que acontece é que o Google Fonts são gratuitos para uso comercial, o que é ótimo. O Typekit é gratuito para usar com sua licença da Creative Cloud, que é perfeito para o meu portfólio aqui, porque não o estou usando para mais nada. Isso significa que é para o meu portfólio. Mas digamos que estou construindo para um cliente e ele não tem uma licença da Creative Cloud, seu site precisará licenciar essa fonte ou terei que usar minha licença da Creative Cloud para manter o site usando a fonte certa. Se eu decidir mudar para o Himalaia e encerrar toda a minha vida digital, significa que a fonte deles deixará de funcionar porque não estou pagando minha licença da Creative Cloud. Vamos olhar para os dois. Ambos são legais, ambos fáceis de usar. Primeiro de tudo, vamos dar uma olhada no Google Fonts. Primeiro, vá para fonts.google.com, e você chega aqui. Eu realmente gosto do Google Fonts. Há montes deles. Algumas coisas legais que você pode fazer com eles estão do lado aqui, então você precisa de uma fonte caligrafia. Eles podem ser muito difíceis de encontrar. Vamos apenas ter caligrafia e supervisionar, só vou te dar listas de fontes de caligrafia. Então eu vou ligar todos eles. Algumas das outras coisas agradáveis no fundo aqui são que você pode brincar com, digamos como a largura. Largura pode ser realmente útil em você pode baixá-lo para que você possa obter um bom compacto, ou fonte compactada, ou fonte condensada. É só um pouco mais fino. Isso significa que, especialmente quando você está trabalhando online, se você conseguir alguns desses realmente finos, você pode colocá-lo baixo em um título sem que ele quebrar em duas linhas. Você pode ver aqui você pode colocar um pouco de palavras neste, enquanto que se você está procurando por uma unidade com fontes realmente largas, você pode ver que é muito mais distante. Independentemente disso, há duas coisas que você precisa fazer. Um deles é escolher uma fonte, então Roboto e provavelmente Open Sans. Se você está procurando uma fonte de cópia de corpo, estes são os mais comuns. Open Sans é provavelmente o mais comum. É a nova Arial. Todo mundo usa Open Sans porque é claro, é bom, tem muitos pesos diferentes, e funciona bem em diferentes idiomas. O que vou fazer é escolher. Na verdade, passei algum tempo a dar uma olhada e decidi e vou usar esta chamada Playfair. Eu realmente gosto. É este aqui. Tem uns bons pesos. Às vezes você escolhe uma fonte e não parece bom. Você pode pensar que parece bom aqui, mas então fica terrível nas palavras que você precisa. Você pode ver que eu posso apenas digitar em cima dele só para ver como o meu nome se parece. Na verdade, antes de passar por você pode clicar no nome e apenas lhe dá uma amostra maior de tudo e todos os diferentes usos, e uma das coisas úteis, bem como lhe dá uma fonte correspondente correspondente é vamos usar isso para nossos títulos em nossos grandes títulos, mas então precisamos de uma fonte mais simples para a cópia do corpo ou o texto do parágrafo. Você pode ver aqui em baixo que me deu uma opção que diz tente Raleway, ou este aqui, ou este aqui. Optei por este, Open Sans Condensado. Provavelmente não as versões leves, talvez um pouco difícil de ler on-line em termos de usabilidade. Mas dá-te opções, por isso, se és novo ou és da velha guarda e só precisas de ajuda para escolher uma boa fonte. O que fazemos é escolher este e depois encontrá-lo no topo e dizemos “Selecione esta fonte”, ou se você está de volta na outra tela aqui você clica neste pequeno botão “Plus”, e isso apenas adiciona este fundo aqui chamado coleções, e você pode adicione as fontes a ele. Agora, quantos você adiciona? Sério, você só precisa de dois. Se resume a mais. É uma mistura de apenas regras de fonte. Se você tiver 10 fontes em seu site, vai parecer terrível. Então, mantenha o mínimo. Você só precisa de dois, uma fonte de cabeçalho e uma fonte de corpo de cópia. Podes ter três, se precisares. Eu vou adicionar este e então eu vou encontrar aqui em cima Open Sans, e há Condensado aqui, e eu apertei “Plus”. Estão os dois juntos. Vou abrir isto. Agora, há algumas coisas que eu preciso fazer. Eu vou clicar em “Personalizar” porque eu tenho que decidir sobre essas fontes, quais eu quero. O que eu realmente quero é que eu quero o ousado e eu não vou usar o normal no meu design. O que você poderia fazer é ligar todos eles porque estamos em fase de conceito agora. Não mostramos qual vamos usar, só baixamos todos. Você não quer usá-los todos embora em seu design final real, basta escolher um ou dois porque você pode ver mais tempo que é necessário para carregar sua página, e uma página de carregamento lento é ruim por alguns motivos, é seu usuário vai passar idades tentando baixar fontes enquanto sua página não está carregando, não se importando com sua seleção de fontes incrível, e o Google não gosta disso, então eles penalizam você em termos de suas pesquisas. Tente não escolher muitas fontes. Mas no meu caso, eu estou baixando todos eles porque no momento eu estou apenas no meu estágio de design. Vou escolher apenas um ou dois. Mas aqui, isso é como uma pequena flecha obscura, essa coisa que diz baixar essa seleção. A coisa legal sobre isso é que ele vai baixar, e eu vou colocá-lo em meus arquivos de exercícios. Isso estará lá pronto para você usar em seu próprio país para que você não tenha que passar por este processo. Você pode começar a usá-los. Mas nós os baixamos. Lá estão eles. Abra o zip e, na verdade, Mac e PC agora, estes são muito fáceis de implementar. Vou abrir o Open Sans, e vou clicar duas vezes em tudo isso. Vai abrir e eu posso clicar em “Instalar”. Já os instalei no meu mais cedo. Faça isso por ambos. Selecione todos esses itens, clique duas vezes, que serão instalados e você poderá começar a usá-los no Illustrator. Illustrator não precisa ser reiniciado. Você só vai descobrir que eles aparecem surpreendentemente. Open Sans Condensed e eu vou usar o ousado. Acho que estou usando o Negrito Condensado. Legal. O que fizemos foi baixá-los para usar em nosso computador, e coisa legal é que você pode usá-los para todos os tipos de coisas. Não precisa ser web design. Você só tem um monte de fontes legais agora para usar. O Google permitirá que você use comercialmente. Agora, o que você está destinado a fazer é escolher esses e quando você mais tarde entregar seus arquivos para um designer, ou um web designer, ou web um desenvolvedor, ou você está fazendo isso você mesmo, você usará essas fontes de uma maneira especial quando o site é construído. Eles chamam o Google e dizem : “Estamos usando essas fontes, por favor”, e o Google diz, “Não se preocupe”, e as faz funcionar em seu site. Então nós acabamos de baixá-los no momento para usar em nosso desktop. Perfeito. Vá para typekit.com, e aqui clique em “Fontes”. Você precisa fazer login com sua licença da Creative Cloud, pode ver meu rostinho lá em cima e digitar um pouco de texto de amostra. A única coisa que você precisa ter certeza é que o Typekit tem alguns que são apenas uso de desktop, e alguns que são uso web também. Você não quer ter certeza de que isso é carrapato para dizer. Eu quero aqueles que podem ser usados em um site, porque não há nenhum ponto de projetar um, eles não podem ser. Aqui, as mesmas coisas como o Google. Você pode clicar em, digamos que eu quero somente fontes de script, e isso separa essas fontes apenas para as fontes de script. Eu quero encontrar talvez um serifa de laje. Você pode fazer a mesma coisa com o quão largos eles são, quão pesados eles são, todos os tipos de coisas legais. Sim, fica um pouco mais fácil começar a implementar. Diga que eu amo essa fonte aqui, esse Sutro, e eu clique nele. Eu decido qual eu quero usar. Eu quero usar este preenchimento de luxo, eu amo isso. Clique em “Sincronizar”. O que acontece é em segundo plano, ele está realmente instalando em sua máquina, o que é muito louco. Você pode ver que ele está apenas instalado lá, então Sutro. É um pouco mais fácil do que o Google Fonts. Ótima. Posso começar a usá-los. Lembre-se, o único problema com o Typekit é que é uma licença paga. Você o obtém gratuitamente para sua Creative Cloud. Então, para sua própria equipe, é perfeito. Mas indo para um cliente, você vai ter que explicar que essas fontes estão licenciadas. É um custo anual, e você adicionará isso ao seu web design apenas para garantir que eles saibam que há custos extras para essas fontes. Muitas vezes, eu só ir para o Google Fonts porque nenhum custo extra. As bibliotecas de fontes são diferentes. Se há uma fonte que eles adoram e está no Typekit, você pode dizer a eles, sim, você pode usá-lo, mas ele tem que ser licenciado. Estou desajeitado agora. Então, há outros sites para ir. Um outro é Font Squirrel. É bem como ambos, mas no meio eu gosto do Google Fonts embora. Legal. Essa foi uma explicação particularmente longa de como usar fontes. 21. Vídeo de produção para finalizar a navegação, caixa de herói e fontes: Olá aí. Neste vídeo de produção, vídeo de produção só significa que eu realmente não estou fazendo nada de novo, eu só vou estar preenchendo os buracos para o nosso design. Você pode assistir ou você pode pular junto, está tudo bem. Isto é o que vamos chegar no final deste vídeo, vamos colocar em alguns carrapatos e algumas caixas coloridas, mas sabemos como colocar carrapatos e caixas coloridas, e então vamos fazer isso agora. Legal. Primeiro, vamos desenhar nossos pequenos botões aqui em cima. Você poderia simplesmente deixá-los como texto, mas o que eu quero fazer é pegar minha ferramenta Retângulo e desenhar uma coisa de botão que se encaixa lá dentro. Agora vou usar minhas cores que baixamos, cores do portfólio BYOL. De que cor eu quero que seja? Verde é legal. Vou clicar com o botão direito do mouse. Agora, antes mesmo de organizarmos o que está lá atrás, nós os mandamos para trás. Adeus. Ele está atrás da navegação, veja-o lá. Então eu o desfiz. Então vai desfazer. O que eu vou fazer é, há uma opção aqui que diz Organizar e enviar, em vez de enviar para trás, que é todo o caminho atrás, enviar para trás, apenas para trás como o cara na frente dele. O que está acontecendo aqui? Sim, tenho o tamanho certo. Vou fazer uma cópia desse cara e mantê-los juntos, mas vou usar essa cor vermelha para isso. Clique com o botão direito do mouse, “Organizar”, “Enviar para trás”. Às vezes, há dois caras no meio e ao contrário não funciona. Você tem que continuar, “Enviar para trás”. Você pode ver que há um atalho, Enviar para trás. Vou fazer isso até resolver tudo. Ótimo. Aquele cara precisa estar no centro. Legal. Vamos diminuir um pouco, "Command+1", para obter o tamanho real. Na verdade, vou diminuir o zoom mais uma vez. Vou pô-la na minha caixa de herói aqui em cima. Eu vou ligar meus guias novamente, vou pegar a ferramenta Retângulo, e nós vamos olhar para imagens em um vídeo separado, mas eu trazer minha imagem agora, mas nós vamos apenas colocar em uma grande caixa colorida, enviá-lo para trás, e olhar para colocar no resto do meu tipo. Então vamos construí-la. Vou pegar minha ferramenta Type. Vou arrastar minha caixa, vai cobrir, não sei exatamente quantos ainda, mas eu definitivamente sei que tem meu texto, meu inspirador, incrível, me contratar como treinador. Claro que é desigual. Designer de UX. Ótimo. Tamanho da fonte, eu gosto. Está parecendo bem. Vai ser branco porque eu vou colocar uma imagem razoavelmente escura por trás dela. Na verdade, vai ser aquele esbranquiçado que eu tenho usado. Aquele branquelo está aqui também. Está na cor, então você pode usar qualquer um deles. Ótimo. O que eu quero fazer é que eu provavelmente quero inseri-lo por uma dessas colunas. Você pode fazer isso em web design fácil o suficiente. Você pode dizer deixar esse vazio e, em seguida, iniciar esta caixa de texto um pouco mais ao longo. Eu vou ter um pouco de tipo acima disso, eu vou deixar isso mais tarde no tutorial. Esse cara precisa ficar um pouco mais baixo. Estou usando minha flecha preta só para arrastá-la um pouco para baixo. Vou colocar uma linha branca debaixo dela. Por quê? Só porque gosto da ideia. Então eu vou pegar minha ferramenta Segmento de Linha. No momento, realmente não importa o preenchimento que ele tem, mas definitivamente importa a cor traçada que temos. Estou usando isso branco de novo. Vou clicar nele. Vai passar por estes. Vou segurar “Shift” para ter certeza que vai direto. Quantos pixels? Provavelmente apenas um pixel vai ficar bem. Se eu desligar e ligar as grades só para ter uma noção de tudo. Sim, eu gosto de lá. Agora vou fazer um botão por baixo. Vai parecer exatamente igual a isso, então vou roubá-lo, copiar e colar. Vai ser o meu apelo à ação. Contrate-me, por favor. Vou ampliar um pouco. Provavelmente vou usar o mesmo tamanho de fonte. Este vai dizer, “Vamos conversar.” Acho que todos escrevem coisas como : “Vamos tomar um café”, “Deixa-me ajudar-te.” Você pode pensar em sua própria versão coloquial desarmante. Uma coisa que eu notei quando estou aqui, você pode ver que isso é um stroker do lado de fora? Eu cliquei nisso. Na verdade, há aquele esbranquiçado em torno do lado de fora disso. Tem o preenchimento verde, mas vou virar o branco para uma linha vermelha, que significa que não tem traço e se alinha. Ainda não se alinha perfeitamente, pois não? Às vezes arrasta-o para fora, arrastando-o de volta. Isso parece perfeito agora. Adorável. Mais alguma coisa que eu queira fazer? Não, isso tem um monte de coisas que eu quero lá dentro. Na verdade, uma última coisa enquanto estamos gastando fazendo isso é eu vou copiar e colar esse texto. Eu vou colocá-lo aqui e há uma cópia melhor que eu quero ir lá dentro. Vou ter uma coisinha que diz: “Estou disponível para o trabalho.” Eu vou estar usando essa cor amarelada e eu vou movê-la junto. Vou colocar uma elipse aqui, como um pequeno círculo. Vou colocar um carrapato. Guardaremos o carrapato para mais tarde, porque vou mostrar-vos como fazer isso na parte dos símbolos da série de vídeos. Mas para o círculo, mantenha pressionada a ferramenta Retângulo, pegue a ferramenta Elipse, e se você arrastar uma aleatória, tudo ficará bem. Provavelmente vai improvisar. Mas se você segurar Shift enquanto você está arrastando para fora, ele vai torná-lo um círculo perfeito enquanto você está dirigindo. Se você estivesse dirigindo. Foi um longo dia. Então vai ser um círculo aqui. Vamos enchê-lo com este verde mais claro. Vai fazer mais sentido quando mudarmos esta imagem no fundo. “ Comando+1". Tudo é do tamanho certo, eu acho. Eu sinto que pode ser que o círculo é grande, mas vamos mudá-lo mais tarde. É o suficiente para o vídeo de produção. Vamos sair e começar a fazer a próxima parte. 22. Imagens gratuitas vs livres de royalties: Oi lá. Neste vídeo, vamos ver de onde obter imagens gratuitas e quais são as imagens livres de royalties. Começaremos com as imagens gratuitas. Bons lugares para ir. O melhor lugar é provavelmente este chamado freeimages.com. Há um monte de coisas aqui, e você só precisa de um login e você pode usá-los comercialmente, o que é muito legal. Se eu precisasse de uma foto de uma rosa, o que você precisa fazer é ignorar esses premium aqui. É assim que, eu acho que o site ganha seu dinheiro, ele mostra algumas coisas que são meio decentes e depois diz, quanto a essas? Estes são os que você vai acabar pagando, e não há problema com isso. Mas se você está procurando de graça, minha grande dica para usar qualquer um dos sites gratuitos é óbvio. Do lado aqui, dizem relevância. A maioria deles vai começar com isso. Você quer ir para o que diz “Mais baixado”. Acho que isso vai trazer a nata da colheita para o topo. Os que foram mais baixados. Você pode ver que eles são todos de tamanhos variados. Alguns deles são realmente grandes e alguns deles são muito pequenos, como este aqui é bastante agradável, é uma aliança de casamento sendo cortada em branco, e aqui freeimages.com. Agora outro site legal para ir, isso é realmente como um diretório para muitas outras imagens menores e livres, e eu sei que este é um grande link longo até o topo aqui, eu vou deixar um link na descrição em algum lugar, mas se você apenas Google “Shopify 22 sites incríveis para imagens de estoque grátis impressionantes”, você vai acabar aqui. O que é realmente legal sobre ele é que bastante nicho como alguns dos sites eles vão colocar acima uma imagem livre por dia, mas alguns deles são realmente bonitos. Estive olhando para esse cara aqui, Gratisografia. Esse cara, ele é um fotógrafo, Ryan McGuire. Ele faz coisas muito legais e permite que elas sejam usadas comercialmente. Muito bem, Ryan. Sim, você pode passar. Há mais coisas comerciais aqui com modelos, enquanto, digamos, freeimages.com muitas vezes é apenas uma biblioteca de estoque padronizada real. Dê uma olhada na lista e há muitas coisas diferentes aqui, mas Free Images é o lugar principal. Em termos de royalty-free, royalty-free não significa livre, isso apenas significa que você paga por ele uma vez e você começa a usá-lo várias vezes. Eles vão variar entre US $20 e US $40 para comprar e, em seguida, você começa a reutilizá-los. Eles são três jogadores principais: iStock, Shutterstock, e este aqui chamado Adobe Stock. Todos eles têm uma biblioteca muito parecida fazendo uma coisa semelhante. Estou usando o Adobe Stock principalmente de forma leve porque ele se relaciona muito bem com a Creative Cloud, e essa é a probabilidade de ser a maior vantagem sobre as outras. Todos eles têm interfaces impressionantes ligeiramente diferentes e assim usar o que você mais gosta. Estou usando o Adobe Stock para economizar para fora. Quero colocar algumas imagens de designers. Então eu só digitei o designer. Na verdade, vamos colocar em designer gráfico, e então ele vem à tona. Bastante parecidos. Então o que eu vou fazer é pegar coisas inspiradoras de design, e o que eu vou fazer é, lembre-se, mais cedo neste tutorial, eu fiz esta biblioteca chamada, ou é lá Illustrator? Não sei, o portfólio do Dan é o que eu chamo. Guardei uma prévia para os portfólios do Dan. Se eu pular para o Illustrator agora, tudo bem. Temos que ir ao Illustrator, e eu apertei este pequeno botão de atualização, lá está ele. A coisa boa sobre isso é que eu ainda não paguei por ele, você pode ver que ele tem a marca d'água, mas é uma boa cópia grande e eu posso começar apresentar estes para o meu cliente e dizer que estas são as imagens, isso é o que eu estou pensando e dar-lhes um custo para essas imagens também. O que é realmente bom é que se eu começar a projetar isso, e eu começar a ajustá-lo e cortá-lo e mudar as cores, o que eu posso fazer é aqui eu posso clicar com o botão direito do mouse e apenas dizer Imagem de Licença, e se eu tiver, digamos, um assinatura do Adobe Stock e eu posso obter 10 imagens por mês para algo como US $20, algo em torno disso, e seria apenas licenciá-lo e atualizar essa coisa. Eu não tenho que lê-lo ou re-ligá-lo ou re-importá-lo ou qualquer um desses jazz, então é muito legal. O que eu vou fazer para isso é, eu vou passar e pegar algumas imagens de designer. Vou digitar ux, minha palavra favorita. Eu vou dizer sim, eu quero que ele faça parte dele, e você pode ver que há um buy um, mas há também apenas uma visualização salva. Vou salvar essa pré-visualização e vou salvar essa pré-visualização. Eu vou salvar essa. Eu vou te salvar, e eu vou te salvar. Estou fingindo que este é o meu portfólio. Eu não fiz essas coisas, só estou baixando. Você vai ver aqui, espero, nós devemos obter um monte de pequenas imagens para que possamos começar a trabalhar com eles. Tudo bem. Portanto, seja usando o Adobe Stock, haverá um link na tela aqui para acessar o Adobe Stock. Se você nunca o usou antes e quer se inscrever, use meu pequeno link. Por quê? Porque eu recebo uma parte da Adobe. Não te custa mais nada, mas eles me dão um pouco de uma parte da sua assinatura. É ganha-ganha, ganha para mim principalmente. Mas sim, experimente Adobe Stock ou iStock é muito bom e Shutterstock é outro. Talvez vá e compare esses e veja qual você quer usar. Imagens gratuitas chegaram ao freeimages.com, e se você quiser obter as livres de royalties que você pode comprar e usar uma e outra vez para muitos projetos diferentes, vá para stock.adobe.com. 23. Adicionando, ligando, recortando e mascarando imagens no Illustrator: Neste vídeo, o que vamos fazer é, vamos trazer algumas imagens e vamos ver como cortá-las nessas pequenas miniaturas aqui. Vamos olhar para ambos os quadrados e círculos. Vamos lá. Primeiro de tudo, vamos ativar nossos guias, lembre-se de que é Comando, ponto-e-vírgula ou se você estiver em um PC, é Controle, ponto-e-vírgula. Vou rolar um pouco para baixo, vou diminuir um pouco. O que eu quero fazer é adicionar minhas miniaturas como fizemos em nosso wireframe. Vou pegar a ferramenta de retângulo e vou tirar o meu punho. Aí está minha primeira miniatura, ela vai abranger 1, 2, 3, 4 colunas e agora eu quero colocar uma imagem dentro dela. Na verdade, o que eu poderia fazer é, eu poderia dar-lhe uma cor de preenchimento, não precisa de uma cor de preenchimento Eu só estou fazendo isso, então é útil para você ver. Vou duplicar esses caras aqui. Vou ter 1, 2, 3. Legal. Estou segurando Shift selecionar tudo isso. Tenho a minha flecha negra. Estou mantendo pressionada a tecla Alt, lembre-se, para arrastar e copiar ao mesmo tempo, ou você pode simplesmente ir Control C, Control V. O que eu quero fazer é colocar essas imagens agora. Para importar uma imagem para o Illustrator, vamos até Arquivo e descemos para algo chamado Lugar. Eles usam lugar em vez de importação apenas para confundir todos. Vá para Arquivo, Inserir e, em seguida, seus arquivos de exercícios. Tenho algumas imagens. Eu baixei eles no tutorial anterior e outras versões com marca d'água, obviamente. Se você quiser usar esses, você tem que sair e pagá-los no Adobe Stock, mas aqui está uma marca d'água. O que eu vou fazer é que você pode trazê-los um por um. Eu posso trazer em miniatura 1, lugar, clique em um, ele vai vir através como ele é tamanho real. Isso é bom para essas pequenas versões em miniatura ou essas versões de marca d'água, mas às vezes eles podem ser bastante grandes. O que você pode fazer é ir para Arquivo, Lugar e o que eu prefiro fazer é escolher o primeiro e simplesmente arrastá-lo para fora. Irá restringir a altura e a largura. Para chegar a um tamanho áspero que você quer que ele seja primeiro. Você pode trazer lotes de cada vez Arquivo, Lugar, e você pode pegar todos esses caras, todas as nossas miniaturas e você pode clicar em você, pode clicar em você, pode clicar em você, pode clicar em você, você, você, você, você, você tem a idéia. Você pode trazê-los, todos após o outro ou se você fez o que eu fiz e tem algumas miniaturas de sua biblioteca, você pode simplesmente arrastá-los para fora daqui. De qualquer forma, é como trazer suas imagens. Vou arrastar as imagens da minha biblioteca de ações daqui e vamos olhar para cortá-las para este retângulo. Arraste-os para dentro, alinhe-os e redimensione-os como eu quero encaixá-los na caixa. Porque agora o que vamos fazer é cortá-los para aquela miniatura. Eu vou segurar a tecla Shift e isso faz com que ela escale forma responsiva para que a altura e largura apareçam e eu vou obtê-lo mais ou menos. Posso ajustar isso depois. Então o que eu preciso fazer, é selecionar ele e a caixa atrás dele. A maneira mais fácil de fazer é, porque não há nada aqui que eu possa clicar em segurar e arrastar. Você vê que eu posso apenas arrastar sobre estes dois e eu pego os dois. O atalho é Comando 7 ou Controle 7 e você aprenderá isso para cortar. O longo caminho está sob Objeto e está sob Máscara de recorte e Make. Isso fica um pouco difícil, você acha que vou cortar ou vou mascará-lo. Chama-se máscara de recorte no Illustrator. Você pode ver lá, há um atalho Comando 7. O que vai acontecer é que não vai funcionar. Porque, na verdade, isso precisa estar por trás da nossa forma que queremos cortar. Vou clicar com o botão direito nele e ir para Organizar e enviar para trás. Vou fingir que fiz isso de propósito, mas não esqueci. Agora Comando 7. Olhe para isso, suave. Vamos fazer mais uma. Vamos arrastá-lo para dentro. Mantenha a tecla Shift pressionada, escale-o para que ele tenha o tamanho certo. Coloque-o lá dentro. Eu estou bem com alguns recortes interessantes, então eu não me importo que não é perfeito lá dentro, e lembre-se, não se esqueça, ele tem que ser na parte de trás. Selecione ambos e, em seguida, Command 7 ou Control 7 em um PC. Digamos que não gostas desta colheita. Pensava que ia ser fixe, mas parece que está desligado. O que você pode fazer é não ter nada selecionado com a seta preta, clicando no fundo e clique sobre ele uma vez e você começa o quadrado. Se você clicar duas vezes nele, o que acontece é que você entra nessa coisa chamada Modo de Isolamento, e isso significa que eu estou dentro. Pense na Camada 1 é base inicial, que é aqui atrás, mas quando eu clica duas vezes em algo, eu entro nesse grupo. Chama-se grupo de clipes. Significa que posso começar a trabalhar nisto separado da praça do lado de fora. É bom ter cuidado com a forma como o arrasta. Você pode ver que eu posso arrastar a imagem ao redor do lado de fora ou eu posso arrastar o centro deste ou eu posso arrastar a borda do retângulo. Você pode arrastar ambos os bits nesta exibição, o que é um pouco confuso. Basta lembrar se você pegar o centro, você arrastar a imagem e se você agarrar a borda, você arrasta este quadrado do lado de fora. Então cabe a você o que você quer fazer. Vou arrastar isto até aqui. Você pode redimensioná-lo ainda daqui. Deixe-me ir para um grande clipe. Esta vai ser uma imagem vetorial, vai ser. De qualquer forma, para dar a volta para a base inicial é que você pode clicar nesta seta algumas vezes ou apenas clicar duas vezes neste nenhum espaço por aqui, nesta área branca. Ótimo. Vamos passar e fazer isso. Vamos apanhar-te. Vou passar o zoom agora. Nós não vamos fazer círculos para este em particular, mas eu vou fazê-lo no segundo. Vamos pegar esse cara na parte de trás, talvez por aqui, Comando 7. Legal. Digamos que eu queira fazer um para círculo ou círculo arredondado ou polígono ou uma estrela, não importa. Vamos fingir que vou fazer uma versão circular. Estou desenhando no meu belo círculo. Estou dando uma cor de preenchimento. Não precisa de um. Só torna mais fácil para nós enxergarmos. Vou arrastar esta imagem e pô-la por cima. Flecha preta, coloque-o por cima, certifique-se de que ele está por baixo, selecione ambos, Comando 7, você pode ver que você tem exatamente o mesmo efeito. Se você já é útil com uma ferramenta Caneta, vamos olhar para a ferramenta Caneta mais tarde. Mas você pode desenhar qualquer forma e fazer exatamente a mesma coisa, usar isso como uma caixa de corte. Mas se você precisa ser ensinado não se preocupe, nós vamos fazê-lo em outro episódio, bem outro vídeo, pelo menos. Vamos fazer as últimas partes. Quais eu uso. Não gosto mais desse cara. Nós o pegamos. Comando 7. Você pode ver, você pode obter um pouco de fluxo depois de um pouco. Você é um pouco grande, abaixe-se. Você volta, você, você. Comando 7 mesmo. O último foi aquele cara lá. Queremos ser um pouco maiores. Que atalho estou usando lá? Apenas para obter as coisas atrás um do outro, e nós olhamos para ele mais cedo é o, se eu selecionar algo que eu não quero colocá-lo atrás, Organizar, Enviar para Back você pode vê-lo lá? Comando, Shift, Quadrado, Enviar para trás. Você pode ver esse colchete. Em um PC será Shift and Control, Square Bracket. Alguns dos atalhos que você aprende de cor e outros você não aprenderá. A última coisa que eu faço é que eu quero adicionar um pouco de um acidente vascular cerebral no exterior apenas para dar-lhes uma melhor consistência. Eu selecionei minha seta preta selecionou todos eles. Você notará que o traço não apareceu aqui porque eles estão sendo chamados de grupo de clipes agora em vez de nossas caixas normais. Podemos abrir o Window e ir ao Stroke. Lá está ele e eu vou dar-lhe um golpe de talvez, ele tem que ser um pixel ou acima, não pode ser nada menor do que isso, ele não pode imprimir porque estamos lidando com pixels aqui. Ótimo. Que cor deveria ser? Eu vou fazer, onde está a cor do meu traço? Vou abrir o Window e vou para Color. Aqui está no fundo aqui. cor do meu traço é preta. Eu provavelmente só vou escolher, eu não quero escolher uma cor cinza. Você provavelmente se deparar com este problema se você é um usuário experiente do Illustrator, é RGB é difícil escolher cinza se você tem que combiná-los todos. A maneira mais fácil de escolher um cinza é mudar suas cores de RGB para este código de saturação e brilho de matiz. Isto é muito fácil. Significa que o brilho desliza para cima e para baixo. Vou usar um pouco de cinza. Legal. Para os meus guias fora, como é que parece? Parece bonito, exceto que o quadro de arte precisa ser estendido e eu vou estender a mente parar um pouco para baixo porque eu tenho meu rodapé e coisas para ficar lá dentro. Isso é tudo para o nosso corte em mascaramento de imagens. Vamos ver o próximo vídeo. 24. Lavando imagens no Illustrator com um plano de fundo colorido: Ei, ali. Neste vídeo, vamos fazer esta pequena imagem no fundo aqui onde é um fundo totalmente elástico, e é lavado, e tem um tom verde. Vamos ver como fazer isso no Illustrator. Muito bem, primeiro, vamos trazer a nossa imagem. Agora há duas maneiras de trazê-lo para dentro, podemos arrastá-lo de nossa biblioteca se entrarmos lá, ou podemos ir para Arquivo, Lugar. Isto vai alterar a forma como o fazemos, digamos, preto e branco. Eu estou trazendo a imagem, eu estou arrastando ela agradável e grande, grande, ótimo. Se eu fizer isso dessa maneira, torna-se muito fácil converter em preto e branco. Vou mostrar-lhe que de vez quando vamos olhar para algumas dessas outras imagens que estão ligadas para dizer, sua biblioteca, e elas não se tornam mais difíceis, são apenas um passo extra. O que vamos fazer é cortá-la onde precisamos. Na verdade, vamos fazer preto e branco primeiro antes de irmos e cortá-la naquele quadrado ao fundo. Para fazer isso, é muito fácil, selecioná-lo e ir para “Editar”, “Editar cores” e “Converter em tons de cinza”. Agora, não há muito controle no Illustrator como você converte em tons de cinza, ele apenas vai, sua escala de cinza e esperar pelo melhor. Se você quiser ser um pouco mais de controle sobre o que acontece, cores diferentes ficam em cinza diferente, você pode fazer isso no Photoshop. Isso não é um curso de Photoshop, então vamos deixar isso de fora. Mas se você realmente precisa desse controle, vire para o Photoshop e faça uma camada de ajuste, ela está sob camada, camadas de ajuste e é chamada de preto e branco. Você obtém muito controle sobre como convertê-lo em preto e branco, salvá-lo e trazê-lo para o Illustrator. Isso é muito fácil no Illustrator e eu estou feliz o suficiente com os resultados. Se eu quiser fazer exatamente a mesma coisa, eu te coloco lá em cima. Eu quero fazer exatamente a mesma coisa para, digamos, este gráfico aqui. Porque está ligado à minha biblioteca , não me deixa fazer tanto. Então, se eu clicar duas vezes nele, clique duas vezes novamente, eu tenho a minha imagem. Se eu for exatamente a mesma coisa, “Editar” e ir para “Editar cores”, você notará que está acinzentado. É apenas uma das coisas que acontece se você estiver usando coisas da sua biblioteca porque elas estão conectadas. Se você atualizar o item da biblioteca, ele será atualizado aqui, portanto não quer que você mexa com ele. Para mexer com isso, é, você só tem que clicar em “Embed”. Continue clicando duas vezes nele até ter sua imagem. Em seguida, vá para “Incorporar” e, em seguida, você vai notar que pode “Editar”, “Editar cores” e “Converter em tons de cinza”. Vou desfazer porque não quero convertê-lo em tons de cinza. Eu só quero que você saiba que se você tem esse problema, pode ser um logotipo que você está tentando fazer, qualquer coisa que você importou. Então temos em tons de cinza. Eu vou colocá-lo mais ou menos onde eu quero, e lembre-se que ele tem que estar lá atrás. Em seguida, selecionarei ambos e usarei meu atalho, Command, sete em um Mac, e Control, sete em um PC. É o que eu quero. Mas o que eu quero fazer é dar aquele olhar esverdeado e escuro, e há duas etapas para ele. Pegue sua ferramenta de retângulo. Eu vou desenhar um retângulo que cobre todo o documento lá, e eu vou dar-lhe um preenchimento de preto, e eu vou dar-lhe um golpe de nenhum, que já é, ótimo, e nós vamos diminuir a opacidade . Você pode diminuir a opacidade de algumas maneiras diferentes no Illustrator, vamos usar este aqui na parte superior. Nós só vamos descer até ficarmos felizes com o fundo, depende do que você quer. Agora, obviamente, isso está acima de tudo, então o que eu vou fazer é clicar com o botão direito e eu vou “Organizar”, em vez de ir até o fundo, eu posso ir até o fundo. Agora está por trás desta imagem. Então eu vou clicar nesta imagem e dizer, você está na parte de trás. Lá vamos nós. Está bem, então parece melhor. Quero adicionar esse tom verde a ele. Então você pode deixá-lo aqui e decidir, na verdade, que eu vou aumentar a opacidade. Eu vou ter este fundo lavado, olhar preto, e tudo bem. A próxima coisa que eu quero fazer é parar de brincar com as cores, Dan, é eu vou criar um novo retângulo em cima de tudo isso. Vou desmarcar em segundo plano primeiro. Então, clique seta preta no fundo, em seguida, agarrar minha ferramenta retângulo, torna mais fácil. Desenhe um retângulo na parte superior. Vou fazer disto o meu verde. Agora eu preciso colocá-lo para trás, ok, sanduíche. Quero na frente da caixa preta e da imagem, mas atrás de todo o texto. Há algumas maneiras diferentes. Treinadores diferentes mostrarão maneiras diferentes. O que eu acho mais fácil de fazer é apenas tirá-lo porque é mais fácil voltar a ficar juntos, é, na verdade, eu vou mandar esse cara para trás. Então você, a caixa verde, vai para a parte de trás. Então esses caras, eu queria trazer isso acima desses dois. Então eu vou te pegar. Eu só desativei todos eles para que eu possa vê-los todos, então eu posso clicar em você, segurar “Shift” pegar a caixa preta, clicar com o botão direito do mouse em ambos e enviá-lo de volta. A caixa verde está na parte de trás agora. Esses caras estão atrás da caixa verde, mas na frente desse texto. Ok, então é assim que eu faço. Há maneiras diferentes. Estou usando o painel de camadas. Esse é o meu jeito. Agora o que eu quero fazer é, obviamente, isso não funciona muito bem. Só estou cobrindo tudo. Vamos usar algo chamado modo de camada, e isso nos permite, você pode baixar a opacidade, e isso funciona. Mas não me dá o olhar que eu quero. Eu realmente quero este preto forte com preenchimento verde nas bordas. Certo, então isso funcionaria. Mas o que eu vou fazer é algo chamado de modo de camada. Você faz isso clicando na palavra “Opacidade” no topo. Então seta preta, clique em caixa verde, clique em “Opacidade”, e aqui em cima onde diz Normal, que faz exatamente o que você pensa que era. Você pode brincar com esses, assim você pode ver. É uma forma de a caixa verde interagir com as coisas por trás dela. Em vez de usar apenas a opacidade, você pode usar esses outros modos. Eles são todos ligeiramente diferentes, e se você tem uma imagem diferente com cores diferentes, você vai encontrar um modo de camada diferente que vai funcionar. Eu vou usar Soft Light principalmente porque eu já brinquei com isso e eu gosto disso. Mas a luz suave é um pouco forte, então o que vou fazer é diminuir a opacidade dela. Então eu estou usando o modo de camada e opacidade e parece, eu gosto muito mais do que apenas diminuir a opacidade. Você pode ver que ainda tem os pretos vívidos no fundo, mas é matizado também, então eu ainda posso colocar o verde lá dentro, preencher os buracos com verde. Muito bem, meus amigos, é assim que lavamos um fundo e adicionamos um pouco de cor a ele também ao mesmo tempo. Tudo bem, para o próximo vídeo. 25. Como usar camadas no Illustrator 2017: Como você está no campus? Neste vídeo, vamos olhar para camadas no Illustrator e o que vamos fazer é acabar parecendo assim, onde temos uma camada com toda a nossa arte, ok, e uma camada com a camada de fundo. A coisa legal sobre a camada de fundo é que ela está bloqueada. Há um ícone de bloqueio aqui, então não podemos movê-lo. Então vamos fazer isso agora. Ok. Então a primeira coisa que eu quero fazer é que eu não vou usar o branco do fundo aqui, que é um branco puro do Illustrator. O que eu quero fazer é, na verdade, eu quero colocá-lo em como o meu off-white que eu estaria usando aqui. Ok. Então eu vou pegar a ferramenta de retângulo e você pode atualizar a cor da arte-board. Ok. Então nós temos que realmente desenhar manualmente uma caixa e dar-lhe esse preenchimento, então eu vou usar minha seta preta, clique com o botão direito do mouse nela, organizar, enviar de volta e apenas ter certeza que ele não tem nenhum traço no lado de fora, eu estou apenas usando este cinza aqui. Ok. Então essa vai ser a minha cor de fundo. Podias enfiá-lo atrás de tudo só para ter a certeza de que cobre tudo. Ok? Sim. Não há como recolorir este quadro de arte. Então o que eu quero fazer agora é brincar com as camadas. Porque eu acho que é realmente difícil agora começar a mover coisas e eu acidentalmente agarrei os fundos. Ok. Então é mais fácil porque eu nunca quero que essas coisas se movam. Então eu quero que esses vidros fiquem onde eles estão e não se movam e a maneira mais fácil de fazer isso é colocá-los em sua própria camada, ok e travar essa camada. Ok. Então, no painel Camadas, vá para Janela, vá para Camadas, onde estão as camadas? Aí está você. Ok. Por padrão, dada uma camada, é muito comum trabalhar no Illustrator e somente se eles tiverem uma camada. Não se preocupe se você tem apenas um, todos sabem que no Photoshop você vai acabar com centenas de camadas, mas no Illustrator, se você sabe que eu quero dizer que seria apenas um, isso não é ruim, ok? Então não há nada de errado com isso. Mas vamos fazer uma nova camada. Esta página apareceu aqui, está bem? Vamos clicar duas vezes nele e chamá-lo de fundo, ok e não há nada no fundo. Você pode ver aquela miniatura ali, não tem nada nela. O que eu quero fazer é selecionar tudo o que eu quero mover para lá e porque eu estou arrastando uma caixa em torno de tudo isso, ele pegou minha caixa verde, a caixa preta, a imagem por trás dela e esta caixa cinza todos juntos em um grande movimento, que é Incrível. O que queremos fazer é arrastá-los para esta camada de fundo, ok e a maneira mais fácil, você vê este pequeno ponto aqui, ok, este pequeno quadrado, clique e arraste, que move tudo o que eu tinha selecionado para o meu fundo camada. Legal. Agora vou trancá-la. Agora o ícone de bloqueio é apenas para saber aleatoriamente que é o buraco de travamento, ok? Clique nisso, ok e eu vou trancar essa camada e eles não podem ser movidos agora, ok? O único problema é este e que está acima, ok? Você pode ver os fundos acima da minha camada um. Vamos clicar duas vezes na camada um e vamos chamar essa obra de arte ou palavra artística e, em seguida, basta arrastar esse cara clicar em segurar, arrastar, então ele está por baixo. Agora. Ok? Eu clico no trabalho artístico, então essa é a minha camada ativa. Minha camada de fundo agora é, ok, inselecionável, então eu posso ir e selecionar todos esses caras, movê-los sem selecionar o plano de fundo. Acho que esse é o ponto de usar as camadas aqui. A outra coisa boa sobre isso é que você pode desligar essa camada, você vê o globo ocular. Você poderia ligar e desligar toda a sua camada de fundo, ok, apenas clicando no pequeno globo ocular ali. Tudo bem. Meus amigos, é assim que se usa camadas no Illustrator. Para o próximo vídeo. 26. Usando o Adobe Market para obter ícones gratuitos: Neste vídeo, vamos trapacear. Precisamos de um tick e vamos apenas roubá-lo, roubar é a palavra errada, vamos apropriá-lo do Creative Cloud Marketplace e há muitas coisas boas lá que podemos usar e temos permissão para usar legalmente e é tudo escalável em vetorizar isso. Só nos salva de desenhá-lo. Vamos ver isso agora. Para acessar o Adobe Market, temos esse aplicativo da Creative Cloud instalado. Portanto, se você não o tiver instalado, acesse adobe.com/downloads e obtenha o aplicativo Creative Cloud. Esse é o que você está querendo baixar. Provavelmente já está instalado em sua máquina e em um Mac está no ícone de cima aqui em cima. Se você estiver em um PC, ele fica no canto inferior direito, abaixo aqui. Estás à procura desta coisa indirecta da Nuvem. Você quer ir para Ativos e você quer ir para Mercado. Nós olhamos para isso mais cedo. O Mercado é muito bom para ícones. Então eu vou clicar aqui, e dizer que precisamos de um carrapato. “ Estou disponível para trabalhar”, você pode ter um carrapato e uma cruz. Então eu quero colocar em carrapato e passar e apenas escolher o tick que eu quero, e há muitas opções aqui. O legal sobre eles é que eles são vetores escaláveis. Este aqui parece bom para mim, vou baixá-lo para o meu portfólio do Dan, perfeito. Aí está, baixando lá. Vou arrastá-lo para dentro. Vou arrastá-lo de novo. A razão pela qual ele não está se arrastando é, você pode ter encontrado esse problema também, é que eu estou na camada chamada Fundo e ele está bloqueado. Eu finjo que coloquei isso lá de propósito só para te mostrar, mas não o fiz. Acontece com o melhor de nós. Além de sua camada de arte, a versão desbloqueada, eu vou arrastá-la para este jaz aqui. O que vamos ver é que nós baixamos uma imagem e você pode ver que não é muito boa porque é pixelização quando eu fico maior. Então, quando você estiver baixando-os, vá para o Marketplace, e quando você clicar neles, este foi feito no Photoshop, não é bom. Vamos clicar neste aqui, este é um SVG. Lembre-se SVG é incrível gráficos vetoriais escaláveis, ele precisa ser AI, EPS ou SVG e ele vai trabalhar. Mesmo que eu não precise disso, tudo bem. Eu vou para o Download e eu vou baixá-lo para o portfólio do Dan, adorável. Aí vem ele. Espere que ele faça o download, aí está ele. Certo, ali está ele. O legal sobre isso agora é que você pode ver instantaneamente que tem a linha azul em torno dele, mas você pode ver que é escalável, o que é muito legal. O que eu gostaria de fazer agora é clicar com o botão direito do mouse nele, Desagrupar e clicar com o botão direito do mouse, Desagrupar novamente. Dependendo de como estes são grupos, eu vou apagar estes, [inaudível] e agora eu tenho um pequeno carrapato. Então eu desagrupei duas vezes. Vou dar-lhe uma cor de preenchimento do meu esbranquiçado e vou reduzi-lo e usá-lo como meu gráfico. Vou ampliar, segurando Shift nos cantos, lembre-se, e lá está o meu pequeno tique-aroni. A coisa legal sobre o uso do Adobe Market é que você pode encontrar coisas vetoriais lá e você pode usá-lo comercialmente e você pode desenhar seu próprio tick. Vamos fazer isso em um pouco, mostrando como usar o Pinto, coisas assim, eu uso para todos os tipos de ícones, só que mais fácil encontrá-los lá dentro. Tudo bem, é assim que usar o Adobe Market para usar ícones emprestados para seus designs. 27. Usando o IconFinder para obter ícones sociais gratuitos de UI de sites: Olá, neste vídeo, o que vamos fazer é pegar essas imagens, esses ícones, esses ícones sociais, e vamos obtê-los gratuitamente de um lugar chamado Iconfinder. Então vamos mudar as cores para combinar com o nosso design. Vamos lá. Primeiro passo precisamos usar Iconfinder, e sair e encontrar nossos ícones. Eu amo Iconfinder, e há um monte de ícones gratuitos online, mas há tantas coisas ruins reais lá fora que é difícil de peneirar e as pessoas no Iconfinder fizeram isso por nós. Então vamos digitar, dizer social. Esta pode ser a sua casa, pode ser produtos, ícone que você está procurando fazer. O que você precisa ter certeza é que depende como se eu tivesse o meu em uso livre e comercial. Sem ligação traseira. Isso só significa que eu tenho que pagar por isso, eu não tenho que adicionar um link pensando neles, isso é totalmente com você sobre como você quer trabalhar. Eu quero ter certeza que o meu é Vector também, porque eu não quero nenhuma pixelação, eu quero escalar bem. Mas os preços são muito baratos, como se eu olhar para Qualquer, os ícones são comprar por um dólar. Então eles não vão quebrar o banco se não houver um que você pode telefonar na opção gratuita ir para pagar por ele e que apoiar o site também. O que eu estou procurando é Vector, Livre, Sem link de volta. Então eu posso ir e usá-lo. A coisa legal sobre isso é não só que ele tem muitos ícones. Quando você clica em um deles, ele tem muitas vezes uma parte de um grupo maior e isso é o que é realmente útil. É fazê-los todos parecerem iguais e ter uma aparência semelhante a todos eles, então eu amo isso sobre este slide aqui. Este é um teste para você. Vamos baixar, digamos, um grupo desses. Qual versão devo obter o SVG, o PNG a IA ou o CSH? A forma de DW. Qual é que eu quero? Ou o SVG, AI será perfeito para nós. Esta versão do Photoshop funciona bem, mas a PNG, não é escalável. Então nós queremos ir em que constrição dentro e fora, e este SVG e AI um, vai nos permitir recolorir eles. Porque a maior parte da cor não está fazendo para mim e nem este azul não está combinando com nossas cores. O que você pode fazer é passar e baixar todos os que quiser. Eu baixei alguns para nós para as alcovas, eles estão em seus arquivos de exercícios, e nós vamos trazê-los agora e mudar as cores. Obrigado Iconfinder, você é incrível. O que eu vou fazer é antes de tudo, eu vou dizer aos meus guias em uma pequena linha que atravessa a parte inferior aqui é apenas parte do meu design. Estou segurando o turno para que ele vá direito, e este não tem preenchimento, nenhum derrame e eu vou usar talvez aquele verde que temos usado. Onde está o verde? Ou talvez um cinza escuro ou cinza claro. Aqui vamos nós. Guias fora. Então agora em meus ícones sociais para estar aqui em baixo. Vamos trazer todas as nossas formas. Vamos ao File e à Place. Na sua área de trabalho, você raspa seus arquivos de exercícios, e aqui estão todos os sociais que eu quero trazer para dentro, e eles são SVGs que eu decidi usar, não importa. AI ou SVG. Eu vou, clique, todos em cima um do outro, só para todos em cima um do outro, que quando eu selecioná-los todos, eu possa manter pressionado o shift e redimensioná-los todos. Agora pequeno atalho legal é se você está segurando o turno, ele restringe a altura e largura, perfeito, nós já sabemos disso. Mas se você manter pressionada a tecla Alt em um PC ou a tecla Option em um Mac, é do centro, muitas vezes isso é bastante útil. Em vez de tentar, sim, você pode ter sorte, você pode saber. Quão grande eles vão ser? Ainda não tenho certeza disso, mas é só isso. O que vamos fazer é escolhê-los todos porque eu quero mudar as cores deles primeiro, e esta é uma boa maneira rápida de fazê-lo. O que vamos fazer é, estes estão todos agrupados no momento. Mas vamos dizer que eu quero mudar um jogo algumas das minhas cores. O que posso fazer é primeiro aproximar. Eu vou fazer esse Facebook primeiro, e há algumas maneiras de fazer isso. A maneira mais fácil é desagruparmos esses caras porque no momento em que estamos trancados juntos. Eu quero mudar este fundo azul, mas eu estaria mudando eles ou o palco. pequeno truque é que temos usado bastante aquela flecha negra. Vamos usar a flecha branca. A seta preta move as coisas fisicamente, e a seta branca se move em torno de pequenos pedaços dentro desse pequeno grupo. Então veja isso. Eu vou clicar fora no fundo e, em seguida, eu clicar apenas sobre este piegas. Você pode ver que eu posso começar a brincar com eles, mesmo que eles são grupo usando esta seta branca. Então clique fora do plano de fundo, clique uma vez no círculo, você verá que ele é escolhido aqui. O que eu posso fazer é fazer algo muito legal, e aqueles acompanham e dizem, porque eu quero que todas essas cores mudem em vez de fazê-las todas individualmente. Então eu posso ir para Selecionar, Mesmo, Cor de preenchimento. Eu vou escolher tudo neste documento que tem a mesma cor de preenchimento é ele. Você pode ver que ele escolheu todos esses caras. Significa que posso mudar as cores de forma rápida e fácil. Escolha a cor de suas cores, e se este foi um ícone multicolorido, você pode simplesmente usar a seta branca e clicar em diferentes partes do mesmo, e decidir e ir e alterá-los todos. O problema seria dizer se eu quisesse mudar a cor do branco e o logotipo do Twitter aqui, se eu clicar em “Branco” e ir Select Same, ele vai escolher branco que têm usado em qualquer outro lugar no documento. Eu não acho que eu usei branco, eu usei isso off-white, mas ele vai mudar tudo de uma vez. Ele tem algumas limitações quando você começa a usar esse Select Same. Nós temos esses caras, vamos encomendá-los no próximo vídeo, vamos olhar para alinhar e distribuir ícones L no Illustrator. 28. Alinhando e distribuindo ícones no Illustrator para o web design: Olá designers de interface do usuário. O que vamos fazer agora é colocar esses ícones alinhados bem e equilibrados nessas colunas. Tudo bem, vamos fazer isso. Primeiro, quero voltar a ligar os meus guias, isto é, ponto-e-vírgula de comando ou ponto-e-vírgula de controle em um PC, e ampliá-lo um pouco. Eu vou para comandar um ou controlar um no PC para obter uma tela cheia porque eu quero ter uma noção de quão grande eu quero que eles sejam. Eu acho que esses caras são um pouco grandes demais para ícones sociais porque é onde o tamanho vai ser exibido para um site. Vou fazer o meu um pouco menor. Está bem. A ordem deles. A maneira que isso funciona é, vamos colocar Facebook dizer que é o meu mais importante, e vamos dizer que Twitter é o próximo e apenas colocá-los em uma ordem difícil. Não precisa ser bonita. Então, o último. É o primeiro e o último que são importantes. Está bem. Vou fazer com que estes tipos abram uma coluna cheia, está bem? Nós os temos em algum tipo de ordem um atrás do outro. Eu vou selecionar todos eles, em seguida, ao longo do topo aqui, se você não pode ver isso, digamos que você está trabalhando em uma tela muito pequena, você pode ter que ir para Alinhar janela, e há um painel inteiro que se abre ou você pode usar o Um em cima aqui, é com você. O que eu gostaria de fazer, em primeiro lugar, é provavelmente fazê-los alinhar horizontalmente. Eu me misturo vertical e horizontal toda vez, você pode ser o mesmo. Vou clicar nisto só para que todos se alinhem. Você vê isso? Tudo alinhado bem. Então há um chamado Distribuir horizontalmente, só porque eu estou lendo na barra de ferramentas lá, mas vamos distribuí-los horizontalmente, e vamos clicar nele. Ele só os espalha uniformemente. Essa é a forma de alinhá-los e distribuí-los. Uma última coisa antes de ir. Não é relativo ao que estamos fazendo aqui , mas será útil para você em algum momento. No momento, por padrão, ele está alinhando à seleção, o que é legal. Ele está fazendo exatamente o que queremos que ele faça, mas digamos que queremos alinhá-lo ao aplicativo, bem pense nesse alinhamento com a página. Diga que vou agrupar esses caras, então eles estão agrupados. Agora eu quero dizer alinhar, mas ele vai fazê-lo para a prancheta, isso significa que quando eu clicar em alinhar para o centro horizontalmente, ele vai alinhar para o centro da minha prancheta, e você pode ver que isso é bastante útil também. Ele vai se lembrar da última coisa que você faz, então eu vou virar as costas para a seleção, eu vou fazer um desfazer para colocá-los de volta onde eles estavam, e eu poderia desagrupá-los novamente porque eu não precisava deles agrupados. Tudo bem, então isso é alinhar e distribuir no Illustrator. 29. Como ajustar formas vetoriais no Illustrator: Muito bem, neste vídeo vamos olhar para a edição vetores que já existem que baixamos, e queremos parar de brincar e ajustá-los um pouco. Nós vamos fazer isso para esta pequena seta simples aqui em baixo, nós vamos mudar o tamanho do talo e ajustá-lo um pouco junto com a cor, e nós também vamos mexer com eles, torná-los tipo de arredondado e fazer todos os tipos de coisas divertidas. Tudo bem, então vamos fazer isso agora. Então vamos começar com a edição de um simples e agradável vamos usar esta seta que eu baixei, eu tenho o meu aqui na biblioteca porque eu baixei do mercado, mas eu tenho um exemplo nos arquivos de exercícios que você pode baixar vá dar uma olhada, chama-se Seta de Ícone, que não deve ser difícil de encontrar. Então vá para Arquivo e coloque isso em, certifique-se de que seu vetor, e nós usamos a seta preta, lembre-se de mover as coisas, e nós usamos limitadamente a seta branca para fazer ajustes, então vamos olhar para isso. Esta é a seta branca, é assim que você ajusta vetores existentes. Digamos que eu quero fazer este pouco mais curto, então o que eu faço é clicar neste canto aqui, então primeiro de tudo clique no fundo, certifique-se de que nada está selecionado, clique neste ponto âncora que eu quero mover esses pequenos pontos nos cantos são chamados de pontos de ancoragem. Agora eu quero selecioná-lo e posso movê-lo, posso ajustá-lo e dizer, isso é o que eu quero fazer, minha linda flecha. Então você pode fazer alguns ajustes básicos com a seta branca. Eu vou desfazer isso, e vamos dizer que eu quero tipo de dobrar isso em um pouco então é um talo mais curto nisso. Então eu vou clicar neste primeiro, então eu vou clicar no segundo plano, clicar no primeiro e, em seguida, manter pressionada Shift, e então vamos adicionar às suas seleções, você tem dois bits selecionados e eu clicar e arrastar para baixo e eu só vou abaixar esse talo por isso é muito mais curto. Você faz o mesmo por isso, eu posso arrastar esse cara, eu vou arrastá-lo um pouco, pegar esse cara e arrastá-lo um pouco. Então eu estou ajustando minha flecha e outra coisa que você pode fazer é no momento que tem bordas afiadas e eu acho que eu quero isso, eu vou deixar isso, então eu vou fazer uma cópia dela, usando minha seta preta, selecionando, Copiar Colar, Vou deixá-lo lá em cima e você vai notar que eu estou olhando para aqui nesta área cinzenta, é um lugar muito fácil para trabalhar sem o tipo de ser impedido por todos os gráficos, guias e outras coisas aqui. Então, com isso selecionado, eu vou voltar para a minha seta branca e o que você vai notar é que você pode ver esses pequenos pontos brancos aqui, estes são como arredondar cantos que é, eu vou zoom um pouco, Se eu pegar esse cara e arrastá-los para dentro porque eu tenho o canto todo selecionado, todos eles vão ficar arredondados. Isso é como arredondar, não precisa ser uma flecha, pode ser um retângulo. Você desenha um retângulo, pega a seta branca, pega os cantos e você pode arredondar os cantos dessa forma. O que você também pode fazer é dizer que você quer alguém em torno de um dos cantos é pegar a seta branca, e clicar em, é chamado de ferramenta de seleção direta, eu continuo chamando de seta branca porque isso é mais fácil de descobrir, mas é chamado de ferramenta de seleção direta, mas se você clicar em um deles, você pode ver que eu só tenho um ponto em um desses e eu posso cortar este canto aqui e este canto, mas ele adora esse tipo de caixas de factóides lágrimas. Então é assim que converte coisas nesses cantos arredondados. Outra coisa que vamos fazer é olhar para convertê-los porque no momento que é como se fosse um canto arredondado único, o que vamos fazer é pegar esse cara, vamos copiá-lo e colá-lo e o que eu gosto de fazer é começar tipo de ajustá-lo em um pouco mais de uma forma estilo à mão livre. Então eu vou pegar minha seta branca, eu vou clicar neste canto aqui e em vez de apenas torná-lo este canto arredondado, que é realmente simétrico, com ele clicado aqui em cima, você pode convertê-lo a partir do momento É um canto, você pode dizer que é um canto bem afiado, você pode clicar neste aqui e isso vai suavizar. Ele só vai dar ao nosso ponto de ancoragem essas alças para que você possa ver que o caminho ainda passa pelo ponto de ancoragem, ele estava lá, agora ele foi esticado para fora por essas pequenas alças aqui, eu penso nelas como pequenas coisas de gravidade Esse tipo de, a linha ainda tem que passar pelo ponto de ancoragem, mas essas pequenas alças ajustam como ela passa e você pode começar a brincar com ela, para dar um pouco mais de forma livre. Você também pode quebrar isso porque no momento em que eles são a serra, onde você faz um lado ele vai consertar o outro. Então, o que você pode fazer é que você quer encaixá-los, mantenha pressionada a tecla Alt em seu PC ou tecla Opção em um make e assistir isso, Eu clique em um deles eles tipo de encaixar. Então ainda está dobrando a linha, mas eles não estão mais fazendo essa opção de ver serra e então há algumas pequenas coisas que aprendemos aqui, uma é que podemos arredondar essas curvas agarrando esses pontos, mas se quisermos mais de uma forma livre, clicamos no canto, e dizemos que eu gostaria que você fosse um suave e se você quiser quebrá-lo porque no momento é uma espécie de causa alisamento em todo o lado, mas há uma interação entre os dois que mantém a suavização, mas digamos que você não quer isso, você pode manter pressionada a tecla Alt ou Option, quebrá-las e você pode parar de mexer com essas coisas um pouco mais de detalhes. Então a próxima coisa que quero fazer é colorir. Agora eu baixei normalmente você basta clicar em suas cores aqui e ele vai funcionar, mas este exemplo particular, e isso é provável que você está indo para obter do localizador de ícones ou do mercado é assistir este canto vetorial e ir você uma cor. Ele vai usar estes assistir estes aqui em baixo wierdly se sente como um bug no ilustrador do que qualquer coisa, eu estou desfazendo para se livrar das cores é que você pode fazer uma de duas coisas, uma é você pode continuar clicando duas vezes nele, entrar esta seta, clique duas vezes nele novamente para entrar no caminho e então eu posso colorir. Nós deixaríamos esse tipo de combinação leve que alguém é salvo, eu vou desfazer isso, voltar clicando duas vezes no fundo. Eu acho que a maneira mais fácil são esses temas de cores aqui, eu vou clicar com o botão direito do mouse nele e ir para Adicionar a Amostras e você vai notar no fundo aqui meu Painel de Amostras, minhas pequenas cores pré-fabricadas são as cores que você pode ver pequenas versões disso e eu clico sobre isso e digo no fundo aqui, áreas que eles tinham as cores, clicando duas vezes nele até você entrar dentro dele e, em seguida, mudar a cor. Então certifique-se de clicar duas vezes no fundo para voltar até aqui, e vamos usar esse cara. Então eu vou copiá-lo, eu vou deixar aqueles caras ali, eu vou ampliar e eu vou usar esta pequena seta aqui. Ele é um pouco grande, mantenha pressionado Shift lembre-se de dimensionar proporcionalmente e o que eu vou fazer é eu vou dimensioná-lo para baixo e eu vou girá-lo ao redor. Agora, há uma ferramenta de rotação e há lá, você pode clicar sobre isso e simplesmente girá-los ao redor. O que a maioria das pessoas faz é apenas usar a seta preta, se eu ampliar, se você pairar acima de qualquer um desses, nós usamos os lotes de idades para redimensionamento, mas veja isso se eu tiver um pairar lá fora, você pode ver isso é como a mão de nenhum homem, então que o dimensionamento, rotação, nada mais, rotação, escala, então queremos a rotação com a pequena seta dobrada, e você pode girá-lo e se você segurar a tecla Shift enquanto você está girando, você pode vê-lo bloqueá-lo em Ângulos de 45 graus e isso vai funcionar para a minha flecha, queremos ir por ali. Certo, aí está minha pequena seta, e eu personalizei isso um pouco, não coloquei muito o talo, mas aprendemos um pouco sobre personalização de gráficos vetoriais que talvez não tenhamos criado, vamos seguir em frente no próximo episódio e olhar para criar nossos próprios gráficos. Está bem, vejo-te no próximo vídeo. 30. Criando ícones e logotipos personalizados usando a ferramenta de construtor de formas no Illustrator: Oi lá. Neste vídeo vamos construir esta forma de logotipo aqui usando o construtor de formas. Nós também vamos construir todos esses caras divertidos. Vamos fazer isso e aprender a usar a ferramenta de construtor de formas. Primeiro, vamos deletar esses caras. Eles eram de um tutorial anterior, e nós vamos usar esta área de colagem no lado aqui, mas você pode usar um novo documento. A ferramenta construtor de formas, você vai adorar. Quando eles saíram com isso como um treinador, eu estava pulando em dias felizes porque a próxima coisa que precisamos fazer depois disso é a ferramenta de caneta. Se você já tentou aprender o Illustrator antes, e você acessou a ferramenta caneta e tenta juntar peças. É uma dor no traseiro. Agora construtor de forma vai fazer de você um profissional muito rápido. O que vamos fazer é eu vou dar um derrame no exterior da magenta, só porque eu vou dar-lhe um bom golpe grosso para que você possa vê-lo. Mantenha pressionado, “Shift” para obter um círculo perfeito. Vou fazer o mesmo com a ferramenta de retângulo. Ferramenta de retângulo, eu vou desenhar isso. Eu estou apenas construindo uma forma aleatória para mostrar um pouco de um exemplo, eu vou pegar a ferramenta estrela. Você pode ver que há todo tipo de coisas estranhas acontecendo aqui. Agora, se eu quiser preencher essas coisas, se você nunca usou o Illustrator antes, você pode não ficar tão impressionado, mas se você se divertiu e tentar ensinar a si mesmo, isso vai ser alucinante. Selecionei todos os três. Vou pegar essa ferramenta inocente aqui embaixo. Chama-se ferramenta de construtor de formas. O que me permite fazer são algumas coisas boas. Permite-me preencher estas lacunas. Eles não se juntaram, mas isso vai obrigá-los a fazê-lo por nós. Vou escolher uma cor de preenchimento. Eu vou dizer que eu quero que você encha com, eu não sei. Onde estão as minhas amostras, estas são as amostras que comprei daqui. Vou pegar aquele verde e ver isso. Feche isso de volta. Posso dizer que quero que sejas verde e talvez sejas verde. Mas eu gostaria que o resto de vocês, digam que este pedaço seja laranja, ou vermelho. Você pode ver o quão rápido e fácil é começar a colorir essas coisas. O que você também pode começar a fazer é começar a juntar-se a eles. Diga que eu quero que esses caras sejam da mesma forma, não duas cores separadas com um golpe em torno dele. O que você pode fazer é, eu escolhi essa cor aqui. Vou arrastar-me. Você pode ver que eu desenhei uma linha clicando e segurando meu mouse sobre esses dois, e assistir, ele faz com que ele se funda. Então, se você já mexeu com a ferramenta Pathfinder, diga adeus ferramenta Pathfinder também. bom também é que você pode aparar as coisas, dizer que você não quer esta caixa aqui em cima. Você pode manter pressionada a tecla Alt em um PC ou a tecla Option no Mac, assistir a isso, e clique nisso, e hey, apara para cima, bom. Então eu posso dizer que na verdade eu não quero isso, eu não quero isso. Você pode aparar algumas coisas, eu não quero nenhuma dessas duas. Você pode parar de construir formas, enquanto usa formas pré-fabricadas existentes. Sim, torna muito fácil começar a criar coisas. Você pode ver que eles são todos separados. Eu tenho um pouco legal, eu não sei o que é isso. Mas isso é o começo com ele. Não sei de onde ele foi deixado. Vamos ver uma das coisas que você pode fazer com ele. Digamos que vamos usar a ferramenta de linha e vamos desenhar um pequeno ícone home, como um botão home. Estou desenhando a mão livre. Tudo que você tem que fazer é garantir que eles se sobreponham. Você pode ver minha casinha aqui. Uma casinha aqui embaixo, certificando-se de que tudo se sobrepõe. Caso contrário, pegue sua seta branca, clique em um dos pontos, clique no fundo, clique em um dos pontos e você pode movê-los. Certifique-se de que todos se sobreponham. Selecione tudo, pegue meu construtor de formas. Escolhe uma cor com a qual vou preenchê-la. Na verdade, vamos colocar um teto nessa coisa. Vamos colocar um teto sobre ele. Pegue meu construtor de formas. Na verdade, selecione-os primeiro. Agarre construtor de forma, escolha uma cor de preenchimento. Uma das minhas cores, escolhi verde para o telhado. Legal, ei, você pode preenchê-lo e então eu posso ir para, o que mais eu tenho aqui, escolher uma cor diferente, laranja. Encha a casa e a porta ficará amarela. É muito fácil criar formas personalizadas aqui. Agora você pode estar pensando, “E todos os foguetes feios?” Há algumas coisas que podemos fazer. usar a minha flecha negra. Clique em off em segundo plano. Clique em você Shift, selecione todos os três. Eu poderia usar isso. Ainda tenho o derrame do lado de fora. Eu poderia selecionar todos eles e dizer, “Sem Stroke”. Você pode ver que eu fiz todas essas formas ou você pode começar a fazer coisas como esta. Digamos que eu só quero pedaços dos traços, mas eu quero cortar essas bordas usando a ferramenta construtor de formas novamente, mantendo a tecla Alt pressionada. Lembre-se, por padrão, que ele está adicionando formas. Posso clicar e adicionar, mas se eu quiser remover formas, mantenho pressionada a tecla Alt em um PC ou a tecla Option no Mac, assista isso, posso arrastar através desses caras. Adeus. Quão legal é isso? Adoro esta ferramenta. Você pode se livrar dos que quiser. Fique com os que você não tem. Isso é um pouco mais da ferramenta de construtor de formas. Você também pode fazer coisas como esta. Você pode pegar dizer, “Tipo”, e eu vou fazer, “Dan”. Não, eu não quero um ditado. Clique e digite a palavra “Dan”. Vou torná-lo agradável e grande. Onde estão os tamanhos da minha fonte. Ainda maior. Mantenha a tecla Shift pressionada, use a minha seta preta, faça com que seja agradável e grande. Escolha uma fonte que não seja super idiota. Museo Slab é uma espécie de homem. Agora construtor de formas não vai funcionar assim enquanto é tipo editável. O que precisamos fazer é ir para Type e este aqui, e aqui é criar contornos. Ok, agora não é mais tipo editável. Não posso mudar a ortografia ou a fonte. Você pode querer duplicá-lo antes de fazer isso. Mas agora é uma forma como estas outras formas aqui, e podemos começar a brincar com elas. Por padrão, eles são todos agrupados. Vou clicar com o botão direito neles, Desagrupar. Espero que agora eu possa começar a fazer algo legal. Quando eu disser “legal “, vai ser bem chato, já posso dizer. É um bom exemplo. Selecione todos esses caras, eu vou pegar minha ferramenta construtor de formas. Afaste-se, construtor de forma. O que eu vou fazer é talvez apenas apagar os bits que cruzam para fazer algum tipo de, eu nem sei o que estou fazendo. Escolha uma cor de preenchimento. Vamos pegar uma cor aqui das minhas amostras. Você e você. Oh, sim, terrível. Na verdade, eu poderia pegar a ferramenta de construtor de formas e apenas apagar aquela ali. Eu não quero ele. Oh, sim, nós somos funky. Ferramenta construtor de formas, ficando melhor. Vamos olhar para reconstruir nosso logotipo porque isso é realmente o que eu queria fazer, é fazer algo assim e você pode parar. Você provavelmente vai ser capaz de ver que isso vai ser bem fácil, certo? - É. Para fazer essa forma lá, vamos pegar minha ferramenta de elipse. Eu segurei, “Shift” para ter certeza que vai perfeitamente esférico. Eu poderia realmente fazer isso ter um derrame por fora, não há razão para fazer isso, só para tornar mais fácil para vocês entenderem. Há apenas um golpe preto por fora, estou de volta na minha flecha negra agora. Quero duas dessas probabilidades, então vou copiá-la. Se eu colá-lo, o Illustrator basta colá-lo no meio da sua tela. Se você vai para, “Editar” e ir para, “Colar na frente” nada parece que acontece, mas há outra cópia exatamente na frente da que tínhamos antes. Se eu pegar um dos cantos, posso torná-lo menor. Se eu segurar, “Shift” enquanto eu estou pegando ele, ele vai torná-lo perfeitamente menor, como na altura e na largura. Lembre-se do atalho que aprendemos alguns vídeos atrás, se mantivermos pressionada a opção também. Então mude e opção ou se você estiver em um PC, é Shift e Alt, e ele vai fazê-lo a partir do centro. Temos dois círculos. Você poderia desenhá-los separadamente, selecioná-los e alinhá-los. A próxima coisa que eu quero fazer é pegar minha ferramenta de linha e porque eu tenho guias inteligentes em. Se não fizer isso, certifique-se que está marcado, eu posso ir do centro aqui. Se eu tentar desenhar outra linha do centro, ela começa a ajustar a que eu tenho. Então o que você pode fazer é voltar para a seta preta, clicar fora no fundo, depois pegar sua ferramenta de linha, começar uma nova. De volta à seta preta. Clique em off em segundo plano. Um pouco doloroso. Eu só estou fazendo isso como linha segmento-y coisa para nossa marca para ser algum tipo de infografica-y olhar bit. Você pode ver como vai ser fácil de preencher. Seta preta, selecione-os todos e eu vou fazer algo assim. Lembre-se, [inaudível] versão gigante. Talvez tenha muitos segmentos. Não sei como vou fazer isso. Coloque-os, vamos resolver isso. Com essa ferramenta selecionada, construtor de formas. O que eu vou fazer é aqui embaixo, eu vou pegar uma amostra. Não importa se você pega aqui ou aqui embaixo. Importa se você clicar neles, ele apenas preenche a coisa toda. Parece um pequeno inseto com isso. As bibliotecas são incríveis, mas há algumas coisinhas. Então lembre-se, se você estiver pulando para este tutorial sozinho, você pode precisar clicar com o botão direito do mouse nesse cara e dizer, “Adicione as amostras” para que você as tenha aqui. Essa cor vai ser aquela, aquela vai ser aquela. Aquele vai ser aquele. Está indo contra um fundo escuro, então é por isso que eu posso usar aquele branco. Eu estou bem com isso. Incrível. O que eu quero fazer é apagar esses caras. Há algumas maneiras. Mas o que eu poderia fazer é clicar nisso, segurar, “Shift” para selecionar todas essas peças e simplesmente movê-las. Seleccione todos eles. Eles ainda têm um golpe negro em torno deles. Diga: “Nenhum, por favor”. Agora eu tenho um pouco de forma legal para o meu logotipo. O que eu posso fazer é, porque eles são todos separados, que é legal, selecioná-los todos, clique com o botão direito neles e ir para, “Grupo”. Se você estiver em um Mac e estiver tentando clicar com o botão direito do mouse e ele não clicar com o botão direito do mouse, vá para, “Objeto” e há, “Grupo” aqui. Você vai se encontrar usando os lotes de ferramentas de construtor de formas. É o meu go-to para construir todo tipo de formas interessantes sem ter que ir para a ferramenta de caneta. Mas a ferramenta de caneta é uma necessidade e vamos aprender isso no próximo vídeo. Então vamos fazer isso. 31. Desenhando ícones e logotipos no Illustrator usando a ferramenta de caneta: Tudo bem. Neste exercício, vamos desenhar este pequeno kiwi e esta folha de trevo no fundo aqui, e vamos desenhar uma coroa. São todos vetoriais. Eles são bons em camas de vitória, e nós vamos mostrar-lhe como usar esta adorável, adorável caneta ferramenta que existe lá. Vamos fazer isso. Primeiro passo, o que vamos fazer é desenhá-los em seu próprio documento e copiá-los e colá-los mais tarde, apenas para não ficar muito confuso com este documento. Vamos para File, vamos para New. Não importa, estaremos na Impressão. Vamos usar A4 ou Letter. Não estou muito preocupado com o tamanho. Vamos trazer algumas coisas para desenhar. Agora, na maioria das vezes, se for uma forma razoavelmente complexa, vou desenhá-la manualmente no meu caderno e depois tirar uma foto e trazê-la para dentro, porque sou muito melhor em desenhar com as mãos do que com a Ferramenta Caneta. Se é uma forma simples como um coração ou uma estrela ou algo assim ou uma flecha, eu vou tentar e à mão livre com a ferramenta Caneta. Mas vamos olhar para trazer algumas das coisas que desenhamos. Então, File, Place. Em seus arquivos de exercícios, baixe os arquivos de exercício da Ferramenta Caneta. Se você não tiver esses arquivos de exercícios, há um link na página em algum lugar para baixá-los. Eu vou clicar e arrastá-lo para fora para que ele se encaixe aqui dentro. Isto é o que vamos desenhar. São coisas boas e progressistas para desenhar. Por isso, desenhei isto à mão. Se está se perguntando o que é isso, é um kiwi. É um passarinho nativo. É um kiwi terrível, e levei muito tempo para desenhar esse também. Kiwis são difíceis de desenhar. São como bolas de futebol com pernas. De qualquer forma, então você desenhou a mão sua coisinha que você quer. Agora, o que queremos fazer é desenhar sobre o topo disso, e queremos bloquear esta camada de fundo para que ela não se mova no meio do desenho. A maneira mais fácil, já fizemos isso antes em Camadas. Mas veja a camada 1, vamos bloqueá-la. Este pequeno ícone aparece nesta pequena caixa vazia aqui. Vamos chamar isso de fundo. Ótima. Vamos fazer uma nova camada. Eu só vou ter certeza que nós temos esta camada selecionada e esta vai ser a nossa camada de desenho. Apenas certifique-se de que estamos nesta camada, vamos pegar a ferramenta Caneta. Onde está a nossa ferramenta Caneta? Ali está ele. Queremos este chamado Caneta Ferramenta. Então, o básico é, vamos ampliar. Se eu começar a desenhar agora, veja o que acontece. Acabas com esta caixa branca a enchê-lo. Isso acontece muitas vezes quando as pessoas estão começando. Vamos dar-lhe nenhum preenchimento. Então esse é o primeiro aqui, sem preenchimento, e o traço do lado de fora, algo que contrasta este fundo. Não importa que cor é porque vamos mudá-la mais tarde. Vou usar um verde brilhante. O traço vai ser um pixel. Desenhar formas como esta, como setas e coroas, são muito fáceis porque quando estamos usando a ferramenta Caneta, basta clicar uma vez para um canto. Faremos curvas em um segundo. Tudo o que você vai fazer é trabalhar o seu caminho ao redor. Então clique uma vez. Você pode ver que esta coisa está ligada a ela. Ei, não se preocupe com isso, só vendo onde a linha vai parar. Vou clicar mais uma vez aqui, clicar mais uma vez aqui. Você pode ver essa linha verde começando a aparecer. Clique mais uma vez aqui, mais uma vez aqui. Mais uma vez lá, ali, ali, ali. Temos uma terrível coroa irregular. Mas é como um exercício de desenho, então não vamos nos preocupar muito com isso. Vamos dar um preenchimento. Então vamos pegar nossa flecha preta com aquela selecionada. Clique em baixo em segundo plano, clique nele. Posso dar-lhe uma cor de preenchimento ou a minha deixa. Dê a ele qualquer cor completa e dê um golpe de talvez nenhum. Incrível. Temos uma coroa. Para vê-lo por si só, você pode desligar o globo ocular nesta camada de fundo e essa é a nossa coroa realmente bonita. Vamos ver o nosso trevo. É como se eu estivesse vivendo na Irlanda agora, eu sou um kiwi, você entende. Nós vamos desenhar isso, e nós vamos desenhá-los como três partes separadas e então combiná-los porque um trevo obviamente não tem essas lacunas dentro Mas estamos transformando isso em um exercício de desenho. O que vamos aprender agora é que trabalhamos nos cantos, você clica uma vez. Para obter uma curva, clique e arraste. É melhor começar em uma esquina porque isso torna mais fácil. Então eu vou clicar uma vez. Vê aquela linha ainda ligada? Mas em vez de clicar novamente, o que vai nos dar um canto, o que eu quero fazer é ter desfeito então. Então eu cliquei uma vez aqui em baixo. O que queremos fazer é encontrar a metade desta curva. Esta curva vai daqui todo o caminho, e literalmente, metade do caminho é quase lá. Mas o que você quer encontrar é o ápice, onde ele muda mais. Você pode ver lá é assim, ponto do canto ou o ápice. Veja isso, se eu clicar e arrastar, você pega essa pequena alça que sai. Nós os vimos mais cedo. Eu estou clicando, segurando e arrastando, e nós podemos balançar por aí. Então não tenha medo de arrastá-lo. Que isso, eu posso arrastá-lo para que seja realmente apertado e muito afiado canto ou eu posso arrastá-lo para fora e pode ser muito longo, canto exagerado. Então, dentro e fora e mexa em torno dele para levá-lo para ir o ângulo que você quer. Agora, o que você vai descobrir é que você nunca vai acertar na primeira vez. Você se mexe, sua rotação envelhece. Não se preocupe, esta é a fase 1. Podemos consertá-lo depois usando a seta branca. Vou arrastá-lo até encontrar lá. Então isto é um canto ou curva? Isso é um canto. As pessoas têm tendência a clicar e arrastar este também, que não é o que eu quero. Eu vou para aqui e apenas clicar uma vez porque isso é um canto, é uma grande mudança de direção. Você pode ver o grande aro do topo aqui? Eles são como, oh não, erguidos. Isso é apenas parte do desenho com a ferramenta Caneta. Podemos consertar isso mais tarde com bastante facilidade. Vou desfazer. Havia um canto, clique uma vez. Esta coisa aqui é uma curva, clique e arraste. Aqui em baixo, isto é um canto ou uma curva? É um canto, então você vai clicar uma vez. Estou chegando lá, certo? Sim, isso é o que desenhamos. Uma vez que você tem os cantos lá e os pontos aproximadamente no ponto certo, então você pode corrigi-lo com a seta branca. Há sempre um pouco de retoque no final, e você clica neste ponto de ancoragem aqui. Esse é o cara que precisa ser consertado, e veja isso, eu posso mexer com ele, sim. Então eu conserto ele. Mas então, esse cara não está bem, então eu pego esse cabo e dou uma manobra nele. Posso movê-lo para cima e para baixo, mas vê isto? Eu posso movê-lo mais apertado também. Você pode ver que está ficando um pouco melhor? Posso começar a mexer com isso. O que você vai descobrir é que você vai conseguir isso perfeito, mas você vai destruir este outro lado. Há definitivamente um monte de toing e sapo. É como uma gangorra. Eles têm que se equilibrar para parecer agradável e suave. Mas você vai descobrir um equilíbrio entre os dois. Esse cara é o mesmo. Esse cara aqui, no entanto, talvez não esteja longe o suficiente. Vou fazer zoom. Você pode ver? É como se não houvesse questão de dobrar essas alças para fazê-las sair. Então, fisicamente, preciso mudar esse cara para cá. Então eu posso arrastá-lo um pouco para lá. Esse cara aqui, eu tento consertar. Há sempre um pouco de toing e sapo entre os dois. Vou diminuir o zoom. Sim, está parecendo bem para o meu primeiro. Vamos passar, e é só este passo em repetição. Então eu vou pegar a ferramenta Caneta, clique uma vez para um canto. Aqui, clique e arraste para uma curva, clique uma vez para o canto, clique e arraste para uma curva, clique uma vez para o canto. Depois de um tempo você pode ver que eu não estraguei este tanto quanto o último, mas ainda há um pouco de retoque a ser feito. Adorável. Agora, vamos tentar o terceiro. Espero que, enquanto você estiver indo junto, seu primeiro vai parecer terrível. Imagino que será uma grande coisa. Isso está tudo bem. Esqueça ele, você teve uma rachadura. Tente o próximo, e no terceiro , provavelmente estará ruim recentemente. Depende de suas habilidades para desenhar com uma ferramenta Caneta, algumas pessoas agarrá-lo. Agora, eu ensinei milhares de pessoas com uma ferramenta de caneta e eu prometo a você, todos são terríveis por um longo tempo. É preciso muita prática com a ferramenta Caneta para pegar o jeito dela. Aqui vamos nós. Você pode ajustá-los. Agora, você pode achar que é mais fácil. Então, se eu clicar fora e clicar de volta nele, e para dizer na verdade, eu quero que ele não tenha preenchimento. Eu tenho aquele golpe verde do lado de fora enquanto eu estou trabalhando para tornar um pouco mais fácil ver a coisa por baixo. Não tenha medo de mover os pontos de ancoragem também se você não estiver achando que eles estão funcionando. Agora, vamos olhar para esta última parte, o pequeno caule. Eu vou pegar de volta para a minha ferramenta Caneta, venha aqui ferramenta Caneta. Veja isso, eu vou clicar uma vez. Se você está achando muito difícil, você pode ver que ele está tentando pular e se juntar e ligar e fazer todas essas coisas? Isso pode ser útil, mas em termos da ferramenta Caneta, muitas vezes não é. Então eu vou desfazer para me livrar desse ponto, e eu vou desligar meus Guias Inteligentes. Onde estão os Guias Inteligentes? Não posso te ver em lugar nenhum. Aí está você, Guias Inteligentes. Ferramenta Caneta. Clique uma vez para um canto. Você pode ver aqui, esta é apenas uma curva muito lenta, então o que eu preciso fazer é no meio dela, sobre lá, eu vou clicar e arrastar. É aqui que fica um pouco estranho. Você pode ver aqui, eu só vou trazê-lo para dentro Clique uma vez lá, eu vou fazer isso uma extremidade plana. Então há apenas uma ligeira curva aqui. Vou esperar no meio do caminho, clique e arraste. Para que lado você arrasta? As pessoas fazem isso o tempo todo, arrastam para aqui, e eu estou tentando que não está funcionando. Esse cara precisa ir até lá. Se der terrivelmente errado, se você fizer isso, e vamos nessa, e você vai por aqui, e você está tipo, junte-se a ele e você tipo, isso não parece certo. O que você pode fazer é pegar a flecha branca. Vou ampliar um pouco. Eu vou dizer que esse cara aqui, você precisa ser trocado. Você pode começar a ajustá-lo. Eu vou selecionar esse cara, dar a eles a mesma cor de preenchimento, e você usa a ferramenta conta-gotas, nós o aprendemos no início do exercício, ferramenta conta-gotas. - Legal. Tudo bem. Aquele cara é péssimo. Você poderia trapacear. Eu não vou saber. Vou copiá-los e colá-los. Se você pegar um deles, bom. Apenas vá e repita. O que vamos fazer agora é antes de passarmos para o kiwi, vamos juntar-nos a estes tipos. Então pegue-os para que se sobreponham. Esse cara aqui, eu quero que ele fique de fora, mas talvez não desse jeito. Aqui vamos nós, assim. Eles estão todos sobrepostos e lembre-se da nossa incrível ferramenta que une as coisas. Agora ligue-os todos. São todas formas separadas. Você poderia deixar assim, não há nenhum problema com isso. Mas digamos que você queira juntar-se a todos eles, vamos usar a ferramenta Construtor de Formas e você pode desenhar em todos eles. Você pode arrastar pela segunda vez para se juntar a esses dois? Junte-se a esses caras. Junte-se a esses caras. Talvez tenha que fazer zoom um pouco. Quero que todos esses caras façam parte da mesma gangue junto com o caule aqui. Você pode ver agora que eles são uma forma completa. Adorável, como somos incríveis? Agora o pássaro feio do futebol. Adoro este pássaro, mas não o desenho dele. Tem um estranho [inaudível]. De qualquer forma. Esse cara vai ser mais complicado. É basicamente uma versão longa disso. Vamos fazer isso. Pegue a ferramenta Caneta e vamos começar com o canto. Vou começar com este aqui. Clique nele uma vez. Para que lado eu vou? Agora vou por aqui. Agora esse cara tem alguns, ele não é apenas um círculo completo por aqui. Se eu tentasse fazer isso, eu chegaria lá na maioria das vezes. Mas porque ele tem um arco lá e um arco diferente na parte de trás. O que podemos descobrir é que vamos usar duas pequenas alças para fazê-la girar. Não fique, o que muitas pessoas fazem é que eles vão fazer assim e eles vão adicionar muitos deles para obter a curva. Tudo bem, e funciona. Mas você vai acabar com uma forma. Deixe-me desligar a camada de fundo. Você vai acabar com uma forma que nunca é tão suave. Há todos esses pequenos malandros nele. Vou voltar a ligar a camada de fundo. É sempre melhor usar o mínimo de pontos de ancoragem possível, mas quando você é novo, é difícil saber o mínimo que você pode fazer. Mas neste caso, provavelmente vai precisar de dois, então eu vou para um, apenas para canto, clique uma vez. Então aqui, eu vou talvez até lá, clicar e arrastar. Estou alinhando, empurre. Eu vou descer aqui e talvez outra curva ao redor do bumbum dele. Não preciso de muito lá. Você pode ver que estava funcionando e você tem a inclinação apenas para ir clique uma vez. Mas porque ele é um ponto de canto, vai ser muito difícil fazer com que pareça suave por lá. Consegue ver esse pequeno jink? Não se preocupe se chegar aqui, só precisa de um pouco das alças. Podemos consertar isso depois colocando-o de volta, mas pelo menos está indo bem através da curva. Você pode clicar aqui uma vez. Você vai ser como, esse olhar aqui terminaria. Tudo bem, lembre-se daquela flecha branca depois, podemos consertá-la. Agora esses pés terríveis, eu não sei o que eu estava fazendo com eles. Eles são terríveis. Você pode ver [inaudível] adivinhando o que há lá dentro? O que posso fazer é trocá-lo para não ter preenchimento e ter um derrame, vou levar o derrame para a frente. Eu estou usando este aqui porque enquanto você está usando a ferramenta Caneta, aquela coisa que nós amamos desaparece, então eu estou usando o painel Amostras. Vou usar verde para o meu traço e ainda continua com a ferramenta Caneta. Clicando aqui, esse é o meu péssimo pé. Agora, a meio desta curva, clique e arraste e aqui está o meu canto. Clique uma vez, clique e arraste. Clique uma vez, quero dizer para os pés. Nem sei quantos dedos tem o meu pássaro, sou um péssimo Kiwi. Muitas esquinas. Agora este é fixe. Isto vai por ali, depois vai por ali, depois vai por ali, por isso vai haver três. Vai ser este, vai ser este e vai ser este. Se o seu não se parece com isso, não se preocupe, coloque-os nas posições certas e podemos usar a flecha branca depois. Aqui em baixo é um canto, mas no meio aqui sobre o meio. Ótimo, bom. Clique uma vez. Curva de bico, clique uma vez, curva, clique uma vez. Vamos consertar isso. Está tudo bem. Meu desenho não é bom, então o desenho em cima não pode ser muito pior. Vou arrebentar com a minha flecha negra. Lá vai você e eu vou lhes dar nenhum derrame. Vou dar-lhe uma cor de preenchimento. Eu não tenho minhas amostras do último exercício, então o que eu vou fazer é provavelmente apenas colorir em cores aleatórias e depois mudá-lo quando eu arrastá-lo para o meu outro documento porque essas cores vão existir lá. Mas o que eu vou fazer agora é ir para a minha seta branca, clicar em qualquer um desses pontos de ancoragem e começar a mexer sobre o que há para experimentar, alguma dignidade meu passarinho. Em vez disso, vou tentar consertar a cabeça dele enquanto lá estivermos. Eu sempre acho que é mais fácil apenas desenhar sobre o topo, desenhá-lo manualmente primeiro e depois desenhar sobre o topo e corrigi-lo depois. Você pode ser diferente, você pode apenas desenhá-lo à mão. Mas sim, então a ferramenta Caneta, uma última coisa que eu gostaria de compartilhar com vocês com a ferramenta Caneta é dizer que há uma curva onde deve haver um canto e canto onde deve haver uma curva. Fizemos isso um pouco mais cedo quando começamos a ajustar vetores existentes, confira esse vídeo. Mas vamos dizer que eu quero que isto seja um canto agora, ele é um pássaro traseiro rígido. Eu acidentalmente coloquei um canto onde eu queria, desculpe, uma curva onde eu queria um canto. O que vou fazer é clicar nisto. Você pode ver que ele tem um bom ponto agora. Ele é como um pássaro de camelo. Se eu quiser voltar a ter uma curva, eu clico em “Curva”. Vou colocar exatamente de volta, então vou ter que arrastá-lo para fora. Legal, incrível. Diga que há um ponto que você não quer, diga que eu quero fazer tudo isso em um ponto, há um extra que eu não quero. Você pode pegar a Caneta ou você pode, desculpe, selecionar em qualquer um dos pontos de ancoragem. Você pode ver aqui em cima que diz Anchor e há um que diz Remover ponto de ancoragem selecionado e ele vai desaparecer. Você pode apenas tentar e realmente mover este ao redor e tentar obter um grande movimento porque é mais suave. Você pode ver que funciona. Na verdade parece melhor. Vou deixá-lo assim. Não gosto dele, vou voltar. Isso se você quiser adicionar um ponto de ancoragem. O que você pode fazer é você pode ir para a ferramenta Caneta novamente e se você decidir que você precisa de outro ponto de ancoragem sobre aqui, ver com apenas com a ferramenta Caneta selecionada, Eu posso apenas clicar lá e eu tenho um extra. Me dá um pouco de controle extra para parar de se mexer e parar de brincar com esses caras. Vou desfazer isso porque não quero. Agora vamos movê-lo para o outro documento, então eu vou diminuir o zoom. Não preciso da coroa. Só preciso destes dois. Vou esmagar os dois. Vou pegar uma cópia. Então, edite, copie. Ir para o Illustrator e o que eu vou fazer é acabar com esses caras. Por mais adoráveis que fossem, não preciso mais deles. Na verdade, desenhei o meu logótipo. Você pode reutilizar o seu. Você poderia apagar o logotipo. Exclua o logotipo no final, use o novo que você criou. Mas eu só vou colar esses caras. Coisa interessante. Você vê que algum pouco disso veio junto? É porque eu acho que eu só tinha a flecha branca e ele tinha aquela parte selecionada. Agarre com sua flecha preta. Clique em off, selecione os dois caras, Copiar. Selecione esses caras e cole-o lá, ambos. Agora posso ir ao meu Amostras e escolher a cor de preenchimento. Vou escolher o verde. O que vou fazer é alinhá-los no fundo. É como se eu nem soubesse por que eles estão aqui, eles são mais um exercício de ferramenta de caneta. Eu os amo? Estou amando mais o kiwi. Ele é o meu kiwi. Sou um pequeno trevo. Não vai entrar no fundo aqui. Isto é como uma coisa gráfica fixe. Kiwi é um pouco grande. Isso é tudo para a ferramenta Caneta para o momento. Você pode ter que assistir novamente este um par de vezes. Caneta ferramenta pode ser difícil, não desanime, é difícil eu prometo. Você pergunta a qualquer designer gráfico que conheça a ferramenta Caneta, eles vão odiá-la por um longo tempo até que eles tiveram que usá-la por um tempo e então eles vão preencher essa lacuna e começar a ser capazes de usá-la e então isso se torna seu melhor Amigo. Eu adoro isso. Provavelmente detestas nesta fase. Em seguida, basta usar a ferramenta Forma um pouco e Caneta quando você precisar. Isso é tudo para este vídeo. 32. Criando uma versão para tablet do design da nossa UI no Illustrator: Neste tutorial, vamos criar nossa visão tablet. Vai parecer muito parecido. Vamos brincar com um pouco do estofamento nos lados aqui, não é tão divertido amassado. Vamos reorganizar a ordem de empilhamento dessas miniaturas e sim, pequenos pedaços e pedaços, mas vamos nos preparar tablet completo. Vamos começar. Agora eu já planejei através do que eu queria fazer na minha armação de arame. Vai ser fácil seguir isso. O que eu também encontro é, os quadros de arame perto do que eu quero, mas eu acabo realmente mudando um pouco como eu estou trabalhando com a cópia real e as imagens reais. Primeiro vamos conhecer os meus guias. Estou usando ponto-e-vírgula de comando ou Controle Ponto e vírgula em um PC. Você pode ver que eu decidi, lembre-se de usar três colunas em vez de 12. Era para ser 12, mas visualmente muito difícil de trabalhar. O que vamos fazer é usar os nossos 12 aqui. Primeiro de tudo, vamos mover o fundo ao longo. O que podemos fazer é ver aqui em baixo meu painel Camadas. Você pode ter que ir para Window, Layers para ver isso. Bloqueio a camada de arte e desbloqueio a camada de plano de fundo. O que eu queria fazer era talvez selecionar esses três caras. O que eu vou fazer é manter pressionada a tecla Alt enquanto eu arrasto, ele faz uma cópia. Basta movê-lo para cá, e ele vai acabar neste quadro de arte. O que eu vou fazer é, como eu vou dimensionar isso? Provavelmente terei que ajustar isso de novo depois, provavelmente. O que eu vou fazer é, eu vou pegar todos esses três caras, colocá-lo no canto de cima para começar e vai me manter em movimento. Então eu vou ajustá-los um de cada vez. Vou agarrar-te, cortar-te até ao limite. Agora você pode ver o meu não está quebrando apenas fudging aqui um segundo como, janela não está quebrando. Finalmente funcionou. No início do tutorial anterior, desativei os Guias inteligentes. Guias inteligentes são realmente úteis e isso significa que quando eu posso alinhar essas coisas, assistir estalar um rabisco. Sim, eu disse para tirar um rabisco. Vamos arrastar essa nessa caixa verde, arrastando a caixa preta, e vamos arrastar essa aqui. Agora, se eu arrastar este aqui, você vai notar que ele apenas comprime. Não é isso que eu quero. Vou clicar duas vezes nele, para entrar, agarrar a borda disso, esta é a minha caixa de colheita. Eu entrei nele agora. Eu cliquei duas vezes, entrar neste grupo onde eu cortei antes, eu fiz uma máscara. Posso decidir como quero que isto funcione. Eu provavelmente vou colocar esta imagem no meio para o centro. É assim que vou fazer em código, pelo menos. Preciso que seja menor, provavelmente. Ele vai redimensionar um pouco, para baixo para este pequeno tamanho lá, e agradável. Clique duas vezes no fundo para sair e voltamos a ele, estaca zero. Uma coisa que não fez, é que o que eu poderia fazer é arrumar isso. Aqui vamos nós. Hoje é o meu gráfico de fundo. Eu provavelmente vou ter que mudar isso um pouco. Vou pegar essa grande caixa cinzenta. Arraste-o também. Agarre aquele canto, tranque-os. A altura disto vai mudar bastante. Já faz tempo demais. Vou trancar esses caras, destrancar obras de arte, e parar de mover essa parte de cima. Eu vou pegar talvez estes, que não é agarrar tudo, só para tornar a vida mais fácil. O que eu estou fazendo para o tablet, é que eu vou realmente deixar a navegação lá. Vou pegar esses três caras. Certifique-se de segurar Alt e eu vou arrastar a coisa toda como eu fiz. Vou pegar isso e copiar. Então eu vou desfazer, colocar de volta lá. Eu vou vir aqui, e ir para Editar, Colar na Frente. Segurar Alt enquanto você arrasta é que você não simplesmente movê-lo para o outro lado. Legal, eu vou pegar esses três. Peguei-os a todos, incluindo os antecedentes. Se eu segurar Shift e clicar neste, como não quero selecionado, eu só tenho esses caras esquerda, copiá-los e colá-los, encontrar e eles ainda se encaixam bem o suficiente lá. Vou continuar com isso. Tudo isso vai se deparar, segurando Alt, alinhando tudo, legal. Tudo parece bom. Não muda muito para o tablet que você pode ver. Eu só vou fazer isso, te excitar e desligar. Você vê a diferença que eu estou fazendo no entanto, é que há estofamento neste aqui porque eu tenho um pouco de liberdade de espaço. Eu tenho essa visão sobre tablets vai fazer com que ele se alinhe, todo o caminho até aqui. A altura funciona para mim. A diferença vai ser esse cara. Eu vou pegar todos os seis desses, segurar todos apenas arrastá-los através. A diferença destes, é que eu vou empilhá-los dois por dois. Eles precisam redimensionar um pouco. Então esse cara aqui vai subir. Você notará se encaixando em um monte de coisas, movendo as coisas desta maneira porque meus guias são úteis. Você pode ver que não está combinando porque é um tamanho diferente, eu vou ter que segurar Shift e arrastá-lo para baixo. Se você encontrar um estalo para muitas coisas, eu acho que é sempre mais fácil. Só para entrar bem e apertado, e ele vai esquecer de muitas outras coisas que está tentando se encaixar também e se concentrar. Gosto desse cara, mas como faço para combinar tudo isso ao mesmo tempo? É fácil como com ele selecionado, você pode ver que é uma largura deste. É 369.5. Píxeis. Eu vou pegar isso. Agarrar você. Deixe o pequeno ir, eu não posso. Eu vou fazer você, eu vou selecioná-lo. Vou certificar-me de que está ligado. Quando eu mudo a largura, ele muda a altura. Entre, você pode vê-lo diminuído. Para você meu amigo, vai ser o mesmo, largura e altura. Você pode ver que apenas dando proporcionalmente menor. Você, você e você. Torna-se um pouco difícil se você quiser embaralhar a ordem. É fácil, obviamente, fazer um ilustrador, mas quando você vem para o web design, torna-se difícil. Tente manter a mesma cor flui, dentro desta. Então esse cara, então esse cara, legal. Eu tenho minha linha aqui embaixo, na verdade, sobre a caixa cinza. É [inaudível], vai massivo, e podemos ajustar esta grande coisa depois. Eu vou trazer, vou trazer tudo para você. Você pode entrar lá. Esta linha precisa ser muito mais curta. Sabe que é difícil agarrar esta linha e trazê-la. Talvez seja necessário aumentar o zoom. Acho que é mais fácil quando você está tentando pegar alguns desses pontos. Eu agarro você. Uma coisa que eu não coloquei no último pedaço, é que eu queria adicionar o pequeno aviso de direitos autorais para a área de trabalho e também. Só vai dizer Copyright 2017. Nós vamos colocar dentro Nós fizemos isso. Senti como se tivéssemos feito a coisa dos direitos autorais mais cedo. Nós fazemos isso? Vamos lá. Devemos tê-los apagado. Tipo, Glifos que fizemos. Lembro-me deste desastre. Copyright, minha primeira vez, desta vez. Clique duas vezes nele, e se ele fez o fundo, eles têm maciçamente excluído. Este é o Portfólio Dans. Você coloca o nome da sua empresa, se você tem um, limitado. Eu vou usar uma fonte que estamos usando, que é Open Sans Condensado, eu estou usando negrito eu acho. Ótima. Eu vou pegar vocês, não apenas a corda, copiá-los, colá-los. Atravesse, e você vai até lá. O que podemos ter de fazer é a ordem disto. Estes dois vão se estender. O que mais vai se estender? Bem, seis agora? Seleccione todos eles, coloque esse. Vamos estender seis e vamos distribuir centros, horizontalmente ou verticalmente, posso me lembrar. Isso é o que vai parecer aqui. Isso é tudo para a minha visão de tablet. Vou arrumar o Art Board antes de terminarmos e passar para o celular. Isso é quase certo. Vou destrancar o fundo para que essa coisa cinza deslize para baixo. Na verdade, há uma grande lacuna aqui que eu quero imitar. Eu tranco o fundo. Talvez desça um pouco. Adorável, essa é a nossa visão de tablet. Vamos para o celular. 33. Criando um design de UI de site responsivo para dispositivos móveis no Illustrator 2017: Olá, gente linda. Neste tutorial, vamos fazer a nossa versão móvel. Você pode ver que é um pouco diferente. Fizemos muitos alinhamentos à esquerda e colunas. No celular, vamos quebrá-lo. Vamos remover algumas caixas. Você pode ver que estamos faltando algumas linhas e nós estamos indo para alguns bits centrados e provavelmente o bit principal é um menu móvel adorável ou um sanduíche Nav ou nosso menu Hamburger. Vamos construir essas coisas. Processo semelhante ao do tablet. Vou bloquear a arte e desbloquear o plano de fundo para que eu possa mover isso. Eu vou selecionar todas essas peças, segurar 'Alt', copiá-las, tentar fazê-las encaixar, elas não, eu tenho que resolver isso depois. Vou selecionar todos estes três, juntar-se, e encaixar no canto. Ainda não querendo surtar. Eu estava bem se você ampliar, ele quer se encaixar muito melhor. O meu problema é que alguns destes não estão bem alinhados. Agora a boa aparência. Tudo bem, o que provavelmente vai ser, vai ser muito mais curto. Eu sei disso porque eu tenho tudo pronto mocked para este tutorial. Você provavelmente vai fazer isso em tempo real enquanto você está trabalhando. Eu só vou torná-lo um pouco menor porque eu sei. Agora lembre-se de redimensionar este é um pouco estranho. Se eu pegar o canto, vai funcionar neste caso você pode ver que ele redimensiona, mas se eu fizer algumas coisas estranhas como essa, isso faz com que seja longo e magro. O que eu posso fazer é, segurar 'Shift' até eu chegar a cerca de lá. Eu quero que ele redimensione para baixo, agora eu clique duas vezes, clique no lado de fora, que é o quadro de recorte. Eu vou arrastá-lo para combinar com isso e então eu vou pegar o interior disso e apenas movê-lo junto para que ele se encaixe. Vou diminuir um pouco. Tudo bem, clique duas vezes no fundo para sair, e nós temos o nosso belo fundo desbotado. Esse cara precisa ser ajustado. Este vai demorar muito mais, presumo. Teremos que ajustar isso quando chegarmos ao fundo. Legal, bloqueie o plano de fundo, desbloqueie o trabalho artístico e comece a embaralhar. Provavelmente a maior mudança neste caso vai ser como o menu vai funcionar. Nós só temos dois botões, então provavelmente nos safamos só de ter botões. Mas muitas pessoas não teriam apenas dois botões. Vamos usar um menu de hambúrguer ou um sanduíche de navegação. Vamos ligar os meus guias. Agora lembre-se que usamos apenas duas colunas em vez das 12 inteiras, só para que não fique louco quando estamos tentando, não temos colunas em todos os lugares. O que eu vou fazer é, algumas coisas. O logotipo vai ter que encolher. Ficou o mesmo no tablet, mas estou tomando a decisão de encolher isso no celular. Vai ter que ficar menor, quanto menor? Só para caber o meu sanduíche de navegação aqui para que não fique tão ruim. Você pode alternar logotipos para diferentes formatos, isso é totalmente possível em HTML, você pode ocultar um tipo de logotipo e você pode ter uma pilha diferente talvez algo empilhado em cima para dispositivos móveis, mas para No momento em que chegar o meu pequeno Nav e vamos desenhar um sanduíche de Nav. Agora, o sanduíche Nav é este três linhas de tiras, tornou-se a coisa universal para fazer sanduíches Nav ou menus móveis. São apenas três linhas de tiras neste caso e seu desenvolvedor ou você como um designer quando você está construindo em, digamos, Dreamweaver ou outra coisa, pode manipular isso muito facilmente. Para traçar a linha eu vou ter certeza, eu vou usar o meu fora branco e eu vou ter certeza que é bom e grosso. Quão grossa? Lembre-se de ir, 'Comando 1' para olhar para ele no tamanho real em vez de tentar zoom zippy. Eu pensei que era um tamanho bom, naquele tamanho quando eu ampliei, mas isso é obviamente muito largo. Eu vou ter 3 pixels. Eu provavelmente vou apertá-lo dentro e novamente, é realmente difícil fazer isso de longe daqui. Vamos ampliar de novo e eu vou apertar essa linha. Segurando 'Shift' enquanto eu estou apertando e apenas certifique-se que ele permanece em uma linha reta. Com ele selecionado, eu vou segurar 'Alt', arrastá-lo para baixo, arrastá-lo para baixo. Como isso está parecendo? Tela cheia? É sobre a direita. O que eu poderia fazer enquanto estou aqui é apenas para ter certeza que eles estão todos a distância igual. É o Distribuir Vertical', e eles estão todos bem. Legal, coloque aí. Você pode gostar deste, você pode gostar dos cantos arredondados no final. Este tem pontas planas e é isso que eu quero porque ele se encaixa em tudo o que eu fiz com as bordas quadradas. Vemos uma pessoa redonda e nervosa. O que você pode fazer é selecionar esses traços aqui. Abra o painel “Traçado”. Onde estão os meus traços? Não está aberto. Há o meu lá, mas se você não conseguir encontrar que tem uma 'Janela' e descer para 'Strokes' e o que você está procurando é este 'cap' aqui. No momento, ele está no infelizmente chamado 'bunda copo', mas você pode mudar para tampa redonda. Você vai notar que isso os torna redondo menu Hamburger. Até você. Zoom para fora, ótimo. Eu provavelmente posso me safar com meu logotipo sendo um pouco maior. No celular, não quero que seja muito pequeno. Tamanho real, guias fora, excelente. A seguir, vou fazer algo bem diferente em termos de layout. Vou pegar esse grupo primeiro. Vou copiá-lo para o outro lado. O que eu vou fazer é agrupá-los juntos e eu quero que ele seja centrado nesta prancheta. Nós olhamos para isso um pouco mais cedo. Nós vamos para a nossa 'Janela', nós vamos abrir 'align', mudar para cá e eu quero que ele vá para o centro, mas o que eu quero fazer é que eu quero que você, meu amigo, mostre Opções e eu quero que ele se alinhe com a prancheta. Quero que seja centrado no quadro de arte. Se eu não os tivesse agrupado primeiro, veja o que acontece. Eu os agrupo, todos eles ficam centrados, mas não é isso que eu quero. Eu os agrupo, 'Command G' ou 'Control G' em um PC, ou clique com o botão direito do mouse em 'Grupo' e apenas certifique-se de que vou alinhá-lo à prancheta, no centro. Legal, ele vai para o topo. Eu vou manter o tamanho da fonte igual, eu acho que sim. Esta parte aqui, eu vou copiá-lo para o outro lado e eu vou enfiá-lo até as bordas. Mas o que vou fazer é garantir que o tamanho da fonte caia. É muito fácil mudar o tamanho da fonte quando você é um web designer. Eu vou fazer isso. Eu vou torná-lo centrado e eu vou pegar minha flecha preta, alinhar ferramenta. Não precisa alinhar isso porque eu usei alinhado com o texto aqui em cima. Ele vai ser centrado lá. Quão pequeno? Talvez um pouquinho menor, lá vamos nós. Próximo pedaço da linha. Vou trazer esta gangue toda de uma vez. Mantenha pressionado 'Alt', arraste-o para o outro lado. Podemos copiá-lo e colá-lo e o que eu vou fazer é, na verdade, o que eu posso fazer é desligar esta linha para celular. É uma dessas coisas estranhas fracas em que eu já brinquei com ele antes e eu não gostei da fala. Vou agrupar tudo isso, todos os três são agrupados e depois vou certificar-me de que está alinhado à prancheta, centralizá-lo, desligar minhas colunas. Acho que essa fonte é um pouco grande demais. Vou selecionar tudo e talvez mover o tamanho da fonte para algo um pouco menor. Pequenas mudanças como essa o desenvolvedor web, ou você mesmo será capaz de verificá-lo, mas se ele não parecer visualmente diferente, eles provavelmente não iria e verificar, então você pode ter que fazer uma nota para si mesmo para ter certeza de que você indica eles que na verdade é apenas um tamanho de fonte menor. Sem reclamação. Você pode ter que escrever para CSS apenas para um que nós somos tamanho da fonte, mas é por isso que seu designer. Você começa a tomar as decisões de fontes grandes ou minúsculas. Tudo bem, eu provavelmente aumentarei isso um pouco no fundo, principalmente porque não está alinhando. Vou destrancar o fundo, agarrá-lo, lá vai você, legal. Tudo bem, a próxima coisa que quero fazer é salvá-lo. Vamos ver como vamos fazer com essas miniaturas. Agora até agora temos feito, fizemos pilhas de, fizemos 3 colunas, então fizemos 2 colunas e este vamos fazer 1 coluna como por um wireframe. Agora, eu tenho meu wireframe e impresso perto de mim e eu estou apenas copiando isso enquanto eu vou. O que eu vou fazer é pegar um desses caras, movê-lo para o outro lado, ligar meus guias, alinhá-lo, esticá-lo para fora. O estranho é que ele é o maior que já esteve no celular. Como desktop, ele é realmente o menor, ele é um pouco maior em tablet e ele é o maior em dispositivos móveis. Agora você pode ver que há muitas decisões sendo tomadas em dispositivos móveis, muitas pessoas vão projetar primeiro para dispositivos móveis. Não é minha, sendo minha experiência que é melhor trabalhar com a tela mais usada, que neste caso é desktop. Nós trabalhamos com ele e ele tem quanto tamanho? 399. Vou agarrá-lo e, na verdade, vou trazer todos estes tipos para o outro lado. Eu sou Shift clicando em todos eles, todos se deparar. Eu vou colocá-los aqui na prancheta e eu pego esses dois, porque isso ligado 399.5, incrível. Sei que fizemos separadamente antes, mas quando estão alinhados um em cima do outro, você pode mudar a largura porque eles estão alinhados um ao lado do outro. Tudo bem, agora é uma questão de empilhá-los. Vamos copiar essa pilha do tablet, bom. Você é o próximo, quem é o próximo? Você é o próximo. Estamos ficando sem espaço. O que vamos fazer, só porque eu vou nos transformar até o tutorial de web design também, vamos usar o Dreamweaver, que torna isso, em vez de apenas projetá-lo, é que vamos realmente transformar esses dois fora apenas para que a página não é como esta rolagem épica, versão móvel maciça para que ele carrega agradável e rápido no celular no caso de as pessoas não estão na faixa Wi-Fi. Eu faço isso principalmente para que eu possa fazê-lo em um tutorial web para mostrar como ligar e desligar as coisas. Vamos ligar e desligar essa linha, e vamos ligar e desligar esses caras usando CSS. Temos estes ajustados e vamos trazer um rodapé para cá. Podemos ter estendido isso um pouco. Quão longe? Não tenho certeza. Meu passado, o fundo não estava bloqueado. Um pouco mais baixo. Bloqueou o fundo. Peguem vocês três, tragam eles. O que eu vou fazer é, eu vou pegar os sociais também. Vou agrupá-los juntos. 'Command G' ou 'Control G' em um PC. Está alinhado à prancheta, vou centrá-los, então eu os centralizei lá. Vou empilhar estes. É algo que eu posso fazer facilmente em HTML também, é que eu vou reagrupar esses caras. Agrupei-os para poder enviá-los para a prancheta e vou arrastá-lo para baixo. Estou usando meus atalhos de teclado só para baixá-lo neste caso. Eles não eram grupos. Eles estão se sobrepondo um ao outro. Desfazer, voltar, voltar, voltar, desfazer, desfazer, desfazer. Lá estão eles. Agora clique com o botão direito neles e “agrupá-los”. Agora, se você centrá-los, eles não devem tropeçar em cima do outro. Legal. Arrume o quadro de arte e lá os meus amigos estão a nossa versão móvel. Destrava-o. Quando você está fazendo isso, provavelmente não vai gostar disso é algo que eu projetei anteriormente para este tutorial. Você vai gastar como eu faço uma quantidade incrível de tempo empurrando isso para cima, movendo isso através, mudando essas cores, brincando com a fonte deles, para fazer com que tudo pareça como você quer. Não tenha medo se você tem três ou quatro versões do seu celular porque é a mais difícil de fazer , mas que meus amigos é o nosso pequeno web design responsivo. Tudo bem, vamos passar para o próximo vídeo. 34. Exportando suas réplicas de UI de página da web completa do Illustrator 2017: Neste tutorial, vamos explorar nossas telas diferentes ou nossas pranchetas diferentes para que possamos colocá-los em um PDF para que possamos enviá-los para o cliente ver ou para o nosso web designer para talvez nos dar um custo em. Sim, só uma boa maneira de fazer um PDF direto do ilustrador. Vamos fazer isso agora. Então nós fizemos nossos super estupendos projetos surpreendentes. Agora temos que levá-los para nossos clientes para mostrá-los ou talvez para nossos web designers para mostrar-lhes a maquete que queremos fazer. Nós vamos apenas exportar as telas ou as pranchetas primeiro em vez de que pequenos elementos adb. É muito fácil de fazer na nova versão do ilustrador. Se você estiver usando uma versão anterior, não é muito difícil. Você pode ir “Arquivo” “Salvar como” e passar por e salvar todas as pranchetas diferentes, mas há uma nova versão, você vai para “Exportar” e há essa coisa chamada “Exportar para telas” que é muito legal. Se estiver em “Ativos” isso não é o que eu quero, eu quero “Pranchetas”. Ele só vai exportar essas três páginas diferentes separadamente. Você pode exportá-los juntos também e o que você pode decidir sobre qual arquivo você deseja. Então eu quero todos eles juntos ou, na verdade, eu quero um documento completo, bem, talvez uma página que eu apenas envie para eles ou eu quero que eles páginas separadas em um PDF. O que eu quero que eles sejam, este é o formato, você pode ir para o PDF. Essa é provavelmente a mais fácil de compartilhar que podemos enviar por e-mail para alguém. Para onde é que ele vai? Em cima, o meu nos arquivos de exercícios, você pode ver, e eu vou clicar em “Exportar”. Relaxe, relaxe, e espero, há lá. Eu tenho em um desktop, um celular e uma versão tablet. Abra-os. É juntar os nomes das pranchetas que lhes dei. Incrível. Adorável. Se você quiser juntá-los e estiver em algo como o Acrobat Pro aqui, você pode ir até, isto é “Organizar páginas” e você pode dizer “Inserir” “Do arquivo” e encontrar essas outras duas páginas. Você desktop exercícios arquivos e você colocá-los aqui, reordená-los e eu vou salvar este e isso pode ser apenas um documento de uma página. Agora, quando as pessoas abrem, elas podem passar pelo celular, tablet e tocar tudo de uma só vez. Então isso é exportar toda a aparência. Isto não é o fim de tudo. Isso é bom para o cliente assinar ou para o web designer ter uma idéia do que você está fazendo, mas em seguida, precisamos explorar todas as pequenas peças diferentes separadamente para que possamos usá-las em nosso site. 35. Devo usar a exportação SVG no Illustrator 2017 para o web design?: Ok, neste tutorial, vamos falar sobre SVGs e devo usá-los ou não? SVGs um formato de arquivo razoavelmente novo. É como um JPEG ou um PNG, e é muito bom para uso online porque é escalável. SVG é um gráfico vetorial, o que significa que ele pode ser dimensionado para cima e para baixo sem perda de resolução. Enquanto JPEG se você esticá-lo realmente grande, ele fica todo pixelado e nojento. A primeira coisa é, é ótimo? Sim, é ótimo para coisas como ícones e logotipos, coisas que têm cores realmente simples. Vamos dar uma olhada no ilustrador aqui. Ok, então as coisas que funcionariam muito bem como um SVG é este logotipo e este pequeno ícone. Aqui está uma pequena flecha que fizemos, esses caras no fundo aqui, os ícones sociais, estes vão funcionar muito bem como SVGs. As coisas que não funcionam bem como SVGs é qualquer coisa que tem mais do que algumas cores. Ok, assim como esta imagem aqui, isso é o que é chamado de imagem bitmap ou uma imagem raster, e ela vem tradicionalmente do Photoshop. Considerando que esses caras, você pode dizer quando você zoom sobre eles, que eles são todos vetores e vagens e toda essa adorável SVG, bondade. Considerando que este é apenas um monte de pixels. Esses caras ainda têm que ser tipicamente um JPEG. Esses caras são exportados como um ou outro como um PNG ou um SVG. Tem certeza que está usando SVG? Sim. Se você tivesse me perguntado há um ano, eu teria dito talvez e um ano antes disso eu teria dito não, por causa do suporte do navegador. Mas o que eu gosto de fazer é ficar de olho no site chamado caniuse.com. Você digita SVG e ele lhe dá algumas informações úteis, no momento ele tem um enorme suporte de navegador, menos que você esteja suportando o IE 8. Agora, você pode estar trabalhando para uma empresa realmente grande e eles estão suportando versões realmente antigas deste navegador. Tem quase dez anos agora, IE 8, e eu não conheço muitas pessoas apoiando oito a menos que você esteja trabalhando na IBM ou grandes empresas que ainda têm que lidar com computadores antigos realmente ruins. Se você está fazendo seu próprio portfólio, definitivamente pulá-lo, vá direto para SVG, é incrível. Se você está trabalhando com uma empresa, basta verificar novamente com o desenvolvedor. Ou se você está um pouco inseguro e você não está muito certo de SVG, basta manter o PNG, ele não vai matar seu site, mas torna mais fácil para a capacidade de resposta se estamos usando SVGs. Então, basta verificar aqui você pode ver globalmente que ele é usado 97%. Há algumas pessoas que não gostam de usá-lo. Existem alguns truques que você pode fazer para desligar para SVG e algumas outras coisas se você é um pouco mais hardcore em seu desenvolvimento web. De qualquer forma, como você sabe se outras pessoas estão usando SVG? Eu mostrei esses dois antes, eles eram Shutterstock e iStock e você pode ver que ambos estão ótimos. São, pelo menos, logotipos. O que acontece é se eu aumentar o zoom, então eu estou apenas segurando o comando mais no meu teclado, se você está em um PC, é controle mais, você vê eventualmente ele começa a parecer pixelizado. Então isso é um PNG e está tudo bem. Parece bom aqui fora. Mas se eu tivesse que escalá-lo bem e grande, eu teria que fazer um tamanho de arquivo realmente grande em um PNG para que ele fique bem nesse tamanho. Se eu olhar para a iStock e ampliar isso, você pode ver o logotipo, quanto mais perto eu fico, mais nítido ele fica. Isso se torna realmente útil quando você está lidando com telas escritas ou telas de alta resolução, 4K, 5K telas. Porque embora isso parece bom aqui, ampliado para fora, ele pode ficar terrível em um iMac realmente alta resolução ou no meu mac escrito aqui, ou em um iPhone ou um iPad. Então os PDF os usam, eles estão bem, eles trabalham em todos os lugares, eles são à prova de balas. Você pode estar enlouquecendo seu desenvolvedor enviando um SVG. Isso é uma coisa que você pode fazer é se você está lidando com SVGs e você realmente quer ir por esse caminho, porque você entende vetor e não é tão difícil. Você pode ter que educar a pessoa com quem você está trabalhando. Ou pergunta-lhes no início : “Posso enviar-te SVGs?” Se eles se eles surtarem, basta enviar-lhes PNGs, se eles não estão muito seguros sobre eles e querem um pouco mais de conselhos, há um artigo muito legal sobre CSS-truques. Qual é o nome dele? Esqueci-me do teu nome. Seu nome é Chris Coyer. É isso. CSS- truques é um site muito legal para qualquer coisa com SVG. Ok, e este aqui é praticamente como eu cheguei a acelerar. CSS- tricks.com, grande SVG. Esse cara é um gênio. Muito bem explicado. Eu te dei uma explicação em vídeo. Há 32 vídeos. Isso está entrando na gritty nitty do SVG, se você quiser ir tão longe. Tudo bem, então isso vai ser se para SVGs. Se você não tem certeza, faça PNGs e SVGs e envie os dois, é muito fácil fazer os dois. Se você estiver fazendo suas próprias coisas e estiver usando o Dreamweaver, use SVGs. É incrível e os navegadores acompanham isso. Se você está trabalhando com coisas antigas com CMS da velha escola, você pode ter que apenas ficar com PNGs. Mas basta perguntar a uma desenvolvedora web o que ela quer primeiro. 36. Exportando imagens e fotos do Illustrator 2017 para a web: Tudo bem, neste vídeo vamos olhar para exportar nossas imagens, coisas como fotografias. Ok, e há um gráfico de fundo aqui, você pode ver que vamos acabar neste painel de exportação, e então vamos acabar com este lindo grupo de grandiosidade exportada. Tudo bem, vamos começar. Ok, primeiro, o que precisamos fazer é, precisamos explorar todos esses três? Nós não, porque o que vai acontecer na fase de web design é que, você vai importar esta imagem, esta imagem de fundo aqui e você vai reutilizá-la em todos os três tamanhos dimensionando-a em vez de mudá-la para fora. Há uma maneira de alterná-lo para cada imagem diferente, mas isso faz com que sua página carregue um longo tempo e isso significa que você tem muitos arquivos CSS diferentes e ativos acontecendo. Normalmente, o que acontece é que você importa esse arquivo e, como fizemos no Illustrator, na Web, nós o reduzimos para os diferentes tamanhos, para esses diferentes pontos de interrupção ou para os diferentes tamanhos de tela. O que você faz é escolher o maior, porque você quer, por mais grande que ele vai ficar, você quer exportar essa versão, porque isso vai ser verdade para esta imagem de fundo na área de trabalho. Isso é tão grande como nunca vai ser e quando você começa a dizer esses caras embora, nós trabalhamos para fora através deste tutorial embora, na verdade, o cara no celular é realmente escalado um pouco maior do que esse cara. Ele é uma pequena porcentagem maior. Vamos exportar esta imagem de fundo da área de trabalho. Vamos exportar esses caras do celular, e então vamos olhar para os ícones no próximo, porque há um processo ligeiramente diferente para fazer ícones e logotipos. Primeiro de tudo, precisamos desbloquear nossa camada de fundo e precisamos abrir esse painel de exportação de ativos. Você pode fazê-lo a partir da janela e você pode ir para Exportação de ativos. O que vamos fazer é ampliar um pouco, vou selecionar todos os três. Eu não quero pegar isso, mas eu só quero esses três caras. Tudo o que eu preciso fazer é, selecioná-los todos e segurá-los e arrastá-los para esta janela aqui, nós apenas clicar, segurar, arrastar. Isso vai exportar essa imagem para mim. Eu vou dar um nome, porque ele vai chamá-lo de Ativo 4 por enquanto. Vamos dar-lhe um bom nome de motor de busca. Sempre que você estiver nomeando arquivos, dê-lhe alguns bons nomes de mecanismos de busca. Este é Daniel Scott. Estou usando hífens e não espaços. Quando você vem para construir isso mais tarde como um desenvolvedor de site ou você mesmo vai ficar irritado com este uso de espaços em então, porque os navegadores não gostam deles, eles gostam de um caminho completo. Portfólio Daniel Scott. Que tipo de formato? Neste caso, vai ser um JPEG. Agora, como saber qual escolher. Quando se trata de imagens, você só pode escolher JPEGs e PNGs. Você não pode usar essa SVGs mesmo acabando de falar sobre isso. Isso é bom para ícones e cores simples e logotipos, mas não é bom para essas imagens. Quando devo usar um PNG e JPEG? Praticamente JPEG o tempo todo, se for uma imagem retangular plana. Se você precisa de transparência, digamos que você já esteve no Photoshop e mascarou as coisas e você quer que ele tenha uma transparência por trás disso, então você terá que mudar para o PNG. O problema com PNGs no entanto, é que eles incluem transparência, o que é incrível, mas eles fazem o tamanho do arquivo é muito maior. Faremos uma pequena comparação. Vamos exportar essa coisa como um PNG, e vamos adicionar outra, vamos adicionar outra escala e, em vez de aumentá-la, vamos voltar para o mesmo tamanho. Vai ser exatamente vezes um, mas vamos fazer uma versão JPEG. Quão alto neste JPEG? Cabe a você. Na maioria das vezes você pode fugir com um JPEG 50, mas você não pode ajustá-lo aqui para ser qualquer tamanho que você quiser, e pense nisso como o controle deslizante de qualidade. Se você movê-lo para um 100, ele vai ser super perfeito, mas provavelmente um tamanho de arquivo realmente grande. O que precisamos fazer é encontrar um pouco de equilíbrio entre qualidade versus tamanho, e você verá JPEG, especialmente esta imagem de fundo, não é muito clara de qualquer maneira, porque é meio que lavado para o fundo. Se fosse uma foto da coisa que eu estava vendendo, digamos que eu estava tentando vender um Bentley, eu teria provavelmente muito alto, cerca de 80, só porque eu quero que seja uma imagem bonita, tão clara quanto possa ser provavelmente acima do que eu provavelmente preciso dele. Você pode ir mais baixo que 50, sem problema. O que vamos fazer é exportar os dois e acertar a exportação. Ele vai me perguntar onde ele vai ir e eu vou colocá-lo no arquivo central de exercícios para que você possa verificar isso. Vou fazer um arquivo lá chamado “ Exportar imagens”. Vou colocá-los lá dentro. Uma vez que eu fizer isso, eu vou sair e verificá-los. Explore imagens, e você verá a diferença entre esses dois. Este é o PNG, e é 450 kilobytes e este aqui é um 120, então muito menor. Vejamos a qualidade versus os dois. Não se preocupe com essa mudança cinza no fundo, estamos mais preocupados com a imagem real em si e não há diferença. Você pode notar que é difícil dizer, porque você está assistindo a um vídeo provavelmente e, você definitivamente está assistindo a um vídeo, mas a qualidade do pode não ser HD onde você está assistindo. Estamos usando imagens baixas com uma marca d'água só para que eu não tenha problemas para dar imagens que eu paguei. A qualidade não é perfeita, porque eu escalei isso porque é a versão com marca d'água. Você pode ver que a diferença é porque eu não preciso e eu não preciso de transparência, eu não preciso de um PNG. Desde que essa imagem está pronta. O que é realmente legal nisso é que você pode vê-los lá dentro, seu tipo de amarrado. Eu decido que esta imagem superior, e talvez nós selecioná-los no topo e nós escolhemos aquele verde. Digamos que você decida mais tarde que o cliente gosta de um mais laranja, você pode ver que já está lá. Posso clicar em Exportar novamente e ele é desativado e atualizá-los. Escolha, substitua. Torna-se agradável uma vez que você fez isso uma vez e o cliente volta ou o desenvolvedor web deserto volta e diz, você pode mudar, ajustar ou você pode me dar outra versão? Você não tem que passar e nomeá-los novamente. Você pode ver que todos foram exportados novamente. Vou voltar para a minha linda cor. Você tem que fazer tudo separadamente? De jeito nenhum. Eu vou colocar essa versão PNG, porque eu sei que eu não preciso dela, e eu vou dizer que eu quero esse cara. Arqueiro Negro, agarra este tipo. Consegues fazê-los todos de uma só vez? Provavelmente. Isso é um dez. Vou passar e dar o nome a todos. Talvez Taylor, você possa acelerar isso para mim, amigo. Tudo bem. Agora vamos clicar em Exportar, Escolher, lá vai e espero que agora, tudo funcionou. A razão pela qual eu não exportei todos é, porque eu tinha este selecionado, porque estava destacado, eu só o exportei. Vou selecionar todos eles. Bem, talvez apenas selecione Nenhum deles. Eu não tenho nada selecionado lá e não, eu preciso selecioná-los todos. Vou segurar o turno e selecionar todos esses caras, e ter certeza que eles estão todos selecionados e agora ir para exportar. Pressione Escolher, pressione Substituir e agradável. Tem um cara aqui que eu vou me livrar, que é meu PNG. Não o quero, mas todos estes tipos foram exportados. Eles foram anexados com menos 50, o que apenas diz que é a qualidade. Eu provavelmente não faria isso, eu provavelmente posso pegar o sufixo dele. Eu não gosto disso, eu vou entrar aqui e deletar todos esses caras, e então entrar nessa coisa. É como o primeiro, segure o shift, pegue o último para que eles estejam todos selecionados, e vá para Exportar e escolha, Ele vai exportar todos eles sem esse sufixo no final. Aqui estão meus gráficos, eles estão ficando pequenos o suficiente. Certo, é assim que se explora imagens. O que acabei de perceber é que me lembro de falar no início, certificando-me de exportar o maior. Eu descarto totalmente isso. Não se preocupe, você pode exportar estes. Meu único problema com isso, é que eu apaguei pelo menos quatro dessas imagens, em vez das seis inteiras. Sem grande drama, eu iria através e fazer estes um pouco maior e talvez colocá-los fora para a borda aqui apenas como espaços reservados para que eu possa usá-los nesta janela de exportação. Tudo bem. Isso acabou de ser feito, agora. Vamos passar para exportar SVG, ícones e logotipos. 37. Exportando logotipos e ícones do Illustrator 2017 para a UI: Oi. Neste tutorial, analisaremos a exportação de logotipos e ícones do Illustrator para uso na Web ou em aplicativos. Quando estamos lidando com SVGs, falamos sobre isso em um vídeo anterior, é super fácil. Abra o painel Exportação de ativos. Você pega as coisas que você quer ser SVGs, como estes alguns desses ícones sociais aqui. Clique neles, arraste-os, clique duas vezes neles, dê nomes a eles. Vai ser chamado de Facebook Social. Certifique-se de que diz SVG na parte inferior aqui porque eu quero que ele seja um gráfico SVG agradável nítido. Este aqui, e você passa e continua adicionando todos os nomes deles. Isso é tudo para exportar esses. Clique em Exportar e terá um monte de SVGs. Digamos, no entanto, que você está exportando estes e você está usando PNGs, porque você precisa da transparência. Você não quer um JPEG. Você quer transparência para que este ícone aqui, você pode ver em torno da borda do círculo lá. PNGs é o caminho que você está indo. Agora, isso é algo chamado pixel perfeito. Agora, ele não funciona em todos os objetos, mas o que ele faz é, porque um PNG não é vetor, então não é essa borda crocante. Na verdade, é feito desses pequenos pixels, assim como esta imagem aqui. Se eu aproximar o suficiente, você pode ver que esta imagem é realmente composta de todos esses pequenos cubos, e é assim que o PNG é renderizado. O que precisamos fazer é ter certeza que quando ele está sendo processado, ele está sendo processado o melhor que puder nesses pequenos pixels. Eu tenho este pequeno exemplo de gráficos aqui. O que eles são é, antes de tudo, precisamos ir para View, e no Illustrator, você pode falsificar pixels. Isso não está realmente mudando a maneira como seu documento funciona. É só mostrar uma visão prévia de pixels. Se eu ampliar agora, você pode começar a ver, quando eu estou na visão normal, é bom, nítido e vetorial. Mas se vai ser um PNG, vai parecer algo assim. O que acontece é que, se eu tiver algum desses, digamos, esta linha, tem apenas um pixel de largura, mas eu posicionei isso de modo que ele se estende por dois pixels. Você pode ver? Vai de ambos os lados, por isso não sabe de que maneira colocá-la, então nos dá embaçamento obscuro, o mesmo com este L aqui, mesmo com este cara aqui. O que acontece é que, quando eu exportar , vai ficar um pouco confuso. Isso acontece bastante do Illustrator. O que vamos fazer é selecioná-los e clicar com o botão direito do mouse, e dizer Make Pixel Perfect. O que ele faz, ele realmente move as linhas, então tenha cuidado. Ele fez com que aqueça a crocante. Como eu realmente os movi fisicamente, vamos movê-los um pouco para a direita, ou meio pixel para a direita, eu posso facilmente dizer se ele vai ser pixel perfeito. Veja no topo aqui, a largura é de 92,5 pixels. Você não pode ter um 0,5. Têm de ser números inteiros. Você pode fazer o pixel perfeito manualmente fazendo isso. Você pode ver agora os lados são bons, e se eu fizer o topo, 26, se eu realmente encolhi-lo um pouco para baixo, mas agora ele não está tentando montar nosso pixel. Definitivamente está abaixo da linha agora. Para onde foi? Aqui está. Este L aqui é o mesmo. Fontes são um pouco estranhas. Este não vai ser tão mau. Veja isso, se eu clicar com o botão direito do mouse neles, Faça Pixel Perfeito, ele realmente parece melhor. Na verdade, é aparado o fundo dele um pouco. Você pode ver? Costumava ser um pouco mais gordo no fundo. Portanto, tenha cuidado ao usar o Pixel Perfect. Agora, Pixel Perfect funciona muito bem para linhas horizontais e verticais, ou a maioria [inaudível] coisas de qualquer maneira. Mas quando você chega a coisas como esse tipo de formas, não adianta mexer com o Pixel Perfect. Com esses caras, veja isso. Se eu for para Pixel Perfect, não posso fazer isso. Muitas curvas, não consigo resolver isso. Alguns destes têm algumas linhas retas. Se eu clicar nele e fizer o Pixel Perfeito, acho que piorou as coisas. Empurrou-os por todo o lado. Há muitas formas acontecendo. Pixel Perfeito, ótimo para realmente cubo, linhas retas e fontes. Portanto, certifique-se de que eles são Pixel Perfect antes de arrastá-los para o Painel de ativos para exportação como PNG. O que vamos fazer é, apenas para terminar, vamos adicionar todos esses caras, então eu pego todos esses três, lá vai você. Na verdade, os agrupou todos juntos. Não é isso que eu quero. Você é um F. Você é um F. Você é um F. Eu vou chamá-los em um segundo. O que mais precisa ir? Isso vai ser digitado. Ambos precisam ir. O que mais precisa ir? A flecha precisa ir. Certifique-se de que quando terminar de usar a Visualização de pixels para desativá-la. Você não precisa dele depois. Às vezes é difícil pegar esses caras. Você vai ampliar. Aqui está. O que mais? Esse cara aqui. Aqui está outra maneira de fazer isso. Em vez de tentar arrastá-los para dentro, basta selecionar de uma vez, e há um aqui que diz “Adicionar o selecionado”. Você pode ver que ele simplesmente vem através. Incrível. Temos todos lá dentro. Agora, eu quero selecioná-los fora. Estou segurando Shift e clicando em todos eles. Porque o que vou fazer é certificar-me de que estou bem para ambas as opções. Vou ter SVG mais um PNG. Vamos escalá-los a todos. Nós vamos para a primeira vez, PNG, então nós vamos ter os dois. Agora, o que eu deveria fazer é passar e nomeá-los, antes de exportá-los. Vou fazer isso agora. Taylor vai acelerar isso com sua edição mágica. Vai Taylor. Feito. Agora eu estou indo para exportar e espero que todos eles estão indo para exportar. Então, confira. Vá. Tenho uma flecha, duas versões. Tenho um SVG e um PNG. Você pode ver os tamanhos dos arquivos. O SVG é realmente apenas um pouquinho maior, mas o PNG aqui é apenas um pouco menor. Mas este aqui é desse tamanho, minúsculo, você só vê lá dentro. O SVG, porém, é escalável, massivo. mesmo com o logotipo aqui. O logotipo é muito maior como um JPEG. Na verdade, esses são os errados. O que eu quero é, onde um logotipo, SVG, dois kilobytes, três. Então, nenhuma grande diferença, exceto que este aqui é enorme. Ótima. É assim que você passa e exporta seus PNGs e seus SVGs se estiver exportando ícones e logotipos. 38. Retina HiDPI e exportação de imagens responsivas do Illustrator 2017: Oi lá. Neste vídeo vamos falar sobre o que fazemos sobre retina, ou DPI alto, ou imagens responsivas, você quiser chamar, é tudo sobre a qualidade das imagens. Agora, na maioria das vezes, estamos em um ponto onde não há regras claras sobre o que você deve fazer, há algumas maneiras de fazê-lo, e algumas pessoas fazem isso e outras não. Na maioria das vezes as pessoas não o fazem, o que eles fazem é apenas dar-lhe uma imagem e eles a escalam para cima e para baixo para as diferentes resoluções e apenas viver com ela. Como a retina exibe como o meu MacBook Pro na minha frente e alguns dos tablets Windows e alguns dos novos iPads, eles têm o dobro dos pixels, eles têm uma qualidade incrível amontoada neles. O que acontece é que as pessoas ignoram. É triste, mas é verdade. As pessoas esquecem esses caras, porque eles são uma porcentagem tão pequena, e há um pouco de trabalho no lado do web design para tentar acomodar todos eles. Agora dizendo que, se eu fosse um grande site, é claro, eu vou acomodá-los. Mas muitas vezes quando estou lidando com pessoas com sites pequenos a médios, as pessoas simplesmente não se preocupam com isso. Você não pode se preocupar com isso e você terá que entrar nele. Nós vamos falar sobre isso agora, mas saiba que se você quiser para o seu primeiro site, tudo bem, você recebe um post inteiro. Você está autorizado a usar imagens de definição padrão para este primeiro. Mas depois que você fez um par e suas habilidades na web estão ficando melhores, você totalmente quer entrar nisso. Especialmente se você está lidando com clientes. Como para mim, estou ensinando coisas para web designers e criativos, então você poderia argumentar que eu deveria estar fazendo coisas de alta resolução porque muitas pessoas que estão fazendo meus cursos têm alguns laptops incríveis, então eles pode estar usando MacBook Pros com telas mais recentes e tudo isso. Vamos falar sobre o que as pessoas normalmente fazem. Eles só exportam uma visão como nós fazemos aqui. Vou prender tudo isso. Bem, nosso lindo trabalho. Vou arranjar mais só para podermos começar de novo. Digamos que eu estou exportando isso para o meu site, eu vou desbloquear minha camada de fundo, cortar apenas esta parte e eu vou arrastá-la para dentro. O que a maioria das pessoas fazem é que vai ser um JPEG, e eu vou dar-lhe o sufixo. Eu não gosto disso lá e vai ser uma escala de um. Vamos apenas viver com isso. Quando ele entra em uma tela que é realmente grande ou tem realmente alta resolução, como uma tela de retina para Mac, ele apenas escala e pixel ele. Simplesmente faz. Não parece muito ruim, mas posso dizer que 90% da população não pode dizer que não está sendo escalada. Muitas vezes o que eu faço é, dizer para algo assim, este grande gráfico aqui, é que eu vou torná-lo maior do que precisa ser, então eu vou descer aqui e ir para este 1.5. Eu fiz como se não fosse o dobro do tamanho. Eu poderia fazer um duplo, então é na verdade o dobro do tamanho daqui para que isso signifique quando ele visto em uma retina que é realmente claro. O problema com isso é que as pessoas que não estão, ou digamos que alguém em um telefone celular não lidando com essa imagem realmente grande sendo dimensionada para baixo para eles estão bem, mas eles estão tendo que carregar esse tamanho realmente grande de arquivo. Muitas vezes o que eu faço como eu corto no meio, eu digo que eu vou fazer 1,5. Agora, essa é a maneira barata, brega, fácil e a maneira que eu faço a maior parte do tempo. Então vamos dizer que você está fazendo isso corretamente, e vamos fingir que somos apropriados. O que vou fazer é criar uma visão, essa escala um. Então, para as telas de retina, eu criarei uma visão diferente. Então adicione uma balança e eu vou fazer uma mais grossa que é vezes duas. Significa que vou para JPEG. Vou anexá-lo? Sim, eu vou ter que anexá-lo. Você pode usar o às vezes 2X. Isso funciona bem e isso é muito bom quando você está fazendo especialmente o desenvolvimento iOS, que cobriremos no próximo. Mas normalmente quando faço isso, só faço duas vezes. Eu tenho outra versão e depende de quão alto você vai chegar. Eu só de ficar sério, eu realmente apoio a retina, que é o dobro da resolução. Você pode encontrar muitos dispositivos atualmente que têm quatro vezes a resolução. Este quatro vai ser enorme. Então tudo bem, você pode apoiar esses arquivos grandes. O que você pode fazer é quando você está construindo seu site, é que você pode mudar as coisas com consultas de mídia. Isso só significa que pode verificar o tamanho da tela e, em seguida, exibir a imagem certa para ele. Isso é perfeito e funciona muito bem. É um monte de trabalho extra para uma pequena porcentagem de seus leitores ou seus usuários. Então essa é uma maneira de fazer isso e agora eu tenho três versões. Se eu acertar exportação agora, eu vou para exportação. Como esse cara se chama? Arranja-lhe um nome adequado. Então vou dar um novo nome. Vou chamá-lo de fundo, é uma exportação excitante. Vamos levá-lo para dentro, vamos dar uma olhada, fundo. Eu tenho esta primeira versão e há outra versão e depois há uma visão gigante. Você pode ver os tamanhos aqui. Uma vez está em 1,1 megabytes, 1,2 e, em seguida, um salta para 0,7. Tão grande, tão grande, bagunça ainda maior. O que acontece é quando você está construindo seu site do outro lado, o que eu quero dizer com o outro lado é codificar, não é super difícil de passar e criar consultas de mídia para acioná-los em diferentes tamanhos de tela. Ele só diz com o meu navegador está olhando para isso em uma tela super retina verificar se é, em seguida, baixar esta imagem para carregar esta imagem. É uma dor no saco, mas é assim que as pessoas se contornam. É assim que se lida com a retina. Muitas vezes você não precisa fazer duas versões. Você vai fazer uma versão normal e, em seguida, às vezes dois, e apenas mudar para fora em código. Agora, dizendo que não, tudo o que faço é pegar esse cara, fazer 1,5 bem no meio e forço todos a olhar para a versão 1.5. Isso significa que as pessoas que usam telas que não retina estão presas tendo que carregar um tamanho de arquivo um pouco maior. As pessoas que estão na retina recebem um pouco de imagem. Ninguém ganha ou todo mundo ganha, depende de como você olha para ele. Então você pode ver todas essas imagens e apenas carregá-las, arrastá-las para aqui e eu tenho duas versões. Espero que isso te ajude. Outra coisa é que as pessoas às vezes chamam de alto DPI na retina que a mesma coisa. DPI alto é o que ninguém da Apple tem que chamá-lo. Retina é que uma música de marca da Apple. Então, se você está chamando de retina, você está em apuros. Tem que ser alto DPI, porque é isso que chamam de imagens de alta resolução. Agora uma outra coisa meus pequenos extratos no final aqui é que, seu 2017, uma imagem em um par de anos. Se você está olhando para isso em 2019, você provavelmente [inaudível] com você mesmo entrando nesses Dan, coisas ruins ruins ruins. As coisas podem ter progredido do que poderiam ter sido ou grande adoção do às vezes dois, ou pode haver alguma outra maneira de fazê-lo. Então este é o único que vai verificar tudo o resto sólido. Este aqui, basta verificar com seu desenvolvedor o que eles querem. Tudo bem, se você não se lembra de nada deste vídeo, eu entrei um pouco aqui e é apenas deixá-lo às vezes um, isso é o que todo mundo faz e você não será atingido. Se você fizer isso, pode não parecer tão bom em algumas telas. Então, basta fazer uma escala no momento. Muito bem, diarreia verbal, câmbio. Voltem aos seus vídeos. 39. Exportando sua UI para o design de aplicativos usando o Illustrator 2017: Este vídeo vai ser mais sobre exportação para aplicativo. Vamos fingir que não estamos construindo uma versão para desktop e tablet, estamos apenas construindo um aplicativo para dispositivos móveis, então construímos alguns ícones para serem usados aqui. É muito fácil, digamos que eu queira exportar esses dois caras juntos, talvez separadamente. Vou desagrupá-los e tu entras e arrastas o Kiwi. Na verdade, vamos usar o Kiwi no momento, você pode arrastar tudo isso de uma só vez. Nós só vamos fazer esse cara, então esse cara vai ser chamado de Kiwi e o que eles vão precisar é, vamos nos livrar de tudo isso, é tudo que você precisa fazer é esse iOS e Android. Você provavelmente está desenvolvendo para ambos ou talvez apenas para iOS ou apenas para Android, mas digamos que estamos fazendo isso para um produto Apple e estamos trabalhando com um Apple Developer e ele precisa de gráficos iOS. Clique no iOS e o que eles fazem é que eles precisam de uma escala de um, dois e três. Então este tamanho, o dobro do tamanho e três vezes o tamanho para trabalhar com todos os tamanhos diferentes que eles têm em termos de suas telas. Eles são muito rigorosos nas convenções de nomenclatura, temos que deixar o sufixo lá, então vamos clicar em Exportar. Vamos exportá-lo para este aqui e devemos encontrar Kiwi aqui. Nós temos as três versões que eles vão precisar, há o png padrão que é que um tamanho, então há um png aqui em uma escala seguida, às vezes dois e, em seguida, às vezes três e esses são os arquivos que eles vão precisar. Para que cada gráfico que você faz você vai precisar de versões completas que provavelmente só vai usar esses três, mas dar-lhes o SVG também. Se você vai fazer as mesmas coisas para Android, é muito semelhante. Livre-se desses caras, clique no Android, eles só têm uma convenção de nomenclatura diferente e eles têm muitos tamanhos diferentes para seus aplicativos. Você pode ver que há até mesmo um menor dpi baixo, dpi médio, dpi alto, alta extra grande. Ele vai direto até xxx alto dpi. Então, há até quatro escalas, alguns dos telefones LG têm grandes telas escritas. Clique em Exportar, a mesma coisa, vamos ter Kiwi. Já existe Kiwi svg, mas você vai dar-lhes essas versões. Estas são as versões que irão para o Android. Você pode estar fazendo os dois ou você pode estar fazendo apenas um ou outro, mas é isso que eles vão esperar. Cada gráfico vai ter tudo isso e vai ter esta convenção de nomeação explícita aqui e eu sei que Android, eu acho que funciona um pouco diferente, eles acabam em pastas diferentes, então isso é algo que você pode ter que falar com seu desenvolvedor sobre como eles os querem e, provavelmente, você pode simplesmente dar a eles dessa forma e eles os dividirão nas pastas que eles precisam acessar. Isso é explorar para o desenvolvimento de aplicativos e a única coisa a pensar, como fizemos no tutorial anterior é olhar para pixel perfeito especialmente se você tem qualquer uma dessas linhas horizontais e verticais. Principalmente porque estamos usando esses pngs, essas versões de pixel. Tudo bem, é isso para o vídeo, vejo você no próximo. 40. Exportando o CSS para desenvolvedores usando o Adobe Illustrator 2017: Oi lá. Neste vídeo vamos olhar para explorar alguns dos códigos do Illustrator. Código. Se você nunca usou código antes, isso é algo que seria realmente útil para a pessoa que está construindo seu site. Se você estiver indo para construir seu site, isso vai ser super útil para você. O que vamos fazer é olhar para os diferentes elementos. Faremos algumas delas, mas as regras são as mesmas para muitas delas. O que vamos fazer é começar com este título porque é o maior e mais fácil. Com ele selecionado, vá para Janela e vamos para Propriedades CSS. A coisa legal sobre isso é que ele vai nos dizer muitos dos caracteres CSS. Vou arrastar este painel de propriedades para fora. Veja aqui, eu só peguei o topo da aba, a palavra lá, para que eu possa ver tudo. O que vai me dizer é que vai me dizer coisas interessantes sobre essas fontes. Ele vai me dizer que família de fontes é, se é ousado, que tamanho é, a cor que é. Este é o tipo de coisa que um web designer adoraria. Porque em vez de você dar a eles o PDF que fizemos antes e dizer, “Adivinhe a fonte. Adivinhe o tamanho. Adivinhe a cor.” Eles vão voltar para dizer que construíram seu site para você e você diz, “Jesus, que tipo de letra é essa? Quem usa Comic Sans?” Eles têm usado regular em vez de ousado e todas essas coisas que você passou a idade tentando resolver. Vai ser 80 pixels ou 81 pixels. Você pode realmente contar a eles. O que você pode fazer é pegá-los, copiá-los, e começar a construir uma folha de especificações. Você pode dizer desktop, e este aqui vai ser meu, eu sei que é chamado de h1, mas você pode apenas chamá-lo de algo como um cabeçalho. Apague qualquer coisa que não goste lá dentro ou ajuste-o, mas este vai ser o meu título principal. Se você é um web designer, você saberá alguns. Você seria capaz de dar a ele coisas como nomes de classe ou nomes de tag, mas cabe a você realmente. A coisa legal sobre isso é que eu vou ter uma versão desktop, e o que eu vou fazer é que eu vou ter uma versão móvel bem exatamente da mesma coisa. Mas aqui, quando eu seleciono, você pode ver que os tamanhos de fonte diferentes têm tudo aqui? Mobile vai ser isso. É exatamente o mesmo. Ele sabe que este é o meu primeiro lugar, o nosso principal título. A diferença é, Playfair, que ainda é ousado, mas agora é deste tamanho. Uma coisa para estar ciente é que grande, ele me deu muitas informações, mas no Illustrator aqui, você pode ver, ele não está me dando a sintaxe de alinhamento de texto. Há alguns pedaços que ele faz, não te dá. É ótimo. Também está faltando algumas coisinhas, irritantes, mas tudo bem. Ele economiza o dia para lotes de ter que passar as coisas para o desenvolvedor ou apenas para si mesmo. Eu uso isso o tempo todo. Vou mexer com as fontes aqui e entrar e verificar. Eu provavelmente não vou construir um documento como este para mim. Eu provavelmente vou apenas trabalhar passo a passo como eu estou construindo o site para entrar em ilustrador e apenas puxá-lo para fora. Mas se você está enviando para outra pessoa, e uma das coisas, diga esta caixa aqui em baixo, você não exportaria isso como um gráfico. Esta caixa de pêssego pronta aqui. Você não o exportaria como um gráfico PNG. Ele seria projetado em código, em CSS, e daria a ele sua altura, largura e cor. Você pode ver quando você seleciona aqueles é que não há CSS gerado. Você tem que dar nomes a eles por alguma razão. Você poderia fazer a versão longa e ir para o painel de camadas, sarja para baixo suas camadas, e o que acontece é que só temos duas camadas, certo? Mas dentro dessas camadas, todos esses objetos estão listados. O que você pode fazer com ele é selecioná-lo aqui. Consegues ver este pequeno ícone de pesquisa? Salta para uma coisa chamada retângulo. Só lhe damos um nome. Em vez de retângulo, podemos chamá-lo de “call-to-action”. Tentando usar espaços. Chamada à ação. Estou fazendo com hífens. Agora vai me dar um nome de classe chamado call-to-action e a cor real para ele. Eu não gosto de fazer isso assim. Eu gosto de fazer isso, porque nomear suas aulas aqui como legal se você meio que sabe o que está fazendo, mas eu não acho isso muito útil. Digamos que é esta caixa aqui. Mais uma vez, não me vai dar o meu nome até que eu o encontre e lhe dê um nome. Na verdade, é mais fácil, basta entrar em suas configurações na parte inferior de Gerar CSS. Não aquele. Uma delas é Opções de Exportação. É isso. O primeiro ícone. Este aqui diz, “Gerar CSS para objetos sem nome.” Só lhe dá frio st1 oh, st0. Vou copiar isto, e vou colocar isto no meu documento. Na área de trabalho, isso vai ser meu, eu não sei como vou chamá-lo, porque não é nada. Caixa preta. Vou dar um nome aqui. - Sim. Incrível. Está faltando algumas coisas embora como eu muitas vezes preciso da altura e largura, mas eu decidi aqui. Há algumas opções neste primeiro tipo de Opções de Exportação novamente que eu gosto de incluir. Há um que diz, “Incluir dimensões”. Eu vou fazer isso. Legal. Também está incluído dimensões de pixel lá. Basta dar-lhe uma altura e largura. Acho que isso é bastante útil. Tudo bem. Agora use executar rapidamente seu documento e diga às pessoas como as coisas são grandes. Você pode pegar esta caixa verde no fundo, dar-lhe a altura, largura e pixels. Eu tenho que desbloquear esta camada aqui. Lá vai ele. Eu sei que esse cara é uma largura de fundo. É principalmente a altura com a qual quero lidar. Quero ter certeza que ele está ou ela está na altura certa. Mesmo com estes botões na parte superior, as cores certas e a altura e a largura que estou usando, este logotipo. Eu poderia dizer a eles a altura e a largura que eu queria. Sim, apenas realmente muito útil para puxar o CSS para fora para você mesmo, se você vai construí-lo em seguida. É o que faremos em um dos meus próximos tutoriais depois deste. Vamos construir isto no Dreamweaver. Mas, se você estiver trabalhando com um desenvolvedor web ou web designer, você pode simplesmente entregá-los um tipo de folha de especificações para dar a eles um calibre áspero. Você não precisa listar cada coisa e cada pedaço de margem, mas, sim, pode ser muito útil. Tudo bem. É assim que exportar o CSS do Illustrator para trabalhar com seu site. 41. Aprendendo a linguagem do design de UI para interação com o usuário: Tudo bem. Agora que criamos nosso primeiro projeto para disponibilizá-lo no Illustrator, você pode se chamar de designer de interface de usuário com orgulho. Você é o melhor designer de IU do mundo? Provavelmente ainda não. Os próximos passos é obter o máximo de experiência possível. Isso pode ser feito obviamente, fazendo seus próprios projetos e lendo e seguindo outras pessoas que são incríveis, um pouco de experiência emprestada. Você precisa sair, descobrir quem são as pessoas incríveis, seguir seu trabalho, aprender com suas experiências. todo o tempo, você aprenderá e escolherá palavras e frases que poderá usar para comunicar seus projetos de interface do usuário quando estiver trabalhando neles. Há bons lugares para começar. Este aqui na nossa frente em design.google.com é um recurso incrível. Este é o meu go-to para IU. Ele visa especificamente mais tablet e celular, que é o material novo de ponta. Web design móvel é incrível e tem sido em torno de um longo tempo, mas uma grande parte da nova linguagem que você vai ter que aprender vem desses dispositivos. Provavelmente a maior palavra a aprender é material. Material é a palavra que usamos para falar sobre como o design interage com a pessoa de uma forma mais indiretiva do que nunca. Há muito mais recursos que um telefone pode fazer do que dizer um site. Este é o lugar para começar. Comece a ler. Há tantos artigos bem curados e escritos neste site. É muito inacreditável, eu amo este site. Então você começa a trabalhar o seu caminho através disso. Este site tem ótimos artigos. Os recursos são muito legais. Se eu clicar nos recursos aqui, material.io é a explicação do Google sobre como essa interação funciona. A coisa legal sobre isso é que lhe dá a linguagem que você pode usar. Vou saltar para o material.io. Ele só lhe dá uma maneira muito agradável de, se você lê-lo e começar a entender e trabalhar, isso significa que quando você começar a falar com seus clientes e trabalhar com seus processos, ele vai lhe dar a linguagem que você precisa para ser capaz de expressar o que você quer dizer e dar-lhe alguma credibilidade de por que isso deve ser feito. Mesmo apenas olhando para os ícones e alguns desses componentes materiais, apenas lhe dá ícones e explica o porquê. Mesmo este é apenas um recurso simples de ícone que especialmente para coisas como aplicativos que gostamos, o que diabos tipo de ícone deve ser usado para, eu não sei ou é um anúncio. É simples quando você vê, mas alguém é escravizado por muito tempo e duro e passou por muitos aplicativos, então ele está sendo comunicado às pessoas. Isso é um entender esta é uma linguagem que já existe. Você não está tentando reinventar a roda. Igual aos Componentes Um. Há uma documentação muito boa sobre como isso funciona. Veja nos recursos do Google, seus artigos são incríveis. Outro que eu gosto muito é olhar para o Facebook. Tenho um chamado Facebook.Design. É apenas seus designers e eles podem postar coisas que eles estão interessados, artigos que eles escreveram, o que eles estão trabalhando. Eu acho que este é um recurso muito legal para aprender e seguir idéias legais e entender como as coisas funcionam. Sim, é outro site legal. Agora vamos sair, encontrar os melhores designers de IU que você gosta. Siga-os no Twitter, siga-os no Facebook. Leia estes artigos e ele realmente vai ajudá-lo a obter mais confiança quando você começar a entregar seus projetos. Você pode ser capaz de comunicá-los aos seus clientes. Tudo bem. Vejo você no próximo vídeo. 42. Como conseguir seu primeiro trabalho como designer de UI: Como você obtém seu primeiro trabalho como designer de interface do usuário? Você fez o curso, e você realmente veio para começar, mas como você consegue trabalhar? Há dois riachos. Se você é jovem, ou pronto para uma mudança de carreira completa, você vai deixar de ser um padeiro, e agora você vai se tornar um designer de interface do usuário, ou você é jovem e você é um estudante e você está olhando para entrar nele é que a direção está apenas começando como um designer de IU júnior. Encontre um emprego, qualquer emprego. Porque é realmente difícil de entrar, então, basta construir um bom portfólio, usar o projeto que fizemos nesta classe, e construir alguns outros projetos por conta própria, ou para amigos ou colegas e apenas conseguir um emprego. Pegue qualquer salário, pegue qualquer coisa, e saiba que depois de cerca de um ano, você vai aprender uma quantia louca de onde quer que você esteja trabalhando, e saiba que qualquer trabalho que você pegue mesmo que não seja o trabalho mais fabuloso, ele vai para lhe dar esse tipo de experiência que você precisa para o segundo trabalho. Espero que esse trabalho floresça nessa maravilha, mas eu descobri, na minha experiência, todo mundo seu primeiro emprego, você é contratado você é tratado um pouco mal, você não tem habilidades muito boas, e depois de um ano ou dois você está realmente começando a ficar muito bom, mas, o negócio nunca vê essa pessoa, é por isso que eles a tratam como o júnior, e a taxa de pagamento fica bastante baixa, e ele consegue um pouco de empregos ruins. Então você faz isso por um tempo, e então você salto no trabalho. É uma droga, mas é a maneira de seguir em frente. No web design é encontrar outra agência, mostrar-lhes que este sou eu agora, eu tenho dois anos mais experiente, isso é tudo o que eu trabalhei. Eu trabalhei em uma agência, então você conhece um pouco mais a língua e consegue um emprego melhor assim. Essa é uma maneira de começar. É apenas pegar um emprego na indústria, e começar, mas você vai precisar de um portfólio para começar, então você vai precisar de alguns projetos que você fez, como este neste curso. A outra tendência é se você está dizendo um designer, ou trabalhando em uma agência criativa, você já está executando suas próprias coisas, ou você está apenas entediado com o design que você está fazendo no momento, isso vai ser um pouco Diferente. Você vai ter que levar todo o trabalho do lado provavelmente e você pode ser como eu se eu mudar de carreira agora, eu tenho 36 anos eu tenho filhos, não há hipoteca para pagar aluguel, mas há responsabilidade. Então o que você vai ter que fazer é queimá-los dentro ou fora. Dê a si mesmo um ano ou dois e diga, eu vou usar todas as noites de segunda-feira, terça-feira à noite, quarta-feira à noite para trabalhar em um projeto. No início pode ser apenas o seu portfólio, obter isso longe muito rápido, seus próprios portfólios é o pior leva uma eternidade, mas, em seguida, assumir qualquer trabalho que você pode. Podem ser amigos ou familiares apenas para conseguir esse portfólio, então você pode começar a trabalhar em outros projetos paralelos. Uma vez que você tem sua experiência indo, você pode começar a olhar para coisas como essas coisas como Upwork. Você se inscreve para isso ou Freelancer.com ou 99designs. Embora isso não vai te dar esse salto claro, porque o salário é bom, e é coisas freelance ao lado, mas é construir esse portfólio para você e construir essa experiência, modo que quando Você chega a um ponto que você gosta. Na verdade, sou muito bom nisso agora. Eu fiz alguns trabalhos, eles não estão pagando grandes quantias, eles são como mensalidades pagas. Você não tem tempo para ir e fazer um curso de ano, fazer esses trabalhos menores apenas para os menores salários, apenas para construir sobre e é pago e aprender, e então uma vez que você chegar a um ponto onde você se sente como, ok eu peguei meu habilidades de design de outra área e eu realmente apliquei aqui, estou confiante, eu tenho que a linguagem, então você pode fazer mais de um salto para outro trabalho. Você precisa começar em um nível web intermediário, você precisa estar ganhando 60 mil por ano sem começar pelo mínimo da banda. Então você entra nesse papel como um web designer intermediário, e talvez lá em cima não seja um sucesso tão grande na família, ou pode ser apenas você está construindo seu negócio fora como um designer gráfico, você ainda não é freelance, mas você está recebendo mais e mais trabalho de interface do usuário. Esse é o meu conselho de qualquer maneira. Esse é o meu conselho, certo, próximo vídeo. 43. Próximos passos para se tornar um designer de UI incrível: Próximos passos após o curso. Outras coisas que você pode fazer é mudar para uma abordagem de UX para design. Fizemos todo o design da interface do usuário no Illustrator e, para adicionar um nível de interatividade, você pode olhar para algo chamado Adobe XD ou designer de experiências porque temos um tipo de apartamentos no momento. Você pode pegar esses apartamentos e torná-los clicáveis para saltar para páginas diferentes, protótipo e aplicativo através do telefone real. O Adobe XD é um ótimo próximo passo para você, então confira meu curso que é chamado de interface do usuário em web design usando o Adobe XD. Outras ferramentas ou coisas que você pode usar é o Photoshop. Photoshop para web designers é outro curso que eu tenho. É só que, outra pena em seu boné em termos de ser um designer de interface do usuário. A outra parte que você pode ir para baixo é que você pode ir para baixo todo o processo de web design. Não apenas projetar visuais, mas realmente construir o site usando HTML e CSS. Confira meus cursos do Dreamweaver. Há alguns diferentes. Estes que são mais lado design e, em seguida, há um que é mais lados de codificação. Confira aqueles. Outra opção que você pode ir para baixo é toda a experiência UX. Nós falamos sobre UI e brevemente o que UX é, e a diferença entre uma interface de usuário e design de experiência mas eu tenho um curso completamente sobre como se tornar um designer de UX. Confira se você quiser entrar em um pouco mais de design UX ou pelo menos entender o que é. Vai ser isso. Obrigado por assistir. Eu nunca tenho certeza do que fazer no final destes, eu apenas meio que murmúrio junto. Mumble. Mumble. Tchau agora. 44. Próximos passos para se tornar um designer de UI incrível: Tudo bem. Agora, é hora dos próximos passos. O que eu faço agora? Terminou o curso, estou começando na interface do usuário. O que posso fazer a seguir? Agora, você pode ficar como um designer de interface do usuário e apenas continuar praticando essas habilidades. Obter mais trabalho construir um portfólio, basta fazer o lado do design, permanecer no lado do ilustrador e fornecer arquivos e colocar o CSS para o nosso desenvolvedor web. Mas se você quiser ir um pouco mais longe, o próximo passo seria olhar para fazer essas coisas da web você mesmo. Para começar em seu HTML e CSS, modo que o lado da codificação, você pode fazê-lo bastante visualmente. Eu tenho um curso em durante alavanca para Bootstrap, que o mantém bastante visual usando algo como Dreamweaver e nós não ficar muito pesado no código para que você definitivamente pode fazer isso como um web designer. Tudo que você pode querer ir ainda mais longe e ser um design web front-end totalmente de pleno direito você realmente precisa entender o código e há um outro curso que eu tenho é como codificação para designers ou codificação de seu primeiro site. É isso. Vou verificar esse e que usa o Dreamweaver também. Esse pode ser o próximo passo em que você projetá-lo no Illustrator, construí-lo em algo como o Dreamweaver. Se você não quiser usar o Dreamweaver, tudo bem. Há outros programas que você pode começar a aprender a codificar. Komodo é um. Uau, eu não consigo pensar no resto deles. Sublime, K2 é provavelmente o mais popular em meus círculos no momento. É só mais um código para isso, como o Dreamweaver. O que mais você pode fazer? Você pode desenvolver suas habilidades em outro programa de design como o Photoshop, eu tenho um curso sobre como construir exatamente o que fizemos aqui no Illustrator praticamente, mas fazendo isso no Photoshop. Você tem ambas as ferramentas para começar a usar, você pode descobrir que se você está procurando trabalho, eles podem se apoiar em uma ou outra você pode ir para isso também. O que mais você pode fazer? Você pode começar a usar algo como Muse talvez. Você pode projetar algumas coisas e usar o Muse para construir o site. Definitivamente não é um código. Eu tenho um curso om Muse também. Claro que em tudo. Outra coisa que você pode considerar é talvez pegar suas habilidades de design, projetá-lo e ilustrá-lo, e, em seguida, talvez construir para fora no WordPress. WordPress é provavelmente o maior CMS em todo, inteiro em web. Você pode projetá-los no Illustrator e , em seguida, construir algo chamado coisas no WordPress que pode ser uma direção que você iria. Você pode ficar como um web designer. Muita gente faz e está tudo bem. Eu gosto tanto de fazer o design quanto a construção, mas você pode ficar do lado do design. Você pode ter outras coisas em que você trabalha e você apenas faz algumas coisas de design como parte disso. Provavelmente a glória coroada, pelo menos na minha opinião no momento, é levar você trabalho de interface do usuário e adicionar um nível de pesquisa e teste a ele, essencialmente se tornando um designer de UX. Vá ver como se tornar um designer de UX e esse é outro curso que eu tenho. Mas acrescenta um nível de que eu amo em termos de compreensão de negócios e seu design de interface do usuário é bastante procurado muitas vezes agora em design UX no momento. Usa suas habilidades da interface do usuário, mas baseia-se nisso com outras ferramentas e outras técnicas e que está em demanda louca no momento. A maioria das pessoas diz que eu quero um designer UX-UI. Há alguns um pouco diferente, mas UX pode ser uma progressão para unidades e está pagando muito bem no momento. Essa pode ser a coisa em que você se mete. 45. Seu primeiro projeto: É hora do projeto, hora do trabalho de casa, tempo de desenvolvimento profissional, o que você quiser chamá-lo, este bit é super importante. Prometo que as pessoas que ensino, ensino muitas pessoas. São as pessoas que fazem isso como passo extra porque você tem me seguido passo a passo através deste curso que é incrível e você vai ter as idéias, mas não é até que você colocá-los em sua própria prática, nós temos que pense por si mesmo correr em seus próprios problemas. Então este pequeno projeto eu vou guardá-lo para você. As pessoas que fazem isso são as que vão se lembrar disso. Se você está falando sério, faça este pequeno projeto, semeie em mim. Eu adoraria ver o que você faz, vamos ver algumas tarefas a fazer. Nós os escrevemos. Você vai fazer coisas para um cliente. É um pequeno café aberto no seu bairro. Chama-se Craft Espresso. O que eu gostaria que você fizesse é ir a algo como prêmios, awwwards.com. Para inspiração, eu quero que você faça um desktop, um tablet, e uma versão móvel para eles e eu quero que você faça o logotipo, eu quero que você use a ferramenta caneta ou a forma construir uma ferramenta para construir algum logotipo vencedor e colocar seu nome ao lado dele. Eu gostaria que você usasse cores para o logotipo e para o site. Eu quero que você escolha algumas coisas da Adobe cor, color.adobe.com. Vá verificar se escolher uma amostra de cor que você vai usar, você pode usar o seu próprio, mas você pode ser novo para escolher cores, então escolha isso. A próxima coisa que você precisa fazer é, eu quero que você use duas fontes e não mais do que duas. Você tem que ser preciso e você está escolhendo e eu quero que você as escolha de fontes do Google. Então eu quero que você seja capaz de baixá-los e instalá-los em sua máquina e ser capaz de usá-los. Outra coisa que eu quero que você faça é que eu quero que você use imagens, cafés, cafés e outras coisas. Deve haver alguma boa qualidade, uso comercial gratuito. Você ainda estará estudando, então, não importa, mas os caras têm freeimages.com. Obter imagens onduladas como levá-los você mesmo, ir começar a partir daí, se você quiser, carregá-lo para o seu site. Quero ver isso feito. Quero ver você criar pelo menos um ícone personalizado usando o construtor de formas e a ferramenta de pino também. Algum ícone no site e eu quero que você explore todas as coisas no interior. Passar por esse processo de exportação de tudo o que é que a forma vitoriosa, bem pausa ou escalável, Eu quero que seja um SVG. Qualquer tipo de fotografias que você está usando, eu quero que essas sejam jpegs e eu quero que você exporte algumas das CSS, bem como, principalmente o aquecimento, qualquer texto de parágrafo e talvez você tenha um botão de chamada à ação. Coisas assim, eu gostaria de um documento de texto. Então eu gostaria que você fechasse tudo e você pode enviá-los para mim. Há algumas maneiras diferentes e você pode postar capturas de tela. Ter tudo é provavelmente tudo o que é necessário. Especialmente eu quero ver seus desenhos. Eu quero vê-los, ver como você está, me dando conselhos e apenas me manter informado sobre o que você está aprontando. Esse é o seu projeto, eu quero que você veja essas listas e certifique-se de incluir tudo isso e construir uma pequena coisa que você pode usar para o seu portfólio. Vejo você no próximo vídeo. 46. Folha de consultas: Muito bem, esta é a nossa folha de batota. Vamos passar por alguns dos pedaços que cobrimos em muito rápido, pequenos pontos de bala e adicionar algumas dicas super extravagantes e truques. Vamos fazer isso. Então você está tentando exportar seus gráficos da web, alguns PNGs do Illustrator, mas eles estão saindo um pouco leitosos, um pouco grosseiros nas bordas. Esta dica de folha de truques mostrará como corrigir isso. Vamos para Ver e vamos para este que diz Pixel preview. Isso vai pré-visualizar o que ele vai parecer como um PNG em pixels, e você pode ver, fuzzy. Então vamos selecionar todos esses caras e corrigi-lo clicando com o botão direito em qualquer um deles, e indo para um que diz Make pixel perfeito. Meu Deus, olha como são crocantes. Isso é como corrigi-los antes de exportá-los como PNGs. Ele os alinhará à grade de pixels e você terá exportações perfeitamente nítidas. Então, antes de começar a trabalhar em qualquer projeto web ou projeto de design de interface do usuário, você terá que mudar suas preferências para pixels porque não podemos usar mais nada online. Então, sem nada selecionado, eu posso ir até aqui se ele diz Preferências, ou eu posso descer para Editar preferências em um PC ou, no caso do meu Mac aqui, ele está em unidades de preferências do Illustrator. O que queremos fazer é certificar-se de que o geral é definido como pixels, e o traçado é definido como pixels, e o tipo é definido como pixels. Novamente, é tudo o que você tem treinamento ao longo da vida. É tudo sobre pixels. Clique em “Ok”, dias felizes. Então você precisa de 12 colunas para sua grade de web design responsiva. Para fazer isso no Illustrator, pegue a ferramenta de retângulo, desenhe uma caixa que gira toda a largura e, em seguida, vá para Objeto, entre em Path e vamos para Dividir em grade. Mudou o número de colunas para 12. As calhas aqui que vou usar são 30 para combinar com bootstrap, vou clicar em “Ed Guides”, clique em “Ok”. Nós estamos lá. Você pode parar por aí se isso funcionar para você. Agora, se você clicar com o botão direito do mouse em qualquer um deles, e ir para Desagrupar e selecionar apenas esses principais aqui, eles são apenas linhas e não guias reais. Então eu vou cortar esses, apagar todo o lixo que sobrou. Há um pouco de lixo lá e vamos para Editar, colar no lugar ou colar na frente, colocá-lo de volta onde nós temos, então ir para Ver, em seguida, ir para Guias e ir para Criar guias. Agora os guias apropriados. Então você está usando apenas duas fontes para todo o seu site, mas você tem que percorrer esta lista inteira para tentar encontrar a fonte que você estava usando uma e outra vez. Mas onde está? Lá está ele. Estou usando playfair. Eu vou apertar este pequeno botão de estrela aqui, e isso significa que agora quando eu entrar aqui e eu digo, “Que fontes estou usando”, clique nesta pequena estrela aqui, e isso só vai me mostrar meus favoritos. Aí está a minha feira. Torna super fácil de usar. Eu vou até aqui, clique nisso, apenas playfair, dias felizes. Então eu estou pronto para exportar meus gráficos para construir um site. Agora eu vou para o Arquivo, eu vou para a Exportação, e então eu vou para não fazer isso. Salve para web, não use mais. Vamos usar esse cara aqui, janela, e vai ser o painel de exportação de ativos, e tudo o que precisamos fazer é selecionar o gráfico que você deseja exportar, clicar em segurar e arrastá-lo no meio aqui, dar um nome, e decida o formato. Você precisa de uma retina esportiva? Fácil. Clique em “Adicionar escala”, agora tenho uma opção com o dobro do tamanho. Tenho estes pequenos ícones no fundo. Eu vou arrastar estes para dentro, e eu vou usar, em vez de PNG e JPEG, eu vou escolher o encantador, eu vou escolher o encantador, famoso SVG para Scalable Vector Graphic, clique em “Exportar” e você está fora. Então, você fornece gráficos para um desenvolvedor e passa muito tempo no Illustrator planejando e projetando, e você dá a eles e eles voltam e nada parece igual. O que você pode fazer para garantir que este processo seja mais simplificado, é dar-lhes algum CSS. Para fazer isso no Illustrator, selecione no objeto do qual deseja obter algum código CSS, vá para a janela e, em seguida, desça para as propriedades CSS ali mesmo. Você pode copiar isso e colá-lo em um e-mail e dizer, “Caro desenvolvedor, certifique-se de que é playfair, e é negrito e o tamanho está certo, e a cor é exatamente como eu escolhi, nada mais.” Ou então, digamos algo mais como esta caixa laranja aqui, e você poderia ver que nenhum código CSS foi gerado. Então, para contornar isso, há uma primeira pequena opção na parte inferior aqui, opções de exportação que dizem, “Gerar CSS para objetos sem nome”, e a outra coisa que eu gosto de ativar é incluir dimensões e voila, ele vai me dar o meu tamanho, altura e cor para a minha adorável chamada para o botão de ação. Não deve haver desculpas agora que tudo não está alinhado. Veja exatamente como você o projetou no Illustrator. Você precisa compartilhar esse projeto com alguém sua equipe ou outro designer ou simplesmente arquivá-lo. O problema é que você usou imagens que vêm de sua biblioteca e fora de uma unidade de rede, há fontes que a outra pessoa não tem. Não se preocupe, você pode corrigir tudo indo para Arquivo, ir para Pacote, certificar-se de que está salvo, dizer a ele um lugar para ir, e eu vou apertar “Pacote”. Clique em “Ok”, relaxe e em sua área de trabalho em um segundo, claro, pacote, Eu tenho um pouco de texto inútil, Eu chamei meu arquivo do Illustrator, Eu tenho todas as fontes que estão sendo usadas e, em seguida, as imagens que estão sendo vinculados. Agora posso fechar este lote e enviá-lo para o próximo designer. Dias Felizes. Obrigado, Illustrator.