Introdução ao web design: design agradável para startups e pequenas empresas

1. Introdução: Oi caras. Esta é Meg Lewis de Ghostly Ferns. Bem-vindo à minha aula de Skillshare sobre introdução ao design da interface do usuário. Primeiro quero falar um pouco sobre o que vamos aprender ao longo deste curso. Vou primeiro ensinar-lhe um pouco sobre estilos e técnicas de interface do usuário. Vamos aprender coisas como projetar vários botões, mostradores, avatares, contêineres e, em seguida, vamos colocar tudo isso juntos em um site de rolagem de uma página para uma inicialização falsa. Quando juntarmos tudo, aprenderemos a projetar para uma grade 960. Nós vamos aprender sobre cabeçalhos, a seção de corpo, fotos, e então nós vamos aprender sobre como dividir o conteúdo que o cliente quer em várias seções para o site. Nós também vamos aprender um pouco sobre rollovers e interações. Deixe-me falar um pouco sobre Party Starters e o projeto que vou dar para vocês trabalharem. Party Starters é uma empresa fictícia que eu tenho um amigo meu que quer desesperadamente começar esta empresa, mas ele é um grande iniciador do partido ele mesmo, e assim espero que algum dia, isso vai se tornar em obras. Mas por enquanto, eu realmente não quero que vocês projetem para uma startup de verdade porque nós não queremos que seus projetos sejam entregues de graça. Você é mais do que bem-vindo ao design para sua própria empresa, se você é um fundador de uma empresa e se você é um designer, então você é bem-vindo design para outra empresa como seu projeto, ou se você está apenas curioso, você pode também projetar para iniciantes do partido. São gatos, desculpe. Você pode criar seu próprio site Party Starters se quiser e apenas enviá-lo na guia Projetos e me mostrar o que vocês têm feito. Deixe-me dizer-lhe um pouco sobre por que eu amo projetar para startups. Em primeiro lugar, eles são incrivelmente apaixonados e entusiasmados e enérgicos sobre o produto, e eles geralmente gostam de ter uma mão do design, e eles gostam de realmente contribuir para o que está acontecendo com o design e eles estão prontamente disponíveis em vez de muitas empresas que estão, talvez se você está projetando para uma loja de mães e pop, que durante o dia, eles estão dirigindo a loja. Essas startups estão sempre pensando em sua empresa, estão no relógio o tempo todo, muitas vezes trabalham fins de semana e noites. Então, eles estão prontamente disponíveis para você, e eles estão sempre tão animado com seu produto, que é realmente divertido trabalhar para uma startups e eu não poderia recomendá-lo mais. Além disso, as startups podem ser incrivelmente lucrativas para você. Dependendo do seu modelo de preços, eu não quero realmente sugerir nada lá, mas muitas vezes dependendo da empresa, você pode cobrar um pouco mais porque este design pode ser visto por muito mais pessoas ou, em seguida, algumas empresas menores que são realmente apertados em seu orçamento. startups em estágio inicial são muitas vezes muito apertadas em seu orçamento, e muitas vezes trabalho para essas empresas, então estou realmente animado com o produto. Às vezes vou oferecer-lhes um pouco de uma quebra de preço. Mas geralmente eles são muito sérios sobre o trabalho de design e eles certamente têm um pouco de dinheiro porque eles estão procurando investidores e eles querem ter uma aparência apresentável profissional. Então, isso é muitas razões pelas quais eu amo projetar para startups, é muito divertido. O design da interface do usuário em geral é realmente poderoso. É essencialmente só fazer formas. Como você aprenderá nos tutoriais, você está fazendo um monte de quadrados e retângulos arredondados, mas você está juntando cores e textos e fotografia, e você é capaz de criar um design realmente poderoso. Especificamente, eu gosto de criar um design amigável que tem muita cor e muita energia e bem-estar, limpo, fácil para o usuário digerir e as pessoas respondem muito bem ao design amigável. Empresas com design amigável são muito populares agora, como você vê com empresas como Skillshare, e Airbnb, e Zocdoc, e até mesmo Warby Parker, você obtém esses projetos modernos e limpos que usam cores de uma ótima maneira e as pessoas respondem muito bem a ele. Eu só queria que você soubesse que depois de fazermos esses tutoriais juntos, você deve projetar seu próprio site de uma página para uma startup. Você pode ir além disso se quiser e continuar com mais algumas páginas, mas para esta aula, eu realmente quero que você faça uma página. Envie isso em uma data limite ou você pode ir em frente e enviá-lo antes disso. Estou sempre disponível via e-mail em meg@ghostlyferns.com. Você pode fazer perguntas para mim, me mostrar seus projetos cedo, se quiser, e eu fico feliz em lhe dar feedback ou fornecer algumas dicas extras. Eu também sei que os vídeos tutoriais são para ver o que eu estou fazendo em algumas vezes porque eu não sou um gravador de screencast gênio. Então, se você tiver dificuldade em ver algo ou quiser que eu esclareça, fico feliz em fazê-lo via e-mail. Eu também tenho todos os arquivos de recursos dos vídeos prontos para você baixar aqui. Vá em frente e baixe-os enquanto você está assistindo o vídeo e talvez você possa clicar em alguns dos meus estilos de camada e ver o que eu estava fazendo. Tudo bem, pessoal. Se você tiver alguma dúvida, envie um e-mail para meg@ghostlyferns.com, e espero que você goste deste curso. Obrigado rapazes. 2. Estilos de botão, avatares, layouts: Ei gangue, esta é Meg Lewis de Ghostly Ferns. Bem-vindo à aula de compartilhamento de habilidades sobre introdução ao design da interface do usuário. Eu quero começar dizendo, obrigado por fazer esta aula, obrigado por fazer esta aula, espero que você aprenda algo valioso. Você não desliga o vídeo e esquece o que aconteceu. Então eu quero dar às isenções de responsabilidade primeiro. Esta é uma aula para alguém que tem uma compreensão básica do Photoshop. Se você não tem uma compreensão básica do Photoshop e você tem o Photoshop, eu vou muito devagar para onde você pode agarrar o jeito dele. Mas vou ser rápido o suficiente para que as pessoas que já sabem o que estão fazendo não fiquem completamente entediadas. Tudo bem. Vamos começar. Então, abra o Photoshop, inicie um novo arquivo. Vou dar-lhe um tamanho arbitrário de 1.000 pixels por 1.000 pixels. Sempre 72 DPI para projetar para a web. Vamos fazer um RGB também porque estamos projetando para a Internet. Então vamos dar a este um título de PARTYSTARTERS em todas as maiúsculas. Por que não? Abra isso. Aqui está a nossa tela. Estamos apenas projetando elementos de interface do usuário para este tutorial. Então vamos aprender coisas como botões, estilos, em abundância. Vamos fazer alguns avatares e vamos fazer contentores. Vai ser ótimo. Você vai se divertir muito. Vamos começar. A primeira coisa é primeiro, vamos projetar alguns botões. Vamos passar por cima de oito estilos de botões agora. Os quatro primeiros serão botões mais escuros em um fundo claro. Vamos mantê-lo branco para o fundo. Os outros quatro serão botões mais claros em um fundo mais escuro. Primeiro botão, vamos começar com um retângulo arredondado. Vou dar-lhe um raio de cinco pixels. Vamos fazer um tamanho de 245 por 50. Algo a saber é que estou usando CS6. Então eu estou recebendo esta pequena notificação de tamanho útil ao lado do meu mouse. Então, aqui vamos nós. Aqui está o nosso retângulo arredondado para o nosso botão. Eu vou pegar aqui. Tenho pré-carregado nossas amostras de cor PARTYSTARTERS. Então eu vou provar esta cor rosa quente. O que não diz festa além de rosa quente. Então agora é rosa. Vou primeiro clicar duas vezes nesta camada. Ele abre a coluna de células de camada. Agora, a primeira coisa sobre o design da interface é que você definitivamente vai usar essa cor o tempo todo. O estilo da camada é muito importante. Faz tudo parecer que tem profundidade. Nós não estamos ensinando design plano necessariamente hoje. Então vamos manter tudo arredondado. Vamos usar muitas sombras, gradientes, outras coisas, de uma forma de bom gosto, é claro. Então vamos primeiro começar com uma sobreposição de gradiente. Como você pode ver, isso parece absolutamente horrível. Então vamos editar este gradiente aqui. Vamos dar aos dois N a mesma cor rosa quente que tínhamos antes. Agora eu quero que este gradiente tenha uma espécie de linha dura no meio. Então nós vamos fazer esta metade superior do botão rosa mais clara, e esta metade do botão vai ficar da mesma cor rosa. Então, a fim de dar-lhe essa linha dura e eu vou fazer dois pontos bem no meio. Você pode ver que está no meio porque nossa localização está em 50%. Eu só vou fazer estes dois pontos deste lado um rosa mais claro do que este rosa. Isso parece ótimo. Então eu vou copiar esta cor e colá-la aqui também. Nosso gradiente é feito e parece ótimo, perfeito, tudo é maravilhoso. A próxima coisa a fazer é um acidente vascular cerebral. Então vamos manter o derrame do lado de fora. Vou fazer cerca de oito pixels. Vamos reduzir esta opacidade para, vamos dizer 15 por cento. Ótima. Então, para o botão, estamos feitos com os estilos de camada agora. Como pode ver, tudo o que fizemos está bem aqui. Então, se eu precisar editar algo, eu posso apenas clicar no traçado, editar para traçado e assim por diante. Mas eu vou derrubar isso, apenas tornar nossa paleta de camadas um pouco mais atraente. A próxima coisa a fazer é adicionar algum texto. Então eu vou apenas digitar o texto do botão e olhar, nosso texto é branco para que não possamos vê-lo. Eu vou até aqui para a janela dos personagens e clicar na cor e eu vou torná-lo rosa quente só para que você possa ver o que está acontecendo. Vamos ver o nosso tamanho da fonte é de 18 pontos e temos espaçamento entre letras de 100. Isso é absolutamente perfeito para o que eu quero fazer. Então nós vamos arrastá-lo para cima do botão e olhar agora nós não podemos vê-lo. Então eu vou deixar o texto branco novamente. Perfeito. A fim de tornar o texto um pouco mais fácil de ler, eu vou adicionar apenas um pouco de sombra. Então, novamente, eu cliquei em uma camada para abrir estilos de camada. Vou adicionar uma sombra agora. Então vamos manter isso a uma distância de um e depois espalhar de zero e um tamanho de também zero. O ângulo aqui é muito importante. Eu costumo usar um ângulo de 120 ou 90 graus. Para este projeto, eu acho que eu quero fazer 90. Então vamos ter certeza de que a luz global é verificada e isso vai garantir que essas sombras estejam todas no mesmo ângulo de 90 graus e sombras internas, qualquer coisa que façamos a partir de agora será sempre 90 graus. Então vamos reduzir essa opacidade para 30 por cento. Isso é ótimo. Então agora você pode ver que o texto é apenas um pouco mais fácil de ler. Deixe-me desligar, volte a ligar. Um monte de design de interface do usuário são essas pequenas mudanças sutis que os usuários não podem necessariamente notar fora do bastão, mas definitivamente está tornando sua vida um pouco mais fácil. Está bem. Vamos colocar este botão número 1 em uma pasta, e vamos seguir em frente. Botão número 2. Vamos com um pouco mais de um botão duro. Então isso também vai ser um pouco mais de um botão plano. Agora vamos fazer mais 245 por 50. Vamos fazer com que seja a nossa cor rosa favorita. Na verdade, nem gosto de rosa. Não sei por que estou usando isso. Então eu estou ampliando apenas um pouco para que eu possa obter um pouco mais de detalhes orientados aqui com este botão. Vou fazer disto um botão do Twitter. Então, primeiro de tudo, vamos adicionar um ícone do Twitter e um texto, apenas para mostrar como isso poderia ser. Então, primeiro de tudo, eu vou fazer uma área especial para o ícone do Twitter. Vou colocar uma forma quadrada bem aqui. Estou mantendo pressionada a tecla Shift enquanto arrasto minha forma 50 pixels por 50 pixels. Como você pode ver, está se misturando porque é o mesmo rosa que a forma por trás dele. Então vamos fazer este rosa um pouco mais escuro, só um pouco mais perfeito. Então agora vou diminuir o zoom. Vou abrir o Photoshop. Sou um ilustrador, ignore isso. Então eu abri ilustrador, eu tinha uma forma útil, forma do Twitter, passarinho do Twitter. Vou copiá-lo e depois vou voltar para o Photoshop, vou colá-lo. Agora temos algumas opções aqui. Eu vou usar uma camada de forma só porque eu quero ser capaz de mudar a forma do pássaro e eu quero ser capaz de redimensioná-lo sem perder alguns dos detalhes. Então vamos adicionar uma camada de forma. Aqui está ele, ele é rosa. Nós vamos torná-lo branco e vamos colocá-lo em cima daquela área lá. Vamos ampliar para que tudo fique perfeito. Vamos fazer cerca de 30 pixels. Perfeito. Coloque-o bem ali. Agora vamos adicionar mais texto de botão. Então, desta vez, é aqui que os botões sociais. Então eu vou digitar texto do botão social, ainda branco, então eu vou arrastá-lo aqui. Não tenho certeza se gosto do espaçamento nisso. Parece que as letras estão muito distantes, por isso vou mudar isto de volta para zero. Isso é ótimo. Então vamos movê-lo para o centro visual aqui. Perfeito. Então este é um botão plano, então nós não vamos adicionar nenhuma sombra, nós não vamos adicionar nenhum gradiente. Este estilo de botão é um pouco mais fácil para os desenvolvedores fazer com botões CSS. Então vamos manter isso como um estilo de botão plano e eu vou rotular este botão 2. Agora eu sempre passo e dou o nome de todas essas camadas, mas no interesse do tempo, eu não vou fazer isso agora. Botão número 3, este é um estilo de botão que eu uso o tempo todo. É definitivamente um botão comum visto por você, tenho certeza. Então aqui vamos nós de novo 245 por 50 para isso. Vamos torná-lo rosa de novo. Vamos clicar duas vezes para abrir nossos estilos de camada. Vamos adicionar uma sobreposição de gradiente novamente. Isso parece horrível. Então vamos mudar isso de volta para rosa. Para este, eu só vou fazer o nível de gradiente inferior um pouco mais escuro. Perfeito. Queremos um gradiente sutil. Quanto mais duro o gradiente, mais barato o botão geralmente parece. Então esse gradiente é ótimo. Agora vamos adicionar um traço no interior para manter o tamanho do botão e a forma um pouco mais concretos. Vai ser um pixel. Para a cor, vou provar este rosa escuro na parte inferior do botão. Então eu vou tornar este derrame ainda mais escuro. Queremos que seja um pouco definido, mas não muito definido. Isto é perfeito. O último passo para este botão é adicionar uma pequena sombra, e ainda temos o nosso ângulo aqui de 90. Para esta sombra, eu vou fazer uma distância de um, propagação de zero e tamanho de dois pixels. Vamos baixar essa opacidade para 30 por cento. Ótima. Vamos adicionar mais texto. Então eu vou pegar o texto do primeiro botão e eu vou copiá-lo. Então eu vou manter pressionada a opção como eu clicar no texto do botão e arrastá-lo para cima do nosso novo botão. Agora ainda podemos ver que está aqui em baixo, mas também temos de novo. Vamos movê-lo para baixo em cima do nosso botão. Perfeito. Desta vez, acho que não quero que seja em maiúsculas. Então eu vou redigitar o texto do botão. Isso é ótimo. Mais uma coisa é que esta é uma edição sutil que a maioria dos usuários não vai notar, mas é definitivamente agradável e faz seu botão olhar um pouco mais elegante. Vamos abrir nossos estilos de camada novamente. Vou adicionar uma sombra interior desta vez. Começa no topo e vamos torná-lo branco. Veja como nosso modo de mesclagem está definido para multiplicar. Vamos mudar isso para normal para que possamos ver nossa cor branca. Vamos fazer uma distância de dois pixels de zero e tamanho de zero. Isso é um pouco duro demais, então vamos reduzir isso só um pouco. Vamos, talvez, 40 por cento. Perfeito. Ótima. Há um botão no estilo número 3. Estilo de botão número 4. Mesmo tamanho, vamos com um retângulo arredondado e vamos fazer este raio desta vez 50, 245 por 50 é o nosso número mágico. Vamos torná-lo rosa de novo. Desta vez, vamos fazer um gradiente semelhante ao último. Vamos abrir o botão 3, e, você vê onde ele diz FX aqui, esses são seus estilos de camada, então você vai manter pressionada a opção, arraste o FX para cima para a nova forma e solte, e você acabou de copiar todos os estilos de camada do botão anterior para este botão. Só que eu quero algo um pouco diferente, eu quero pegar esse golpe e eu quero editá-lo. Em vez de fazer um pixel, vamos para fora oito pixels, semelhante ao que fizemos aqui em cima. Perfeito. Então vamos mantê-lo nesta cor rosa escuro. Agora, eu estava pensando que essa sombra interna parece um pouco intensa demais, então vamos pegar isso e vamos fazer com que seja apenas uma distância de um pixel, e vamos diminuir a opacidade um pouco, vamos com 15% . Perfeito. Agora eu acho que isso não é bastante um contraste como eu estava querendo, então vamos abrir o curso de volta e fazer isso um pouco mais escuro, lá vamos nós. Perfeito. Vamos pegar o texto do botão da última vez e copiá-lo. Novamente, eu vou manter pressionada a opção e movê-lo para cima, e então eu vou mover este texto para baixo em cima deste novo botão. Ótimo, há o botão número 4. Vamos nomear esta pasta aqui e seguir em frente. Agora, vamos fazer alguns botões de luz em um fundo mais escuro. Qual cor devemos escolher para um fundo mais escuro? Eu sei, vamos fazer rosa quente. Escolhendo um tamanho arbitrário para a forma deste fundo, apenas fazendo um retângulo aqui, vamos torná-lo rosa quente, todo mundo está feliz, vamos dar um pouco mais de espaço aqui para nossos botões. Perfeito. Mas número 1, no lado rosa, vamos fazer o mesmo tipo de botão que fizemos com um retângulo arredondado raio de 50 pixels, 245 por 50. Não podemos vê-lo porque é da mesma cor que o fundo rosa, então desta vez vamos apenas torná-lo branco. Adicione alguns estilos de camada, vamos fazer outro design de estilo de ordenação aqui, e vamos apenas fazer uma sombra em vez de ser este estilo de sombra desfocada que estamos tão acostumados a ver, estamos vai fazê-lo como uma sombra de gota sólida. Então vamos mudar a distância para três, espalhar para zero, e tamanho para também zero, e agora você vê como é uma sombra muito plana. Vamos diminuir essa opacidade multiplicar, muito bom, vamos fazer 15%, não, vamos 20. Incrível. Agora, vamos adicionar um pouco mais de texto em cima disso, eu vou digitar texto de botão, vamos fazer este texto rosa, não vamos realmente mantê-lo em maiúsculas desta vez, vamos digitar apenas assim. Perfeito. Não quero o espaçamento das letras desta vez, por isso vou voltar a zero. Arraste-o para cima do botão e ficaremos dourados. Perfeito. Há o botão número 5. Botão número 6. Vamos fazer outro botão de estilo plano, desta vez vamos fazer retângulo em vez um retângulo arredondado que temos feito, 245 por 50, lá vamos nós. Vamos mantê-lo branco, e vamos fazer a mesma coisa de uma sombra, desta vez vai ser uma distância de cinco pixels, zero spread, e outro zero para o tamanho. Nós vamos, de novo, derrubar isso para baixo para, vamos para 30. Agora vamos pegar o texto do último botão e copiá-lo novamente, movê-lo para baixo. Incrível. Desta vez eu realmente quero que o texto seja um pouco mais escuro, então eu vou pegar o texto e eu vou provar a cor que vemos aqui em baixo e torná-lo aquele rosa escuro. Botão 6. Incrível. Botão 7. Nós temos uma ferramenta de retângulo arredondado, e nós vamos para o raio de cinco novamente, nós vamos voltar para cinco, 245 por 50. Este estilo de botão vai ser muito semelhante ao que você vê aqui, ele vai ser apenas uma versão mais leve. Vamos pegar isso, adicionar alguns estilos de camada a ele como um gradiente. A seção superior é branca, seção inferior vamos provar branco, e então vamos mudá-lo para apenas um pouco de um cinza mais escuro, vai ser muito sutil. Perfeito. Talvez um pouco mais, ótimo. Agora vamos adicionar um traço, então vamos traçar dentro de novo, um pixel, e vamos apenas escolher um mais escuro, cinza, talvez um pouco mais escuro, vamos fazer sete. Perfeito. A seguir é adicionar uma sombra para o fundo, vamos fazer a mesma sombra que fizemos no outro botão, este aqui, vamos fazer uma distância de um, tamanho de dois, e vamos bater aqueles para baixo para, vamos 40 por cento. Vamos ver o que temos aqui. Eu ainda acho que o derrame é um pouco escuro demais, então nós vamos levar isso para baixo um pouco, talvez para. Um pouco mais. Perfeito. Vamos deixar a sombra um pouco mais escura também. Vamos mudar isto para normal. Ótima. O próximo passo é adicionar o texto do botão de volta. No interesse do tempo, vou copiar este texto de botão, movê-lo para baixo. Desta vez eu vou fazer um cinza escuro. Temos aqui este cinza muito escuro de nossas amostras, vamos usar esse e lá vamos nós. Por último, mas não menos importante, é um estado de botão. Para este botão, como seria quando você clica nele. Vamos colocar isso em uma pasta, botão 7, e vamos copiar essa pasta. Então eu vou arrastar a pasta aqui para baixo, copiá-la, então nós temos nosso botão 7 copiar. Vamos mudar para o botão 8. Vamos arrastar o botão 8 para baixo. Para que pareça que foi empurrado para dentro, vamos fazer algo nos Estilos de Camada, vamos adicionar uma sombra interna. Na verdade, primeiro, vamos pegar nossa sobreposição de gradiente e vamos revertê-la. Em vez de ir da luz para a escuridão, vamos do escuro para a luz, e então vamos adicionar uma sombra interior. Vamos mantê-lo aqui em cima a 90 graus, e vamos fazer a distância de 4, tamanho de 3. Perfeito. Vamos descer isto para 20. Ótima. Agora nosso derrame está parecendo um pouco louco porque você pode ver esta borda branca aqui. Vamos editar o traçado e torná-lo mais escuro. Não tão escuro. Talvez nós vamos às nove. Ótima. Certo, mais uma coisinha que podemos fazer é nos livrar dessa sombra que tínhamos antes e vamos mudar para outra coisa. Vamos mudar isso para branco, e vamos apenas remover esse tamanho de dois pixels e mudá-lo para um. Então vamos derrubar isso substancialmente. Lá vamos nós, então nós adicionamos um pouco de branco bem aqui. Perfeito. Tudo bem, terminamos com botões. Vamos colocar isso na pasta de botões, e vamos chamá-lo de um dia em botões. Tudo bem, vamos mover nossos botões aqui. Agora vamos passar para estilos de avatar. Vamos fazer um par de diferentes, vamos fazer um avatar circular e um avatar quadrado. Vamos começar com um avatar quadrado. Vamos começar colocando um avatar em nosso quadro de arte aqui. Vamos pegar nosso amigo Anthony. Anthony é um pouco grande aqui, então vamos fazê-lo, sem ofensa ao Anthony, um pouco menor. Vamos ao quadrado 140 pixels. Perfeito. Agora vamos apenas pegar essa camada, vamos adicionar alguns estilos de camada em cima dela. Vamos começar com um derrame. Vamos entrar porque se você adicionar traços maiores ao lado de fora, veja como a borda é um pouco arredondada. Se você está indo para bordas arredondadas, isso pode ser uma ótima idéia, mas nós não estamos. Então vamos colocá-lo no interior e isso vai manter a forma em 140 pixels de largura em vez de 140 mais oito. Vamos torná-lo branco. Agora você não pode vê-lo, então vamos adicionar uma pequena sombra na parte inferior. Ver esta sombra de gota realmente intensa parece muito brega e muito barato, então vamos torná-la um pouco mais sutil. Vamos adicionar uma distância de um pixel, um tamanho de dois e vamos reduzir isso para 30. Olhe para isso, é agradável e sutil. A coisa boa sobre este tipo é que parece ainda melhor quando você adiciona uma cor cinza claro atrás dele. Olhe para isso. Lindo. Aqui está o nosso avatar Anthony número 1. Agora vamos entrar em alguns avatares arredondados. É aqui que fica um pouco complicado porque eu faço as coisas um pouco diferente do que muitas outras pessoas fazem. Muitas pessoas adoram usar máscaras, eu amo máscaras às vezes e amo máscaras não às vezes. Então eu vou fazer do meu jeito e por favor saiba que qualquer coisa que eu estou fazendo no Photoshop, se você souber de uma maneira melhor de fazer isso e é a maneira que você gosta de fazer, por favor, me ignore e faça do seu jeito. Meu jeito não está certo, especialmente quando se trata de máscaras. Vamos fazer 140 por 140 de novo. Só estou fazendo um círculo. Aqui está. Só para que possamos vê-lo, vou torná-lo tão berrante. Não é berrante. É legal. Cor verde-azul-petróleo. Então vamos levar Anthony de novo. Aqui vamos nós. Vamos colocar Anthony e então vamos posicioná-lo sobre o círculo em algum lugar. Eu não vou torná-lo perfeito porque eu estou indo rápido aqui. Agora temos essas duas camadas. Temos a nossa forma aqui, uma forma de círculo, e depois temos o Anthony. Vou entrar entre eles e manter pressionado “Alt” ou “Option” e clique. Isso acabou de cortar Anthony bem em cima. Agora sei que muitos de vocês estão dizendo, “Por que não estão fazendo uma máscara no círculo e aplicando-a ao Anthony?” isso eu respondo, eu não sei. É assim que eu faço. Vou pegar o círculo, vou adicionar um estilo de camada a ele. Se você fizer mascaramento, basta adicionar os estilos de camada ao Anthony. Vou adicionar um derrame ao lado de fora desta vez, não, vamos entrar. Vamos fazer oito no interior para mantê-lo em 140 por 140. A mesma coisa, vamos torná-lo branco e então vamos adicionar desta vez um Brilho Externo. Amarelo não, vamos mudar para preto e mudar isso para normal. Olha só, isso é horrível. Parece horrível. Então, vamos reduzi-lo um pouco para cerca de 10 por cento. Perfeito. Ali está o Anthony como um círculo. Avatar 2. Avatar 3, vamos fazer a mesma coisa. Na verdade, vamos copiar isto. A fim de copiá-lo, eu tenho este selecionado. Vou dar um clique em volta do Anthony. Não clique agora, mantenha a tecla Option pressionada, arraste-o. Perfeito. Agora eu tenho Anthony levar 2. Vamos chamar este avatar 3. Vamos abrir esta pasta, vamos clicar novamente aqui e alterar os estilos de camada. Antes de usarmos um Brilho Externo, vamos desmarcar isso. Desta vez, vamos adicionar uma sombra. Vamos acrescentar, em vez de ser uma sombra como este avatar, vamos torná-lo realmente sólido. Então vamos reduzir o tamanho para zero. Perfeito. Então agora temos essa linha dura aqui e vamos fazer este rosa quente. Tempos divertidos. Avatares, bam, conseguimos. Vamos pegar esses dois avatares e escondê-los aqui por enquanto. Perfeito. Arranja mais espaço aqui para nós. A próxima coisa que vamos aprender é um estilo de contêiner. Vamos começar com um retângulo arredondado. Iremos, raio de cinco está bem. Vamos fazer aqui como 250 por 280. Desculpe, isso é chato. Por trás disso, vou dar a ele um fundo dessa cor cinza claro que temos agora. Basta colocá-lo de volta aqui. Nada perfeito agora. Agora temos o nosso retângulo de fundo seis aqui, e, em seguida, retângulo arredondado, também é cinza. Então vamos fazer este branco só para que possamos vê-lo um pouco melhor. Perfeito. Então vamos fazer com que ele tenha os mesmos estilos de camada que este fez. Sem derrame. Então, vamos apenas adicionar essa sombra a isso. Clique duas vezes, vá para Sombra. Mude isso para a distância de um, tamanho de dois, e então nós vamos descer para, vamos para 30. Perfeito. Próximo passo. Vamos adicionar uma imagem a isso. Vamos usar outro rosto. Como é que isso soa? Temos bons avatares na nossa pasta aqui. Vamos com o nosso amigo David. Lá está ele, parecendo feliz. Ele vai ficar tão feliz. Ele está neste tutorial. Agora vamos deitá-lo de novo, como fizemos antes. Entre no meio, mantenha pressionada a tecla Alt ou Option e dê um clique. Agora David se candidatou aqui. Então você pode movê-lo para cima e para baixo, colocá-lo onde quisermos, bem aqui por enquanto. No interesse do tempo, vou olhar para isto e dizer que ele está bem aqui. Agora vamos adicionar algum texto em cima disso. Digamos que isso é algo como um cartão de membro ou um cartão de espaço, se você tiver espaços. Você pode colocar uma imagem aqui de um apartamento que você ama ou para o Pinterest, algo um pouco de inspiração, uma capa de álbum, qualquer que seja a sua inicialização, isso poderia funcionar para qualquer coisa realmente. Então nós vamos adicionar um texto aqui, e nós vamos colocar Bingo nas noites de terça-feira. Nem sei por que decidi fazer isso. Provavelmente uma péssima ideia. Mal conseguimos lê-lo. Então vamos mudar a cor do texto para o nosso rosa favorito novamente, e vamos torná-lo um pouco menor. Então vamos com 13 pontos. Perfeito. Agora vamos adicionar alguns avatares aqui em baixo, avatares circulares. Talvez sejam pessoas que vão ao Bingo nas terças à noite, talvez sejam pessoas que gostam de Bingo nas terças à noite, quem sabe? Então vamos fazer um par de círculos muito pequenos. Vamos 25. Sim, vamos fazer 25. Vamos ampliar para que possamos ver um pouco melhor aqui. Então vamos adicionar mais alguns rostos. Vamos colocar o nosso amigo Daniel aqui. Oh, ele é tão grande. Mais uma vez, vamos fazer do meu jeito e vamos colocá-los rapidamente no topo. Clique no meio. Lá está ele. Ele está um pouco cortado, então vou fazer isso um pouco menor e colocá-lo em cima. Perfeito. Então lá está o Daniel. Vamos colocá-lo em sua própria pasta Daniel. Ótima. Vamos copiá-lo, perde mais de cinco pixels, 1, 2, 3, 4, 5. Aqui está Daniel. Vamos adicionar Anthony de volta aqui. Então renomeie isso, vamos encontrar Daniel e nos livrar de Daniel, e vamos colocar Anthony aqui em vez disso, porque na terça à noite Bingo tem dois fãs, e eles são Daniel e Anthony. Perfeito. Isso é ótimo. Então nós vamos adicionar uma área aqui na parte inferior para colocar algumas palavras-chave, tags ou talvez um pouco de coração para você também gostar de Bingo nas noites de terça-feira. Então vamos primeiro adicionar uma pequena regra de separação aqui com a ferramenta de linha. Nós vamos fazer este pixel que você pode ver aqui em cima, nós só vamos arrastar isso através. Perfeito. Agora é branco, então você não pode realmente vê-lo. Não, não é. É cinza. Não está cinza o suficiente, há um pouco de luz. Então eu vou provar esta cor cinza do lado aqui. Perfeito. Aí está a nossa regra. Eu vou deixar isso respirar um pouco, então eu vou mover Bingo nas noites de terça-feira para cima cinco pixels, e os avatares para cima dois pixels, vamos lá três pixels. Perfeito. Então vamos começar adicionando um pouco de coração. Então eu vou abrir o Illustrator, pegar o coração que eu tenho pronto aqui, e eu vou colá-lo de volta como uma camada de Forma para que eu possa redimensionar e mudar a cor. Vamos mudar a cor para rosa para que possamos ver um pouco melhor e torná-la um pouco menor. Vamos 12 pixels. Perfeito. Isso pode ser um pouco pequeno demais. Então, vou diminuir o zoom e ver o que penso. Não, eu acho que é um grande tamanho. O que sobre você? Eu não consigo te ouvir. Presumo que estejas a dizer: “Sim, é um bom tamanho.” Então vamos adicionar algumas tags para a parte inferior agora. Para obter este estilo de texto a partir do formulário, vou copiar estas letras e clicar e colar. Vamos mudar nossas etiquetas para homens solteiros, bingo e diversão. Aparentemente, o bingo de terça à noite é noite de solteiro. Então, digamos que nossa cor do link é rosa. Então vamos fazer essas vírgulas não cor-de-rosa porque elas não são links. Vamos torná-los uma cor cinza em vez disso. Assim, se eu clicar em Homens solteiros, posso ser levado a todos os eventos de homens solteiros. Talvez, o ferro seja atrair as senhoras para esta noite de homens solteiros. Eu não sei. Pessoal, estamos completamente fartos de todos os estilos de interface. Espero que não tenha sido muito atroz. O próximo tutorial vou mostrar-lhe como tomar todos esses elementos e colocá-los juntos em uma página inicial da interface do usuário real, e vai ser épico. 3. Criação de uma página única para uma startup: Oi caras. Bem-vindo ao Tutorial Número 2. Neste tutorial, vamos pegar tudo o que aprendemos no primeiro tutorial e aplicá-lo a um site, e provavelmente aprenderemos algumas coisas novas ao longo do caminho. Para este site, vamos estar projetando um site Squirrly de uma página para uma inicialização falsa. A inicialização é chamada de partidários. O que os iniciantes da festa faz é, se você tem uma festa chata e patética que você está dando, ninguém está se divertindo, ou ninguém está dançando, você pode pedir um iniciante de festa para chegar ao seu festa o mais rápido possível e começar. Eu gosto de começar com um documento de photoshop que tem uma grade 960. Coloquei o link 960.js em sua seção de recursos na página Skillshare, que você possa ir até lá e baixar a grade por si mesmo, ou criar uma grade por conta própria. Esta é uma grade padrão de 12 colunas embora, que eu sempre gosto de usar. Normalmente, sou super organizado e presto muita atenção aos pixels, mas por uma questão de tempo, não vou fazer nada disso. Eu vou tentar ser muito organizado enquanto também sou rápido, então vamos ver como isso vai correr. Eu geralmente gosto de começar com três pastas; cabeçalho, corpo e rodapé. Eu vou dividir o site em três seções, já que este é um site do Squirrly baseado em seção. Para o cabeçalho, vamos começar com uma pequena barra de cabeçalho aqui. Vai ter cerca de 70 pixels de altura, 70 e nós vamos torná-lo apenas um pouco mais largo do que as telas reais aqui, porque nós vamos adicionar uma sombra ao fundo, e nós realmente não queremos que ele apareça nos lados. Para isso, vamos adicionar uma sombra, como eu disse antes, distância de um, tamanho de dois, e então vamos fazer um pequeno passe aqui de 30%. Isso parece ótimo. Do que precisamos a seguir? Acho que precisamos de um logotipo. Aqui eu tenho um pequeno arquivo de recursos pronto para ir. Ele tem alguns dos estilos de botões que precisamos, avatares, e também tem o nosso logotipo iniciantes do partido. Agora, este logotipo que eu fiz o balão é separado do texto real como você pode ver, e eu fiz isso apenas para que possamos mudar a cor do balão e o texto se quisermos independentes da outra parte. Mas, por enquanto, eu vou mantê-lo como rosa e cinza escuro, e então eu vou arrastá-lo para o nosso novo documento aqui. Está parecendo um pouco grande, então eu vou fazer com cerca de 180 pixels de largura. Lá vamos nós. Vamos lá. Ali. Então esta linha aqui é a linha central, então eu vou alinhá-la aqui no meio da página. Vamos esconder nossos guias por um segundo e dar uma olhada nisso. Acho que isso é perfeito. A próxima coisa que eu quero fazer é adicionar um pequeno link aqui em cima no canto que diz, “Eu quero ser um iniciante de festa para pessoas que também querem se juntar e se tornar um iniciante de festa eles mesmos.” Eu vou apenas para fora da minha cabeça, dizer que queremos que seja 11 pontos. Tudo em maiúsculas, “Eu quero ser um iniciante de festa. Vamos mostrar nossos guias, e vamos colocar isso aqui em cima, e ancorá-lo neste guia aqui. Isso é perfeito. Ótima. Mas isso parece um pouco grande demais. Eu quero que seja bem sutil, então eu vou empurrá-lo para baixo em outro ponto aqui, para 10. Acho que isso parece muito bom. Parece discreto. O cabeçalho é realmente feito que era um pedaço de bolo. Vamos pegar essas camadas e colocá-las na pasta de cabeçalho. Agora, vamos abrir o corpo e trabalhar na Seção 1. Vamos mostrar nossos guias. Agora, a seção vai ser uma grande foto de largura de navegador com algum texto importante sobre o que é iniciantes de festa, apenas algumas linhas, e então um grande botão de call-to-action aqui. Agora, eu definitivamente quero que tudo isso esteja acima da dobra, que eu vou dizer é cerca de pelo menos, digamos 715 pixels abaixo da linha aqui. Quero mantê-lo bem acima disso. Talvez conectemos nossa imagem primeiro, e depois veremos o que acontece. Vou colocar nossa foto grande, que não parece tão grande agora, mas vou torná-la grande. Vou esticar isto, e olha como é grande. É óbvio que vai passar por esta linha que eu realmente não quero. Eu quero que ele esteja apenas ocupando esta seção. Então eu vou centralizar isso aqui um pouco. Vamos mover isso para cima. Isso parece ótimo. Então eu vou fazer uma pequena seleção retangular. Vamos esconder este bolo porque não queremos que as pessoas pensem que os iniciantes da festa sempre aparecem com um bolo. Nós não queremos isso. Isso seria horrível. Vou mascarar isso de lá. Perfeito. Aqui está nossa grande imagem bem acima da dobra, exatamente como eu gosto. Vamos ocultar nossos guias e adicionar algum texto. Aqui neste outro documento, eu gosto de manter isso à mão e ter isso pronto para ir, para que eu possa referenciá-lo como eu estou projetando. Temos o texto do nosso título memorizado aqui. Está pronto para ir, então podemos agarrá-lo sempre que precisarmos de algo específico. Vou pegar um rumo H2, e arrastá-lo para cima. Isto é sobre onde eu quero meu texto, então eu vou digitar um pouco sobre iniciantes de festa. Ele vai dizer, não vamos fazer isso tampas, lá vamos nós, “O seu evento não está indo como planejado? Ninguém está dançando, os convidados não estão se divertindo.” Assim, esse texto não parece muito perceptível em cima da foto, e esta foto será dimensionada dinamicamente como um usuário abre sua janela e a torna menor. Queremos que ele tenha algo atrás dele para preencher essa lacuna. Vou adicionar um pouco de branco atrás do texto. Aqui vamos nós. Eu vou olhar para ele agora mesmo. Talvez assim. - Claro. Vamos copiar isto para baixo e arrastá-lo. Com os jogos de segunda linha, e depois puxe isto aqui. Vamos diminuir o zoom para ver como isso parece. Vou puxar isso aqui um pouco. Isso é ótimo. Agora, vamos adicionar mais uma linha de texto que diz, em maiúsculas, “Começamos a festa.” Perfeito. Vamos com nossa cor rosa favorita. Experimente este rosa aqui em cima. Vamos colocar o texto no topo, e vamos realmente fazer este texto branco. Ótima. Acho que isso parece muito bom. A última coisa aqui, vamos bater sobre isso, é adicionar, nosso botão gigante de call-to-action. Então, para o botão, eu vou ampliar aqui. Vou provar um pouco deste texto H2, e colá-lo, só para que eu possa obter o texto aqui. Então o botão vai dizer: “Preciso de uma festa agora.” Ponto de exclamação. Isso está parecendo um pouco grande, isso vai fazer o botão apenas uma aba maior do que eu quero, então eu vou descer para 16 pontos. Sim, isso é ótimo. Vamos adicionar o fundo do botão. Vamos fazer aquele botão super arredondado que aprendemos mais cedo, aquele que tinha um raio de 50 pixels. Vamos fazer 335 por 50. Ótima. Ajuste isto aqui de acordo. Então, para este, vamos fazer um gradiente, e desta vez vamos fazer azul-petróleo, porque eu acho que a cor rosa está ficando um pouco exagerada. Vamos fazer este gradiente, vamos fazer uma amostra aqui para o nosso esquema de cores iniciantes do partido. Deixe-me colocar esta cor azulada azulada, e vamos fazer este fundo aqui um pouco mais escuro. Perfeito. Nosso próximo passo aqui é adicionar esse traçado no lado de fora de oito pixels, e então derrubar a opacidade para baixo. Vamos para 10 por cento. Sim, eu gosto disso. Vamos agora tornar este texto branco, um pouco mais perceptível. Para torná-lo ainda mais perceptível, vamos adicionar uma sombra sob o texto. A sombra vai ser apenas uma distância de um, propagação de zero, e tamanho de zero. Então vamos derrubar a opacidade para que seja legal, 35 rad. Então vamos mover esse botão para caber em nossos guias. Aqui está o nosso botão, mova isto, queremos que tudo se encaixe na nossa grelha. Vamos também ter certeza de que este texto está indo bem, então vamos selecionar todo o nosso texto, e mantê-lo em Check aqui. Perfeito. Tudo bem. A última parte da Seção 1 é, queremos claramente mostrar se há um iniciante do partido pronto para ir direito você, e quem é aquele iniciante do partido. Vamos desenhar alguns guias aqui sob a foto. Vamos fazer com que 70 pixels de altura. Vamos aos 75, e não queremos rosa, desculpe, queremos branco. Vamos arrastar outro guia para o fundo aqui. Então é onde fica a próxima seção. A primeira coisa que quero acrescentar aqui é um avatar circular. Onde eu vou fazer um círculo, vamos fazer cerca de 35 pixels. Vamos fazer a nossa cor para que possamos ver isso. Vamos empurrá-lo para este guia aqui, e agora vamos apenas colocar a foto de Anthony neste círculo. Torná-lo muito menor. Isso é ótimo. [inaudível] no topo do círculo. Agora, vou fazer a técnica de mascaramento. Vou manter pressionado “Comando”, clicar no “Círculo” e depois ir até Anthony e clicar aqui neste “botão de mascaramento”. Perfeito. Agora podemos apagar o círculo. Agora quero pegar um pouco do H2 de novo. Vamos pegar o H2, arrastá-lo para cima, e nós vamos dizer, “Anthony está aguardando.” Em seguida, queremos mostrar que Anthony está perto de você, e também que sabemos onde você está. Porque podemos nos basear no dispositivo que você está olhando ou no computador que você está usando. Bem, serviços de localização onde você está agora. Queremos que saiba que começou uma festa perto de você, especificamente. Para fazer isso, eu vou fazer um pequeno pino de mapa que eu tenho, e eu tenho um aberto no Illustrator aqui, eu vou apenas copiar isso e colá-lo no Photoshop. branco, então não podemos vê-lo. Então eu vou mudá-lo para rosa. Isso é um pouco grande, está competindo com a foto de Anthony. Não queremos que pareça mais importante do que o Anthony, então vamos ser pequenos. Perfeito. Em seguida, amplie porque eu vou fazer um pequeno efeito aqui, eu vou ensiná-lo a fazer um efeito reflexivo. Copiei um em cima do outro, o que está no fundo, a nova forma que acabei de criar, vou refleti-lo até aqui. Sinto muito, está virado. Vamos girá-lo verticalmente. Então eu vou pegar a opacidade, e eu vou baixá-la para 20. Vou fazer uma máscara de camada nele. Tenha a máscara de camada selecionada, vá até aqui e pegue nosso ingrediente padrão, e apenas desenhe uma linha aqui. Qualquer lugar é bom, mas é onde eu recomendo. Lá vamos nós, é agradável e sutil. Vou colocar isso em uma pasta intitulada “Pin”. Justo. Então Anthony está aguardando, e vamos copiar mais algumas mensagens aqui porque queremos que isso diga o nome da sua localização. Hatton, Nova Iorque. Adorável. Então vamos basear isso um pouco melhor, não no espaçamento. Seção 1 está completa, então vamos pegar tudo o que fizemos da Seção 1 e colocá-lo na pasta da Seção 1. Vamos para a Seção 2 agora. Aqui está nosso guia para onde a Seção 1 está terminando, então vamos começar um novo plano de fundo. Eu só vou olhar para ele e dizer que este tamanho parece bom por enquanto, e eu vou torná-lo azul-petróleo. Agora esta seção vai ser apenas para um pouco mais de informações sobre o que iniciantes do partido é e o que eles fazem. Estou percebendo agora que bem aqui, eu tenho um pouco de minha imagem sobra de antes, porque eu roubei-a. Vou me certificar de me livrar da minha imagem. Vamos voltar para a Seção 1, vou selecionar, mostrar meus guias novamente. Você vê isso? Está bem aqui. Só um pouquinho. Eu vou pegar um retângulo, em seguida, entrar na minha máscara camada aqui, Eu vou pintar em reset seu perfeito. Vamos recolher esta seção, voltar para a Seção 2. Nós temos um fundo cercado, e agora eu quero adicionar uma seção aqui. Minha festa é horrível, e então aqui vai ser outra seção que diz um pouco mais sobre iniciantes de festas. Para a primeira seção, mostre nossos guias, vamos desenhar uma forma, apenas um retângulo, um retângulo branco, e ter um pouco de sombra. Vamos desenhar um retângulo, e eu vou olhar para a altura porque eu sei que esta é a largura que eu quero porque eu estou mantendo-o dentro das guias. Mas para a altura, estou simplesmente a olhar para ele. Então, há o nosso retângulo branco, vamos esconder o guia, dar uma olhada. Vamos adicionar um pouco de sombra sutil a ele. [ inaudível] um, tamanho de dois, vamos colocar um zero, e então derrubar isso para 30. Perfeito. Queremos um texto um pouco maior, então eu vou pegar esse título, esse cabeçalho maior, e eu vou subir no canto e eu vou derrubá-lo 40 pixels do topo, um, dois, três, quatro. 40 pixels deste lado, um, dois, três, quatro. Então eu vou fazer um guia aqui porque eu vou colocar algum corpo de texto aqui, eu quero ter certeza que eu tenho isso no lugar certo. Aqui está o corpo do texto, este texto de preenchimento Lorem Ipsum. Vou arrastá-lo para estes guias. Perfeito. Eu vou esconder os guias, e eu vou mudar isso para, “Ajude meu partido explode.” Gosto de como isso parece. Isto é, direito a isto, Caixa 1. Coloque isso nessa pasta e, em seguida, vamos mostrar as guias, copiá-lo mantendo pressionadas as teclas “Opção” e “Shift”, arrastando-o para cima. Agora eu estou percebendo que minha cópia corporal não está lá, então eu vou começar de novo. Certifique-se de que a minha cópia de corpo está na pasta Caixa 1. Vou manter pressionado “Opção”, “Shift” enquanto arrasto. Mova-o meticulosamente ali. Perfeito. Esconda os guias e vamos mudar o topo para “O que é um iniciante de festa?” Aqui estão nossas duas seções. Eu não perco tempo fazendo cópia porque esta não é uma startup real, mas em um evento em que esta era uma startup real, eu passaria horas cultivando a cópia perfeita para isso. Por enquanto, vamos usar algum texto de preenchimento. Esta seção está parecendo um pouco chato graficamente, então eu quero adicionar apenas um ícone ao centro aqui para adicionar um pouco de peso visual no meio. O que eu vou fazer é fazer um círculo, digamos 55 pixels, eu vou ter certeza que está no centro aqui, e eu vou torná-lo cercado. Experimente isso. Então temos este círculo cercado em cima de ambas as nossas caixas. Agora o que eu vou fazer é, eu vou adicionar o balão do logotipo no círculo. Então eu vou subir até o cabeçalho para o logotipo, pegar o balão e copiá-lo. Eu tenho dois balões, eu vou mover o novo balão para a seção do corpo, Seção 2. Recolha as pastas de cabeçalho, então agora vamos trazer nosso novo balão para baixo. Ponha-o aqui no centro. O rosa no cerco está parecendo um pouco demais, então eu vou fazer este cinza escuro. Incrível. A seguir é encolher isso um pouco, vamos fazer 410. Vamos fazer um pouco mais. Seção 2 está completa. Vamos colocar tudo na Seção 2 e passar para a Seção 3. A Seção 3 é a mais complicada porque queremos mostrar quem são os iniciantes da festa. Esta seção será intitulada “ Conheça os Começadores do Partido”. Nós vamos mostrar, como um carrossel, um grupo de iniciantes de festa que estão perto de você, especificamente. Nós não queremos necessariamente mostrar todos os iniciantes da festa, porque se você está localizado em Chicago, você realmente não quer ver festas iniciantes em Austin. Vamos nomear esta seção, Conheça os Começadores do Partido,o que farei tomando nosso Título Conheça os Começadores do Partido, 1, digitando, Conheça os Começadores do Partido. Eu vou mostrar meus guias e mover isso para este guia bem aqui. Vou me certificar de que é 70; 1, 2, 3, 4, 5, 6, 7 pixels do topo da seção. Vou me livrar deste guia que criei anteriormente. Perfeito. Agora queremos mostrar que estes estão perto de você. Vamos pegar este broche em Manhattan, Nova York e vamos trazê-lo para baixo para isso. Isso foi na Seção 1, Pin Manhattan, Nova York. Vou copiar isso e trazê-lo para a Seção 3 aqui, desmoronou a Seção 1. Perfeito. Temos isto de novo, e quero que diga desta vez, perto de Manhattan, Nova Iorque. Todos os caras que vão aparecer, e as garotas, estarão perto de você. Neste caso, você está em Manhattan, porque é onde eu estou. Perfeito. O próximo passo é mostrar aos nossos iniciantes da festa. Queremos mostrar sua foto, seu nome, onde estão localizados, e quantas festas começaram. Aqui, já fiz o Anthony. Ele está pronto para ir. Ele está perfeitamente dimensionado para a grelha. Eu só vou pegá-lo e vou arrastá-lo para este documento aqui, e então eu vou alinhá-lo muito bem. Pixel perfeito, bem aqui. Então, por uma questão de tempo, eu só vou pegar este e eu vou copiá-lo. Se estivesse a fazer isto de verdade, fá-lo-ia desta forma. Primeiro copiava o Anthony quatro vezes para ser perfeito na grelha, depois renomeava as pastas e mudava toda a informação para quatro pessoas separadas. Eu realmente não gosto de repetir qualquer conteúdo para zombar porque eu gosto de olhar o mais próximo possível da coisa real. Eu normalmente não gosto de usar lorem ipsum ou repetir imagens. Mas por interesse de tempo, temos que fazer assim porque não quero aborrecê-los. Então nós temos nossos quatro iniciantes alinhados perfeitamente na grade, bom aspecto. Está tudo ótimo. Agora precisamos adicionar algumas setas em cada lado para o carrossel. Eu tinha uma seta no meu arquivo do Illustrator aqui. Eu vou copiá-lo, colá-lo como uma camada de forma, e eu vou torná-lo cinza escuro porque ele é branco agora. Não podemos vê-lo. Lá está ele. É bem grande. Eu vou torná-lo um pouco menor porque nós estamos indo para fora da grade em um presente. Vamos sair da rede, pessoal. Não queremos que vá muito longe da rede. Isto é perfeito. Incrível. Vou copiá-lo e virar para o outro lado, e movê-lo para cima. Perfeito. Vamos recuar e dar uma olhada. - Legal. Então temos o Anthony aqui, ele começou 41 festas. No arquivo fonte que vou dar a vocês, isso terá quatro pessoas diferentes, então não se preocupem com isso. A próxima coisa que precisamos fazer é mostrar como é quando você rola um desses. Eu acho que seria ótimo se você pudesse saber quando alguém está disponível agora porque estes são apenas iniciantes de festa que estão disponíveis perto de você. Eles não estão necessariamente disponíveis agora. Talvez eles já estejam em uma festa e só um deles está disponível agora. Então nós queremos mostrar que Anthony está disponível agora e, quando você rolar, você pode clicar e fazer com que ele comece sua festa; começar. Para o rollover de Anthony, vamos tirar a imagem dele aqui. Vamos clicar duas vezes, exibir o estilo da camada, e vamos fazer uma sobreposição de cores. Vamos selecionar nossa cor rosa favorita aqui e reduzir isso para 75% de opacidade. Muito agradável. Eu vou copiar este texto porque eu quero usar o mesmo estilo de texto. Vou colá-lo e digitar, Save my Party. Traga para cima, e logo atrás dele, vou adicionar um fundo. Isso é muito arredondado. Vamos ao raio de cinco pixels. Perfeito. Eu quero que isso seja rosa, e então eu vou fazer meu texto não cinza. Vamos torná-lo branco. Volte aqui e dê uma olhada. Eu gosto disso. O que você acha? Eu não consigo te ouvir. Espero que esteja me respondendo. Tudo bem. Nós também queremos mostrar aos nossos desenvolvedores que isso é de fato um rollover, porque quando você recebe este PSD empacotado para enviar alguém para realmente codificar, eles vão ficar um pouco confusos se você não indicar que é um rollover, porque eles vão Pergunto-me por que é assim. Para fazer isso, eu gosto de colocar uma mão do cursor no topo. Aqui está, só para mostrar que isso é de fato um rollover. A última coisa que quero fazer aqui é adicionar algo atrás do recipiente que diz: “Ei, Anthony está disponível agora.” Vamos pegar 41 iniciante do partido e vamos copiá-lo, colá-lo aqui, e mudar isso para, Disponível Agora. Um pouco mais perto aqui, e depois atrás dele, eu vou fazer apenas um retângulo atrás do recipiente que é rosa quente, e então vamos mudar o texto para branco. Além disso, como eu mencionei, queremos que ele esteja atrás do contêiner, então eu vou arrastá-los para trás. Perfeito. Vamos batê-los um pouco mais perto. - Legal. Essa seção está quase completa. Lembre-se como, no primeiro tutorial, eu disse que às vezes parece bom quando você tem esses pequenos recipientes sombrios se você colocar um fundo cinza muito claro atrás deles? Acho que vamos fazer isso aqui. Acho que vai ser muito bom. Eu vou para trás de todas essas camadas e eu vou adicionar um cinza claro atrás. Acho que vai ficar muito bem. Aqui está o nosso cinzento claro. Sim, estou a fim. Seção 3 é Donezo. Tudo bem. Pessoal, estamos na última seção, que é o rodapé. Normalmente, se não fosse um pager, provavelmente teríamos muita coisa para colocar aqui. Você poderia colocar Twitter, Facebook links, você poderia colocar termos e condições, você pode fazer links para o blog, outras seções do site, mas por enquanto, nós apenas temos um copyright. Isso é tudo o que precisamos para colocar aqui em baixo. Vou copiar aqui de cima algumas cópias do corpo. Vamos minimizar tudo isso. Coloque no rodapé, e eu vou apenas digitar, Opção G, que faz um símbolo de direitos autorais, 2013 Party Starters. Mostre nossos guias e coloque isso no centro. Delicioso. Estou pensando em fazer esse rodapé rosa quente só para parecer um pouco mais interessante, porque está parecendo um pouco sem graça agora. Rosa quente, e isso significa que precisamos mudar o texto para branco. Vamos fazer isso um pouco menor porque os direitos autorais não são muito importantes. Bem, é importante, mas você sabe o que quero dizer. Não é tão importante quanto a festa começa. Tudo bem. Lá temos ele. Vocês conseguiram passar e acabamos. Isso tem sido incrível. Por favor, me avise se tiverem alguma dúvida, estou aqui para vocês. Meu nome é Meg Lewis. Meu e-mail é meg@ghostlyferns.com. Esteja em contato. Obrigado, pessoal.