Como projetar um site no Photoshop

1. Introdução: Oi, meu nome é Dan. Vou guiá-lo através deste curso sobre como construir Mockups de Website profissionais usando o Photoshop. Estas são as habilidades que os empregadores querem, e as habilidades de design de UX/UI são onde os empregos de alto pagamento estão em. Comecei minha vida como designer gráfico e rapidamente descobri que era bastante competitivo e o salário não era super emocionante. Não foi até eu entrar no mundo do web design antes da minha carreira realmente decolar. Construí este curso para iniciantes, para pessoas nervosas em mudar suas carreiras em web design, para pessoas novas no mundo web, bem como para desenvolvedores que não têm qualquer treinamento de design anterior. Nós cobrimos tudo o que você precisa para projetar seus primeiros Web Mockups sem ficar muito técnico. Durante o curso, criaremos um site para uma agência de criação simulada que desenvolve suas visualizações para dispositivos móveis, tablets e desktops. Com os arquivos de exercícios você pode baixar e trabalhar comigo. Com um PDF principal, você pode acompanhar e criar suas próprias notas pessoais. Estarei ensinando como configurar novos documentos e como trabalhar com exibições de dispositivos móveis, tablets e desktop. Você pode facilmente escolher cores e fontes do site e visualizá-las no seu iPhone ou iPad. Você aprenderá a cortar imagens e criar planos de fundo completos até exportar todos os arquivos certos que você precisa para um site. Embora eu esteja por perto para ajudar. Quando você estiver pronto, você pode me enviar seus arquivos e eu vou dar uma olhada e oferecer qualquer sugestão. Agora é hora de aprimorar suas habilidades, conseguir essa oferta de emprego, e impressionar seus clientes. 2. O que precisamos entregar no final do nosso projeto: Para ser um web designer comercial, há mais a fazer do que apenas uma marcação de site pensativa. Existem algumas entregas finais, alguns arquivos tangíveis e informações que você precisará transferir antes que a codificação do seu site possa começar. Nosso objetivo antes do final deste curso é ter uma pasta cheia imagens prontas para a web que seguem as convenções de nomenclatura Crickweb. Você também produzirá o que é chamado de folha CSS que é usada por um desenvolvedor para saber quais fontes você estava usando, as alturas e larguras de sua caixa de navegação ou sua caixa de fotos. Você aprenderá a transmitir os códigos de cores corretos, a altura da linha, espaçamento para o seu site para que a pessoa adorável que está construindo seu site possa começar a trabalhar rápido, e não ter que fazer grandes suposições de sua mark-up. 3. Qual é a função do Photoshop ao projetar um site: Photoshop é incrível em muitas coisas. Em termos de design de sites, é a ferramenta mais usada e se você está procurando emprego no mundo do web design, é essencial. Agora o site constrói com maquetes. Estes são visuais do que você acha que um site deve ser parecido. Você faz isso antes de realmente codificar o site. Por quê? Porque é muito mais rápido. Fazer alterações no Photoshop é apenas uma questão de selecionar a camada direita e arrastar os elementos da página. No código, pode haver muito mais implicações para simplesmente mover as coisas. Photoshop faz todo o trabalho de planejamento e design. Em seguida, o seu maquete é construído e codificado como um site. Se você está interessado em fazer o trabalho de desenvolvimento você mesmo e você não tem certeza sobre onde começar, me deixe uma linha na discussão ou no fórum, eu estou muito feliz em ajudá-lo a apontar na direção certa lá. 4. O que são os vídeos de produção: Quais são os vídeos de produção que estão neste curso? Estas são as sessões em que estou ocupado construindo o site conceito usando as ferramentas que já aprendemos. Estes podem conter pequenas pepitas de fluxo de trabalho, ouro e outros podem ser eu apenas fazendo o trabalho e pode ficar um pouco chato. Não me ofenderei se não os vigiares a todos, até ao fim. 5. Preparando seu espaço de trabalho para trabalhar na interface do usuário: Neste vídeo, vamos analisar a redefinição do seu espaço de trabalho. Agora você redefiniria seu espaço de trabalho, se você abriu o Photoshop e ele estava parecendo diferente da minha versão e você quer que ele pareça o mesmo para que você possa acompanhar. Agora, estou usando o Photoshop CC 2015. Se você estiver usando outras versões, ela pode parecer um pouco diferente. Mas digamos que você o tem usado para outras coisas e você moveu essas paletas, você arrastou ou você acidentalmente fez isso. Você fez isso durante o tutorial. Você pode voltar a este vídeo. Tudo que você precisa fazer é voltar ao normal para que pareça certo, está aqui em cima, diz “Essentials”. Vamos certificar-se de que ele é definido como Essentials primeiro e, em seguida, clique em onde ele diz “Redefinir Essentials”. Então eu colocar tudo de volta em seu lugar e olhar como o meu para este tutorial. 6. Ajustando as preferências do Photoshop: Oi. Neste vídeo, vamos ver como alterar suas preferências para trabalhar com a web. Agora, por padrão, o Photoshop sai da caixa pronto para fazer muito mais trabalho orientado para impressão. O que precisamos fazer é entrar em nossas Preferências e alterá-las para a web. Agora, a primeira coisa que vamos fazer é virar contra os nossos governantes. Nós vamos para View, e para baixo para Rulers. O que isso vai fazer é mostrar-me como este documento é largo. O meu está definido para centímetros, porque eu estou na Europa e o seu será ajustado para centímetros se você estiver na América. Agora, o que está acontecendo aqui é que você pode ver que está pendurado cerca de 16 centímetros. Agora, quando estamos lidando com web, não queremos saber qual é o valor do centímetro, queremos saber quais são os pixels. Precisamos mudar essa unidade de medida para pixels. Para fazer isso, vamos até, em um Mac, ir para o Photoshop CC, ir para Preferências e ir para um que diz Unidades e réguas. Agora, se você estiver em um PC, ele está em um lugar um pouco diferente. Você vai para Editar, em seguida, na parte inferior aqui, haveria um que diz Preferências, e então você vai para Unidades e réguas. Seja qual for, vamos chegar a unidades e governantes. O que queremos fazer é, meu está ajustado para centímetros, o seu pode ser ajustado para polegadas ou milímetros. Vamos mudar as réguas para pixels. A outra coisa que precisamos mudar é o tipo. Tipo usa pontos normalmente quando estamos lidando com impressão. Mas o que queremos fazer é mudar agora para pixels porque essa é a medida que usamos para lidar com web. Quando eu clicar em “Ok”, você vai notar que agora tem cerca de 1.200 pixels de largura. Quando eu for para a ferramenta Tipo, que é este T aqui, você vai notar que eu estou lidando com pixels em vez de pontos. Uma coisa a notar é que se você é uma pessoa que está se movendo da impressão para a web, você vai ter que voltar e mudar essas províncias toda vez que você quiser trabalhar em um tipo diferente de documento. Para fazer isso em um Mac, vamos para o Photoshop até Preferências e descer para Unidades e réguas, lembre-se se você é um PC, ele está em Editar, Preferências, Unidades e Réguas, e você vai colocá-lo de volta em ou polegadas ou centímetros, e o tipo volta para os pontos. Mas de uma dor, mas é isso que temos que fazer. Vou clicar em “Cancelar” porque quero deixá-lo, como estava, definido como pixels. 7. Baixe os arquivos de exercícios: Olá, neste vídeo vamos ver como baixar os arquivos de exercícios que acompanham este curso. Agora você não precisa ter esses arquivos, mas é muito útil se você quiser acompanhar passo a passo. Dentro dos arquivos, solte seu endereço de e-mail aqui no meio, e eu enviarei por e-mail as imagens que acompanham o curso, juntamente com coisas como fontes e cores que usamos. O que eu também fiz foi que no final de cada vídeo, eu salvei um documento do Photoshop que representa onde estamos fazendo. Então, se você se perder ou seu arquivo não estiver funcionando da maneira que funciona através dos vídeos, você pode comparar seu arquivo com o arquivo baixado, para que você possa ver onde você pode ter errado. Ao longo do curso, eu me referi a muitas referências e recursos diferentes, coisas como sintaxe e sites, todos eles farão parte desses arquivos de exercícios aqui. Tudo bem, vamos continuar. 8. Compreendendo o design responsivo para dispositivos móveis: Web design responsivo é uma maneira de alterar um site dependendo do tamanho do navegador. Agora vou mostrar-lhe a revista Smashing. Smashing Magazine é um site que eu leio muito e eu realmente gosto do esforço que eles fizeram para redesenhar as diferentes páginas dependendo do tamanho do navegador. No momento, estamos olhando para ele como você diria, uma tela grande como um iMac ou um monitor 4K ou algo realmente grande e de alta definição. Você pode ver que há um nav à esquerda, um sub nav, conteúdo principal e alguns anúncios. Mas uma vez que eu ficar menor, dizer para baixo para uma visualização de desktop regular, você pode vê-lo muda, ele vai para baixo para esta navegação aqui, nosso conteúdo principal e anúncios, mas como ele fica menor, dizer para baixo para dizer, visualização tablet. Muda um pouco, valas são os anúncios, a navegação torna-se vem um pouco menor, isso é ao longo do topo aqui, agora. Se eu descer em menor, até a visão móvel, as coisas mudam um pouco novamente. Agora, o que você precisa tirar disso é que quando você está projetando no Photoshop, Photoshop é meio estético. Não é escalável, elástico, como você pode obter quando finalmente é colocado para fora como um site. Então, o truque para os designers ao simular um protótipo no Photoshop é que você precisará projetar as diferentes visualizações para que, quando você o entregar ao desenvolvedor, eles saibam o que o site faz quando chega ao celular. O que acontece quando o menu está na visualização do tablet? E todas essas perguntas precisam ser respondidas na sua maquete. O que você não quer é um monte de perguntas entre você e o desenvolvedor tentando responder perguntas que deveriam ter sido concretizadas no estágio de conceito. E isso é uma introdução rápida ao web design responsivo. 9. Compreendendo os sistemas de grade e o Bootstrap: Agora, a solução mais popular para lidar com diferentes tamanhos de navegador no momento é o sistema de grade. Dos sistemas de grade, algo chamado Bootstrap é de longe o mais comum. Agora, se você está usando o Bootstrap ou qualquer outra maneira de construir seu site, você provavelmente estará usando o sistema de grade. Isso é o que usaremos em nosso documento do Photoshop. O sistema de grade permite que os designers trabalhem a partir de uma grade base de 12 colunas. Os designers podem gastar qualquer quantidade dessas colunas para se adequar ao seu site. Vamos dar uma olhada neste exemplo de sistema de grade aqui no site Edward Robertson. Você pode vê-lo aqui em cima, é chamado responsivegridsystem.com. Agora, o que você verá para baixo se eu rolar todo o caminho até o fundo aqui, ele começa em uma base de colunas de 12. Ainda não vi ninguém usar exatamente todos os 12, a menos que haja pontos de bala ou listas ou algo parecido. O que tende a acontecer é que os designers acabam gastando algumas dessas colunas. Na parte inferior aqui, você verá que ele começa em um nível base de 12 colunas. No topo aqui você pode ver que podemos facilmente abranger essas 12 colunas, digamos seis delas e seis novamente, para curvar nosso site ao meio. Esta é uma maneira muito agradável. Doze é um número muito bom porque podemos cortá-lo em terços, e quartos, e seis, tudo muito facilmente usando a grade de 12 colunas. Este é outro exemplo aqui no site Edward. Você pode ver alguns layouts de exemplo para responsivo. Agora, esta página de introdução aqui, esqueça as alturas porque as alturas são realmente curtas. Mas veja os diferentes cortes em termos de navegação. Você pode ver aqui é onde meu logotipo vai e este outro pedaço aqui, outros dois terços seria onde minha navegação vai. Isso é extensão em tudo e isso pode ser um carrossel rotativo como eles têm escrito aqui. Estas são caixas de recurso todas curvas em terços. Quatro colunas, quatro colunas, quatro colunas, e, em seguida, o meu rodapé seria abrangendo todos os três. Você pode ver aqui estão alguns exemplos diferentes de maneiras de cortar sites. Mudei aqui para o arquivo do Photoshop que você pode baixar como parte dos arquivos de exercícios e, se você não tiver feito isso, faça isso no link abaixo. Caso contrário, você pode criar suas próprias páginas. Agora o que eu fiz é, se eu for para “View” e eu for para “Show”, e eu for para “Guias”, você verá que ele foi cortado em colunas de 12 com um pouco de preenchimento e entre todos eles. Eu fiz isso para desktop, tablet e celular. Agora você vai notar aqui no celular, o celular não tem realmente 12 colunas como o tablet e desktop. Fazemos isso porque 12 colunas em um tamanho tão pequeno se tornam essa massa densa de colunas e ninguém realmente corta um site móvel em 12 colunas distintas. Agora, ao decidir quais páginas e quais tamanhos devem ser, você pode ver que a área de trabalho aqui tem 960 pixels de largura. Quando você está decidindo qual tamanho de desktop deve ser, tablet para ser, e móvel para ser, não fique muito envolvido em dimensões reais de pixel porque há tantos tamanhos de tela diferentes, é impossível agrupá-los todos juntos em um tamanho exato de pixel. Você escolhe um tamanho genérico que se adapte a dispositivos móveis, desktop e tablets que são comuns no momento, e isso também vai mudar à medida que o tempo passa. Esteja preparado em alguns anos quando as resoluções de tela forem alteradas ou houver uma nova versão feblety, desktop e móvel que talvez você precise passar e projetar um estilo separado para acomodar esse tamanho de tela. Se você está procurando dimensões exatas para começar, então você pode baixar o modelo do Photoshop que eu tenho nos recursos. Ou, se você estiver usando digamos Bootstrap, você pode ir e verificar Bootstrap para ver o que a mídia quebra as visualizações estrelas. O que eles consideram móvel é, o que eles consideram tablet é. Se pudermos dar uma olhada. Agora estou no Bootstrap, em getbootstrap.com. Estou na versão ligeiramente pré-visualização na versão quatro. No momento, estamos até a versão três, mas a versão quatro será lançada muito em breve, então vamos usar isso para este curso. Clique em “Documentação” e depois desço até “Layout” e escolho “Grade”. Agora, se eu rolar para baixo aqui, este aqui diz opções de grade. Você pode ver aqui, aqui está o meu pequeno caso que seria móvel em retrato. Então eu tenho pequeno que é considerado telefone na paisagem, tablet médio, grande é dizer uma tela de laptop e extra grande é uma tela realmente grande dizer IMAX. Você vê que os tamanhos aqui estão escritos nesta medida chamada REM, que é um EM raiz. Se você nunca usou essa medida antes, não se preocupe. Essencialmente, você pega o 45 e você vezes por 16. Dezesseis é considerado o tamanho padrão em um navegador. Então 45 vezes 16 nos dá 720 pixels. Se voltarmos ao Photoshop, você verá que usei 720 pixels para este tablet. Agora, quando chegarmos ao Bootstrap cinco e ao Bootstrap seis, isso irá ajustar essas coisas dependendo de quais são os tamanhos mais comuns. Eles podem ficar maiores, eles podem ficar menores, o que é realmente popular na época. É um bom lugar para começarmos para a simulação do Photoshop. Agora o que eu fiz por vocês aqui também é que esses guias podem ser um pouco difíceis de trabalhar também porque eles se estendem além das páginas. O que eu fiz aqui é, digamos que você está trabalhando em sua área de trabalho, você pode alternar essas camadas para baixo, e você vai notar aqui, eu tenho este chamado guias de coluna úteis. Se eu desligar isso, eu coloquei um par de grades de coluna básicas. Veja isto. Vou desligar o meu View, Show, Guias e prefiro trabalhar assim. Se eu estiver fazendo algo que deve ser de três colunas, vou clicar nisso em minhas três colunas e é apenas o fundo transparente, para que eu saiba quando estou trabalhando com meu documento. Estou arrastando por aí e sei que estou trabalhando dentro dessas três colunas aqui. Quando terminar de usar a coluna, você pode ativar o globo ocular e desativar outro para trabalhar em um layout ligeiramente diferente ou em um sistema de grade diferente. Agora você vai notar neste tutorial que estamos usando apenas três dos tamanhos. Estamos usando o pequeno, o menor de 34ems para o retrato móvel, o tablet e o desktop. Agora não fizemos este que está no meio aqui, que é o nosso telefone paisagístico. Nós não fizemos o desktop realmente grande ou extra grande também. É principalmente apenas para manter o tempo baixo a partir deste tutorial, e isso depende de eu acho que o nível de complexidade do seu site tem. Se é um site rápido jogar fora, você pode não gastar tanto tempo com o Excel ou a versão pequena, que é a versão do telefone paisagem pequena, e até que talvez o site é um pouco mais maduro. Se você está trabalhando em um projeto maior, então definitivamente você estará olhando para todas as cinco consultas de mídia e todos os cinco tamanhos aqui no Photoshop. 10. Dicas para ampliar e navegar pelo seu documento: Oi. Neste vídeo, vamos analisar o zoom e mover-se em um documento. Agora, há muitas maneiras de ampliar e reduzir um documento. Vou mostrar-lhe o caminho mais rápido e mais fácil. Em um Mac, mantenha pressionada a tecla Command e toque em “Plus” no teclado. Agora, se você estiver em um PC, mantenha pressionada a tecla Control e toque em “Plus” e ela aumentará o zoom. Agora, segurando a mesma tecla e tocando no “Menos” vai diminuir o zoom. O que queremos é ter certeza de que estamos visualizando nossa maquete do Photoshop no mesmo tamanho que será renderizada em um navegador da web. Como um navegador da Web, obviamente, não podemos ampliar e reduzir como podemos fazer no Photoshop, então o que queremos fazer é vê-lo no tamanho real. Para fazer isso, se você estiver em qualquer computador que não seja um novo MacBook Pro, a maneira mais fácil é acessar o View e escolher um 100%. Isso mostrará no tamanho real. Agora, você pode ver no meu aqui, é cerca de metade do tamanho que deveria ser porque eu estou usando um MacBook Pro com uma tela de retina dentro. Resumindo, ele essencialmente mostra tudo em cerca de metade do tamanho. Agora, o que precisamos fazer, com qualquer um com um MacBook Pro, é que você precisa redefinir para 200 por cento, levantado o dobro do tamanho. Photoshop mostrará no mesmo tamanho que mostrará em um site para que você possa ser um pouco mais claro sobre quais tamanhos de fonte você deseja escolher. Então, para ser claro, se você estiver em qualquer computador além de um monitor retina do MacBook Pro, use este 100%. Se você estiver em uma tela de retina, use 200 por cento. Agora que estamos nesse nível de zoom mais próximo, queremos nos mover. O longo caminho é que eu poderia arrastar estes pequenos sliders ao redor e isso funciona. Uma maneira mais agradável de trabalhar é se eu manter pressionada a tecla da barra de espaço no meu teclado, você vai ver o meu cursor muda da ferramenta de movimento para esta pequena mão e esta mão vai me permitir clicar, segurar e arrastar o mouse e mover ao redor do meu documento. Estou mantendo a tecla da barra de espaço pressionada o tempo todo e estou clicando e arrastando e soltando com o mouse. Esta é uma maneira agradável e fácil de se mover ao redor do documento. Isso é ampliar e navegar no seu documento. 11. Ferramentas de medição e espaçamento: Olá, neste vídeo vamos olhar para as regras de medição das coisas. Fazemos isso por duas razões. Uma delas é que queremos algum espaçamento entre caixas e também podemos estar fazendo isso porque a pessoa que constrói o site, se não for nós, pode querer que as medidas saibam quão distantes as coisas devem estar ou o preenchimento entre objetos. Para fazer isso, há duas maneiras, há a maneira oficial e depois há a maneira que eu uso. Agora, a maneira oficial de fazer isso é usar a Ferramenta Ruler. Agora a Ferramenta Régua está escondida debaixo da Ferramenta Conta-gotas aqui. Se eu clicar em segurar, segurar, segurar, aí está, pegar a ferramenta régua. Digamos que quero medir a distância entre este botão Mais e a caixa abaixo dele. O que eu faço é clicar, segurar e arrastar. O que você verá é no canto superior esquerdo para cima na barra de aplicativos, que as medidas estão mudando à medida que eu estou arrastando isso ao redor. Agora, por padrão, seu alongamento vai para qualquer lugar. O que eu quero fazer é manter pressionada a tecla Shift para bloqueá-la nessa posição vertical, que eu possa rolá-la para baixo. Você verá lá que está definido para 77 pixels entre este e este. Agora, o que você tem que fazer é ampliar um pouco apenas para garantir que ele está realmente muito perto. Você pode ver porque eu estava tão longe, que não tem sido perfeito. Eu posso clicar em segurar e arrastá-lo apenas para limpá-lo e dizer que realmente eu quero que ele esteja lá. Agora é mais como 81 pixels. Essa é a maneira oficial. Vou limpar meus governantes, para me livrar dele, vou diminuir o zoom segurando o Comando ou Controle menos. Essa é a ferramenta de medição oficial e é ótima. O que é melhor no entanto é usar a ferramenta Retângulo, a ferramenta Retângulo aqui tem um grande benefício no fato de que ela se encaixa nas bordas das coisas na página. Considerando que tivemos que fazer alguns ajustes com a Ferramenta Régua depois para ter certeza de que estava tudo certo. Veja isso, eu vou medir a distância entre aqui e aqui. Vou clicar em segurar e arrastar e ver que há linhas cor-de-rosa que aparecem em todos os lugares. Isso é porque ele está tentando se alinhar com muitas coisas diferentes nas páginas. A minha é uma página bastante complexa, então há muitas coisas que estão tentando se alinhar com, mas é muito bom em apenas estalar, assistir isso. Se eu apenas arrastá-lo até aqui, é muito bom que tenha tirado 81 pixels. Vou ampliar e checar novamente. Vamos bater, é perfeito. Agora, a ferramenta de retângulo é realmente boa para espaçamento de objetos também. Vou apagar esta camada aqui em baixo. Vou diminuir um pouco e mover para baixo segurando minha barra de espaço, clique e arraste para baixo. Vou dar um zoom na minha lista de portfólio. Agora eu tenho algum espaçamento uniforme entre esses dois objetos. Estou usando larguras de coluna, então vamos Exibir, Mostrar e ativar Guias. Você pode ver que eu usei o espaçamento entre essas colunas. Agora o que eu quero fazer é ter certeza de que o espaçamento é exatamente o mesmo entre aqui e obviamente não é. Para torná-lo perfeito o que eu posso fazer é usar a minha ferramenta de retângulo, eu posso clicar em segurar e arrastar o retângulo entre estes dois e você vai notar que, você vê-lo encaixar na borda é perfeito. Mas você vai notar que eu quero que seja perfeitamente quadrado. Vou desfazer isso indo para Editar, Passo para trás. O que eu vou fazer é manter pressionada a tecla Shift enquanto arrasto meu retângulo, se eu segurar a tecla Shift, ela bloqueará as restrições. Você pode ver que são 30 pixels por 30 pixels agora. Agora, se eu usar minha ferramenta Mover, clique, segure e arraste-os para baixo e nós os usamos como um espaçador. Vou cortar no fundo disso, agora está lá. Agora vou mover esta imagem para cima. Agora, às vezes não corta, então, neste caso, não é. O que você pode fazer é usar as teclas de seta no teclado. Eu só vou usar as setas que batem nele. Usar retângulos é uma boa maneira de garantir que o preenchimento é o mesmo entre essas imagens e o mesmo abaixo aqui. O único problema com eles é que eles são físicos, o que significa que esta coisa aqui vai imprimir ou sair em sua simulação. Você deve se certificar de que, ao terminar, selecioná-lo no painel Camadas e excluí-lo. Tudo bem, e é assim que você mede as coisas no Photoshop. 12. Atalhos de camadas que você precisa saber: Neste vídeo, vamos ver alguns dos atalhos essenciais que você precisa em termos de lidar com camadas. Agora, com o painel de camadas que você vê aqui, estou trabalhando em uma imagem final aqui. Você pode ver que as camadas estão sendo construídas ao longo do tempo, e há centenas delas agora. Portanto, não é realmente prático passar e tentar lembrar os nomes de todos eles, para que você saiba em qual camada você está trabalhando. Então você precisa de um truque. O melhor e o que eu uso constantemente é ter certeza de que você está em sua ferramenta de movimentação e certifique-se de que sua ferramenta de movimentação está definida como camada. Agora o que vai acontecer é que você vai aprender um atalho. Estamos em uma camada aleatória no momento. Quero clicar nesta palavra. Este é o Mais. Agora vou ampliar um pouco, selecione Mais. O que eu preciso fazer é manter pressionada a tecla Command em um Mac ou a tecla Control no PC. O que você vai notar é que, você pode ver no topo da EPA? Muda essa coisa chamada auto-seleção. Ele só o ativa enquanto você precisa. Se eu manter pressionada a tecla de comando e clicar na palavra mais, você pode ver no meu painel de camadas, ele saltou para o Mais. Posso mover isto. Então diga que eu quero mover a caixa verde também. Vou manter pressionada minha tecla de comando e a pequena ferramenta de seleção automática aparece, eu clico sobre isso. Mesmo que tenha um nome aleatório chamado Retângulo 2, ainda posso movê-lo. Ok, então eu posso clicar em Mais e movê-lo através, clicar no retângulo, movê-lo para o outro lado. Mantenha pressionado Vamos Fazer Incrível. É apenas uma maneira muito fácil de escolher as camadas e movê-los ao redor e realmente essencial quando você está trabalhando em um documento tão pesado camada. Vou editar. Passo para trás, e um passo para trás, e um passo para trás. Outro atalho útil é se você tem um conjunto realmente complexo de camadas todas sobre as outras, é realmente difícil selecionar a que você quer. O que você pode fazer é fingir por um segundo que vemos esta imagem no fundo aqui? Eu quero selecionar usando esta pequena área aqui, mas eu não posso porque há uma caixa preta na frente dele. Se eu usar o meu comando clique truque, ele vai escolher este retangular cada vez. Claro que posso escolher aqui, mas isso estraga o meu exemplo. O que posso fazer é mouse e se você estiver em um Mac e não tiver um clique com o botão direito do mouse, clique com a tecla Control pressionada. Se você estiver em um PC, é fácil clicar com o botão direito do mouse e você notará que ele escolhe tudo na minha pequena ordem de camada aqui. Esse é o retângulo preto. Debaixo dela há algo chamado camada 2 e essa é a minha pequena imagem. Outro atalho útil que você vai precisar é se você estiver usando meu modelo e estiver usando as grades de coluna. Você precisa ser capaz de ir para ver os guias de exibição. Isso pode ser realmente ótimo quando você está alinhando as coisas, mas dor real quando você está tentando olhar para as coisas visualmente porque arruína a aparência de tudo com as linhas em todos os lugares. Então, o atalho para isso, se você estiver em um Mac, é comando e use a tecla dois-pontos no teclado. Se você estiver em um PC, é controle e dois pontos e você ativá-los e desativá-los. Faço isso um pouco quando estou trabalhando com essas grades quando quero alinhar as coisas e depois desligo novamente quando estou tentando olhar para as coisas e ver como elas se alinham. 13. A ferramenta de conta-gotas: Agora a próxima ferramenta em seu kit de ferramentas web designer vai ser ferramenta de conta-gotas olho. Essa é uma ferramenta fácil para saber com qual cor você está trabalhando. Ele está escondido embaixo da ferramenta régua e deve ser definido como a ferramenta conta-gotas por padrão, mas nós estávamos usando isso mais cedo, lembra? Eu vou usar a ferramenta conta-gotas e é apenas muito bom para escolher a cor. Quero saber de que cor é este verde. Eu vou clicar nele e você vai notar que aqui em cima, minhas amostras de cores que apontam para ele e aqui minha cor de primeiro plano ele seleciona. Vamos clicar duas vezes na cor do primeiro plano aqui em baixo e você notará que nós obtemos nosso número hexadecimal, e este é o número que geralmente é usado no web design para estabelecer cor. Existem algumas outras maneiras de lidar com o RGBA que analisaremos mais tarde, mas você pode usar essas cores RGB também se precisar. Vamos clicar em “Ok”. Essa é a ferramenta conta-gotas para escolher a cor. Digamos que queremos usar essa cor uma e outra vez em nosso documento. O que você pode fazer é criar o que é chamado de amostra. Agora, para fazer uma amostra, digamos que eu quero esta cor de pêssego aqui. Se eu selecioná-lo, eu posso movê-lo em meus painéis de amostra e eu posso usar esta pequena bandeira aqui que diz “New Swatch” e ele usa minha cor de primeiro plano que foi escolhida com a ferramenta de álgebra e eu posso chamar isso de BYOL Peach. Clique em “Ok”. Agora, o que você vai fazer é vê-lo aparecer no final do meu pequeno painel de amostras aqui. Isso significa que posso reutilizar isso quando preciso. Vamos dizer que eu quero mudar de volta para preto e branco, eu vou usar minha ferramenta de retângulo e eu vou desenhar um retângulo e ele vai ser preto. Mas o que eu posso fazer é usar essa pequena lista suspensa e você verá que há minha cor de pêssego no final das minhas amostras, e eu posso reutilizar essa cor várias vezes. 14. A ferramenta de transformação: Uma das ferramentas mais úteis é a sua 'Transformar Tool'. Agora, eu uso isso muito nesta aula, e muito no meu próprio trabalho. É frequentemente usado como atalho. O longo caminho está sob edição, e é esta chamada ferramenta de transformação livre aqui. Agora, eu vou usar o atalho ao longo deste curso, e é muito bom para você aprender também. Você pode ver em um Mac que é Command T, e em um PC é Control T. Então eu vou apertar Command T no meu teclado. Veja isso, porque eu tenho minha grade vista aqui, ok? Se você não estiver exibindo grade, tenha uma exibição, mostre e vá para guias. Veja isso, porque meus guias estão fora ele vai encaixar para ele e dizer que eu quero que ele fique um pouco maior e eu quero puxá-lo para fora para que ele expanda quatro colunas aqui para este botão. Ótimo, então ele se encaixará nos guias se for necessário. Você poderia desligar os guias e não vai. Agora um par de outras ferramentas modificadoras úteis é, digamos, a fuga. A fuga se livra de nossa transformação e vamos ao Comando T ou Controle T em um PC e assistir a isso. Se eu manter pressionada a tecla Shift enquanto arrasto um desses cantos, você pode ver que a altura e a largura são exatamente as mesmas? Então, se eu desfizer isso, se eu não manter pressionada a tecla Shift, eu posso me mover em qualquer lado antigo que eu gosto, o que é útil, mas também muito bom se você manter pressionada a tecla Shift. Agora eu apertei escape novamente, vamos olhar para uma das teclas modificadoras, então Command T e é a tecla ALT. Então, se nós estamos segurando a tecla ALT para baixo, e dizer que eu quero fazer este quatro colunas para segurar a tecla ALT para este lado. Ver o que acontece? Pode ver o lado oposto vem junto para o passeio. Essa é a tecla ALT, se eu segurar isso enquanto estou esticando. Quando você terminar e terminar a transformação e você gosta que aperte 'Enter' no seu teclado ou 'Return' e isso vai confirmar isso. Isso vai terminar a transformação, você está pronto para ir. 15. A tecla “f”: Agora, essa ferramenta é muito útil quando você quer ter uma noção de como o site vai ficar sem todo o lixo está do lado de fora, todas as ferramentas e guias do Photoshop e barras de ferramentas. Agora, para fazer isso, você vai para “Ver”, há um chamado Modo de Tela e você usa este aqui. Agora, por alguma razão, eu sei que é a tecla de atalho de F, mas alguma razão nesta marca aqui eu não tenho certeza se em um PC, mas ele não tem o atalho, então nós vamos ignorar esse pouco e usar o atalho rápido chave. Se eu tocar na tecla F uma vez, ela esconde metade. Digite a tecla F novamente no meu teclado, ele se livra de todas as barras de ferramentas, exceto as réguas. Agora o que eu quero fazer é voltar mais um e desligar as réguas, as réguas desligá-las. Então lembre-se, uma vez para a tecla F, duas para a tecla F e eu posso ver meu documento e eu posso movê-lo e eu posso segurar minha barra de espaço. Eu posso movê-lo ao redor e isso me dá apenas um pouco de senso de como o meu site está olhando como no momento. Uma tecla F pela terceira vez, vai te levar de volta à estaca zero. Então, isto é três sessões. Há este aqui, e depois o próximo, e depois este ecrã inteiro. Eles circulam usando a tecla F. Agora, outra coisa legal que eu gosto de fazer é obter a tecla F duas vezes para entrar no modo de tela cheia é que eu não gosto deste fundo branco, especialmente quando eu estou lidando com um site tão escuro. Quero que este fundo aqui não seja branco. Então, o que você pode fazer, você pode clicar com o botão direito do mouse nele e escolher cinza escuro, clique com o botão direito do mouse e escolher preto, e ele apenas altera a cor do plano de fundo. Se eu diminuir o zoom, você vai notar que ele muda para sempre minha pequena cor de fundo. Se eu tiver a chave F de volta, cabe a você como você prefere trabalhar. Eu gosto de trabalhar em uma tela escura ou cinza escuro apenas para que eu possa obter cenas mais agradáveis do meu site. 16. Tamanhos de tela para desktop, tablet e mobile: Oi. Neste vídeo, vamos analisar a resolução da tela versus o tamanho real do pixel. Isso pode ser um pouco confuso quando você está começando, você está pensando, “Ótimo, eu vou fazer uma simulação para um iPhone 6.” Você vai para o Photoshop e aqui estão as dimensões. Você no Google, e ele diz que é essa largura de pixel por essa altura de pixel, e você decide, “Eu vou fazer isso. Eu vou para o Photoshop, eu vou fazer um novo documento que vai ser 750 por este 1.334.” Você consegue e acaba com este tamanho aqui. Agora, este não é o tamanho verdadeiro, vai ser. Vamos olhar para trás para esse site aqui e veremos que é a largura CSS que realmente precisamos observar quando estamos projetando para celular, porque todos nós sabemos que telefones celulares, além de alguns deles, todos são muito semelhante no tamanho. Mas o que vai acontecer é esta proporção de pixels aqui, você pode ver quando é um para um, que qualquer tamanho físico que é, é o tamanho real da tela aqui. Não há densidade real, e se você já viu um iPhone 3 antigo, você vai notar que os gráficos não são ótimos, mas é do mesmo tamanho físico que um iPhone 6. Mas o que acontece é que quando você obtém essa relação de pixels mais densa, o mesmo tamanho físico, vemos é dobrado aqui. Os pixels reais ficam muito maiores, mas o tamanho real do telefone é exatamente o mesmo. Você vai notar que este LG G4, este aqui tem uma proporção de imagem de quatro, por isso é um telefone bastante pequeno, então o tamanho é como o iPhone 6, mas você pode ver que é extremamente grande em termos de sua largura física. Mas temos uma olhada aqui em comparação uns com os outros, eles não são tão diferentes. Um pouco maior, o iPhone 6 é um pouco maior, mas não um grande salto como nesta indicação aqui. Então eles podem ser bastante confusos quando você é novo. O básico é que, quando você está projetando um Photoshop, design para esse tamanho físico lhe dará a melhor representação do telefone real, em vez de seguir essas larguras físicas de pixels no slide aqui. 17. Testando no iPhone e iPad usando o Adobe Device Preview: O Adobe Preview ou Device Preview é uma maneira de mostrar o que você está trabalhando no Photoshop diretamente em um dispositivo móvel, seja um iPhone ou um iPad enquanto você está trabalhando. Isso significa que você pode estar fazendo uma maquete em seu computador, mas realmente vendo como ele se parece em um dispositivo móvel. Agora, este aplicativo só funciona para iPhone e iPad no momento, não há nenhum equivalente Android ainda e provavelmente não será, mas continue verificando se a Adobe não lançar qualquer coisa para Android. A próxima coisa que você precisa fazer é baixar o aplicativo para o seu iPhone e iPad. Agora, eu tenho no iPhone aqui, ignore o papel de parede lá do meu filho muito bonito. Depois de fazer isso, você o abre e lá dentro, você terá que fazer login com o que é chamado de sua Adobe ID. Agora, se você não tem uma Adobe ID, você provavelmente tem, você só não sabe o que é, a maneira de descobrir é ir até aqui, ir até a Ajuda. Estou no Photoshop, vá até Ajuda e você pode ver aqui o meu é DANIEL @BRINGYOUROWNLAPTOP. Agora, não clique em “Sair”, este é apenas um guia aqui para saber qual é seu endereço de e-mail para sua Adobe ID. Se você não conseguir lembrar sua senha, tente usar esse endereço de e-mail em Adobe.com e tente entrar e, se não conseguir lembrar sua senha, clique no botão “Envie-me uma nova senha”. Assim que tiver isso, inicie sessão na sua aplicação. A partir daí, uma ou duas coisas precisam acontecer, você precisa tê-lo conectado como eu tenho ao seu plugue, este é apenas um plugue que vem via carregador, conecte-o ao seu computador e use isso para conectá-lo; ou você pode usar o Wi-Fi sem o plugue. Agora, usar Wi-Fi significa apenas que este telefone precisa estar conectado ao mesmo roteador que seu computador está, precisa ser conectado à mesma rede e, em seguida, ele funcionará sem fio. Agora, o que precisamos fazer é ter nossa Visualização de Dispositivos aberta. Você pode vê-lo aqui, este pequeno ícone. Se você não conseguir vê-lo lá, ele está em Janela e é chamado de Visualização do dispositivo. Agora, se ambos estiverem conectados, você verá na tela, ele terá o nome do telefone e, no aplicativo, terá aqui que você está conectado. A próxima coisa a fazer é garantir que você tenha nosso arquivo aberto no Photoshop. Vou abrir o arquivo que vamos usar ou criar durante este curso, que é a versão final. Você pode ver aqui no meu telefone, está tudo sendo exibido. Agora a coisa realmente legal aqui, é que ele é utilizável, eu posso percorrer ele e ver como todo o design se parece neste telefone. É independente do Photoshop. Você pode ver que não está fazendo nada, mas está exibindo aqui. Agora, uma coisa realmente legal é que ele é dinâmico, que significa que quando eu atualizar algo no Photoshop ele vai ser atualizado instantaneamente no meu telefone sem eu fazer nada, então veja isso. Eu notei no meu telefone que tanto BYOL quanto a Barra de Navegação é bastante grande, então o que eu vou fazer é torná-lo menor. Vou ampliar esta parte de cima aqui. Você vai notar que se eu encontrar minha navegação e eu torná-lo agradável e pequeno, você vai ver se eu pegar minha navegação e eu torná-lo um pouco menor, clique em “Enter”, você vai notar muito rapidamente que ele está atualizando no telefone, leva cerca de um segundo ou dois, mas totalmente utilizável. A mesma coisa com este Bring Your Laptop aqui, a fonte é muito grande. Pegue a fonte, torne-a menor, vamos baixá-la para algo como 45, mova-se, mova-se e você vai notar que ela atualiza enquanto eu estou me movendo com cerca de um segundo ou dois atraso. Digamos o mesmo para este texto aqui. Este texto branco aqui parece um pouco pequeno no meu dispositivo móvel, então eu vou pegar a ferramenta Type, eu vou selecionar tudo e eu vou movê-lo de 16, aumentá-lo para dizer 18 e você vai notar no meu telefone que ele vai atualizar automaticamente. Algumas coisas que você pode fazer com a Visualização do dispositivo, é se você clicar nela uma vez, na parte superior há um menu suspenso e isso significa que você pode embaralhar pelas diferentes placas de arte que você tem. Para mim, não é tão útil, porque eu tenho os diferentes pranchetas são tablet e desktop e é interessante vê-lo para baixo nos slides, mas não realmente vai me ajudar meu fluxo de trabalho. O que foi realmente bom para, é dizer que você está desenvolvendo um aplicativo ou dizer que você está na fase de conceito para celular e você tem um par de versões diferentes. Isso significa que você pode alternar e clicar nas diferentes pranchetas para vê-las em comparação entre si. Uma coisa a notar também, é que você realmente não precisa ter Artboard configurado no Photoshop para que isso funcione, você pode abrir qualquer arquivo antigo e ele será carregado no aplicativo. Agora, eu sou o primeiro a entrar quando há qualquer tecnologia que conecta meu telefone e meu computador e faz demoing e outras coisas e muitas vezes eles não funcionam muito bem e eu vou lutar junto com eles por um bom tempo, mas isso em particular, o Adobe Preview é brilhante. Funciona, é rápido, e realmente ajuda meu fluxo de trabalho. Agora, se você está projetando para celular e tablet, agora você deve estar usando algo assim em toda sua compilação porque muitos designers esperam até a direita no final, então o site é realmente construído antes que eles realmente desçam e testar o que ele vai fazer em dispositivos móveis e tablets, e isso é muito longe ao longo do processo de design para estar fazendo algo assim. Esteja testando, tê-lo aberto, tê-lo ligado o tempo todo para que você possa ver e rever conforme você avança. Agora, provavelmente a coisa mais importante a lembrar ao usar Adobe Preview é garantir que você conecte alguns telefones, alguns iPads, você fixá-los em toda a tela aqui para fazer parecer que você é super importante e também vai parecer que você está trabalhando no Minority Report, como Tom Cruise, movendo as coisas ao redor, deslizando-as ao redor e isso vai impressionar totalmente seus colegas. Tudo bem, é isso para o Adobe Preview. 18. O que é tecnicamente possível no web design: Neste vídeo, vamos analisar maneiras de nos ajudar quando estamos construindo nosso site depois do Photoshop. No Photoshop temos uma quantidade infinita de coisas que poderíamos fazer. Poderíamos ter um grande tema com uma sombra com unicórnios voando para fora dele e fogo e todas as coisas. Podemos fazer isso no Photoshop, esse é esse tipo de programa, mas quando se trata de Web design somos bastante limitados em termos de tipos de coisas que podemos colocar em um site até seu código, e principalmente se resume aos navegadores e quantos anos os navegadores dependem do que podem ou não suportar. Unicórnios voadores, não, não há nenhum recurso CSS para isso mas há recursos para gradientes e sombras. O que podemos fazer é usar este site chamado caniuse.com. Agora há outros sites como este. Eu realmente gosto deste site, e vamos dizer que queremos trabalhar com gradientes. Se eu digitar gradiente aqui ele me diz que o gradiente CSS funciona em tudo, exceto Opera Mini. Agora, se você precisa apoiar Opera Mini, então você vai ter que pensar duas vezes sobre o uso de gradientes CSS, felizmente gradientes estão fora no momento e é tudo sobre design plano. Mas digamos que você precisa ter um gradiente que se você tiver que suportar este Opera Mini, então você vai ter que não usar gradientes CSS. Outra coisa que você pode precisar para descobrir se você tem que suportar alguns navegadores mais antigos. Se você estiver criando um site e a regra é que temos que suportar pelo menos um mínimo de Internet Explorer 9, você não terá gradientes CSS. Agora, isso não significa que você não pode usá-lo, só significa que eles não vão aparecer. Você pode projetá-lo para que, se o gradiente não for aplicado, que haja apenas uma cor de fundo plana e que possa ser bom porque ele está no fundo, não é uma grande parte importante dele. Vamos dizer algo como, vamos olhar para as sombras. Há algumas sombras diferentes, caixa-sombra. Sombras de caixa, são sombras que pendem nas laterais das etiquetas div que funcionam de forma consistente. Vejamos as sombras de texto. Ele não é suportado no IE9 novamente. Agora isso pode ser mais importante porque você pode estar decidindo que eu vou ter este texto muito azul claro neste fundo branco mas ele não é totalmente legível a menos que haja uma sombra por trás dele. Você está confiando nessa sombra para que o texto seja lido. O que isso vai fazer é que o Internet Explorer 9 vai ser este texto realmente desbotado no fundo branco, então é um pouco mais importante. Só para dar uma olhada neste site às vezes você está pensando, eu me pergunto se eu posso fazer isso em um site ou não. Isto posso usar. Agora, outro extra agradável para o site está aqui. É preciso que eu esteja na Irlanda que é onde estou filmando no momento. Se eu clicar em “Importar” isso me dá essas coisas legais. No momento, por padrão, ele me deu o material global e agora ele me dá realmente o que está acontecendo na Irlanda. Você pode ver globalmente que é 90% suportado, mas na Irlanda é 97% suportado. Global leva em todos os países, enquanto a Irlanda tecnologicamente bastante moderna então muito mais vai ser suportado, navegadores bastante modernos e computadores modernos. Agora, se você estava fazendo um site que é especificamente para dizer uma nação em desenvolvimento você vai ter uma proporção diferente aqui. Você vai ter muito mais baixo. Você não vai ser capaz de usar alguns desses recursos tanto quanto dizer que viemos aqui na Irlanda. Certo, e esse é o site “Posso usar”. 19. Usando placas de arte: Oi. Neste vídeo vamos olhar pranchetas. Pranchetas é um novo recurso lançado no Photoshop CC 2015. Agora, se você estiver usando a versão posterior, ele vai funcionar bem. Se você estiver usando uma versão anterior, porém, não existiam placas de arte em 2014. O que você vai ter que fazer é, você vai ter que usar apenas páginas separadas. Mas se você estiver usando minha versão ou posterior, basicamente tudo o que eles são é uma maneira de ter várias páginas em um único documento, em vez de separá-las em documentos separados do Photoshop. Para fazer isso, vamos para Arquivo, vamos para Novo e vamos escolher Art Board da janela Novo Documento e vamos colocar em nossas larguras que discutimos anteriormente em termos dos tamanhos físicos do nosso, vamos começar com nosso área de trabalho. Nosso desktop será 960 pixels, agora a altura não importa porque os sites mudam de altura dependendo do conteúdo. Eu vou colocar, digamos 1500 e clique em Ok. Esta é a minha primeira prancheta. Chama-se Artboard 1 e você pode ver minhas camadas aqui. É um pouco novo. Se você estiver acostumado a usar o Photoshop antes, há um sistema de agrupamento ligeiramente novo com quadros de arte. Então eu vou clicar duas vezes no quadro de arte um para renomeá-lo. Este vai ser chamado de desktop, e vai ter 960 pixels de largura. Ótima. Você pode ver as mudanças de nome ao longo do topo aqui. Para adicionar outra exibição, então vamos trabalhar em uma exibição de tablet a seguir. Há algumas maneiras diferentes de fazer isso. A maneira mais fácil que encontrei é usar Layer, New, e usando este, que diz quadro de arte. Este vai ser chamado de Tablets, e vai ter 720 pixels de largura. Vou me certificar que diz 720 pixels aqui embaixo e usar a mesma altura. Clique em Ok, e ele desliza ao lado dele lá. A última vista que vamos fazer é a visão móvel. Vamos para Layer, New. Nós vamos para o Art Board e nós vamos escolher o celular e este vai ser 360 pixels. É só o nome lá em cima. Eu preciso realmente mudar os pixels para baixo aqui e nós usamos a mesma altura e vamos clicar em Ok. Então, temos a visualização de tablet, visualização de desktop e a visualização móvel ao lado do outro. Agora, onde isso se torna bastante útil é quando você começa a projetar em todos os três e você quer ter certeza de que eles são todos consistentes. Digamos que eu vou usar minha ferramenta de retângulo. Vou escolher uma cor de amostra aqui, qualquer cor aleatória e não essa cor. Uma das grandes vantagens para usar quadros de arte é o fato de que eu posso desenhar algo que é realmente muito longe do limite aqui. Você vê que é bastante na borda aqui e eu solto, você vê que ele corta até a minha vista de desktop. É uma característica agradável. Agora a próxima coisa que vou fazer é querer o mesmo. Digamos que esta é a minha barra de navegação. Então eu vou clicar duas vezes nisso como minha grande barra de navegação ao longo do topo. Eu cliquei duas vezes no nome abaixo e renomeei. Agora quero movê-lo para o outro lado. Agora eu vou mudar de volta para a ferramenta Mover, ele padrão para esta ferramenta prancheta um pouco quando você está trabalhando com pranchetas. Eu movi a ferramenta Mover e o que eu gostaria de fazer é que eu estou indo para duplicar barra de navegação. Vou clicar com o botão direito do mouse nele e clicar no que diz duplicado. Vou chamar-lhe Nav Bar. Eu tenho dois deles agora, eu vou usar a ferramenta Mover e eu vou clicar em segurar e arrastá-lo através do tablet. O que pode acontecer quando você está arrastando, eu vou desfazer isso só para mostrar de novo, é que eu vou arrastar barra de navegação cruz. Inicialmente, ele realmente não se move através. Às vezes você tem que dar a eles um pouco de um movimento, só para fazê-lo aparecer na visualização do tablet, então eu posso soltar e ele está lá dentro. Você pode ver agora que há barra de navegação na minha exibição de área de trabalho, e eu tenho isso na visualização do meu tablet. Então, o último, eu vou duplicá-lo novamente. Duplicar camada, eu vou chamá-lo de barra de navegação e na visão móvel, eu vou clicar em segurar e arrastá-lo, e então dar-lhe um movimento e ele vai aparecer na minha visão móvel. Agora você pode ver os benefícios para isso. Eu vou colocá-los lá e se você está trabalhando em documentos separados e você tem que alternar entre eles, é realmente difícil saber, é da mesma cor? Está alinhado da mesma maneira? Está olhando consistente em todos os diferentes pontos de vista e quadros de arte é um novo benefício muito bom para o Photoshop. E isso é Pranchetas. 20. Considerações sobre a altura das páginas: Quando começamos a criar nossas pranchetas, todos nós fizemos uma altura de 1.500 pixels de altura. Agora vamos olhar para a minha versão final aqui e você vai notar que, digamos minha visão de desktop aqui versus meu celular. O meu telemóvel era muito mais longo e a minha vista de ambiente de trabalho é, na verdade mais longa do que o que fiz originalmente agora também. Então, enquanto você está trabalhando junto, você vai acabar mudando bastante a altura do seu site para acomodar o conteúdo que você vai adicionar lá. O que você ainda não sabe, então vai mudar à medida que você vai. Agora, para alterar essas alturas à medida que você avança, você deseja usar a ferramenta prancheta. Para encontrar a prancheta informada, você clica e mantém pressionada a ferramenta de movimento e lá está ela. Aí está a minha ferramenta de prancheta. Agora, para dizer a minha área de trabalho para torná-lo mais longo clicando no meio, ele realmente não funciona, certo? Eu tenho que clicar nesta borda aqui e torná-la um pouco mais longa. Então clique na borda, você pega a prancheta e eu posso arrastá-la para baixo, e é isso. Ok, isso tornou a minha vista de área de trabalho muito mais longa. Você pode, obviamente, contratá-lo também. Agora estas pequenas alças vai ficar do lado de fora e até que você tem slick em qualquer outra coisa que não esta prancheta de alto nível aqui, clique na minha barra de navegação e eles vão desaparecer. Obviamente, você pode fazer isso para qualquer uma das páginas. Eu posso então ir para a minha ferramenta de prancheta, certifique-se de que eu clique na borda aqui do meu dispositivo móvel e eu posso fazer isso dizer muito mais tempo como eu estou trabalhando, eu vou terminar, clique em qualquer outra coisa dentro das minhas camadas e aqueles pequenas janelas de transformação desaparecerão. Tudo bem, é assim que você redimensiona sua página usando a ferramenta prancheta. 21. Guias, colunas e réguas das páginas: Quando você está trabalhando com um layout responsivo no Photoshop, usei o termo grades de coluna e guias de forma muito intercambiável. Porque o termo geral é chamado de grade, mas realmente quando você está olhando para eles, eles são apenas colunas. Para definir essas colunas no Photoshop, usamos guias. Confuso? Sim, meio que. Tudo bem. Vamos dar uma olhada na versão final deste. Você pode ver aqui, essas pequenas linhas azuis, essas linhas azuis claras são guias e eles me ajudam a criar minhas colunas no meu layout responsivo. Se eu voltar para o meu documento vazio, como fazer um guia? Como você faz seu próprio guia? Basta ir para View, e você tem que ter certeza que algo chamado as réguas está ligado. O que você vai notar é, nos lados aqui, no topo e no fundo, que estes pequenos governantes são repetidos. O que podemos fazer é em qualquer lugar nesta área, aqui podemos clicar em segurar, arrastar, arrastar, arrastar, arrastar, arrastar. Isso despejaria um guia no nosso layout. Saltamos uma vez do topo também. O que vai acontecer é quando você estiver trabalhando com o modelo baixado que eu lhe dei, é que você pode precisar movê-los, desativá-los ou bloqueá-los. Vamos olhar para isso. Por padrão, seu modelo provavelmente está bloqueado. As guias no seu modelo provavelmente estão bloqueadas. Isso é porque eu não queria que você fosse e destruísse os guias. Mas se você quiser movê-los ou bloqueá-los ou desbloqueá-los, vá para Exibir, acesse Bloquear Guias. O que isso significa é que eu não vou ser capaz de mover estes. Não serei capaz de movê-los muito. Estão todos presos lá. Se eu quiser destrancá-los, eu desmarquei isso. Então porque muda um pouco, e eu posso movê-los depois. Diga que há um guia que eu não preciso mais. O que você pode fazer é selecioná-lo. Para excluí-lo, clique em manter pressionado e arraste-o. Basta arrastá-lo de volta para a régua onde você conseguiu e ele desaparece para sempre. Vou apagar essa e voltar para lá. Quando você está trabalhando, porém, você vai notar em, digamos este aqui, esses guias podem ser bastante distraentes. Útil quando você está se arrumando pela primeira vez, mas bastante distraindo mais tarde. O que você pode fazer é ligá-los e desativá-los. Vá para Ver, há um em Mostrar, e é este aqui chamado Guias. Agora, você vê isso [inaudível] aqui, é Comando e Ponto-e-vírgula ou Controle Ponto e vírgula em um PC. [ inaudível] um pouco. Quando estou trabalhando, estou ligando e desligando o Comando Ponto-e-vírgula para ativá-los e desativá-los quando estou trabalhando, porque é muito mais fácil ver e obter um pouco de visual indo sem os guias. Mas estruturalmente, os guias saem cheios. Isso irá [inaudível] sobre como criar, modificar e excluir guias. 22. Escolhendo as cores do site: Neste vídeo, vamos olhar para o uso de cores. Agora você pode atacar a cor de algumas maneiras. Quando você está desenhando suas caixas e colorindo coisas, você pode usar este pequeno painel de cores aqui. O que você faz é arrastar isso para cima e para baixo para obter a tonalidade. Em seguida, movemos este pequeno círculo ao redor clicando e arrastando-o para escolher a cor. Você vai notar que na frente aqui está a minha cor de primeiro plano. Lá está ele aqui em baixo também. Se eu tenho a minha ferramenta de texto, pode ver aqui? Vai usar a mesma cor. Se eu usar minha ferramenta de retângulo, ela usará o que estiver nessa cor de primeiro plano, porque veja isso, eu posso mudá-la e todas essas coisas mudariam ao mesmo tempo e eu posso começar a desenhar coisas e fazer cores. Para ficar um pouco mais técnico, se você estiver trabalhando em uma marca de uma empresa que tem cores específicas, você precisará inseri-las, e você pode fazer isso criando o que é chamado de amostra. Para fazer uma amostra, primeiro vamos fazer uma cor, e o que vamos fazer é, em vez de arrastar as coisas ao redor, o que vamos fazer é clicar duas vezes na amostra aqui e vamos digitá-la. Se você estiver trabalhando com uma marca que tenha cores existentes, digite os detalhes que você conhece. Se você sabe a cor RGB, você pode digitá-la, dizer zero, dizer que é 200, e 220, ele vai me dar essa cor, azul claro, então eu sei exatamente que essa é a cor certa. Você também pode obter esse número aqui ao lado dos hashes, o número hexadecimal. Então você pode começar a digitar isso, e pode ter três ou seis dígitos, dependendo do que você recebe. Agora ambos funcionam. Se você receber os detalhes CMYK, você pode colocá-los aqui também. Para escolher esta cor, digamos que temos esta amostra mágica que precisamos, podemos clicar nesta que diz “Adicionar a amostras”. Damos um nome e vamos chamar este exemplo de azul. O que você vai notar é que eu vou clicar em “Ok”, está no meu painel de amostras bem na parte inferior desta lista aqui. Agora há esta cor aqui chamada exemplo azul que eu posso reutilizar uma e outra vez. Diga se eu mudar para outra cor porque eu estou usando e ele está indo para esta cor rosa, púrpura, se eu pegar minha ferramenta de texto agora e eu preciso fazer algum tipo que é azul, eu só tenho que ter certeza que eu clique em “Azul” antes de eu começar a digitar e ele vai mudá-lo. Se eu precisar alterá-lo depois, eu posso selecionar o tipo e, em seguida, escolher qualquer amostra aqui, e ele mudará assim que eu voltar para a ferramenta de movimentação. Ótima. Para as pessoas que não estão seguindo um grande guia para cores e você é capaz de escolher suas próprias cores, você obviamente pode escolher o seu próprio, mas às vezes você pode ser pego sem saber qual cor escolher, o que funciona com o quê. Então o que você pode fazer é usar algo chamado Adobe Color. Agora está embutido no Photoshop. Vamos até Janela, até extensões, e este chamado de temas Adobe Color. Abra, você precisa estar conectado à rede e precisa estar conectado à sua conta da Creative Cloud. Uma vez que você está aqui, e este é um aqui poderia explorar. Para inspiração, gosto de ir a este que diz mais popular, e este é o que está sendo mais usado pelas pessoas através deste pequeno sistema aqui. Muitas vezes para o topo aqui é um bom grupo de cinco cores que você pode usar para colocar o seu site. Como parte dos temas de cores diários, você pode fazer upload de suas próprias amostras também. Então, se você criou um tema corporativo e deseja compartilhá-lo com outros designers em todo o negócio, o que você pode fazer é carregá-lo para temas de cores. Não vou abordá-lo neste tutorial, mas você pode fazer upload de suas próprias amostras para esses temas do Adobe Color. O que eu fiz por você, se você digitar B-Y-O-L, aperte “Enter”, você vai encontrar as cores que eu estou usando neste tutorial que você pode baixar e usar. Agora, para baixá-los e adicioná-los às suas amostras, amostras versus Ações aqui, solte isso e disse, “Adicione às minhas amostras”, e você as verá. Todos aparecem do fundo do meu painel de amostras. O que você também verá é, você pode ver que eles foram adicionados à minha biblioteca aqui? Se você estiver usando uma versão anterior do Photoshop, essa primeira parte funcionará, mas a opção dessa biblioteca não será, estamos em 2015, essa opção de biblioteca é uma ótima maneira de escolher cores. Então eu vou colocar isso dentro e todos nós devemos estar trabalhando fora essas cores agora. Obviamente, através da loja, você pode escolher suas próprias cores, mas se você quiser acompanhar exatamente, essa é a maneira de fazê-lo. 23. Adicionando estrutura ao seu site com formas vetoriais: Tudo bem, neste tutorial vamos simular alguns dos grandes tipos de áreas estruturadas usando a ferramenta de retângulo. A ferramenta de retângulo, para as pessoas que são web designers, sabe que ela cria essencialmente tags div que você pode puxar o estilo, tamanho, cores e coisas a partir de mais tarde. Você tem que se certificar de que você está usando esta ferramenta de retângulo aqui. Se você não conseguir encontrar a ferramenta de retângulo, clique, segure, arraste-a para baixo e você pode encontrar os dois últimos U usando a ferramenta de elipse, você pode ter que mantê-la pressionada e agarrar a ferramenta Retângulo. O que vamos fazer, é se você estiver seguindo usando meu modelo, eu vou, há uma opção aqui, ela diz chamada Excluir Me. Eu vou realmente apagar isso porque ele se livra dessas pequenas caixas verdes. São as minhas pequenas partes publicitárias. Eu estou indo para o compartimento e eu vou ampliar um pouco, comando mais e eu vou ampliar para que eu possa ver as bordas da minha área de trabalho. O que eu vou fazer é, eu vou começar a criar. Está bem. Então minha primeira caixa vai ser meu grande tipo de imagem de herói principal e eu vou usar esse roxo aqui, então eu vou clicar nisso ou escolhê-lo deste painel de amostras, e eu vou clicar em segurar e arrastar. O que você vai notar é que eu posso arrastar sobre as bordas, problema é meu e em repouso, as bordas lá. Se o seu é tem a cor errada como o meu tem, sua lembrado a última cor, mesmo que a minha cor de primeiro plano diz ser este adorável novo Traga seu próprio laptop roxo. O que você pode fazer é, basta clicar nele novamente e ele vai desenhar e mudar, ou se eu for desfazer, eu posso clicar aqui e escolher a cor do meu painel de amostras. Ótima. Vai ser o meu grande tipo de imagem gráfica de herói. O que vou fazer agora é adicionar a minha barra de navegação. Então eu vou usar a ferramenta de retângulo novamente e eu vou clicar em segurar e arrastar sobre o topo aqui e eu estou supondo um pouco. Esta vai ser a minha barra de navegação. O que eu quero fazer é preenchê-lo com preto. Preto está em algum lugar no topo de suas amostras aqui e ou você pode usá-lo daqui de cima. Escolho isto como a minha cor de primeiro plano. Ótimo, então esse vai ser o meu painel de navegação. O que vamos fazer no final, é que vamos ter uma imagem debaixo da navegação que ainda podemos ver. O que vamos fazer é, vamos ter esta barra de navegação selecionada. Do jeito que eu sei que é selecionado, eu posso vê-lo aqui na parte das minhas camadas. O que eu vou fazer é clicar duas vezes na palavra retângulo e chamar este, barra de navegação. Vou chamar este aqui, Hero Graphic. Na barra de navegação aqui, eu tenho essa chamada opacidade. Se eu diminuir um pouco a opacidade, talvez caia para cerca de 80%. O que você vai notar, é que se eu baixá-lo para baixo, você pode ver que é realmente bastante transparente sobre o topo do fundo e isso depende de você e quanto ver através de você quer que ele seja. Mudaremos isso provavelmente mais tarde quando tivermos nossa imagem embaixo, mas por enquanto, é assim que você muda a opacidade de qualquer um dos seus retângulos. A próxima coisa que eu vou fazer é, eu vou embaralhar por aqui. Para este tutorial, vamos pular tablet apenas para que o tutorial não tenha 10 horas de duração. Vou fazer uma versão móvel. No celular, como eu sei que estou no celular, você pode vê-lo aqui no meu painel de camadas, é a versão extra pequena. Vou entrar nisto e apagar onde está o meu nome e o meu site, apagar isso, não precisamos disso. O que vamos fazer, porém, é que vamos diminuir o zoom. Então eu vou fechar isso, colocá-la dentro, zoom out um pouco. O que eu quero fazer é pegar esses retângulos e movê-los para o outro lado. Vou mudar para a minha ferramenta de movimento. Vou usar o meu truque que aprendemos no vídeo inicial, sobre manter o comando pressionado. Eu vou clicar no retângulo que é a minha barra de navegação e eu vou arrastá-lo através segurando a tecla O eo que o membro da chave O arrastando que vai fazer, é que ele vai fazer uma cópia como ele se move através. Para obtê-lo na função certa e na parte certa, você pode ter que dar um pouco de movimento, mas parece que está perfeitamente alinhado. Correto. Eu vou mover este também para este roxo aqui segurando [inaudível] chave para baixo. Selecionou o gráfico de herói. Segure a tecla O e arraste-a e eu vou movê-la para que ela se alinhe perfeitamente. Ótima. Tem um pequeno problema onde o gráfico do herói está acima da barra de navegação. Tudo o que precisamos fazer é, para alterar a ordem disso como clique em Segurar e arrastar o herói por baixo do navegador. Ok, então eu tenho minha área de trabalho e minha visão móvel com meus dois retângulos. Estes retângulos serão usados como a estrutura ou as tags div para o meu site. 24. Vídeo de produção — adicionando estrutura ao seu web design: Neste vídeo, analisamos os conceitos básicos da nossa ferramenta de retângulo para criar as caixas estruturadas para o nosso site. O que vamos fazer agora é fazer um pouco de uma sessão onde eu passar e adicionar todas as caixas. Você pode nos ver em velocidade dupla ou pular se quiser. O que vou fazer é ter a minha primeira caixa aqui. O que eu vou fazer é apenas duplicar esta caixa e outra vez para as diferentes áreas. Vou usar meu truque para selecioná-lo, Hero Graphic. Vou segurar Alt e arrastá-lo para baixo. Eu vou segurar Shift ao mesmo tempo, e ele quebra todo o caminho por baixo. Com este gráfico aqui, vou chamar este. Vou abrir esta ferramenta aqui, meu painel Propriedades. Vou escolher este. Esta é uma cor de pêssego. Este aqui, que vai ser chamado de Caixa - quem somos. Eu adiciono caixa para a frente apenas para deixá-lo claro de uma distância. O quê? Estou olhando para as caixas estruturadas. Vou fazer a mesma coisa com este. Vou arrastá-lo para baixo, e ele está no painel Propriedades. Aqui está o roxo escuro, e aqui está a caixa. Aqui está a caixa de serviços. Vou segurá-lo, arrastá-lo para baixo, e ele vai ser a caixa para o nosso portfólio. Ficamos sem a borda de nossas páginas. Vamos mudar a cor dele primeiro, na verdade. Aqui está essa cor. Agora, corremos para a borda. O que podemos fazer, lembre-se, é pegar nossa ferramenta de prancheta, certifique-se de que selecionamos na versão desktop, e eu vou arrastá-la para baixo. Agora, quão longe é arrastá-lo para baixo. Vou ampliar isso um pouco. Quem sabe no início? Não é até você colocar todo o seu conteúdo nele você sabe o quão grande ele vai ser. Vou superdimensioná-lo por enquanto, torná-lo agradável e grande. Em seguida, indo para voltar para a minha ferramenta Move, eu vou clicar sobre ele, é o portfólio caixa, e eu vou manter pressionada a tecla Alt, arrastá-lo para baixo. Na verdade, este pedaço aqui vai ser uma grande área branca. Tem que ter o meu pessoal ou a área da equipa. Esta última parte aqui vai ser o verde. Este aqui vai ser chamado de meu formulário de contato. Então, apenas por baixo dele, arrastá-lo para baixo, eu vou ter este último é uma das cores não-oficiais, como um cinza escuro para o meu rodapé. Agora, é um pouco grande, então o que eu vou usar como minha ferramenta Transformar, então Command T, lembre-se. Comando T. Vou fazer um pouco menor. Esse vai ser o meu rodapé. Agora eu tenho uma idéia aproximada da altura da página. Eu vou chupá-lo backup usando a ferramenta de prancheta, clique neste topo aqui, e ele deve encaixar para o fundo lá. Voltar à ferramenta Mover quando terminar. Agora que eu tenho um desktop feito, eu poderia mover tudo para a minha versão móvel e começar a colocar essa. O que eu acho, é muito mais fácil trabalhar em um e seguida, uma vez que você completou um e terminou e olhou todos os bugs fora de uma das vistas, é então começar, digamos , o próximo, e então trabalhar em para dispositivos móveis. Agora, muitas pessoas que começam com dispositivos móveis primeiro, se essa é a prioridade para seu site, é definitivamente o caminho a seguir. Definitivamente, há muito mais desafios para preparar tudo para dispositivos móveis. Para mim, principalmente meus sites estão sendo usados como desktop, então eu começo com desktop. 25. Caixas de texto expansíveis e de largura fixa no Photoshop: Neste vídeo, vamos olhar para o tipo ou texto. A primeira coisa que precisamos fazer é pegar a ferramenta Tipo e então vamos olhar para fora para algumas coisas. Há algumas formas que o cursor pode mudar para as quais você deseja estar ciente. Por padrão, é este quadrado aqui, e isso é ótimo. Veja o que acontece com o cursor muda quando eu chegar na frente desta caixa porque eu tenho o hieróglifo selecionado aqui, ele muda para o círculo em torno dele. Este outro, que é a linha pontilhada. Agora, isso é realmente o que eu estou procurando. Eu quero despejar um pouco de carrapatos em uma camada por si só que eu possa me mover e trabalhar. Se eu clicar nesta “Camada”, o que ele vai fazer é, ele vai transformar meu retângulo, meu hieróglifo, em uma caixa de forma para ele caber dentro. Veja isto. Se eu clicar em “Inside”, ele vai continuar digitando, e ele vai usar as bordas desta caixa, que pode ser um pouco confuso quando você é novo. Para sair que eu vou apertar “Escape”. Isso vai se livrar da minha mensagem. Então o que eu quero fazer é ter algo mais selecionado, como a barra de navegação, então não é nada selecionado ou apenas digitar o tipo mais baixo e movê-lo quando você terminar. Então o que eu vou fazer é apenas ter o quadro geral de arte selecionado e isso vai me deixar digitar em qualquer lugar usando o cursor quadrado, e eu vou mostrar a vocês duas maneiras de aplicar texto. Uma é uma caixa de texto expansível e outra é uma largura fixa. Então expansível significa que eu posso digitar algo e você verá que ele continua para sempre. Vai continuar se esticando para a direita. Agora, outra maneira de fazer isso, eu vou apertar “Escape” no meu teclado, me livrar desse texto e é clicar em “Hold” e arrastar esse texto. O que isso significa é que vai corrigir a largura. Isso significa que quando eu chegar à borda, ele vai quebrar em duas linhas ou tantas linhas que vai caber. Então estas são as duas caixas que vamos usar quando estamos trabalhando com o Photoshop. Então o primeiro que vamos fazer é, eu vou apertar “Escape” novamente. Vou clicar uma vez e vou digitar nosso logotipo. Isso vai ser B-Y-O-L maiúsculo. Vou movê-lo usando minha ferramenta de movimento para a barra de navegação aqui. Se você está encontrando seu oculto onde você não pode vê-lo, provavelmente é porque ele está em uma camada inferior. Para mover as camadas, clique em “Manter” e arraste-a acima para onde você precisa que ela esteja. Para mudar a fonte, é agradável e fácil. Verifique se você está na ferramenta 'Tipo'. Certifique-se de que você está em sua camada de texto e brinque com as fontes aqui. Agora, se o seu não estiver definido como pixels e definido como pontos, talvez seja necessário alterar isso em suas preferências, que está em um vídeo anterior. Então há duas maneiras de fazer isso. Você pode usar o menu suspenso e escolher alguns desses tamanhos. Agora, eu acho muito útil é realmente arrastar este aqui, você pode ver se eu passar o mouse acima deste ícone aqui, clique nele, arrastá-lo para a direita ou para a esquerda, você pode ver as mudanças de fonte dependendo de onde você está arrastando. Direita para ir mais alto, esquerda para ir mais baixo. Digamos que eu vou escolher 40 por enquanto, você pode digitar. Então, digamos, eu escolho 40 pixels no momento, e eu vou usar a ferramenta de movimentação e movê-la para cá. Para alterar a cor do texto, vou certificar-me de que estou na minha ferramenta Tipo, certificar-me de que estou na minha camada que selecionei, aqui está a minha camada de texto, e aqui acima é onde está a cor da fonte. Eu clico nisso, eu vou clicar em “Segurar” e arrastar isso para escolher a cor que eu quero. Eu quero branco, então eu vou arrastá-lo todo o caminho até o canto superior esquerdo, você pode ver que eu arrastá-lo para onde ele precisa ir, então ele fica mais unido no canto lá. Definitivamente definido para branco, fff. Clique em “Ok”. Se você quiser usar uma de suas amostras especiais, o que você faz é clicar sobre isso e aqui você pode ver o conta-gotas aparece e ele vai escolher a cor que você precisa nas amostras. Vou voltar e escolher branco e clicar em “Ok”. 26. Como projetar usando fontes seguras da web com o Google Fonts: A próxima coisa que vamos fazer é olhar para mudar nossas fontes. Agora, por padrão, web design antigo, você só tinha algumas fontes realmente básicas para escolher, como Arial, Georgia e Times. O que podemos fazer agora, porém, é que podemos escolher uma enorme variedade de fontes agora. Há alguns métodos para fazer isso. Provavelmente o mais comum a fazer é algo chamado Google Fonts e é isso que vamos fazer aqui porque é rápido, fácil, é gratuito. Você também pode usar Typekit, Adobe Edge Web Fonts ou Squirrel Fonts. Há muitas maneiras diferentes de fontes [inaudíveis] na simulação da sua área de trabalho e através do seu site. A grande coisa a saber então é que nem todas as fontes que você tem em sua máquina serão convertidas e poderão ser usadas online. Portanto, a maneira de verificar é usar um serviço como o Google Fonts para encontrar uma fonte que você deseja usar. Então vamos fazer isso. Vamos mudar para fontes do Google. Então google.com/fonts. O Google tem um monte de fontes de uso comercial que podemos usar. O que vou fazer é procurar uma fonte. Então eu vou usar o texto de pré-visualização de BYOL, porque essa é a fonte que eu estou procurando. Vou passar e escolher uma fonte. Agora, vou usar o Roboto como minha fonte de cópia corporal. Há outro chamado Roboto Slab que usarei para os meus títulos. Para poder usar essas fontes na sua área de trabalho via Photoshop, que elas podem ser usadas posteriormente em seu site, o que você precisa fazer é escolher uma delas, clique em “Adicionar à coleção”. Vou usar outra fonte. Vou digitar Roboto aqui. Há um outro de fonte chamado Roboto Slab que eu quero usar e eu vou adicionar isso à coleção. Então eu tenho dois adicionados à minha coleção, o normal, Roboto normal e esta laje Roboto. Agora, o que vamos fazer é clicar em “Usar”. Agora, vamos apenas escolher o básico, a versão normal. O que eu quero é uma versão leve e eu gostaria de uma versão ousada. Eu gostaria deste aqui, uma versão leve. Uma versão leve e uma versão ousada. Agora, quanto mais fontes você adicionar, você pode adicionar todas essas e baixá-las. Isso é totalmente bom para enquanto você está trabalhando em sua simulação do Photoshop. Mas o que vai acontecer é que, se todos eles tiverem que ser usados em seu site, isso vai fazer a página carregar um pouco mais lenta. Como você pode ver aqui exatamente, o Google está me dando um pequeno contador de velocidade, sabendo que o que eu tenho está na área verde, como ele vai carregar rápido o suficiente. Se você começar a chegar a laranja, ele vai ficar lento para baixo, e vermelho é muito muitas fontes baixadas para uma página, e isso vai afetar muito o tempo de carregamento da página. Uma vez que você os tem, o que nós vamos fazer é baixá-los para usá-los em nossa máquina. Para fazer isso, há uma pequena flecha aqui no topo. Aqui está um pequeno botão de download. Vou baixar esta coleção como um arquivo Zip, e vou colá-la na minha área de trabalho. Agora, para vocês, se quiserem acompanhar, já tenho as fontes prontas para vocês e baixadas já nos arquivos de exercícios. Então baixe os arquivos de exercícios e você deve encontrá-los na pasta de fontes. Agora, para instalar as fontes em seu computador, isso depende se você estiver em um Mac ou PC. Essencialmente, eles são os mesmos. Se você tiver um PC moderno ou um Mac moderno, basta clicar duas vezes nas fontes e elas serão instaladas. Então esta é a fonte que eu acabei de baixar do Google Fonts. Se você está procurando as mesmas coisas, eles estão todos aqui, em seus arquivos de exemplo, se você não quiser passar pelo incômodo de baixá-los. Vou clicar duas vezes no arquivo Zip, ele abre. Aqui está a minha pequena pasta de fontes e aqui os dois grupos de fontes. Eu vou girar isso para baixo. O que eu quero fazer é selecionar todos esses, e eu vou clicar duas vezes neles. Em seguida, clique em “Instalar”. Meu pequeno Mac vai chugs longe e instalar todas essas fontes aqui. Pode ter surgido com um erro agora só para dizer que o já instalado, porque eu fiz isso anteriormente antes deste tutorial. O seu não vai tê-los. Fechar minha pasta de fontes. Terei que fazer o mesmo pelo Roboto Slab. Selecione todos eles, clique duas vezes neles e todos eles serão instalados. Agora, em um PC, é um processo realmente semelhante. Se você não tiver certeza de como instalá-los em seu computador, envie-me uma mensagem ou tenha um pouco do Google e veja como você pode instalá-los em seu computador. Agora, vamos dar uma olhada no Photoshop agora. O bom do Photoshop é que você não terá que reiniciá-lo, ou reiniciar seu computador, ou qualquer coisa assim, Photoshop irá pegar suas novas fontes. Você pode ver aqui são minhas fontes Roboto, e elas estão prontas para começar a ser usadas no meu design. Sabendo porque usamos o Google Fonts, é uma fonte que podemos usar on-line para o nosso site no final. 27. Coloque o texto reservado com o Lorem Ipsum: Este vídeo vamos ver algo chamado Lorem Ipsum. Todo o tempo quando você está projetando um site, talvez o texto não esteja escrito, ou esteja sendo escrito ao mesmo tempo. É muitas vezes você tem que colocar em texto fictício ou colocar texto titular. O que as pessoas tendem a fazer é usar algo chamado Lorem Ipsum, e é incorporado no Photoshop para que possamos adicionar isso. Vou ampliar a minha área de trabalho e ao redor. O que eu vou fazer é colocar uma caixa de largura fixa, e eu quero que ela corresponda à música da minha coluna, e eu vou para “Ver”, e ligo meu “Mostrar”, “Guias”. Diminuir um pouco. Eu queria expandir talvez quatro destes no meio, talvez seis. Vou pegar a ferramenta de texto e, em seguida, clicar em segurar e arrastar. Vou adicionar uma caixa de texto que abrange seis das minhas colunas. Vou escolher um tamanho de fonte apropriado e talvez 16 pixels. O que eu quero fazer é ir para “Type” e eu vou para “Paste Lorem Ipsum”. Essencialmente, o que ele faz é apenas despejar em um pouco misturado de palavras latinas. Existem palavras latinas reais, mas elas não significam nada no fluxo de textos lá. É uma boa maneira rápida de despejar muitas mensagens extras. O que você vai notar, porém, é que a caixa tem mais de seis. Significa que há mais textos é um pouco gentil, um pouco mais que você realmente não pode ver no canto inferior aqui. Mas saiba que se eu apagar isso, você pode ver que há muitas coisas extras sobre as bordas. Dependendo de quanto você precisa, você pode ter que excluir alguns deles. Você não pode realmente despejar em uma quantidade definida, ele apenas despeja em uma quantidade predefinida. 28. Vídeo de produção — adicionando todo o nosso texto: Este é um vídeo de processo, então eu vou passar e começar a estilizar meu site. Em primeiro lugar, a camada Traga o Seu Próprio Laptop aqui, o logotipo. Você tem um logotipo, obviamente, você estará escurecendo no logotipo da empresa.. O que eu vou fazer é ter esse cara sentado ao lado desta coluna aqui. Agora, se você está se movendo coisas ao redor e ele tenta encaixar para muitas coisas, ele se encaixou para o outro guia lá ok, você pode usar suas teclas de seta esquerda e direita em seu teclado apenas um toque coisas ao longo e levá-los no lugar certo. Vou escolher uma fonte. Com a camada selecionada, pegue a ferramenta de texto. Vou usar o meu Roboto. Vou usar a laje, vou usar a versão em negrito para isso. Qual é o tamanho da fonte? Não há tamanho de fonte garantido. Eu vou usar este aqui, batê-lo um pouco para baixo usando minhas teclas de seta. Agora eu vou olhar para adicionar meu painel de navegação, que é aqui. Eu vou pegar a ferramenta de texto, eu vou pegá-la para que ela se estenda. Nós temos muito espaço para trabalhar, então eu vou buscá-lo para que ele se estenda por toda a coluna. Quantos são? Cerca de nove colunas. Aqui dentro, vou ampliar um pouco e vou digitar em casa. Se, como eu, você não pode ver seu texto e ele desapareceu, é porque a fonte é realmente grande. Lembra da fonte da última coisa que estávamos fazendo? É por isso que o expando aqui. Aqui, ali está ele. Mas se ele é pequeno e você não pode vê-lo porque a caixa de texto é muito pequena, basta expandir a caixa para fora, selecionar todo o texto e torná-lo um tamanho apropriado. Eu vou colocar o meu para 12, na verdade, talvez 16 pixels por enquanto, e então eu posso movê-lo novamente para que eu possa vê-lo. Para o texto aqui, vou usar maiúsculas. Este primeiro aqui vai ser SERVIÇOS, então eu vou colocar um espaço entre eles. Vou colocar duas abas entre as minhas. O próximo será PORTILOTOPLE, duas abas. Agora, em termos de deveria estar usando abas ou espaços ou em caixas separadas, realmente não importa porque isso é apenas um visual. Quando se trata de web design, eles terão que ser separados corretamente, mas no momento, cabe a você o que você usa para espaçá-los. Agora talvez vamos 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Eu vou copiar isso, selecionar através copiá-lo para que eu saiba que o espaçamento aqui é exatamente 10. Então eu vou usar TEAM, colocar o mesmo espaçamento dentro, e então nós vamos ter um CONTACTUS. O que eu também quero fazer é que eu vou selecionar todo esse texto e eu vou torná-lo no topo aqui para ser alinhado à esquerda para que ele é sempre alinhado à esquerda ao longo daquela grade de coluna lá. Tamanho da fonte é bom, mas o estilo da fonte eu vou mudar de volta para o nosso simples Roboto velho. Vou selecionar este texto aqui, digitar Roboto, e agora vou usar o meio para o momento. Vou desligar minhas grades usando o Comando, ponto-e-vírgula. Para ter uma noção disso, vou diminuir um pouco. Não gosto do texto. Em vez de médio, vou escolher a versão light. Eu gosto disso mais agradável. Agora, a próxima coisa que vamos olhar, vamos colocar uma grande manchete acima deste pedaço de lorem ipsum aqui. Eu vou encontrar o lorem ipsum no meu menu, arrastá-lo para baixo. Vou usar minha ferramenta de texto. Vou desenhar uma caixa de largura fixa porque quero que ela fique aqui dentro. Mesmo quando você está arrastando caixas de texto, você deve usar as grades para alinhar as coisas, usando essas colunas, só que torna muito mais fácil quando se trata de tempo de desenvolvimento. O que é este? Vou certificar-me de que está centrado. Este vai ser “Vamos fazer isso incrível”. Selecionando o texto, torná-lo um tamanho agradável. Quando eu digo agradável, apropriado para este, um bom, grande, super gráfico. Vou escolher o Roboto, e vou usar a laje. Vou usar magro para este aqui. Em termos de cor, vou usar uma das minhas amostras que eu uso. Aqui em baixo, vou usar esta cor aqui. Como fazê-lo, com ele selecionado, Eu cliquei em “Swatch” aqui e que mudou a cor para fora. Vou desligar os meus guias. Vou mover isso para baixo. Este texto aqui, eu gostaria que ele fosse centrado também. Eu vou pegar minha ferramenta de texto, clique dentro dela, e eu vou fazer você centralizado. Se você estiver encontrando problemas com essa hifenização, o que você pode fazer é clicar neste ícone aqui, que irá exibir seu painel Caractere, você pode alternar para Parágrafo e desativar o hifenato, se você estiver tendo problemas com hifenização. Odeio hifenização. Aparecendo de volta. Digamos que, para este pedaço de texto, na verdade, serão apenas três linhas. Vou tentar fazer o redator trabalhar três linhas para este, e vou movê-lo um pouco para cima, pegar “Vamos Make” para baixo. Na verdade, um pouco que esqueci é que vou adicionar um botão de call-to-action aqui. Eu vou para a minha ferramenta de texto e eu vou clicar uma vez, e este vai ser chamado de Mais, eu tenho um plus. Que texto vou escolher? Vou torná-lo um pouco menor, talvez uns 30. Vou torná-lo muito mais pesado, ousado. Vou torná-lo branco, colocar a coisa aqui em cima. Vou pegar minha ferramenta de retângulo. Vai ser por cima deste tipo, mas podemos mudar as camadas num segundo. Mas o que eu quero fazer é ligar meus guias, Comando, dois pontos. Vou fazer com que esta seja quebrada entre estas duas centrais. Que cor vai ser? Vou escolher o meu verde. Quero ter certeza que More está acima desse retângulo. Vou dar um nome a este retângulo e chamar este BT, então eu sei que é um botão. Este vai ser o botão Mais. Eu vou pegar meu Mais texto, pegar minha ferramenta de movimento e movê-lo ao redor. Lembre-se, se você não conseguir entrar na linha, basta usar o cursor para movê-lo. Tudo precisa ser movido um pouco para cima. Para fazer isso, posso manter pressionada a tecla Command e já tenho mais selecionado. Mantenha pressionada a tecla Command, clique no botão “Mais”. Vamos fazer este “Awesome and Loren ipsum”. Essas são as quatro partes que eu quero mover, e eu vou clicar e arrastá-lo para cima. Lembre-se, se você não tiver certeza sobre se ele se encaixa nos pontos errados, talvez você possa apenas usar sua tecla de seta apenas para tocá-la e tocá-la para baixo. Desliguem os meus guias. Estamos quase lá. Esse More é um pouco grande. Vamos pegar minha camada Mais, pegar minha ferramenta de texto, baixá-la para 24. Legal. Mova um pouco para cima, lá vamos nós. 29. Ajustando as bordas da sua página: Antes de entrarmos em imagens, vou mostrar a vocês, acho difícil trabalhar com o tamanho exato de medição, os 690 pixels de largura. Isso é exatamente o que deveríamos estar trabalhando também, mas eu preciso ver um pequeno amortecedor em torno das bordas aqui, um pouco de envelhecimento só para ver como é quando ele está sentado dentro de uma tela maior. Para fazer isso, vou pegar a ferramenta Prancheta escondida embaixo da ferramenta Mover. Eu vou clicar neste aqui onde diz LG Desktop, e eu vou rolar para baixo até chegar ao meio, mas eu vou arrastar isso um pouco. Arraste isso um pouco. Não importa quão longe, porque o que vai acontecer é que se eu ligar meus guias de volta, você verá o guia para ainda onde eles devem estar. Eles ainda têm 960 de largura, incluindo o estofamento do lado de fora. A próxima coisa que precisamos fazer é que temos um monte de caixas aqui não são do tamanho certo. O que eu vou fazer é rolar para baixo e encontrar minha barra de navegação. Vou manter pressionada a tecla Command no Mac ou a tecla Control em um PC e selecionar todas as caixas que preciso mudar. Ali está o rodapé. Eu vou diminuir um pouco para que eu possa ver tudo, e o que eu vou fazer é eu vou usar minhas ferramentas transformadas lembrar o comando T no Mac e controlar T em um PC. Então eu vou arrastar estes para fora para combinar com os lados de tudo feito Alt, ele vai arrastar ambos os lados comigo uniformemente, ok. Apenas certifique-se que eles estão se sobrepondo um pouco acima da borda lá. Quando terminar, pressione Enter no teclado e nos dê um pouco mais de espaço para respirar. Vou desligar os nossos guias, o que ainda é perfeito. Eu estou indo muito zoom em um pouco. vai dar-me um pouco de espaço para respirar por fora antes de começar a trabalhar na próxima parte. 30. Onde obter imagens gratuitas para uso comercial: Neste vídeo, vamos ver de onde obter imagens. Agora, quando você está fazendo seus conceitos, você pode dizer que você está trabalhando para si mesmo e você não tem um orçamento para imagens pagas ou para obter um fotógrafo para trabalhar, você pode encontrar imagens gratuitas, imagens uso comercial stock. Este é provavelmente o melhor site aqui chamado freeimages.com. Agora, se eu quiser uma imagem de tijolos, eu soletrei certo? Você encontrará um monte de imagens gratuitas para tijolos. Agora você tem que ter cuidado para que estes aqui, bem, não cuidado, estes aqui são pagos. Então estes sempre parecem muito bonitos e sexy, mas estes são baixados da iStock. Mas você tem que pagar. Os preços são razoáveis, mas se quiser de graça, precisamos destes aqui. O que eu gosto de fazer não é relevância, mas provavelmente a maioria dos baixados tende a ser os que vêm para o topo são os que são melhor tiro, melhor qualidade, talvez aqueles que você pode querer usar mais. Você terá que fazer login para baixá-los e comprá-los. Diga que quer isso com um visual de tijolo. Ok. Você pode baixá-los e, dependendo do tamanho que eles foram originalmente carregados, você pode baixá-los. Por isso, terá de iniciar sessão e transferi-lo. É gratuito iniciar sessão e é uma ótima maneira de obter imagens stock gratuitas. Agora, se você quiser imagens pagas, iStock é provavelmente o melhor lugar para ir. Há muitos concorrentes na iStock. A Adobe tem seu próprio no momento chamado adobe.stock, mas este aqui é um verdadeiro típico para usar para muitas pessoas. Até agora em tijolos aqui, você vai achar que a qualidade é muito melhor, você vai descobrir que a resolução é bastante maior do que a imagem livre. Agora diga que eu quero este trabalho de tijolos aqui, eu decidi que esse é o fundo que eu quero usar. Ele vai chegar com quantos créditos vai levar. Este aqui vai me custar três créditos. Considerando que se eu fosse para algo como este aqui, este aqui eu fui para este é um crédito. Ok. Aproximadamente créditos C3 é de 24 euros. Agora, se você está nos EUA, o euro é quase o mesmo no momento, não exatamente, mas perto o suficiente para comparação. Há no orçamento para a maioria das pequenas empresas. Então, para facilitar, eu baixei um monte de imagens gratuitas que você pode usar para este tutorial em particular. Então faça o download deles se você não tiver nos arquivos de exercícios e nós vamos começar a importar. 31. Incorporar ou linkar suas imagens?: Neste vídeo, vamos ver como trazer imagens. Agora, há muitas maneiras de trazer imagens de diferentes programas. As maneiras mais fáceis é ir para Arquivo e você tem esses dois: Colocar Embedded ou Local Vinculado. Agora, vamos usar o Place Embedded. É definitivamente uma maneira melhor de trabalhar quando você é novo no web design ou novo em design no Photoshop. Arquivos vinculados podem ser bastante úteis se o tamanho do arquivo estiver ficando muito alto. Eles não tendem a ficar super altos quando você está lidando com web design porque a resolução não é grande e não há muitos detalhes em alguns dos efeitos que você está fazendo. Mas vamos dar uma olhada rápida na diferença. Vá para os arquivos de exercícios da Web do Photoshop. Vou abrir este chamado livros de imagem e vou colocá-lo lá dentro. Ele entra, você pode redimensioná-lo, eu vou deixá-lo exatamente como ele entrou e apertar “Return”. Agora, você vai vê-lo no meu painel Camadas aqui, ele é chamado de livros de imagem. Mas o que aconteceu é que ele está sendo colocado dentro deste documento e será carregado por aí. Se eu enviar a alguém meu documento do Photoshop, ele virá junto para o passeio. Agora, se eu fizer de outra maneira, se eu for para o Place Linked, o que vai acontecer é que a imagem vai entrar, vai parecer o mesmo, eu apertei “Enter”, eu tenho duas imagens iguais. Você verá o ícone muda, este tem um pequeno ícone de vinculação. Significa apenas que se eu enviar isso agora, digamos, para meu designer ou meu desenvolvedor web para construir, eles não terão as imagens a menos que eu as envie separadamente. Vou precisar dessa imagem books.JPEG para enviar junto, enquanto o incorporado fica preso no arquivo e é um pouco mais fácil de compartilhar. O outro problema que você precisa ter cuidado com os vinculados como este é se eu ir para a minha área de trabalho agora e eu vou e apagar livros de imagens, você pode ver aqui, há um pequeno ponto de interrogação. Significa que, ei, estou surtando porque perdi essa imagem aqui. Ele vai aparecer com o erro dizendo, “Eu não consigo encontrá-lo, eu não sei onde ele está.” Por isso, é um pouco mais fácil no início de usar incorporado. A razão pela qual você usaria imagens vinculadas é que se você estiver usando essa mesma imagem repetidamente em muitos arquivos. Você realmente não quer ter muitas cópias dele em todos os lugares, ocupando muito tamanho de arquivo. Também pode ser que estamos trabalhando em documentos realmente complexos com muitas imagens incorporadas, ele pode começar a correr muito devagar. Se você tem um laptop velho terrível que você está usando, isso é algo que você pode querer considerar. No momento, porém, vou excluir esta camada aqui e deixar a que estava embutida. 32. Como mascarar sua imagem usando uma máscara de recorte: Neste vídeo, vamos ver como usar uma máscara de recorte. Agora, uma máscara de recorte é uma ótima maneira de cortar uma imagem para usar. Vamos ver como será o produto final. É a imagem quadrada aqui. Vou mostrar-te como fazer isso com o que é chamado de máscara de recorte. A primeira coisa é desligar este globo ocular na nossa camada de livros de imagem, e o que fazemos é começar com um retângulo. Vou voltar a ligar os meus guias, Comando Colon. Quero que abranja, digamos quatro guias aqui. Eu quero ser um quadrado perfeito, então o que eu faço é segurar Shift enquanto eu estou arrastando, e você pode ver que ele bloqueia a altura e largura ao longo. Vou arrastá-lo para que se encaixe nestes quatro. Agora, realmente não importa que cor vamos usar no momento, porque a máscara de corte não importa muito. Vou usar minha ferramenta Mover e vou movê-la um pouco para baixo. Está no centro da minha caixa, e o que quero fazer agora é, vou colocá-la e voltar a ligar a minha imagem. Agora, minha imagem precisa ser um pouco mais de um tamanho apropriado para este quadrado. Com um Seletor de Camadas, eu vou usar minha ferramenta Transform, Command T. Bem, Control T em um PC e eu vou manter a tecla Shift pressionada nos cantos, para bloquear a altura e a largura. Caso contrário, acaba esticando e distorcendo. Vou usar a tecla Shift para baixo. Eu não estou muito preocupado que vai ser perfeito por aqui, eu vou cortá-la para efeito. Vou entrar quando a sua transformação terminar. O que eu preciso fazer é ter certeza de que a imagem está acima do meu retângulo. Vou renomear esse retângulo e vamos chamar isso de Imagem de Quem, então minha página Who Yeah. Isso por baixo, agora o que eu quero fazer é cortar esse cara, que é a imagem dos livros para a praça. Para fazer isso, a maneira mais fácil é com a camada de imagem selecionada, mantenha pressionada a tecla Alt. Consegues ver este pequeno ícone aqui com a caixa com a seta? Isso vai virar imagem superior e imagem inferior, e juntá-los e fazer uma máscara de recorte. Você pode ver o que aconteceu na estrutura aqui nas camadas, e você pode ver o que aconteceu aqui na minha imagem real. Vou desligar meus guias para torná-lo bonito. A beleza disso é que esta caixa de Who debaixo daqui e esta imagem, eles estão separados para que eu possa movê-los. O que eu posso fazer é, digamos que a caixa que eu quero cortar um pouco diferente e eu não selecionei aqui. Veja isto. Com a minha ferramenta Mover, posso movê-la e você vê que posso movê-la e ajustar. É como uma pequena janela. Da mesma forma, a imagem abaixo pode ser movida ao redor, a caixa ao redor pode ser movida ao redor para encontrar onde precisamos ir. Agora, o que você quer ter cuidado é, se você quiser mover ambos juntos, você precisa manter Command pressionado e clicar em ambos. Com os dois selecionados, posso movê-los. Agora, se você quiser movê-los permanentemente juntos, bem, agora eu vou ter que selecionar os dois. É você pode clicar com o botão direito nesses dois. Depois do selecionado e há um aqui, este é Link Layers. Você vê este ícone de vinculação aparece, apenas significa que se eu tiver, digamos meu plano de fundo selecionado novamente, e depois voltar e clicar em apenas um desses dois caras, você pode ver apenas um deles selecionado, ambos vêm junto para o passeio, porque eles foram ligados. Se você precisar desvinculá-los, clique com o botão direito do mouse neles, e há uma aqui que diz, Desvincular camadas. Vou deixar a minha ligação por enquanto. 33. Imagens recortadas para cantos arredondados e círculos: Este vídeo é a mesma técnica, mas um sabor ligeiramente diferente. Vamos olhar para usar uma máscara de recorte, mas usando círculos e cantos arredondados. Agora, veja no fundo aqui está o meu exemplo acabado. Eu vou fazer isso no fundo aqui nesta parte branca, onde eu tenho as fotos da minha equipe. O que eu vou fazer é rolar até aqui usando minha barra de espaço. Vou ampliar usando meu comando mais. Lentamente, desça o fundo. Vou clicar em manter pressionada a ferramenta de retângulo. Clique e mantenha-o pressionado até chegar à ferramenta Elipse. Agora, a ferramenta Elipse, se eu clicar e arrastá-la, ela vai me dar elipse que vai a qualquer lugar. Agora, se eu manter pressionada a tecla Shift, lembre-se, eu bloqueei a largura high-end para um tamanho que eu preciso. O que vou fazer é ligar os meus guias e vou apagar isso. Vou desenhar um que se estende por, digamos, três colunas. Eu vou segurar o turno, para baixo e eu vou pegá-lo para que ele se encaixe nesses três. Eu vou para a minha ferramenta Move, eu vou movê-la um pouco para baixo. Agora, realmente não importa que cor é porque assim como fizemos com a última imagem, vai ficar coberto pela imagem. Vamos ao File e vamos ao Place Embedded. Vamos pegar a área de trabalho, vamos pegar arquivos de exercícios de flexão. Esta equipa 1, que vai ser a primeira. Vou bater no Place. Agora, eu vou movê-lo para que fique acima do topo aqui, e eu vou segurar Shift, dimensioná-lo para baixo antes de apertar Enter apenas para obter o tamanho apropriado. Vou movê-lo mais ou menos para lá. Podemos redimensioná-lo depois. Lembrem-se, aqui está uma elipse, e esta vai ser a Equipa Circle1. Eu vou, lembre-se, manter pressionada a tecla Alt em um PC ou a tecla Option em um Mac, e ela vai se juntar aos dois. Se você está infeliz com o corte, lembre-se, eu clico neste, este é o time -1, e eu posso usar minhas teclas de seta apenas para tocá-lo ao redor para chegar onde eu quero. Eu posso transformá-lo usando meu Comando T. Eu posso escalá-lo. Pressione Enter. Use minhas chaves só para tocá-lo novamente. É assim que se recorta a um círculo. Eu vou rapidamente fazer como você cortar para um cantos arredondados. Se você estiver usando cantos arredondados, clique e mantenha pressionada a ferramenta Retângulo ou a ferramenta Elipse, e há uma aqui chamada cantos arredondados. Agora, antes de começar, escolha um raio. Se você não tem certeza, não se preocupe, você pode mudá-lo depois. Vou clicar e arrastar. Esta pequena caixa aqui vai permitir-me mudar os cantos do raio. Vou mudar os cantos do raio para dizer algo como 30. Grande confusão de cantos arredondados. Então eu posso trazer outra imagem. Posso ir ao File, Place Embedded. Vou trazer a equipa 2. Coloque-o sobre o topo, reduza a escala, aperte Enter. Lembre-se de manter pressionada a tecla Alt ou a tecla Option, dependendo se você for um Mac ou PC, e ela será recortada para o retângulo dos cantos arredondados. Isso é como cortar para um círculo e um retângulo com cantos arredondados. 34. Como criar imagens de fundo grandes: Neste vídeo, vamos ver como fazer uma imagem de fundo. Agora, imagens de fundo tendem a ser bastante lavadas ou escurecidas. No momento, é bastante elegante, e eles parecem preencher todo o fundo usando 100% de alongamento e cobertura CSS. Vamos olhar para fazer isso. Eu vou desligar meus guias, eu vou para File, Place Embedded, em nossos arquivos de exercícios PS Web, encontrar o que diz, construção de tijolos de fundo e trazer esse. Agora, em termos de tamanho, vai caber, mas não é suficientemente grande. O que vou fazer é aumentar a escala. Aumentá-lo no Photoshop é uma coisa terrível de se fazer. Mas vou mostrar-lhe um par de técnicas para esconder se não especular. Este não é porque é uma imagem razoavelmente boa e está aumentando mais em cerca de 120 por cento, então vai ficar tudo bem. Vou clicar em Enter. A próxima coisa que quero fazer é cortá-la, para que esteja a ser cortada nesta caixa roxa aqui. Eu vou sobrepor aquele ali, e eu vou encontrar meu plano de fundo é chamado de imagem de herói. O que eu vou ter que fazer, é arrastá-lo para que fique acima desta caixa aqui chamada Box-Hero Graphic. Vou arrastá-lo para baixo, escala, escala. Agora o que você vai descobrir é que pode ser um pouco chato para levá-lo para a parte certa. O que você pode fazer é derrubar esses aqui, como esta biblioteca, eu não uso isso há algum tempo. Vou clicar duas vezes na guia Bibliotecas, vou clicar duas vezes no tipo Amostras, apenas que minhas camadas são boas e grandes. Posso trabalhar neles e é mais fácil arrastá-los por aí. Minha construção de tijolos de fundo está acima da minha caixa aqui no gráfico e, em seguida, vou manter pressionada a tecla Option em um Mac ou a tecla Alt em um PC para recortá-la. O que eu gostaria de fazer é, bem é, na verdade, antes de eu fazer isso, eu vou desfazer isso, então é um passo para trás. Vou desligar esta camada, e em vez de esta ser roxa, o que vou fazer é torná-la preta. Com isso selecionado, eu vou para este painel aqui chamado Propriedades, e eu vou selecionar preto de minhas cores. Eu vou fazer isso porque quando eu ligar este, eu vou torná-lo realmente um pouco transparente, então ele começa a mostrar a cor por baixo. Mais cedo, quando fizemos clipping vídeos, eu disse que não importa a cor das caixas porque você vai usar uma imagem em cima para cortá-la. Isso realmente não importa. Neste caso, é porque vou tornar isto um pouco transparente. Eu vou manter pressionado Alt ou Option, e ele vai cortar para este gráfico aqui. Esta caixa aqui, nosso laboratório gráfico. O que eu gostaria de fazer é tornar este um pouco transparente. Abaixe a transparência até chegar a um ponto em que eu possa começar a ver os tiques claramente acima dela. Depende de você, e vai depender da imagem você usou e do quão opaco você a torna, mas apenas certifique-se de que a cor gráfica por baixo é preto sólido agradável, e ele vai mostrá-lo através. Obviamente, você desce para zero. A imagem é completamente vista e vemos a caixa embaixo dela, então eu vou cortá-la para que ainda fique visível. O que eu também quero fazer para tornar esse fundo mais incrível, é que eu gostaria de torná-lo um pouco embaçado. Há muitas maneiras diferentes de borrar o fundo, porque eu não quero, eu gosto do efeito de ver o antigo edifício de tijolos no fundo, mas eu não quero realmente ser capaz de ler sementes de grãos. O que eu quero fazer é usar Filtro. Há muitas coisas sob o Borrão. Há toda a Galeria de Borrão e há outra Galeria de Borrão. Há muitos deles. Os desfoques gaussianos são muito populares. Gosto de usar este agora chamado Borrão de Campo. Eu gosto de Borrão de Campo principalmente porque me permite borrar. Você pode ver que ele vai sair e fazer seu desfoque, desfoque para o padrão de 15 pixels. Provavelmente é um pouco forte demais, então eu vou recusá-lo para talvez algo como 10. Vai redesenhá-lo. Agora você pode ver que está lá, eu posso ver o que é, mas eu não posso começar a ler os nomes muito bem. A razão pela qual eu gosto disso é porque há esta pequena opção aqui diz Ruído. Eu clico em Noise, bem, eu preciso colocá-lo aqui, e eu vou chutar em Mount, e se eu clicar direito para cima, vai ficar um pouco louco, mas você seria capaz de ver o que eu quero dizer. Vou ampliar um pouco. Você pode ver, ele colocou este fundo de ruído, então eu vou desligar o ruído, ligar, desligar, ligar. Isso nos dá algum ruído de pouca luz que esconde alguns dos suaves Days of Our Lives efeito que acaba acontecendo. Quanto você aplicar é totalmente até você e sua imagem. Eu vou aplicar talvez não muito, abaixar um pouco, 20 por cento. Pode demorar um pouco para redesenhar, dependendo da qualidade do seu computador. Quando você terminar, você precisa clicar neste aqui em cima que diz “Ok”. O mais bonito de usar esse tipo de método, é que ele é algo que está sendo transformado no que é chamado de Filtro Inteligente. Podemos ligar e desligar. Digamos que um cliente volte e diga: “Eu gosto, mas não está embaçado o suficiente ou muito embaçado.” O que você pode fazer é clicar duas vezes na palavra Galeria de Desfoque, voltar e sancionar ou diminuir um pouco para talvez seis. Vou aumentar o grão um pouco para 40, e depois clicar em “Ok”. É totalmente reutilizável quando você usou a técnica que fizemos neste curso aqui. Agora isso é como criar um fundo incrível onde usamos um pouco de opacidade para mostrar através da caixa abaixo, nós também usamos um borrão melhor e um melhor ruído para empurrá-lo para o fundo. 35. Vídeo de produção — adicionando nossas imagens: Bem-vindo ao vídeo de produção de imagens, onde eu vou passar por algumas das coisas manuais ou coisas monótonas. Tenho o meu primeiro círculo. O que eu quero fazer é fazer dois outros círculos e então eu quero me livrar desses cantos arredondados. Primeiro de tudo, vou usar o meu truque pelo Comando ou Controle clicando na camada, esse é o meu cara aqui. O que eu quero fazer é dobrar essa camada, obter uma camada de canto arredondado, eu tenho minha equipe 2. Agora, eu quero usar o mesmo tamanho de círculo. Se eu pegar este círculo de equipe 1 e clicar com o botão direito do mouse e ir para duplicar. Vou chamar-lhe equipa círculo 2, vai destruí-lo. Por quê? Porque este círculo de equipa apareceu entre aquela máscara de recorte que eu tinha. Dividiu tudo e destruiu tudo. O que eu preciso fazer é mover esse cara de volta para baixo e juntá-los novamente mantendo pressionada a tecla Alt em um PC ou tecla Option no Mac e clicar nesses dois novamente para obter minha máscara de recorte. Agora, este círculo de equipe 2, e ele está aqui sentado bem por cima. O que eu vou fazer é usar minha ferramenta Mover, mantenha pressionada a tecla Shift para que ela arraste diretamente e eu vou arrastá-la, então está no centro do meu documento. Com ele no centro, eu vou desligar essa camada, arrastar para este centro. Incrível. Ótimo. Agora vou voltar a ligar este tipo e vou fazer uma máscara de recorte. Talvez mantendo pressionada a tecla Option antiga. Vou escalar este top usando o Controle T. Vou pegá-lo para que ele esteja enchendo o máximo que pudermos com essa imagem cortada. A mesma coisa para duplicar o círculo. Novamente, o mesmo problema. Se eu duplicar esse cara, clique com o botão direito, duplicar, quero que seja o Time Circle3. Dividiu estes dois. Vou arrastá-lo até lá. Arrasta esses dois para cima, Circle3. Arraste-os até a borda. Vou trazer a minha próxima imagem. Vou ao File, Place Embedded. Nos meus arquivos de exercícios é um chamado de equipe-3. Traga este. Vou reduzi-lo segurando Shift, alinhá-lo. Aperte Enter, escolha uma máscara de recorte, um pouco redondo, o meu teclado. Isso é o certo para mim. O que você vai notar é que esses caras não estão alinhados mesmo que eu pensei que eu estava fazendo isso era colocar duas colunas desse lado, uma coluna daquele lado. O que acontece com, estou tentando dividi-lo em três. O que vou fazer é ligar o meu prestativo, onde está? Aqui embaixo, bem no fundo, estão meus guias úteis de coluna. Vou dividi-lo em três colunas, vou ligar isso. Você notará que esta é uma maneira mais fácil de colocar as coisas alinhadas em vez de tentar contá-las. Um novo, selecione essa camada, então team-1 e team-1 círculo e team-1 vai entrar no centro deste. Deixe-me usar este aqui. Membro da equipe 2 e eu vou pegar o membro da equipe 3 e colocá-los no meio da camada. Vou adicionar algum tipo a eles. Na verdade, eu vou selecionar você, você , você, você, você, eu vou movê-los um pouco acima. Adicione algum tipo, pegue a ferramenta Tipo. Eu vou clicar em Escape lá, eu clico uma vez aqui. Vou certificar-me de que está centrado e vou escrever o meu nome, Daniel Walter Scott. Vou selecionar o texto, torná-lo preto, clicar em OK e, usando a ferramenta Mover, movê-lo, tomando um pouco. Mova-o em torno do zoom, então fica no centro de lá, e isso vai ser preto. Isso é certo. O tamanho, eu vou duplicar essa camada. Vou usar essa maneira complicada usando minha ferramenta Mover, mantenha pressionada a tecla de opção Alt, clique e arraste-a e, em seguida, você verá que faz uma duplicata. Vou mudar este e eu sou o fundador. Faço bonés para o Fundador. Vou fazer o Roboto. Mas vou usar apenas Regular. Size-wise, vamos torná-lo um pouco menor. Desça para 17. Um pouco para cima. Em seguida, coloque um texto e coloque-os no endereço do Twitter. @danlovesadobe. Na verdade, vou fazer isso em maiúsculas. Este aqui vai ser o ousado. Adorável. Eu vou querer duplicar estes, então eu usá-los novamente e novamente. Vou pegar todos esses três. Vou manter pressionada a tecla Alt no meu teclado. Estou na minha ferramenta Mover e vou arrastá-la. Segurando Shift também, Shift danlove, mas um dedo ginástica. O que significa que é duplicado de todo aquele pedaço, você pode ver que é cópia original, que é a nova. Vou mudar este, mudar para a minha ferramenta Tag. Este aqui, é John Smith, ele vai ser, se mover leve aqui, ele vai ser nosso desenvolvedor talvez, e seu endereço no Twitter vai ser @johnsmith. Mais uma vez, vou fazer o mesmo por esta senhora aqui. Eu vou pegar todos esses três caras, segurar Alt, arrastá-lo através, centrado. Ela definitivamente não é John Smith. Ela vai ser Jane, eu não quero chamá-lo de Doe, significa que ela está morta. Vamos chamá-la de Jane Smith, até Jane. Ela vai ser a nossa designer, @janesmith. O texto para aqueles, Eu vou desligar o meu, estamos feitos na parte inferior aqui, Eu vou desligar meus Guias Coluna Útil, especialmente apenas o terceiro lá. Em seguida, vamos fazer é que há um pouco de portfólio aqui. Vai ficar assim com muitas imagens diferentes em torno deste pequeno retângulo. Com os meus guias, vai ajudar. Vou pegar minha ferramenta Retângulo. Quero que as imagens do meu portfólio estejam em colunas completas. Eu quero gastar apenas três deles cada, realmente não importa que cor são os retângulos, porque você vai estar recortando usando Clipping Master as imagens, mas é doloroso quando eles são da mesma cor que o fundo. Vou mudar para vermelho. Não mova suas guias, eu quero editar desfazer. Se você estiver achando que seus guias estão se movendo e eles não deveriam, ele tem um Guias de Bloqueio que não se movem. Tenho o meu primeiro retângulo. Em vez de fazê-los um de cada vez como eu fiz os círculos, eu tive o problema com os círculos onde eu continuo duplicando as elipses e ele quebrou minha máscara de recorte. Vou fazer isso um pouco diferente desse jeito. Vou duplicar os retângulos antes de passar e adicionar minhas imagens. Tenho as duas imagens. Vou pegar os dois. Quem me dera que atravessassem ali. Agarre aqueles. Vamos pegar este. Vamos pegar este último pedaço. Feche isso. Vou trazer as minhas imagens. Vamos nomeá-los antes de chegarmos longe demais, com quais estamos lidando. Esse é o número 1, não, este era o número 1. Este vai ser chamado de Portfólio 1, copie. Será Portfólio 2, Portfólio 3, Portfólio 4, Portfólio 5, Portfólio 6, Portfólio 7 e Portfólio 8. Para ser honesto, quando estou trabalhando sozinho e não faço esse nome até o fim. Estou fazendo isso agora para tornar mais fácil para você acompanhar. Mas muitas vezes, eu deixei como apenas uma cópia retangular 15 como eu estou indo junto. Eu vou trazer algumas imagens, eu vou para o arquivo e eu vou para o Place Embedded. Vou trazer a miniatura 1. Este é aproximadamente o tamanho certo. Vou reduzi-los. Entrar. Vou certificar-me de que ele está acima do Portfólio 1 e cortá-los. O mesmo de novo. Lugar incorporado. Você chega ao tamanho certo, mais ou menos. Bastante. Vou colocá-los acima do Portfólio 2, cortá-lo. Vamos trazer outro. Se você está achando que está levando uma eternidade para fazer as coisas ou pelo menos bastante monótono e você quer atalhos. Então, Place Embedded é algo que eu uso bastante. Vai editar, criar atalhos. Você não pode entrar aqui e dizer, eu gostaria deste que diz “File”. Este aqui que diz “Place Embedded “e faça um atalho. Eu vou para Command Shift I. Já está em uso, Eu Select Inverse. Na verdade, eu gosto dessa, então eu não vou fazer essa. Vou tentar Command Opção Shift E. Já está sendo usado por Mesclar uma cópia de todas as camadas visíveis. Eu não uso esses atalhos. Eu vou aceitar isso. Basta ir com o topo dessa. Significa que agora posso ir para a opção de comando. Vamos para o meu lugar incorporado. Resumindo para o quê? Sobre o terceiro. Para que você não adormecer e obter super prancha, isso é essencialmente a mesma coisa mais e mais de oito vezes. Vou pular até chegarmos a este último aqui. Por aqui. Agora, está aqui. Tudo bem de volta à velocidade normal agora. Esse é o fim deste vídeo de produção onde passamos, fizemos alguns clipping mouse, adicionamos alguns textos e nos atualizamos. 36. Onde obter ícones gratuitos para uso comercial para o seu web design do Photoshop: Neste vídeo, vamos olhar para ícones. Agora neste vídeo, vamos precisar de quatro ícones usados para nossos serviços. Ao procurar ícones, digamos, neste caso, estamos procurando ícones gratuitos. Há muitos ícones grátis online. Muitas vezes, porém, quando você está procurando por eles, é difícil encontrar algumas coisas boas. Eu realmente gosto deste site aqui chamado iconfinder.com, e este site é muito bom para encontrar uso comercial gratuito, bem como ícones comerciais. Então eu vou digitar neste caso art., o que estamos olhando para fazer é mudar para livre, e em vez de não ter licenciamento, vamos voltar para nenhum link de volta, ok. Isso só significa que nós começamos a usá-lo e nós não temos que adicionar nenhum link para ele, então você pode obviamente adicionar um link de volta, há um pouco mais para escolher e o que eu vou fazer é eu vou usar este aqui. A melhor coisa sobre o localizador de ícones é, muitas vezes, quando você encontrar um que você gosta, é parte desse conjunto maior que também é gratuito. Eu vou usar esta câmera uma, esta área de trabalho, e alguns outros. Agora, se você quiser, você pode pular em frente, e nos arquivos de exercícios eu tenho quatro ícones para você começar. Se você quer jogar junto com este, o que você faz é você, digamos que escolhemos esta câmera aqui. Antes de baixá-lo, o que você deseja fazer é escolher o tamanho desejado. Agora, eu gosto de escolher o maior tamanho que eu encontrar. Então, mais tarde, se eu precisar usá-lo para outra coisa, ou um super gráfico ou um grande azulejo para algo, eu tenho uma versão grande dele ao redor. Então, para baixar, vamos usar a versão PNG e baixá-la para sua área de trabalho e, em seguida, importá-la para o Photoshop. O que eu fiz por você, no entanto, é, vamos para o Photoshop e vamos importar as imagens que eu já baixei. Então vamos para File, Place Embedded, e há ícone 1, 2, 3 e 4. Então vamos trazer tudo isso. Então, em primeiro lugar, vou colocar o primeiro. Certo, vou deixar no tamanho em que veio e apertar Enter. A razão de eu fazer isso é que eu vou reduzi-los todos juntos, então eu quero todos eles na página, selecioná-los todos e dimensioná-los todos para baixo exatamente o mesmo tamanho, e em vez de tentar fazê-lo separadamente e tentar combiná-los. Então vamos para File, Place Embedded, vamos trazer o ícone 2, pressione Enter. Arquivo, Inserir Embedded, ícone 3, pressione Return. Arquivo, Place Embedded, e vamos trazer o último. Ótimo, então eu tenho quatro ícones aqui. Você pode vê-los todos em minhas camadas. Vou comandar, selecionar todos estes ou manter pressionada a tecla control, se você estiver em um PC basta clicar cada um individualmente. Agora, eles devem seguir juntos e nós vamos usar nosso comando de atalho T ou controle T, e eu vou reduzi-los todos para ter o mesmo tipo de tamanho. Agora, na verdade, antes de fazer isso, eu vou apertar Escape, e o que eu quero fazer é que eu quero ver meu guia completo com apenas para ter uma noção do tamanho que eles devem ser. O guia está ligado. Eu tenho os quatro ícones selecionados. Vou usar minha ferramenta de transformação. Vou reduzi-los até me encaixar. Ok, eles se encaixam em 1, 2, 3 colunas, então em três colunas em quatro pequenos grupos. Tudo bem, então eu vou diminuir um pouco. Eu vou distribuí-los basicamente apenas para colocá-los em uma posição áspera para começar e, em seguida, o último. A maneira de obter um pouco de senso dentro dos guias, o que você vai tomar cuidado é, digamos que eu selecionar o ícone 1, é que você vai notar que quando eu arrastá-lo por aí, você pode notar, ver aquela pequena linha azul que apareceu? Ok. Se eu o movesse de novo e de volta. Estamos procurando por eles, está nos dizendo que está no meio de algo. Então eu vou pegar o ícone 2, girá-lo em torno de modo que ele está no meio lá porque ele tem uma tendência a travar em um monte de coisas diferentes no documento, o que você pode fazer é se ele ficar longe, basta usar suas teclas de seta para tocá-lo junto até você sentir que está muito perto do fim. Agora, o que precisamos fazer é fazê-los alinhar no centro. Então eu vou selecionar todos esses caras, um, mantendo pressionada a tecla Command. Na verdade, há quatro desses, e eu tenho essas opções ao longo do topo aqui você pode ver que eu posso alinhá-los ao longo do topo, alinhá-los ao longo do fundo ou eu posso alinhá-los ao longo de seus centros, e é isso que eu vou fazer, alinhá-los ao longo de seus centros. A próxima coisa que preciso fazer é colorir. Então vamos colorir um primeiro, então vamos colorir o ícone um primeiro. Desligue o meu guia, amplie um pouco. Vou colorir esse cara. Vou usar esta opção aqui em baixo chamada de estilo de camada, ok. Então, com o ícone um selecionado, clique em FX e, em seguida, entre e escolha a sobreposição de cores. Agora, sobreposição de cores, no momento, você pode ver que está sobrepondo com cinza. O que posso fazer é clicar nesta pequena cor e vou escolher uma das minhas cores das minhas bibliotecas de cores. Agora este pequeno seletor de cores não tem suas amostras. Então o que eu vou fazer é certificar-me no topo aqui que eu possa ver minhas amostras, especialmente as três que eu importei. Então os verdes e esses caras, para que quando eu clicar em cinza, eu possa usar minha ferramenta conta-gotas para escolher a cor que eu quero. Em seguida, clique em OK, clique em OK novamente, e você pode ver que a cor foi sobreposta. Agora eu quero aplicar o efeito de cor a todos os ícones diferentes. Há algumas maneiras diferentes de você clicar com o botão direito do mouse nele e dizer copiar, estilo de camada e, em seguida, colá-lo nos diferentes. Ou este é um bom truque fácil, é que se você pode ver seus ícones, que diz que eu posso clicar em segurar e arrastá-lo, basta arrastá-lo para o telefone. Ok. Arraste-o para a câmera, e eu clico e mantenho e arrasto para a TV lá. Ótimo, essa é uma maneira de trazer ícones para o nosso design. 37. Vídeo de produção — adicionando nossos ícones: Vai ser um vídeo de produção. Vamos apenas adicionar um texto por baixo dos nossos ícones. Vou pegar minha ferramenta de texto, clicar uma vez e ter certeza de que está no centro. Vou escolher uma cor de branco. Eu vou escolher fonte ou Roboto negrito, e o tamanho sábio, eu vou aumentá-lo até, eu vou mostrar-lhe, cerca de 30 talvez. O primeiro serviço vai imprimir, vai ser tudo em maiúsculas. A próxima parte é eu vou pegar minha ferramenta de texto. Vou colocar um pouco de cópia do corpo por baixo dele. Vou abrir os meus guias para me certificar de que vou por cima. Vai ser padronizado e um pouco extra, e eu vou adicionar algum texto. Lembre-se, vamos digitar, Paste Lorem Ipsum. Vai colocar um monte de Lorem Ipsum lá dentro. Agora, se eu quiser selecionar todo o Lorem Ipsum e mudar o tamanho dele, se eu arrastar uma caixa, infelizmente, se eu mudar o tamanho deste para algo como 12, você só selecionou essa parte. O que você quer fazer é clicar três vezes, então 1, 2, 3, 4. Quando eu disse triplo-clique, quero dizer quatro cliques, então 1, 2, 3, 4, ele pega cada pedaço de texto e ele vai pegar o texto que você não pode ver bem. Vou derrubar isto para, digamos, 14 pixels. Vamos movê-lo para, digamos, o normal. Quantas linhas eu quero neste caso? Eu vou subir porque eu gosto do olhar de três linhas. Lembre-se também se eu clicar aqui com a minha ferramenta de texto, vou desligar a minha hifenização. Para fazer isso, clique nesta pequena caixa aqui. Clique em Parágrafo, desative o Hifenato e nos livraremos dessa hifenização que eu não gosto. O que eu gosto de fazer são estas duas caixas de texto aqui,]. Vou imprimir e Lorem ipsum selecionado. Vou manter pressionada a tecla Alt, na verdade, ativar minhas guias primeiro, mantendo a tecla Alt pressionada e usar a ferramenta de movimentação para arrastar uma cópia. Estou mantendo pressionada a tecla Shift enquanto a arrasto, para ter certeza que ela vem perfeitamente para o lado aqui. Vou fazer isso por todos estes. Vou arrastá-los para o outro lado. Eu tenho quatro sets, e eu vou entrar e mudá-lo. Este chama-se App Dev. Este aqui vai ser Fotografia, este vai ser Vídeo. Eu vou deixar o Lorem ipsum porque não significa nada de qualquer maneira. Desliguem os meus guardas, certifiquem-se que tudo se alinhe As linhas estão bem, as linhas estão bem. O que eu posso fazer é pegar todos os ipsums de Lorem e apenas empurrá-los um pouco. Lá vai você. Há todos os quatro, e use minhas teclas de seta apenas para digitá-los para que eles se juntem a um pouco. O que eu também poderia fazer é pegar meus ícones, eu tenho o ícone 1, 2 e esse outro cara, lá está ele embaixo do meu texto. Eu gosto dele ao longo da base. Feliz o suficiente. É o fim do vídeo de produção. 38. Como organizar o projeto com o agrupamento de camadas: Neste vídeo, vamos olhar para o uso de camadas. Agora, vou documentar lentamente o que certamente está se tornando em uma confusão louca de coisas em todos os lugares. Vai ser um pouco difícil de trabalhar, especialmente se enviarmos para alguém que, digamos, estamos projetando e estamos enviando para alguém, digamos, é um desenvolvedor e não usa muito o Photoshop e tem que trabalhar com ele, pode ser muito complicado para eles usarem. Está se tornando um pouco complicado demais para usarmos. O que vamos usar é algo chamado Grupos de Camadas. Agora, os Grupos de Camadas são uma maneira de agrupar tudo, e isso faz com que nossas Camadas pareçam um pouco mais arrumadas. O que vamos fazer é começar com o nosso grupo de navegação. Há alguns truques que podemos usar para encontrar tudo. O que eu queria fazer era usar essa caixa de herói aqui. Vou usar um pequeno truque. Ative a “Seleção automática”. A seleção automática nos permite arrastar uma caixa ao redor de tudo aqui, e ele selecionará tudo o que puder por baixo dessa pequena linha pontilhada. Você vai notar no meu painel Camadas aqui, bem na parte inferior aqui, ele escolheu tudo o que ele encontrou escondido naquela Camada. Desative a opção “Seleção automática” e dê uma manobra só para ter certeza de que tem tudo o que precisamos e nada que não tenha. Então eu vou para Editar, Desfazer ou Editar, Passo para trás e colocá-lo de volta onde estava. Agora sei que está tudo no lugar certo. Tudo o que você faz é clicar neste botão “Grupo”. Photoshop é muito inteligente, e ele coloca todos eles em um pequeno grupo agradável. O Grupo acabou acima da nossa Navegação, mas isso é algo que podemos consertar depois. Chamamos isso de “Caixa de Herói”. Esse é esse. Vou desligá-lo no momento. A próxima coisa que vou fazer é selecionar a Navegação. Vou ligar minha “Seleção automática”, pegar tudo aqui, e você verá que escolheu esses três elementos aqui, o que é perfeito. Se eu desligar “Auto-Select” e dar um movimento, só para ter certeza que tem tudo o que eu quero e nada que eu não tenho. Aperte o botão “Grupo”. Vamos chamar essa caixa de navegação. Vou arrastá-lo acima desse cara. Arrastei-o para isso. Então tenha cuidado quando estiver arrastando. Eu arrasto isso, você pode ver a pequena linha correndo ao redor do lado de fora? Isso vai arrastá-lo para dentro da minha caixa de heróis. O que eu quero fazer é realmente arrastar para cima, e você verá a diferença. Vê aquela pequena linha que aparece entre eles em vez de sobre eles? Isso significa que está logo acima. Vou desligar os dois. Agora eu vou pegar minha ferramenta novamente, selecionar esses dois caras. Escolheu tudo o que preciso. Agrupe-os. Esta vai ser chamada de Box, e esta era a nossa caixa de quem somos. Vou desligá-los agora. Vamos desligar esse. Agora estamos na página Nossos Serviços. Eu vou pegar a mesma ferramenta, Auto-select on, selecioná-los todos. Gosto de desligá-los. Dê um movimento. Certifica-te de que são tudo o que escolhemos, nada que não tenhamos. Então, agrupe-os. Este é o nosso Serviço de Caixa. Selecione automaticamente, pegue todos esses caras, e então agrupe. Vamos chamar esta caixa, e esta vai ser, Portfolio. Desligue este. Esta é a nossa Equipes 1. Então, todos estes. Desligue isso. Uma boa manobra. Vamos agrupar este. Este vai ser chamado de “Caixa de Equipa”. Equipe, ótimo. Desligue essa, e não teremos mais nada. Temos nosso formulário de contato e rodapé. O que vamos fazer é colocar esses em grupo, este aqui. Se ele não acabar no Grupo, o que você pode fazer é clicar em segurar e arrastá-lo para o Grupo, como eu fiz lá. Este vai ser chamado Box Contact Formulário. Este último, vamos colocá-lo aqui. Vamos arrastá-lo para dentro. Este vai ser chamado de Box, e este vai se chamar, Rodapé. Vire todos esses. Usando as Camadas, desative-as. Você verá esse cara, um pequeno guarda solitário aqui, que é um Type Layer , mas ele se chama Camada 1. Se houver uma Camada de Tipo e ela for chamada Camada 1, isso significa que há uma Camada de Tipo sem nenhum tipo nela. Então, na verdade, essa coisa não tem propósito no mundo. É algo que eu comecei a digitar, e eu não consegui fazer isso e esqueci e deixei lá. Esse cara aqui é um guarda florestal solitário, então ele não aparece em nenhum lugar nisso. Se tiver uma palavra aqui, será uma palavra escondida em seu documento que você precisa encontrar. Neste caso, vou apagá-lo. Clique em “Excluir”. Você pode ver agora que eu passei e agrupei tudo, torna-se muito mais fácil trabalhar com, especialmente quando começamos a fazer nosso design móvel. Eu posso ativar tudo, e o que eu poderia ter que fazer é brincar com a ordem Camada dependendo de quais camadas elas estão. Vou desligar os meus guias de coluna úteis. Mas tudo o resto está bem empilhado um em cima do outro, e estamos prontos para ir. 39. Encontre o que você precisa rapidamente com a pesquisa de camada: Neste vídeo, vamos mostrar-lhe como usar camadas um pouco mais. Agora, haverá momentos em que você trabalha em um documento e você realmente quer encontrar algo particularmente no documento. Em vez de passar e tentar encontrá-lo através dos itens de pesquisa, o que você pode fazer é você pode usar alguns desses filtros de pesquisa. Alguns desses filtros de camada ao longo do topo aqui. O que você pode fazer é dizer que você quer encontrar tudo neste documento que é digitado, porque digamos que você mudou o corpo pode ser fonte de Roboto de volta para Arial por algum motivo. O que você pode fazer é filtrar apenas as camadas, você vê que estas apenas têm o tipo, e o que eu poderia fazer. Clique na parte superior, mantenha a tecla Shift pressionada, clique no último e suba aqui na minha ferramenta de texto e mude-os todos para Arial. Vou escolher Arial ousada. Agora você vê que tudo é Arial. É uma maneira fácil de fazer isso. Vou desfazer isso porque não gosto da Arial. Então você quer passar e começar a brincar com as cores. O que você pode fazer é você pode clicar sobre este aqui, é apenas um formas camadas. Todos os nossos retângulos aparecem. Digamos que você tem um grupo de coisas que tem uma sombra sobre ele, e que você quer ir e mudar a sombra. O que você poderia fazer é ir a este, ir a uma correção, e usar esta lista aqui embaixo e dizer que tudo o que tem uma sombra apareceu. Eu tenho uma coisa usando o Drop Shadow neste caso. Não tenho nada no meu último painel aqui. Se você chegar a um ponto em que você não percebeu que você mudou isso ou você abriu outro documento e ele tem este efeito de camada aplicado também, o que você pode fazer é apenas virar o interruptor lá para fora. Ele volta ao normal, e você pode ativar e desativar para alternar entre a última pesquisa e tudo de volta ativado. 40. Nomeando suas camadas como um profissional: Uma das outras coisas legais que você pode fazer quando você está trabalhando com o painel Camadas, e você está tentando preparar as coisas para enviar para o seu designer ou desenvolvedor, você pode encontrar muitas vezes em que você tem muitas coisas chamadas de retângulo um ou digite um ou caixa dois e eles não são realmente tão úteis para o desenvolvedor. Mas o que você pode fazer é ir para baixo para os nossos ícones que são os nossos serviços. Vou abrir isso. Digamos que você quer começar a nomear estes, diga ícone um, três e dois. É um vídeo, fotografia, e nosso aplicativo. Vamos descer e fazer o último aqui em baixo. Na verdade, vamos arrastá-lo para fora por enquanto. Vamos levantá-lo para ficar com os amigos dele. O que viemos fazer é uma boa opção para nomear as coisas. Caso contrário, você pode clicar duas vezes em tudo para entrar nele e você pode passar idades fazendo isso. A maneira de fazer isso é tabular entre eles. Vou clicar duas vezes neste, vou chamar este ícone de hífen e vou chamar este vídeo. Eu estou indo para tabulação para baixo, você pode ver fotografia ícone. Em vez de ter que clicar em cada um deles para fazê-lo funcionar, você pode simplesmente ficar entre eles, ok? Ícone hífen. Este vai ser chamado de aplicativo, e este vai ser chamado de impressão de hífen de ícone. Tudo bem. Belo atalho para nomear suas camadas. 41. Criando um formulário para o seu site: Oi. Neste vídeo, vamos ver como iniciar um formulário. Formulários são essencialmente apenas um grupo de retângulos. Neste caso, vamos usar uma ferramenta de retângulo. Vamos puxar um cheio de branco. Agora, a grande coisa para verificar com traços é que, por padrão, eles são definidos dois pontos, que é mais um termo de impressão. O que queremos fazer, é fazer um pixel, ou dois pixels, ou três pixels. Você pode apenas digitá-lo lá em cima do que está lá dentro. Vou desenhar o meu retângulo. Agora, eu vou ligar meus guias para ter certeza de que eles estão dentro de tudo e então eu tenho que ir deste guia externo, sobre sobre sobre o meio. Vou desligar os meus guias e, em seguida, dar uma olhada e ver o que eu acho que são as bordas aqui. Então você pode ver aqui , tem uma borda cinza escuro com um centro branco. Se eu gosto? Sim, está tudo bem. Vou adicionar um texto a ele. Então eu vou pegar a ferramenta de texto. Agora lembre-se, eu não vou clicar dentro disso porque ele vai transformar este retângulo em uma caixa, então isso não é realmente o que eu quero. O que eu quero fazer é clicar fora daqui e este vai ser o meu nome. Vou selecionar tudo e vou torná-lo Roboto. Eu vou torná-lo Roboto light e eu vou torná-lo uma cor cinza escuro aqui. Volte para a minha ferramenta Mover, amplie. Na verdade, ele é grande, então eu vou abaixar para 20 e ficar sentado lá. Agora, as grades estão de volta, vou selecionar o nome e o retângulo. Na verdade, este vai ser o meu nome de formulário, minúsculas. Vou selecionar os dois e vou manter pressionada a tecla “Alt, minha tecla Option”, e eu mantenho e arrasto para baixo. Vou me dar três desses. Este vai ser o nome, este vai ser e-mail e este aqui vai ser o número de telefone. Está bem. Vou fazer com que todos se alinhem no lado esquerdo. Então eu vou ter telefone, e-mail e nome selecionados e eu vou voltar para a minha ferramenta de movimentação e então eu posso usar este aqui, que é alinhar bordas esquerdas, eles devem se alinhar. Ok, eu vou fazer uma das caixas. Vou para a ferramenta de retângulo, certificar-me de que tudo ainda está definido. Vou voltar para a minha caixa branca, vai começar aqui e vai descer para o fundo da minha caixa telefônica. Vou pegar um desses caras, talvez telefone, na verdade, nome porque está alinhado, mantenha pressionada a tecla ALT e arraste-os através de Shift pressionado. Isto está atrás de onde eu preciso que ele esteja, então eu vou arrastá-lo para cima e arrastá-lo para trás um pouco. Na verdade, eu vou mudar isso primeiro e eu vou chamar esta mensagem, ferramenta Mover e movê-lo ao longo para que ele alinhe lá em cima. Tente nomear tudo. Então eu tenho esta caixa que é formulário e-mail, este é formulário telefone e este aqui é chamado formulário mensagem. Em seguida, vou adicionar um botão de envio. Então meu botão de enviar será apenas outro pequeno retângulo. Neste caso, vai para aqui. Vai cruzar três deles. Eu vou dar-lhe uma cor de preenchimento de roxo escuro e eu vou pegar minha ferramenta guia, clique uma vez aqui em baixo. Vou chamar este de submissão. Eu vou torná-lo roboto, mas eu vou fazer este robóto laje ousado. Na verdade, o que usamos aqui em cima? Aqui eu vou pegar minha ferramenta de texto e basta clicar aqui e verificar. Eu peguei meu tipo de ferramenta, deslize para dentro, este era robóto laje 24. Então eu vou fazer o mesmo com este aqui. Pegue minha ferramenta de tipo, clique dentro roboto laje negrito 24 e eu vou torná-lo uma cor branca. Mover ferramenta, arrastá-la para cima se estiver atrás dela, não, está na posição certa. Desliguem os meus guias, fechem isso. Ótima. Há uma pequena caixa de contato e colocá-los todos dentro de seu próprio grupo. Então lembre-se de usar nosso truque, selecionar automaticamente, arrastar uma caixa em todos eles, movê-los todos dentro da caixa de contato. Vire isso, em um off. Aqui estão todos eles. Tudo bem, e é assim que se zomba de um formulário na Photo-shop. 42. Como criar um rodapé para o seu site: Neste vídeo, vamos maquinar nosso rodapé. É bem básico, vamos trazer um grupo de ícones, vamos pegar nosso arquivo, “Place Embedded” e eu tenho esse chamado “Icons-Social”, é um arquivo ilustrador. Vou colocar este aqui. Ótimo, mova-o para baixo, eu vou colocá-lo para que ele alinhe com um dos códigos de coluna aqui. Aumente o zoom para verificar novamente, levá-lo através, pressione “Enter” quando eu estiver pronto. Vou diminuir o zoom. O que eu gostaria de fazer é ter certeza que está no lugar certo. Vou certificar-me de que está dentro da minha caixa de rodapé. Tudo o resto, eu vou fazer as mesmas cores que o meu ícone, então eu vou encontrar meus ícones. Vou selecionar o ícone aqui. O que eu vou fazer é clicar com o botão direito nele e ir para o estilo da camada de cópia. Desce, encontra o meu gráfico e o meu rodapé. Clique com o botão direito nele e vá para o que diz “Colar estilo de camada” e vai ser o mesmo. Adicionar uma última coisa à minha foto, eu vou pegar a ferramenta de texto e eu vou adicionar meus direitos autorais. Vou clicar uma vez e vou colar todos os meus direitos reservados, escolher uma fonte que seja um pouco mais apropriada para nós. Então vai ser Roboto, vai ser médio. Isso vai ser bem pequeno, então vai ser para baixo para 12 pixels. Ótimo, e esse vai ser o meu rodapé. 43. Vídeo de produção — finalizando nossa área de trabalho: Tudo bem, neste último pouquinho nós vamos arrumar tudo. Uma última parte que falta é que aqui em cima, eu ainda não coloquei o meu tipo para quem somos, então eu vou fazer isso. Tenho a minha ferramenta de texto, e vou certificar-me de que estou na caixa certa também. No momento, preciso estar no que diz “Quem”. Uma vez selecionado, se eu clicar uma vez, você notará que minha digitação está dentro dele, é um bom ponto de partida, pelo menos. Ok, este vai ser quem nós somos. Vou escolher o texto. Vou usar o meu Roboto, mas vou usar o Slab, e usar os meus Bolds. Vai ser branco, tamanho, que vai funcionar para mim, minha ferramenta de movimento, movê-los através, desfazer. Eu queria movê-los através de um add meu “Lorem ipsum”. Então eu vou clicar em segurar e arrastar. Este vai sair, eu acho, na última coluna aqui, e vamos para Type, e eu vou colar “Lorem ipsum”. As fontes, obviamente, realmente grande, quando eu uso quatro cliques e transformá-lo para baixo para um tamanho mais gerenciável de talvez 14 pixels. Vou fazer linhas à esquerda, vou escolher o Roboto, vou usar o Regular. Escolha clarear este caso. Ótimo, e isso vai ser tudo para este. 44. Criando o visual do seu site para dispositivos móveis: Neste vídeo, vamos olhar para o design móvel. Provavelmente a parte mais importante quando se olha para a construção de um site móvel é provavelmente a navegação, como você se locomover. Devido ao espaço limitado, você não pode ter menus grandes como nós temos em nossa área de trabalho. Saber qual escolher pode ser difícil. Um site realmente bom aqui é este site exisweb.net. É um link incrivelmente longo, então use o link na tela agora para ir e encontrar todos os links úteis diferentes em todos os lugares. Agora, nós não vamos ter a chance de passar por eles porque há tantas maneiras diferentes de considerar menus móveis. Mas vamos olhar para os grupos principais. Este aqui, onde temos uma coisa chamada hambúrguer ou sanduíche. O sanduíche ou as três linhas horizontais, como você quiser chamá-lo. Essa coisa aqui clica e todo o site muda para a direita, e esse menu aparece. Há outra opção aqui onde eles empilham. Você pode ver aqui, esta é a visualização da área de trabalho, mas quando ele chega ao celular, eles empilham como bons botões grandes uns sobre os outros com alguns outros. Este aqui eu gosto, apenas o hambúrguer por si só quando ele clica, há um menu suspenso dele. Há muitas opções diferentes. Dê uma olhada no site, há uma quantidade louca para escolher. São todos sabores de uma coisa semelhante. A grande coisa a decidir é se vai comer hambúrguer ou não. Como a Smashing Magazine, vimos isso mais cedo. Veja isso, se eu derrubar isso, eles decidiram sem hambúrguer, eles têm essa palavra “menu” e isso é totalmente legal. Mas você pode ver, mesmo no meu plug-in Chrome, eu usei o hambúrguer. Vamos fazer uma pequena acrobacia. Pode ser uma moda. Acho que deve estar por aí para ficar. É um novo ícone agradável para menus móveis. Vamos construir um. O que vamos fazer é começar com o site móvel. Então vamos começar a construir algumas partes dele, arrastando partes da área de trabalho e reconstruindo o menu. O que quero começar é a navegação aqui e a caixa de herói. Selecionei ambos mantendo o comando pressionando e clicando em ambos ou Control em um PC. O que eu vou fazer é clicar, segurar e arrastar, mas segurando a tecla O primeiro, clique e segure e arraste, movê-lo através, obter o mesmo para isso aqui. Alinhem-se. Você vai notar que todos eles mudaram para a minha versão móvel. Vou fazer zoom. Há muito trabalho para consertar isso. Então eu vou ampliar um pouco. O que quero fazer é ter de usar isto. Então eu vou para a minha caixa de navegação e trazer o seu próprio logotipo do laptop. Eu vou atravessar. Não consigo ver porque está deste lado aqui. Mas eu sei que se eu segurar Shift e arrastá-lo para o outro lado, ele vai se mover em uma linha agradável e perfeita. Vai perfeito. Minha caixa de herói precisa subir um pouco. Adorável. Traga seu laptop, ele vai estar lá. Vou movê-lo para cima para ser centrado. Esta navegação, porém, vai desaparecer, porque os serviços simplesmente não se encaixam. Então eu vou desligar isso. Vou desenhar minhas três linhas horizontais. É realmente fácil. Basta usar a ferramenta Retângulo. Certifique-se de que o preenchimento está definido como branco. Vou ter o meu derrame definido para nenhum, e vou desenhar. Você poderia fazê-lo com uma ferramenta Linha, bem como se você quisesse fazê-lo, eu acho que é apenas fácil o suficiente para usar a ferramenta Retângulo, eu faço com que eles se sintam como linhas. É um pouco grande, por isso vou dar um zoom. Você descobre que se você é bom e próximo quando você está trabalhando, torna-se um pouco mais fácil de trabalhar com ele. Se eu estou longe e estou arrastando essas linhas ao redor, eles parecem se encaixar, mas é muito fácil quando se aproxima. Vou segurar o Alt e desenhar o meu hambúrguer. Você pode ver aqui meu guia inteligente está me dizendo que ele está combinando com a distância de cima, de baixo. Ótima. Agora, o hambúrguer é bem grande. Então eu vou selecionar todos eles, transformá-los, e reduzi-los um pouco, talvez torná-los um pouco mais curtos. Então esse é o meu menu de hambúrguer móvel. Ótima. O que eu gostaria de fazer é quando esse botão é clicado, eu gostaria de sobrepor todas as coisas aqui com uma nova tag div lá em cima. Eu vou usar a ferramenta Retângulo, e eu vou desenhar um grande retângulo agradável para o meu menu, e eu vou colocá-lo dentro. Vou dar-lhe uma cor. Vou usar roxo. Agora, vou usar um pouco de transparência. Não há razão para o fazeres, só parece fixe. Então eu vou alterá-lo para 90 por cento apenas para que você possa conscientizar, ver as coisas por trás dele, então, quando ele desliza para baixo, você sabe que ele pode ser potencialmente backup de slides e não é uma página nova. Vamos olhar para fazer alguns nomes. Vamos colocar meu laptop no menu de navegação. Este vai ser navegação em caixa. O que vou fazer é começar um segundo. Este vai ser chamado de Mobile Dropdown. Vou manter tudo separado. Vou pegar a ferramenta Retângulo. Esse é o meu retângulo? Isso é para cima. Eu o coloquei lá. Vou pegar esses três caras. Esses caras aqui são meu menu de hambúrguer. O que vou fazer é agrupá-los ou ligá-los. A maneira mais fácil de fazer isso é clicar com o botão direito do mouse neles e convertê-los no que é chamado de objeto inteligente. Então eu vou renomeá-lo, eu vou chamá-lo de Menu Burger. Vou deslizar isso para o Mobile Dropdown. Ótima. Agora, eu tenho isso, eu tenho isso. O que eu vou fazer agora é eu vou trocar meu menu de hambúrguer então eu vou ter dois. Então este é Burger Menu Inactive, e eu vou ter um segundo, que vai ser meu Menu Burger Active. Porque o que eu quero fazer é fazer o que eu fiz neste site aqui. Se eu reduzir isso. Isto é o que eu fiz no meu site na Nova Zelândia, onde eu comprei meu hambúrguer, e eu clico nele e há uma pequena cruz para saber que você pode clicar nele e fechá-lo depois. Então vamos voltar a isso. Ou para criá-lo, eu poderia usar alguns truques diferentes. A maneira mais fácil que eu encontrar para obter uma cruz perfeita é clicar uma vez. Tenha uma vantagem. Eu não uso X porque eles se parecem com Xs, eles não parecem uma cruz. O que eu quero é uma vantagem do seu lado, então eu vou usar mais. Algumas fontes não parecem grandes usando esta técnica porque eles são vantagens bastante estilizadas, então Arial Regular é ótimo para este. O que eu quero fazer é transformá-lo. Então eu vou usar meu Command+T ou Control-T em um PC. Eu vou girá-lo em torno de, digamos, 45 graus. Clique em “Aplicar”. Parece uma bela, boa cruz. Vou escalá-lo um pouco mais, Control-T, torná-lo um pouco maior só para combinar com o meu hambúrguer de navegação. Legal. Eu vou copiar isso e eu vou colar isso aqui. Ele vai estar ativo. O que vai acontecer é que isso vai desligar e eles vão alternar entre si. Na verdade, o que eu poderia fazer para deixar mais claro para o web designer é que eu vou colocar o menu de hambúrguer na própria navegação, então quando as pessoas ligam e desligam isso é lá atrás e esse cara está na frente. A próxima coisa que preciso fazer é adicionar os carrapatos. Então eu vou pegar minha ferramenta Tipo, e eu vou clicar e arrastar uma caixa para fora, e eu vou digitar minha parte. Vai ser SERVIÇOS, eu vou fazer isso em maiúsculas. Eu vou fazer Portfolio, eu vou fazer TEAM, e eu vou fazer CONTACT. Vou selecioná-los todos, mudar a fonte, arrastá-lo para baixo. Vou usar o meu Roboto. Vou usar o Roboto Light. Agora, o que você quer fazer é ter certeza de que há espaço suficiente entre essas palavras. Você não quer que as pessoas clicem em um e, inadvertidamente, clicando no outro. Então, um bom espaçamento entre linhas é ótimo. O meu tem por padrão porque eu já tenho brincado com ele. Se você pegar a ferramenta 'Tipo' e selecionar tudo, o que você quer procurar é, vamos clicar neste ícone aqui, trazer seu painel 'Caractere'. Esta opção aqui, o seu provavelmente está definido como Auto, que é 28. Provavelmente vai ser cerca de 30 em termos de espaçamento entre linhas. Vou aumentar o meu para cerca de 60. Dependendo do tamanho da fonte que você está usando, que tipo de fonte, depende de você. Agora, isso vai funcionar para mim. Na verdade, talvez até um pouco maior até 70. Só para que haja uma grande lacuna entre eles, para que os dedos grandes e gordos possam clicar neles realmente facilmente. Esta vai ser a minha lista de navegação. Adorável. Essa vai ser a minha navegação suspensa. Agora preciso passar e transferir todas as coisas que tenho feito na área de trabalho e fazê-las funcionar em dispositivos móveis. Faremos isso no próximo vídeo. 45. Vídeo de produção — completando nosso visual para dispositivos móveis: Neste vídeo, vamos estar aqui por um tempo, porque vamos traduzir tudo do nosso desktop para o nosso celular. Você pode estar construindo dispositivos móveis primeiro, você pode estar fazendo o oposto, descompactando-o, dando espaço para trabalhar e usar em um desktop. Estamos fazendo isso ao contrário. Eu movi meu primeiro bloco ao longo, que é chamado de navegação caixa e caixa herói. Eu vou me livrar da cópia, e eu vou começar a trabalhar neste aqui. Há muito alongamento que vai acontecer, há alguns tamanhos de fonte que eu vou ter que brincar com, e algum alinhamento para fazer. Vamos entrar nisso. Vou ampliar, “Control Plus”, usar minha barra de espaço para me mover, talvez eu tenha ampliado um pouco demais. Ótima. A primeira coisa é, eu vou usar vamos fazer isso acontecer, pegar o tamanho da fonte e arrastá-lo para baixo. Isto está tudo bem. O que eu poderia fazer é fazê-lo quebrar em duas linhas, na verdade, porque está ficando muito pequeno lá. Eu vou selecioná-lo, trazê-lo de volta para o nosso tamanho de fonte, ele vai quebrar para baixo quando ele está no celular. Este pedaço de Lorem ipsum precisa descer e precisa obter muito. A caixa precisa ficar muito menor para caber neste obstáculo nas laterais aqui. Vai quebrar para cinco linhas, tudo bem. Dimensionamento da fonte, eu vou deixar como está, ele está definido para 16 pixels, que é uma fonte grande o suficiente. Quando você está lidando com o tamanho da fonte em dispositivos móveis, você precisa realmente testar. Mas como um palpite, seu é quase tão pequeno quanto eu quero ir, e 16 é uma fonte bastante grande, mas bastante legível. Porque isso é mais tipo de vendas leva, é feliz por ser esse tamanho pequeno, então eu vou torná-lo apenas um pouquinho pequeno. Minha caixa mais vai ter que descer e todo esse contêiner vai ter que ficar maior. Tenho duas partes para fazer. Tenho a minha caixa, que é a base debaixo da minha passagem de recorte. Eu fecho-o, para facilitar. Vou fazer isto maior primeiro. Você verá que é realmente muito fora dos lados das páginas. É com você. Realmente não importa para a nossa simulação, mas só para tornar tudo menos utilizável, eu vou arrastá-lo para dentro e vai ser sobre isso muito maior. Você pode ter que redimensionar a imagem de tijolos também ou reposicioná-la dependendo de onde você deseja que ela esteja ou reduzi-la. Eu usei “Control T” e vou reduzi-lo para caber. Você pode ver um pouco mais. Você notará que o borrão desapareceu, mas quando eu clicar em “Enter” o borrão voltará, eventualmente. Estou ampliando. Eu vou mover os dois, eu estou segurando “Shift” para clicar em ambos, e movê-los ao redor. Essa vai ser a caixa do herói movida. O próximo tem a ver com a caixa de cabelo. Eu vou agarrá-lo, segurar “Alt” enquanto eu estou arrastando para o outro lado, movê-lo para o outro lado. Onde vou posicioná-lo? Vou começar para poder ver tudo. Vou enfiar no fundo, na caixa do herói, vou dar zoom. Como é que vou fazer isto? O que você vai ter que fazer é tomar algumas decisões difíceis quando se trata de dispositivos móveis. O que vai fazer para uma grande experiência? Para mim eu decidi que eu vou me livrar da cópia e eu vou decidir que realmente esses dois se foram, que é o retângulo e a imagem que fica no topo dela. Só vou usar quem somos e o Lorem Ipsum lá. Quem somos precisa ficar menor, pegar minha ferramenta de texto clique aqui, eu vou selecionar tudo, e trazê-lo para baixo, este, pegar este. Mova-o para dentro e eu agarro o “Lorem Ipsum” movê-lo para dentro, usar a minha ferramenta de texto para encolher os lados. Quão perto da borda você quer chegar? Só estou fazendo sobre eu, quem somos, aquele estofamento. Vai funcionar para mim. Agora esta caixa vai ter que ficar um pouco menor ou ele está lá. Aqui está a minha ferramenta de transformação e o que posso fazer é fazer o que fiz na outra caixa. zoom e diminua para que seja um pouco mais apropriado. próximo que vamos fazer é a caixa de serviços. Vou encontrar a minha caixa de serviços, ali está ela. Eu vou diminuir o zoom e eu vou para “Alt”, arrastá-lo através. Começa o meu focinho. Não importa por onde você começa. Aqui vamos nós. Temos muito o que fazer neste aqui. Vou pegar aquela caixa roxa. Então é chamado de serviços de caixa e uma transformação. É ótimo. Nós vamos ter que fazer algumas coisas para esses ícones. Primeiro de tudo, eu quero que os ícones se empilhem um sobre o outro, então eu trabalho no texto. Todos os meus ícones, lá estão eles. Agora, estas pequenas caixas aqui, eu vou para baixo só para fazê-las arrumadas. É a sobreposição de cores, por isso vou continuar com sarja. Só significa que parece um pouco mais bonito todas as minhas camadas. Vou selecionar todos eles. O que eu poderia fazer primeiro é reduzir um pouco. Vou usar a minha ferramenta de transformação. Quão grande? Provavelmente é muito pequeno, porque quero empilhá-los um em cima do outro. A fim de ser mais ou menos bem ali. Clique em “Enter”. Agora o que eu vou fazer é, você pode ver que minhas palavras são voadas em todo o lugar em termos de meu documento. Onde estão todos eles? Há um ali, há um ali. É porque eu estava arrastando-os, arredondados para cima em diferentes pranchetas e esse é um dos problemas comuns com seus novos sistemas de prancheta. Cuidado sobre o que você tem que fazer é arrastá-los novamente, basta levá-los de volta para o mesmo lugar. Veja isto. Eu só vou arrastá-los de volta para onde estava e todos eles voltam. Eu tenho minha impressão digital, eu tenho meu aplicativo lá e meu vídeo de minutos de fotografia. Então o de cima vai para lá, depois o de baixo, e o de fotografia, onde ele está? Ali está ele, ali. Volte, e depois o vídeo, onde está ele? Lá está ele ali. É muito bom estar tão longe quando você está arrastando ícones que eu posso um pouco perdido na prancheta porque você percebe antes se eu desfazer isso, quando eu comecei a arrastá-lo, ele apareceu lá em cima e se você ampliou para perto, você nunca vai vê-lo e você nunca vai saber para que caminho arrastá-lo. Apenas alinhando-os, eu vou imprimir vai estar lá e eu vou pegar todos esses caras e há uma opção aqui que diz alinhar, todos alinhados. Mude os centros de distribuição, há esta opção aqui. Agora, ele nunca funciona perfeitamente distribuir centros. Você sente que se eu ampliar, para mim parece que essas lacunas são iguais, mas este aqui é muito maior. Mesmo que tenha feito isso, vou torná-los um pouco maiores. Vou fazer um vídeo, derrubá-lo. Vou à Fotografia, derrubá-lo. Vou levá-lo para baixo usando meu teclado e o aplicativo usando o toque também. Agora vem o carrapato. Vou manter a impressão digital. Eu decidi neste caso que o Lorem ipsum aqui embaixo, o texto será realmente pequeno demais para ser utilizável neste campo. Eu vou usar os bits de alto nível de texto, então Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, eu vou para o bin. Então eu só vou usar esses quatro e tentar colocá-los todos na tela, eu vou alinhá-los à esquerda. O que eu vou fazer é imprimir, mover para cima, para cima, para lá. Fotografia, mover para baixo, vídeo mover para baixo, e mudar o tamanho. Eles são praticamente determinados por esta fotografia, que é o maior da gangue e ele fica pendurado no lado. Vou fazer algumas coisas. Vou selecionar todos eles. Em seguida, através de um pouco, eu quero pegar todos os meus ícones. Empurrando-os um pouco. Voltando para a minha impressão, esses caras, atravessando, e eu vou agora pegar minha ferramenta de texto. Porque eu tenho o mais selecionado, eu vou ser capaz de mudá-los todos da mesma forma. Vou clicar e “Segure e arrastar” e vou certificar-me de que estão todos alinhados à esquerda. Volte para a minha Ferramenta Mover, alinhe-os novamente à esquerda. Voltarei à minha Ferramenta de texto e escolherei um tamanho de fonte. Na verdade, de volta à minha ferramenta de movimento, mova-o para o outro lado Isso é sobre mim para os tamanhos. Estou feliz com isso. É no quê? Vinte e três pontos e tudo se alinha. Tudo se encaixa, é agradável, distâncias claras entre eles para ser capaz de tocá-los, para saltar para as páginas de serviços. Em seguida, vai ser portfólio. Agora, vocês notarão na minha área de trabalho, eu tenho um grande conjunto de portfólios. Temos oito quarteirões diferentes. O que eu vou fazer é que eu vou esconder metade deles quando ele é feito para celular para dar uma boa idéia do que fazemos, mas não ter esta página de rolagem apicamente porque eu vou ter uma caixa em empilhados em cima do outro. Você poderia tentar fazer dois. Eles podem ser bastante pequenos, eu prefiro neste caso fazer um. Eu só vou ser quatro em cima um do outro e excluir os outros quatro. O que vamos fazer é movê-los para cá. Primeiro de tudo, o que eu vou fazer é, em vez de arrastar todo o grupo deles através, eu vou arrastar um de cada vez para torná-lo um pouco mais fácil para mim mesmo. Este aqui está, na minha área de trabalho, isto está sob o meu portfólio. A primeira coisa que vou fazer é estar no fundo aqui. É isso aqui, o portfólio da caixa que é essa caixa colorida no fundo em espera “Alt”, eu arrasto para o outro lado, coloco alinhado, transformo para colocá-lo lá dentro. Você notará que minha visualização móvel é muito curta, então vou pegar minha Ferramenta de prancheta e clicar nela uma vez. Se isso não funcionar, você tem que conseguir a vantagem. Se isso não funcionar, basta clicar na “Lista de alto nível” aqui na navegação, arrastá-la para baixo, porque o quão grande isso vai ser? Provavelmente vai ser um pouco mais longo do que a minha visualização real da área de trabalho. Quando terminar, basta voltar para a Ferramenta Mover. Quão grande deve ser esta caixa colorida? Provavelmente muito tempo. Vai caber todos os meus portfólios lá dentro. Vamos subir, o que fazemos é o portfólio 1, eu vou arrastá-lo através, então eu selecionei a caixa abaixo e a imagem que é cortada para ele. Vou manter a tecla Alt pressionada e arrastá-la. Esse é aquele cara. Eu vou pegar dois e eu vou segurar “Alt”, arrastá-lo através. Ainda não os escalei, vou tentar fazê-los todos ao mesmo tempo. Pegue três, eu vou arrastá-lo e depois quatro, eu vou arrastá-lo para o outro lado. Estão todos aqui. Agora o que precisamos fazer é transformá-los todos para serem do mesmo tamanho. Eu selecionei todos eles aqui e eu clico no “Inferior” e eu mantenho “Shift: e clique no “Top um” e ele empilha tudo no meio. Vamos usar a ferramenta de transformação e manter a tecla I “Shift” pressionada para ter certeza de que está tudo perfeito. Vou levá-los a um tamanho. Parece que vai caber, por aí. Ao redor. Está bem. Agradável e grande para caber na visão móvel. Então agora eu só preciso alinhá-los todos. Então eu vou pegar o número dois, e zoom, e espero entrar para encaixar juntos ou pelo menos centrado na linha. Pego o portfólio 3, prestes a ser centrado, e a mesma coisa com o portfólio 4. Óptimo, vou certificar-me de que isto é um pouco mais curto para que se encaixe em tudo. Tenho-os movido mecanicamente. Se você quiser juntar-se a eles para que você possa fazer coisas como centros de distribuição, porque se eu selecionar todos esses e distribuir centros, isso não vai fazer o que queremos. Desloca as caixas separadas das imagens. Então, o que você precisa fazer é selecionar cada um deles, clique com o botão direito do mouse neles, ou se você estiver em um Mac ou um MacBook Pro sem clique com o botão direito do mouse, controle inteiro no teclado e clique neles, e vá para Converter em Objeto Inteligente, e cola-os juntos. É como agrupamento, mas o que você pode fazer mais tarde se quiser separá-los novamente, clique com o botão direito do mouse e há um que diz Editar conteúdo, e o que acontece é assistir ao Photoshop, editá-lo. Abre uma conta separada com esses dois caras sozinhos. Isso pode ser um pouco confuso quando você é novo, então só talvez você use objetos inteligentes quando você é um pouco mais experiente com o Photoshop. Converter para Objeto Inteligente e esses caras, Converter para Objeto Inteligente, e próximo passo, ótimo. Agora eles estão unidos no núcleo, posso usar os centros de distribuição. Vejamos a próxima parte, que são as nossas equipas. Então eu vou trazer estes para o outro lado. Eu vou realmente trazer a coisa toda através da caixa de equipes, e eu vou arrastá-lo através, segurando Alt e trazê-lo todo o caminho através do Mobile View. Vou começar com este primeiro. Então, na nossa caixa de equipe, o que eu poderia fazer é agrupar todos esses caras. Então eu seleciono todos, eu vou para o Grupo, e este aqui é o meu Portfólio Box. Certo, cópia da Equipe Box. Livre-se da equipe com o TOC, e aqui temos e pegamos o Desenvolvedor John Smith e seu rosto. Então, há nossa equipe do círculo, Círculo 2. Acho que é só o cara. Ótimo, eu não vou redimensionar isso porque ele se encaixa bem no Mobile e embora eu vou ter que fazer a página ainda mais, mas lembre-se de clicar na borda e, em seguida, diminuir o zoom e eu vou torná-lo realmente grande. Volto para a ferramenta Move e o que quero fazer agora é encontrar Jane, a designer, Jane Smith, e ela era a equipe três. Traga-a para o outro lado, e lá vai ela , zoom, e faça-a no meio. Ok, parece que deixei de fora o texto para o nosso homem aqui, então onde ele está, ele é John Smith. Onde está o texto? Traga-o aqui. O que eu poderia fazer é tornar o texto um pouco, eu acho. Então estamos presos com Daniel sendo o mais longo. Então você, Jane Smith e John Smith, e eu pegamos minha ferramenta Tag e as arrasto um pouco maior. Isso funciona, Daniel ainda se encaixa lá. Então vamos para Designer, Desenvolvedor, Fundador, vamos talvez fazer até 20, apenas torná-lo um pouco mais legível em dispositivos móveis, e depois pegar todas as alças do Twitter, vamos pegá-lo de 17, vamos colocá-lo. Não 204 vamos apenas fazer 24. Corrigir ferramenta Mover, toque nele um pouco, apenas torná-lo um pouco mais fácil para o celular. Ótimo, tudo está em suas caixinhas. Vamos dar uma olhada no nosso Formulário de Contato. Então, eu vou selecionar Formulário de contato nesta exibição superior, e zoom out, segure Alt, arraste-o através. Vou começar com todos esses caras. Pegue a caixa verde. caixa verde precisa ficar maior e esta larga. Agora todos esses caras, então há Nome do Formulário, E-mail Formulário, iPhone Formulário, Vou transformá-los e ampliá-los um pouco. O que eu poderia fazer é cruzá-los só para usarmos o máximo de espaço que pudermos. Eu selecionei todos eles, eu transferi todos eles em um grande movimento, isso significa que todos vão se alinhar e depois se preocupar até Form Message. Então eu vou ter que pegar o Form Message, arrastá-lo para baixo. Certo, transforme-o, faça com que ele se alinhe com esses caras, pegue o Message. Ele está por aí em algum lugar e lá está ele, faça com que ele se alinhe com esses caras. Estes estão provavelmente um pouco longe demais para a esquerda agora. Então eu vou pegar você, e-mail, nome, telefone e deixar você em frente. Lá vai você. A última coisa é este botão Enviar, eu esqueci de nomeá-lo e este vai ser o meu Botão, eu agarro o Enviar, eo que eu poderia fazer para este é apenas torná-lo a largura total. Então, selecionando apenas o botão, torná-lo mais amplo. Enviar botão através, encolher para baixo a parte verde, impressionante. Esse vai ser o meu formulário. A última parte é o Rodapé. Quando eu diminuir o zoom, eu tenho meu rodapé aqui. Então eu vou pegar o rodapé, onde ele está, lá está ele. Alt, arraste-o para o outro lado. Vou começar por esse lado, porque há pequenos ícones lá. Pegue esses ícones, mova-os para o outro lado, ótimo. Faça o rodapé um pouco mais alto, traga isso para que não seja tão largo. Seja o que for, temos ícones sociais e havia algo mais lá é a privacidade e peças. Então eu amplio, ótimo. Então eu poderia quebrar isso em duas linhas, e tornar a fonte um pouco mais legível no celular. Isso provavelmente é muito grande, vamos apenas fazer 16, não é super importante. Vamos descer para um tamanho melhor. Transforme meu rodapé e faça-o no tamanho certo. Agora vamos colocar minha prancheta dentro, entrar na prancheta, e apenas fazê-lo encaixar para o fundo lá. Voltar à Ferramenta Mover, clique em outro lugar. Veja o pequeno pedaço de linha branca lá, eu vou tocar isso para cima, excelente. Essa é a minha versão móvel. Agora esta é uma simulação muito rápida do nosso layout móvel. Agora este vídeo é realmente uma forma de fazer uma versão móvel. Agora, se você quiser ver por que você constrói coisas diferentes em dispositivos móveis versus desktop, você quer começar a olhar para o mundo de desenvolvimento da experiência do usuário ou design de UX. Você também tem que começar a trabalhar com o site e prototipá-lo para que você possa ver como ele realmente se parece em um site. Uma coisa é projetar no Photoshop, e outra é vê-lo trabalhando em um dispositivo móvel e nos diferentes tipos de dispositivos móveis. Se é um Huawei G7 realmente grande como eu tenho, ou um dos pequenos mini Samsung que estão por aí. Você precisará brincar com ambos para se certificar de que seu site é realmente utilizável. A última coisa que vou fazer antes de sair desta versão é, vou arrumar minhas pastas. Então eu tenho meu rodapé, ele deve estar lá dentro. Meu botão Enviar deve estar em que, que deve estar dentro do meu formulário de contato, e há todos os meus botões com meu menu suspenso móvel que podem ser ativados e desativados. Tudo bem, isso é tudo para este vídeo. 46. Exportando suas imagens para a web: Agora, neste vídeo, vamos ver como tirar suas imagens do Photoshop para que você possa entregá-las ao desenvolvedor para começar a criar o site. Agora, o que eles vão querer são algumas imagens prontas para a Web, não apenas o grande arquivo do Photoshop. Se o seu desenvolvedor usa o Photoshop, então potencialmente você pode simplesmente entregar este PSD e deixá-los para ele. Mas muitas vezes é o papel do designer deixar as imagens prontas para a web. Existem praticamente dois formatos com os quais vamos trabalhar. Vai haver um JPEG e um PNG. Agora, essencialmente JPEGs são ótimos para fotografias e PNGs são realmente ótimos para qualquer tipo de ícones lineares, logotipos, carrapatos, esses tipos de coisas. É razoavelmente fácil saber qual deles usar porque se resume ao tamanho do arquivo versus qualidade. Se ele parece ótimo e é pequeno, então você deve estar usando esse formato. Você verifica ambos, JPEG versus PNG, vê qual é o menor, vê qual é o melhor e, em seguida, usa isso. Estamos usando um novo recurso no Photoshop CC 2015. Se você estiver usando uma versão anterior, você terá que usar algo chamado Ferramenta de Fatia. Mas porque estamos usando a versão mais recente, vamos usar essa maneira extravagante chamada Export As. Para fazer isso, vamos olhar para fazer esta imagem primeiro. Entrou nas minhas camadas, há uma imagem sentada em cima da caixa. Não importa qual deles você exporta, seja a caixa ou a imagem, ele funcionará para ambos. O que vamos fazer é clicar com o botão direito do mouse nele e vamos descer para este que diz Exportar As. Quando chegamos no topo quando sabemos que é um PNG, podemos usar Quick Export, mas no momento, eu sei porque é uma imagem, vai ser um JPEG. Então vamos obter Export As. Então ele me diz o tamanho e me diz que, como um PNG, este vai ser definido em 76 kilobytes e isso é bem grande. Então você tem uma escala relativa. Uma vez que você começa a chegar perto de 100, isso é muito grande para uma imagem deste tamanho. Então, quando você está em 100 kilobytes, você está muito acima do que deveria ser. Então, o que podemos fazer é mudá-lo para JPEG. Então você tem esse controle deslizante de qualidade. Muito raramente ele sai em um 100 por cento. Você quer arrastá-lo para baixo até que você tenha esse equilíbrio de que é muito pequeno em termos de tamanho de arquivo, mas quase não há degradação perceptível da imagem. Então o que você faz é arrastá-lo direto para algo tolo. Então estamos a menos de 15 por cento e é difícil saber, é bom? É ruim? O que eu gosto de fazer é clicar aqui em cima e clicar de volta para baixo e decidir o quão baixo você pode ir. Agora, neste caso, pode ficar bastante baixo porque a imagem em si é bastante barulhenta e é preto e branco. Podemos fugir com um monte de baixa qualidade, mas você pode ver o tamanho se tornando bastante baixo. Então, quando está acima de 100, está em um razoavelmente bom 38 kilobytes, mas eu posso obtê-lo muito mais baixo. Agora minhas regras, eu fico lá entre 30 e 60 dependendo da imagem. Este pode ir muito baixo porque é bastante barulhento, então em 30% de sua qualidade original estamos em 12 kilobytes e isso é um bom tamanho para mim. Vou para a Exportação. A última coisa que você precisa fazer é quando você está exportando isso, eu vou bater esta pequena opção aqui para que eu possa ver, eu vou colocá-lo na minha área de trabalho. Vou colocá-lo em uma pasta especial chamada Web Ready Images que eu fiz. A outra coisa que você precisa saber que quando você está nomeando suas imagens, é que você precisa ter certeza de que não há espaços, e você precisa ter certeza de que você não usa nenhum dos caracteres loucos que estão ao longo do topo do seu teclado. Então, basta mantê-lo em números e letras, e certifique-se de que não há espaços. Eu vou para Export, e esse é o meu JPEG fora. Agora podemos nos mover, digamos que é o meu portfólio aqui. Realmente não importa qual dessas duas caixas eu selecionar, mas eu posso clicar com o botão direito do mouse e dizer Exportar como e espero que ele se lembre do que eu fiz pela última vez, então 30 por cento. Você pode ver, neste caso, 30 por cento não é bom para mim. Se eu arrastar até 100, pode ser difícil ver no vídeo que você está assistindo, a menos que você esteja em HD. Mas a 30 por cento, não é ótimo. Assim, imagens diferentes permitirão que você vá mais alto e mais baixo dependendo da qualidade deles e o que as coisas neles. Então, eu disse que eu vou até um máximo de 60, neste caso eu poderia ir um pouco mais alto porque o trade-off é, você pode ver aqui em baixo [inaudível] a 5 kilobytes é algo que é muito pequeno. Então eu vou para Exportar, e isso vai ser Portfólio 1. Pegou o nome da Camada. Então, quando você está nomeando suas camadas e você deseja economizar algum tempo mais tarde é usar hífens em vez de espaços. Gosto de usar letras minúsculas. Realmente não importa quando se trata de web design, mas eu gosto de ser consistente. Pressione Exportar. Então esse é aquele e você pode passar, exportar este. Agora o que você pode fazer é exportar lotes ao mesmo tempo. Então eu vou clicar em Portfólio 2, 3 e 4, clique com o botão direito do mouse, vá para Exportar como e o que vai acontecer é que ele irá ladrilhá-lo neste lado esquerdo aqui. Então você tem este selecionado, 70% é bom, é pequeno, este aqui, este acaba em 7 kilobytes. Consegue ver a diferença? Eles são do mesmo tamanho, mas há um monte de conteúdo diferente acontecendo nesta imagem. Muito mais cores e variações de cores diferentes. Então, este é muito maior e você pode ser capaz de ir um pouco mais baixo em termos de qualidade. Dependerá da sua imagem, então podemos esperar por eles. Este parece ótimo. Este parece bem. Aquele parece bem com 40, talvez não, 60. Nós vamos clicar em Exportar, e o único problema com isso é que nomeá-los, ele vai despejá-los todos nesta pasta sem colocar nossos hífens pequenos e então podemos fazer isso mais tarde. Então ele os exportou. Eu estou indo para ir e encontrá-lo em minhas imagens desktop e web pronto, há Portfolio 1, 2 e 3. Você economizará muito tempo mais tarde usando minúsculas se quiser e certifique-se de que há hífens em vez de espaços, ou você pode usar sublinhados, isso realmente não importa. Agora o próximo formato que vamos olhar é PNG. Então o formato PNG é usado quando há uma de duas coisas acontecem, que há gráficos realmente planos como esses ícones, coisas agradáveis como ícones, fontes e logotipos, qualquer coisa que tenha design realmente estético e plano para ele sai muito bem como um PNG. Os PNGs têm uma maneira muito boa de manter bordas agradáveis e nítidas em tamanhos de arquivo realmente pequenos. O outro benefício de um PNG é que ele usa transparência enquanto um JPEG não usa. Então eu quero que esses ícones aqui sejam transparentes para que eu possa mudar a cor de fundo assim e ainda seja transparente. Então eu posso passar, mudar a cor de fundo e há buracos no meio daqui para mostrá-lo através. Se eu usar um JPEG, ele não me permite fazê-lo, ele tem que ter uma cópia de fundo sólida alterada. É o mesmo aqui para estes gráficos aqui. Mesmo que houvesse uma imagem e eu dissesse, “JPEGs são ótimos para imagens”, neste caso, eu vou ter que levar o hit no tamanho do arquivo para ser um pouco maior porque eu quero fundo transparente e vou mostrar o porquê. Este é um bom exemplo para mostrar a vocês. Então eu vou encontrar a Equipe 1, eu vou clicar com o botão direito do mouse nele e há Quick Export como PNG. Agora, quando você é novo, você não tem certeza se deve ser um PNG ou não, você pode usar o Export As que é o caminho um pouco longo. Então eu tenho o formato JPEG e você pode ver em JPEG que a qualidade, alterá-lo para algo como 70, a qualidade é o que, 10 kilobytes, agradável e pequeno, mas tem este fundo branco. O JPEG não permitirá transparência, não está em sua maquiagem. Então vamos ter que fazer um PNG e temos dois tipos. Há PNG 8, que é bom e este tamanho de arquivo é bastante pequeno, mas a paleta de cores real que ele pode usar é realmente muito pequena, é apenas 256 cores. Então, se você quiser usar um PNG colorido você tem que usar este aqui em cima, que é chamado de PNG 24. Mesmo assim eu escrevo lá. Então PNG 8 versus PNG 4. Você verá que o tamanho do arquivo é substancialmente diferente. Este aqui, até PNG 24. Isto é realmente grande. Mas este é o trade-off de ter transparência, JPEGs são realmente pequenos, mas gráficos eles têm que ter fundos transparentes e ter que usar full-color, tem que usar este PNG aqui. Então eu vou usar PNG em cores completas, Exportar e Equipe 1, clique em OK. Então eu deveria trabalhar e fazer o mesmo para as outras duas cabeças e o resto das imagens aqui, vamos olhar para fazê-lo para este ícone ao longo do topo, e seria exatamente o mesmo processo de exportar esta imagem ao longo da parte inferior Aqui. Tenho o meu ícone, e sei que isto tem de ser um PNG. Por quê? Porque ele precisa de fundo transparente que padrão torna um PNG, e é um gráfico plano agradável, o que significa que vai ser bom e pequeno. Botão direito. Eu poderia usar meu Quick Export como P&G agora porque eu sei vai ser um PNG porque é gráficos planos que precisam de transparência, é definitivamente um PNG. Então eu vou apertar Exportar como PNG e eu vou direto para aqui e eu vou colocá-lo na minha área de trabalho sob meus gráficos prontos para web e eu vou colocá-lo lá. Agora eu vou apenas trabalhar através dos diferentes ícones e dizer Exportar como PNG, vamos dar uma olhada rápida no tamanho PNG. Então você pode ver este aqui, 90 kilobytes realmente grande porque é PNG tentando fazer o que JPEGs fazem. Mas você pode ver PNGs com transparência fazendo o que ele faz bem, ver que é baixo para 2 kilobytes agradável e pequeno. Estes são os tipos de gráficos que você precisará entregar ao seu desenvolvedor web para criar seu site. 47. Exportando o CSS do photoshop: Neste vídeo, vamos ver como tirar algo chamado CSS do seu documento. O desenvolvedor da web vai dizer: “Que cor é essa? Que tamanho é este? Que tipo de letra é? Qual é o espaçamento entre as linhas?” Você pode ir adiante com a ferramenta de texto e escrevê-los todos e explicar o que eles são todos. Uma boa coisa útil que você pode fazer para torná-lo um pouco mais fácil para eles é exportar o CSS. Agora, digamos que eles querem saber que tipo de letra é e qual é o tamanho da fonte. O que podemos fazer com o meu cursor, aqui está, aqui estamos. O que eu selecionei é um aqui que diz Copiar CSS. Se eu copiar CSS, nada parece acontecer. O que ele é feito é que ele copiou e para a sua área de transferência como você entrou na cópia. Agora você pode abrir, e [inaudível] em uma palavra ou verificar em um e-mail e pressionar colar. O que é feito é que ele criou esta classe ao longo do topo lá, que provavelmente não precisamos. Ele tem todas as coisas importantes como tamanho da fonte, família da fonte, cor da fonte, o peso da fonte, as alturas da linha com o centrado. Este tipo de coisa, posição, esquerda, topo, enviá-lo para desenvolver de qualquer maneira. Eles provavelmente vão ignorar tudo isso. Se você é web designer, você só vai saber o que escolher e o que você não precisa. Agora eu posso explicar ao meu desenvolvedor web que o texto do título do herói é este. Eles poderão usar suas habilidades mágicas de web design para estilizar o texto e fazer com que ele corresponda exatamente à sua maquete do Photoshop. Vamos olhar para fazê-lo cheio algumas das partes estruturadas. Eu gosto desta caixa de navegação no topo, porque o que precisamos é talvez a altura e precisamos de que cor é e qual é a transparência Alfa, ou a opacidade é. Vou selecioná-los como minha barra de navegação. Eu vou para a camada, eu vou para Copiar CSS, e eu vou saltar para o bloco de notas. Esta vai ser a minha barra de navegação. Vou bater em Paste. Há pedaços que eles vão ser capazes de usar e bits que não são. Se você não é um web designer e não tem idéia do que é esse lixo, basta enviar todo o lote e eles podem escolher através dele. Sei que não precisamos da classe, e usaremos a cor de fundo, usaremos a opacidade, mas não precisamos de nada disso, mas precisamos da altura. Essas são as coisas que eu provavelmente estou procurando como um web designer que eu preciso ir e estilo para ter certeza que é o mesmo, e então ele faz um monte de adivinhação fora de mim como um desenvolvedor web para dizer, “É sobre essa altura e é sobre essa transparência”, e para enviá-la de volta para você como o projeto para você voltar e dizer, “Ei, não é o certo, e o que é isso toing e sapo?” Isso ajudará a remover muito disso. Esse é um dos novos recursos e o Photoshop CC. Se você estiver usando CS6 ou CS5, infelizmente, não é um recurso para você. Você vai ter que fazer muito mais do toque e sapo e digitando e explicando o que é a fonte, qual é o tamanho da fonte, cor é, que opacidade é, e etiquetando isso para eles, ou se eles têm alguma habilidade no Photoshop eles mesmos, eles podem entrar nele e fazê-lo. Isso é explorar CSS do Photoshop. 48. Usando o Adobe Generate para tornar a exportação de imagens incrível: Agora, este vídeo é uma técnica muito semelhante à que fizemos quando estávamos fazendo o recurso Exportar como. Então, clicamos com o botão direito do mouse na camada e dissemos exportar como ou usar a exportação rápida. Este faz um trabalho semelhante, mas é muito mais automatizado e é realmente ótimo quando você está trabalhando, especialmente com você mesmo, você está desenvolvendo coisas do Photoshop como uma simulação e, em seguida, você está recebendo ensaios prontos e desenvolvê-lo como um site e você pode voltar e vir rapidamente usando este Adobe Generate. A primeira coisa que você precisa fazer é ativar a Adobe novamente. Se você não tiver o Adobe Generate aqui, isso significa que você está usando uma visão inicial , CS6 ou anterior, e você não terá esse recurso. Mas se você estiver em qualquer uma das versões posteriores, podemos obter um arquivo e podemos transformar este que diz ativos de imagem. Liga-o e nada acontece, está bem? Então arquivo gerar e ele vê um pouco de técnicas para ele. Então eu sei que está ligado, está fazendo alguma coisa. O que eu vou fazer é salvar meu documento em um lugar especial só para eu saber onde ele está e eu salvar no meu desktop, eu vou fazer uma nova pasta para vocês só para que vocês possam vê-lo. Esta vai ser a minha pasta de geração de exportação. Eu só estou salvando o PSD nesta pasta aqui versão dele. Clique em “Ok”. Então eu vou te mostrar aqui na área de trabalho. Na minha área de trabalho é chamado de gerar pasta de exportação e este é o PSD que eu estou trabalhando, apenas sentado sozinho. Certifique-se de que o Generate está ativado, para mim ele está desligado por causa do Salvar como, certifique-se de que ele está marcado. Agora o que eu quero fazer é, digamos que esta imagem aqui eu gostaria de salvá-la. Com um pouco de experiência, você sabe que ele vai ser um JPG porque ele não precisa de transparência e é uma imagem. Então o que eu vou fazer é eu vou nomear este aqui, dot JPG. Eu tenho imagens hífen livros dot JPG. O que você vai notar é, de volta a essa mesma pasta, você vê magicamente ele é criado esta pasta chamada exportação gerar essência. Aqui está a minha imagem, a minha camada de exportação como JPG. Ok, está feito, tudo automaticamente. A mesma coisa é, digamos, se eu quisesse que fosse um PNG. Eu posso apenas, no meu menu de camadas aqui, nomeá-lo um PNG. Aqueles aqui, na verdade removeu o JPG e trocou-o por um PNG. Ok, então esta é uma maneira muito rápida e fácil de exportar arquivos, mas também é uma maneira muito agradável se você estiver fazendo ajustes, porque é um link dinâmico, está sempre ajustando. Então ele exclui o JPG e adiciona um PNG. Então eu tenho esta imagem reservas ponto PNG selecionado e o que eu vou fazer é, eu vou adicionar um efeito de camada e eu vou adicionar uma sobreposição de cor e eu vou brincar com, em vez de normal que é [inaudível] eu vou trocá-lo para multiplicar, escolher uma cor, e eu vou torná-lo como um estilo antigo CPS. Você vai notar, assim que eu clicar em “Ok”, se eu mudar para minhas imagens, você pode ver que ele estava sendo refeito quando eu aparecia e é um novo PNG com o novo esquema de cores lá dentro. Se eu passar e mudá-lo novamente, vai se transformar em algo um pouco mais, um pouco mais forte. Está bem, está verde. Veja aqui, está refazendo no verde, então é uma ligação dinâmica. Você pode continuar se movendo, ele continua fazendo as imagens. Então eu sei que um precisa ser um JPG. Ok, quando se trata de JPGs, eu sei que está chegando através do JPG, veja isso, lá está. Agora JPG que é bem grande, é 56. Então o que eu posso fazer é lá, é um pouco de sintaxe que eu posso adicionar a este cara para torná-lo uma resolução diferente. No final, você pode ver aqui em baixo no meu último painel, eu poderia fazer isso um pouco maior para que você possa ver no elenco, é que no final aqui, eu posso digitar. Se eu digitar um e vai torná-lo um JPG de 10% e refazê-lo. Veja isso, ele está refazendo 10 por cento, é realmente pequeno tamanho de arquivo, mas provavelmente é má qualidade. Então, se você sabe, depois de um pouco de experiência, você começa a saber disso. Eu sei que se eu provavelmente ir em cerca de 40, pouco antes do final, ele vai refazer, é um tamanho razoável, a qualidade é boa. A mesma coisa acontece se eu quiser que seja um PNG. Se eu quiser que seja um PNG e eu sei que eu quero ser um PNG oito, ou se você sabe que você quer que ele seja um 24, você pode digitar ambos e ele vai fazer o PNG oito contra 24, o que você precisar. Agora há um monte de sintaxe diferente que você pode adicionar ao fim e ao início para qualidade, enfatize, eu não tenho tempo para passar por cada um deles aqui. Então, se você quiser uma folha imprimível para todas as diferentes sintaxe, baixe-os a partir deste link aqui. Uma última coisa antes de irmos é, você pode começar a fazer grupos. Digamos que você tem um logotipo aqui, mas ele tem um círculo como parte dele, ok, há uma parte diferente para o seu logotipo e você quer exportá-lo como um grande caroço, ok? Então é uma mancha branca com a palavra, traga seu laptop. Agora o que você pode fazer é, veja isso, é a minha elipse e aqui está o meu laptop, eles estão lá. Porque se eu der esses nomes separados, ele vai exportá-los separadamente. Então o que eu quero fazer é com eles selecionados, agrupá-los, e neste grupo aqui, eu posso nomear este grupo. Então este vai ser chamado logotipo BYOL e vai ser um ponto PNG e vai ser um oito. Ótimo, se eu pular para aqui, eu deveria ter logotipo, PNG e é um oito, [inaudível], transparência, tamanho incrível, minúsculo. É outro grande truque para usar com o Adobe Generate. 49. Não queria que acabasse! O que vem a seguir, Dan?: Para onde vamos a partir daqui? Assim que terminar a sua maquete, envie-me uma captura de tela, ou uma versão JPEG através do fórum ou da discussão nesta página. Adoraria ver o que você fez. O treinamento em vídeo pode ser realmente tráfego unidirecional. Eu recebo minhas emoções ao ver o que os alunos ganharam. Para tornar este curso o mais bom possível, por favor, transmita quaisquer sugestões e faça quaisquer perguntas. Para quaisquer perguntas persistentes, adicionarei novos vídeos ao curso para torná-lo ainda maior. Fique conectado através de seu canal de mídia social favorito. Há muitas coisas incríveis chegando em futuras versões do Photoshop e eu adoraria compartilhá-las com você. Isso é tudo para mim. Tchau, por enquanto.