7 Projetos de design para web GIMP – Aprenda fazendo

1. Gimpwebdesign: Olá. Eu sou Chris Parker e tenho sido um designer gráfico profissional por 30 anos, e eu me lembro do meu primeiro design de site todo o caminho de volta em 2002. Foi horrível. Não fazia ideia do que estava a fazer. E depois de 16 anos e centenas de designs de sites depois, aprendi o que fazer e o que não fazer. Então, neste curso é mais do que apenas sobre Web design. Trata-se de criar um site com o usuário final e a mente, e na verdade é ainda melhor do que isso. É sobre fazer porque você não vai apenas me ver projetar. Encorajo-os a pegar o que aprendem e projetar exatamente o que criei. Então é hora de pegar o que eu desenhei e torná-lo melhor para torná-lo seu próprio. Quando você concluir este curso de Web design, você terá sete Web designs exclusivos para seu portfólio. Agora, além de projetar sete sites exclusivos, vou compartilhar com você meus 16 anos de experiência e fornecer conselhos sobre o mundo riel sobre a criação sites melhores do que as dicas de designer média sobre a venda de serviços adicionais para o seu clientes e muito mais. Este curso foi projetado para usuários iniciantes e avançados. No início do curso, vamos rever todas as ferramentas básicas e que você precisa como um Web designer. Agora, se você já está familiarizado com, você pode pular essa seção e mergulhar diretamente na anatomia de um site. Então, essa seção vamos dissecar cada seção de um site para ajudá-lo a manter seus arquivos PSD organizados. Em seguida, você descobrirá os estilos de Web design mais populares, o sistema de grade, e então você poderá começar nos sete projetos de Web design. Vou mostrar-lhe passo a passo, como criar um site do cabeçalho para a seção herói, os diferentes elementos que compõem o corpo e, finalmente, o rodapé. Agora, em cada projeto, você aprenderá algo novo, e cada projeto se baseia no último. Então, aqui estão apenas algumas das coisas que você vai aprender neste curso de Web design. Você vai aprender a criar projetos da Web que oferecem uma excelente experiência de usuário e por que você precisa criar uma ótima experiência de usuário. Você também aprenderá como criar uma ótima experiência de usuário ajudará seu cliente a crescer seus negócios e, por sua vez, irá ajudá-lo a obter mais negócios por conta própria. Você também vai aprender adicionar em serviços adicionais que você pode vender seus clientes além de apenas Web design. E então você vai aprender as ferramentas para criar fundos criativos que ajudarão a chamar a atenção das pessoas usando brilho, máscaras de camada e muito mais. Você também vai aprender o que é preciso para ter sucesso como Web designer e se destacar entre as dezenas de milhares de outros Web designers por aí. E isso ajudará a garantir que você seja bem-sucedido em sua carreira de Web design. Você vai aprender a importância de escolher as fontes certas e outras topografias. Dicas profissionais. Você também vai aprender dicas profissionais adicionais não apenas sobre design, mas também sobre o final de negócios do design e muito mais. 2. Introdução à anatomia de um site: Olá e bem-vindo de volta. Tudo bem, então nesta seção, vamos aprender tudo sobre a anatomia de um site porque como um web designer, você precisa saber a terminologia que descreve as diferentes partes que compõem um site . Desta forma, podemos nos comunicar com outras pessoas que trabalham no projeto, especialmente com o desenvolvedor web que é responsável pela codificação do site. E você precisa ser capaz de mostrar e sua Web projeta as diferentes seções e, em seguida, não nomear nenhuma seção com base na terminologia que é um padrão do setor. Então nós temos seis seções principais que compõem um site, seu braço ou mas nós vamos apenas cobrir os seis principais, que cobre o cabeçalho, a navegação, a seção de heróis, o corpo, o rodapé e a barra lateral. Então nós vamos cobrir todos os seis que vão olhar para alguns exemplos, e eu vou dar-lhe algumas dicas profissionais sobre cada uma das seções diferentes também. Então, se você está pronto para aprender tudo sobre a anatomia de um site, vamos fazê-lo 3. Cabeçalho: A primeira seção do site é conhecida como o cabeçalho, que está localizado aqui na parte superior de um site, então os cabeçalhos que vão para o dedo do pé têm algumas informações sobre o site. Em geral, os tipos mais comuns de conteúdo nesta seção são um logotipo, um menu e possivelmente alguns links de mídia social. Você também pode fazer uma busca Berg como eu tenho aqui. Eu também tenho um link para alguns artigos de tendência aqui no topo. Você também pode fazer algumas informações básicas de contato, como talvez um endereço de e-mail ou talvez um número de telefone. Você pode ter alguns links para páginas de conta de membro, então temos uma opção de login aqui. Você também pode fazer coisas como os chamados Botões de Ação. Talvez você tenha uma empresa de software e queira oferecer seu software para uma avaliação gratuita por 30 dias. Você poderia ter um botão de ação fria para isso. Ou talvez você esteja projetando um site para uma organização sem fins lucrativos. Você poderia fazer um botão de doação aqui em cima. As possibilidades são infinitas para a chamada para botões de ação que você pode incluir lá , e esses são apenas alguns exemplos Agora, Tudo o que eu mencionei até agora são apenas sugestões para o que você poderia colocar no cabeçalho e você poderia realmente colocar informações Mawr no cabeçalho também. O problema é que você não quer colocar muita informação. Caso contrário, fica muito ocupado. E, em seguida, o ponto focal desse cabeçalho é diluído porque o espectador está processando muita informação porque há muito para olhar. Meu cabeçalho realmente é provavelmente muito ocupado, mas é por isso que eu dividi-lo em duas cores diferentes. Então esta área azul aqui nós só temos o logotipo no menu e então o cinza escuro. Eu tenho meus ícones de mídia social, pesquisa e meus artigos de tendência aqui, e ele está separado desta parte aqui em baixo, mas ainda faz parte do cabeçalho. Então essa é uma maneira de projetar seus cabeçalhos e fora se você tem um monte de elementos que você deseja colocar no cabeçalho. Mas geralmente é melhor fazer algo simples, como um logotipo, um menu de navegação e alguns ícones de mídia social. Isso não significa que você não pode fazer nada criativo, mas você ainda pode mantê-lo simples fazendo algo com um tipo criativo de design. Portanto, basta ter em mente que o objetivo do cabeçalho é dar aos seus espectadores uma oportunidade para um confirmado que eles estão na página correta se eles se identificarem com seu logotipo e sua identidade de marca, e dar-lhes a oportunidade de encontrar o que eles estão procurando através do seu menu ou se eles são um cliente existente para acessar facilmente sua conta existente. Então, se estiver muito ocupado e muita informação estiver acontecendo, você só vai dificultar para seus espectadores acessar o que eles precisam. Então, na maioria dos casos, eu recomendaria limitar seu cabeçalho ao seu logotipo, seu menu e, em seguida, 1 a 2 itens no máximo agora, outros aspectos do seu design de cabeçalho podem incluir o que é conhecido como um cabeçalho adesivo. Então, se eu começar a rolar neste site, podemos ver que o menu desapareceu. Então, em um cabeçalho fixo, quando você começa a rolar, o cabeçalho fica na parte superior da página do navegador. Portanto, isso é algo mais que você pode criar como parte de seu design para ajudar seus espectadores a ter acesso fácil a outras partes do site. Então, em vez de ter que rolar todo o caminho até o topo. Um cabeçalho fixo facilita o acesso a páginas adicionais se não estiverem encontrando o que precisam dentro da parte interna dessa página da Web. Ok, então na próxima lição, eu quero falar um pouco mais sobre o nosso menu porque nós temos algumas opções de design diferentes para essa navegação ou aquele menu baseado na colocação, bem como diferentes estilos de design para o próprio menu. Então vamos em frente e dar uma olhada nisso na próxima lição. 4. Navegação: Olá e bem-vindo de volta. Tudo bem, então nesta lição, vamos apenas rever alguns aspectos diferentes da sua navegação ou do seu menu. E por si só, eu acredito que é uma seção completa do seu site que é separada de tudo o resto. Mesmo que na maioria das vezes você está indo para encontrá-lo no cabeçalho, ele não necessariamente tem que ir no cabeçalho. E eu vou mostrar alguns exemplos disso em apenas um segundo. Então, para este site, temos um tipo muito simples, clássico de menu onde temos três links para três páginas diferentes. Outro tipo de menu é aquele que tem menus suspensos. Então, quando você passar o mouse sobre um link específico, você vai obter este rascunho para baixo para opções adicionais. Portanto, esta é considerada a navegação principal para este site em particular. Mas também temos uma navegação secundária, que é este item aqui. Estes quatro links são considerados um tipo secundário de menu e, em seguida, clicando neles, você obterá resultados diferentes com base nas categorias desses links específicos, pelo menos para este site. Agora, nem todos os sites vão ter um menu secundário. Tudo depende do site e da quantidade de informações que eles têm para os espectadores encontrarem em seu site específico, é por isso que eu separei parte do meu conteúdo em um menu secundário, que só é acessível para membros existentes. Que é outra razão pela qual eu não queria colocar esses links dentro da navegação primária novamente. Este é um tipo clássico de menu, e há outro tipo de opção de menu chamado um mega menu que pode expandir a quantidade de informações no menu suspenso. E isso pode ser visto neste site aqui. E quando você paira sobre diferentes tipos de comprimentos, você terá opções diferentes. Então este aqui é considerado um mega menu porque tem imagens incluídas com links para essa página ou artigo em particular. E isso também é considerado um mega menu porque tem várias colunas sob um título de menu , e é dividido em diferentes categorias. Com base nesse conteúdo de sites em particular a qualquer momento. Você tem um monte de informações como esta, ou imagens que é considerado um mega menu. Agora, como eu mencionei antes, você não precisa colocar seu menu dentro do cabeçalho. Você pode realmente colocá-lo em uma barra lateral à esquerda ou à direita do site. Eu até vi menus colocados na parte inferior com links para navegar para diferentes partes do site. Agora, nove em cada 10 você vai ver menus colocados no cabeçalho vs em uma barra lateral ou abaixo na parte inferior. Este tipo de layout, onde a navegação está dentro do cabeçalho, é prática padrão. É o que as pessoas estão acostumadas. Você não vê muitos sites com um menu em uma barra lateral ou mesmo na parte inferior. É ainda mais raro contra uma barra lateral. Assim, você quer facilitar o acesso das pessoas ao seu site e às diferentes páginas do seu site para que elas possam encontrar as informações que desejam. E se uma pessoa vem ao seu site e não está familiarizada com um menu na barra lateral ou o layout é diferente porque ela está acostumada com o menu estar aqui em cima e não aqui em baixo na parte inferior ou na lateral, então ela pode tornam-se um pouco frustrados se eles não são capazes de encontrar o que eles estão procurando, e eles podem ficar frustrados ou desligados por causa desse layout de design, porque lá costumava ter algo aparecendo no topo. Isso não vai dizer que vai ser o mesmo para todos. Mas algumas pessoas podem ser desligadas por ter neste no lado ou no fundo. Então você tem que estar ciente do seu público ou do seu público de clientes e determinar se isso é algo que vai melhorar o design do site e a funcionalidade do site. Se é uma multidão mais jovem do que provavelmente não é grande coisa. Mas se for uma multidão mais velha, então você pode querer ficar com algo mais convencional com sua navegação no cabeçalho. O outro tipo de opção que temos para o nosso menu é escondê-lo completamente. Não vemos nenhum link no cabeçalho, na barra lateral ou na parte inferior aqui novamente, esse tipo de design vai depender do público esperado para esse site. Agora você pode estar familiarizado com onde o menu está, mas se você nunca viu isso antes e você não sabe onde procurar o menu, então você vai deixar o site para novamente você quer tornar as coisas mais fáceis. para que os espectadores encontrem o que querem quando chegarem ao site. Mas como você provavelmente sabe, essa coisinha aqui com essas três linhas parece um hambúrguer, e às vezes é referida a um hambúrguer, um ícone de hambúrguer. Você sabe que se você clicar nele, você então recebe seus links para as diferentes páginas do site. Então, novamente, temos um menu bem simples aqui, com três links para três opções diferentes, além de alguns ícones de mídia social. Então, escondendo, sim, deixa tudo mais limpo. E o foco é mais sobre o que está nesta área aqui versus o que está aqui em cima. Então, o principal benefício de esconder seu menu como este seria porque você sabe que o público para este site em particular virá de usuários que usam um tablet inteligente ou um smartphone. E é muito mais limpo quando você não tem muitos elementos para mostrar em dispositivos menores e para não mencionar, dependendo de como o site é revestido, você pode realmente carregar a página mais rápido escondendo certos elementos como o menu ou até mesmo estes elementos gráficos aqui mesmo para a taxa, que vai melhorar a experiência do usuário quando alguém vai visitar um determinado site. Então essa é a única razão pela qual eu gostaria de usar esta opção em particular é torná-la mais limpa, para se concentrar em algo específico ou porque os usuários vão estar usando um dispositivo menor versus um monitor de desktop. A outra coisa que eu quero mencionar é no mega menu novamente, isso vai ser dependente do público. Se o seu cliente está esperando que a maioria de seus clientes ou visitantes venha de um smartphone ou tablet, então você pode não querer fazer um mega menu porque ele vai ser muito grande em um dispositivo pequeno como esse. Mas se a maioria de seus clientes e clientes usam um dedo do pé de mesa, acessar seu site, então você pode estar bem com ir com um design de tipo mega menu, e você pode obter essas informações de seus clientes. Se eles não tiverem um site existente e tiverem o Google Analytics instalado em seu site, eles podem entrar e obter informações sobre a porcentagem de visitantes que vêm de um computador ou tablet smartphone e coisas assim. Então, você pode querer descobrir que informações adicionais sobre os visitantes existentes que visitam seu site neste momento. Ok, então terminamos com a navegação. Na próxima lição, vamos dar uma olhada nesta parte do site aqui, que é chamada de seção Herói. Então vamos resolver isso na próxima lição. 5. Herói: Em seguida, temos nossa seção de heróis, que está localizada abaixo do cabeçalho e o que é conhecido como o acima da dobra, que está aqui em baixo. Então, qualquer coisa abaixo aqui é conhecido como abaixo da dobra. Isso é basicamente voltar aos dias dos jornais. Eles dobravam seus jornais e metade e então, quando eles exibiam em um novo stand, você só podia ver aquela parte do jornal acima dessa dobra. Então, a fim de seduzi-lo a comprar aquele jornal, eles colocariam a informação mais importante acima da dobra. Então tudo abaixo da dobra só seria visível se você abrisse ou desdobrasse o jornal. Assim, o mesmo conceito se aplica ao seu site. Você quer colocar todas as informações importantes acima da dobra, e então se alguém quiser ver o conteúdo abaixo da dobra, tem que rolar para baixo para vê-lo. Então você quer as informações mais importantes em uma página da Web acima da dobra, que incluirá seu cabeçalho. Você precisa dar a eles uma maneira fácil de acessar diferentes partes do seu site para entrar em seu site ou qualquer outra informação disponível em seu cabeçalho, e então a seção de heróis vai atraí-los para continuar explorando seu site ou para Faça-os fazer alguma coisa. Então, em vez de comprar um jornal, você vai fazê-los fazer algo com uma chamada ação do dedo do pé. O que você quer que eles façam neste ponto da seção de heróis? Deseja obter o endereço de e-mail deles em troca de informações que eles vieram ao seu site para? Você quer que eles compram alguma coisa? Você quer que eles aprendam mais sobre um produto para que você possa vendê-los na compra desse produto ou desse serviço? Então, a seção de heróis vai incluir informações baseadas no objetivo de seu site ou aquela página específica. Neste caso, a página inicial terá uma seção de herói que é definida ou projetada de forma a que o espectador faça algo. O que é que o seu cliente quer que o visitante faça uma vez que eles aterrem em sua página inicial. Isso vai determinar como você projetar esta parte do site, de modo que a seção herói pode ser definida como uma grande imagem em destaque ou uma série de imagens ou até mesmo uma pequena mostra que exibe proeminentemente em sua página inicial. E novamente, ele tem que estar acima da dobra porque você quer que essa informação ou essa imagem ou imagens ou slideshow para atrair a atenção dos espectadores para manter sua atenção, deixá-los interessados no que esse site é sobre e, em seguida, levá-los para Faça alguma coisa. Assim, estudos de pesquisa têm mostrado que as pessoas vão tomar uma decisão sobre um determinado site a menos que um segundo baseado nesta seção de heróis. Portanto, é um dos aspectos mais importantes do Web design porque você tem que chamar a atenção deles e segurá-lo. Caso contrário, se eles não têm nenhum interesse baseado nessa seção de heróis, então eles vão para o site de outra pessoa e você vai perdê-los como um cliente ou seus clientes vão perdê-los como um cliente. Então é por isso que você vai usar uma imagem para chamar a atenção deles porque eles estão procurando por algo específico. Eles têm um problema e estão indo para um site específico procurando uma solução. Assim, uma imagem pode representar essa solução, conteúdo ou texto pode representar uma solução para problema deles, e você vai pedir-lhes para fazer algo baseado em como você vai resolver seu problema específico adicionando uma ação chamada. Então, outra coisa que você quer ter certeza de que você faz ao projetar uma seção de herói é torná-lo fácil de ler, ele tem que ser claro e compreensível desde o início. Eles têm que saber exatamente o que esta empresa faz ou o que eles estão oferecendo, porque se não é claro ou fácil de ler e eles não têm certeza do que é que empresa faz, então você vai perder o espectador. Eles vão para outro site para que você possa conseguir isso com vários métodos diferentes . Você pode adicionar palavras-chave com base no que esse objetivo desse site é sobre, ou usando palavras-chave que explicam qual é o produto ou o serviço que vai resolver seus problemas. Portanto, conteúdo ou texto é um método para alcançar a clareza para aquele visitante particular do site. Ou você pode usar uma imagem, ou você pode até mesmo usar um vídeo que vai chamar a atenção deles porque se você configurá-lo para que o vídeo auto reproduz, então isso é automaticamente vai chamar a atenção deles por causa do vídeo está começando como assim que chegarem ao site. Então vamos em frente e dar uma olhada em alguns exemplos de diferentes tipos de seções de heróis que você pode projetar para resolver os problemas das pessoas. Então, a Apple está usando seu produto principal como parte da imagem do herói, e eles têm algum conteúdo para acompanhar. Então sabemos exatamente o que este produto é baseado na imagem ou no texto ou ambos, e sabemos que é sobre um smartphone iPhone 10 em particular. Então eles têm que chamar as ações. Você quer saber mais sobre isso, ou você está pronto para comprar agora? Então, dependendo de onde o visitante está, o ciclo de compra determinará qual ação chamada eles vão tomar para dar o próximo passo para concluir a solução para o problema. Eles não têm celular, então querem comprar. Agora, eles não têm certeza se o tênis iPhone para eles, então eles vão clicar em saber mais. Então você está pedindo a eles para fazer algo para dar o próximo passo nesse processo de compra. Então este design, é claro que é conciso. É fácil de entender e torna mais fácil para os visitantes escolherem o que fazer a seguir. Agora, este site em particular também tem uma imagem, mas não é uma imagem sobre um produto ou serviço específico. É mais um tipo genérico de imagem, e esta imagem preenche toda a seção de heróis da esquerda para a direita. Então, neste caso, a imagem está retratando o que você pode ter ou alcançar com base nos produtos ou serviços que esta empresa está vendendo. Onde você gostaria de ir? Essa é a chamada ação. Onde você quer ir Com base no que você escolher, você pode alcançar o objetivo de acampar em um acampamento ou em uma praia ou ir estão sendo e assistir ao pôr do sol. Esse é o resultado. Isso é o que as pessoas querem. Eles querem fugir da cidade grande, e eles querem encontrar um lugar onde eles podem ir acampar ou estão sendo. E isso é o que esta imagem retrata e dá-lhes o que eles podem esperar uma vez que eles encontram um lugar para acampar ou trailer ou qualquer que seja o caso. Outro tipo de seção de herói seria conhecido como a seção herói fundador, então aqui temos uma foto do fundador desta empresa em particular, que adiciona credibilidade e autoridade. E essa pessoa é um comerciante bem conhecido na indústria S E o. Então você pode reconhecer essa pessoa se você aterrou nesta página da Web, e você já pode saber o que ele oferece apenas com base em sua imagem. Então, de novo, ele está oferecendo algo de graça. Dicas de trânsito exclusivas para o seu site. Então, a chamada que ação é Se você quiser receber essas dicas de trânsito exclusivas gratuitas, em seguida, digite seu endereço de e-mail, inscreva-se e, em seguida, você vai receber essas dicas gratuitas em sua caixa de e-mail. Então, novamente, a seção de heróis é sobre transmitir o que você faz e dar uma solução para um problema que o visitante pode ter. E ele também acrescentou alguma credibilidade adicional para sua empresa. Baseado nestes baixos vai para baixo aqui. Nem todos podem dizer que foram destaque na revista Empreendedor, revista Forbes, Huffington Post, etc. Então, novamente, credibilidade como outra forma de manter o interesse das pessoas em seu produto ou serviço específico da empresa ou seus clientes, produtos e serviços. Este próximo site é outra empresa especializada em marketing ou tráfego S CEO. Mas desta vez, em vez de usar uma imagem, é apenas uma seção de herói do tipo contextual. Mas basicamente está fazendo a mesma coisa. O outro está sem imagens? Quer mais tráfego? Claro que sim. Eu quero mais tráfego para o meu site e eu tenho certeza que você quer. E tenho certeza que seus clientes querem mais tráfego para o site deles. Então o que você vai fazer é você vai digitar o endereço do seu site aqui e, em seguida, esta empresa vai analisar o seu site gratuitamente e dar-lhe sugestões sobre como obter mais tráfego para o seu site. Então isso é ação muito fria. Então, ao projetar uma seção de heróis, você precisa descobrir os objetivos do cliente que o contratou, a fim de determinar como você está indo para projetar a seção de heróis, bem como a ação fria para essa seção de herói. Então você tem que decidir, você vai torná-lo baseado em contexto? Você vai adicionar uma imagem de produto ou uma dívida de imagem fornece um resultado e imagem fundador ou um vídeo ou outra coisa. Então, uma vez que você conhece esta informação que você coletou de seu cliente, você quer ter certeza de que a seção de herói está satisfeito acima da dobra é clara e concisa sobre o que a empresa está oferecendo ou o que eles fazem e tem uma ação clara do dedo do pé frio. O nosso ódio. Então é isso para minhas dicas sobre a seção de heróis. Na próxima lição, vamos começar a trabalhar nos itens abaixo da dobra. 6. Corpo: a próxima parte do nosso site é o conteúdo abaixo da dobra e começa com conteúdo secundário que complementa a seção de heróis ou novo conteúdo adicional. Por exemplo, o site da Apple tem conteúdo adicional para produtos adicionais que oferece, em seguida, com o site do acampamento. Ele oferece conteúdo secundário para a seção de heróis, oferecendo lugares populares para procurar acampamentos em vez de fazer uma pesquisa genérica. Então, a seção de corpo de um site vai ser determinada sobre a própria empresa, o que eles estão oferecendo e se eles têm vários produtos que eles podem oferecer. Então, o conceito de design para esta seção é praticamente ilimitado, mas limitado ao que a empresa está oferecendo agora. Além de oferecer conteúdo secundário ou adicional, você poderia realmente fazer o que é conhecido como um design de uma página, que vai incluir conteúdo adicional sobre a empresa, mas não necessariamente produtos individuais. Mas, em vez disso, pode ser um site menor que tem uma quantidade limitada de informações. Então, em vez de colocá-lo em páginas individuais, você poderia colocar essa informação em uma página. Por exemplo, este site aqui. Se navegarmos até a página sobre, ela realmente rola para baixo até essa seção para a página inicial. Então, o sobre as perguntas mais frequentes estão todos na página inicial e isso é conhecido como um design de uma página. E você também pode adicionar outras seções ao design de uma página, como talvez uma seção de contato ou talvez uma seção de depoimento. Assim, o corpo do seu site vai conter informações secundárias, informações adicionais ou todas as páginas na página inicial. Essas são as minhas dicas para a seção do corpo. Há muito mais informações que podemos ver para o corpo, já que há tanta informação que você pode colocar nesta área. E os conceitos de design que você pode criar são praticamente ilimitados, bem como, com base no conteúdo dessa seção. Então não podemos cobrir tudo o que você conduz no corpo, mas esses são os conceitos básicos da seção do corpo. Certo? Então, na próxima lição, vamos dar uma olhada na próxima seção, que é o rodapé 7. Rodapé: a seção logo abaixo do corpo, que está na parte inferior de um site, que é esta área aqui é conhecida como Rodapé. Agora, assim como o cabeçalho, ele vai ficar o mesmo de página em página. E o objetivo do rodapé é dar aos seus espectadores a oportunidade de localizar o que eles precisam e ser capazes de navegar para outra parte do site sem ter que ir até o menu. Porque nem todo site tem um menu pegajoso e se eles não têm acesso fácil ao menu eles podem realmente acessar essa informação a partir daqui agora. Além de links para diferentes partes do site, há informações adicionais que geralmente são colocadas no rodapé, como as políticas de privacidade , termos de uso, vendas e reembolsos, mapa legal do site e informações adicionais. Temos informações de direitos autorais no rodapé, bem como acesso fácil para entrar em contato com a Apple e muito mais, então o que vai no rodapé novamente depende da empresa o que eles querem alcançar e os objetivos para o seu site. Agora, para o meu site em particular, eu não tenho um monte de links na parte inferior do meu rodapé. Eu só tenho meus comprimentos de suporte à política de privacidade e ícones de mídia social, que é muito diferente do que temos aqui. Uma maçã. Portanto, o design depende inteiramente de você sobre se você quer ou não fazer apenas links, ou se você quiser torná-lo mais criativo ou mais baseado em imagem, você pode adicionar imagens aqui também para ajudar as pessoas a encontrar o que precisam. Você também pode colocar outra barra de busca aqui. Se você tem um no cabeçalho, você pode colocar um aqui é bem, então há um monte de informações que você pode colocar no rodapé, e só porque ele está na parte inferior não significa que você quer economizar no design. Sim, tudo bem se é apenas baseado em contexto, mas você pode querer adicionar algumas imagens no rodapé também, dependendo do site, claro, para adicionar algum interesse a essa área, para chamar a atenção das pessoas para ajudá-las a encontrar o que precisam para que continuem navegando para diferentes partes do site. Ok, então esse é o rodapé. Temos mais uma seção para revisar, então vamos fazer isso na próxima lição. 8. Barra lateral: a seção final que cria a banana me de um site é conhecida como a barra lateral. Quando você cria um menu vertical como esta empresa tem aqui, isso é considerado uma barra lateral. É para o lado, e está em um bar. Então essa é a barra lateral. Mas um tipo mais típico de barra lateral é aquele que você verá no blog ou revista ou tipo de comércio de sites. E isso vai listar informações adicionais que os espectadores poderão acessar, quer queiram se inscrever para receber um boletim informativo, links para mídias sociais, acesso a postagens recentes, publicações populares e muito mais agora. Normalmente, você não quer colocar uma barra lateral em sua página inicial como eu fiz aqui. E se você der uma olhada na Apple, você pode ver que eles não têm uma barra lateral em sua página inicial porque eles querem que o foco seja nos produtos e não necessariamente informações que possam ser incluídas na barra lateral . O outro local onde você não deseja adicionar uma barra lateral é a página de destino real de um produto específico . Então aqui temos uma página de produto para o iPad pro, e eles não têm necessariamente uma barra lateral típica com as informações que eu tenho aqui na minha barra lateral. Então, ao projetar uma barra lateral você pode e um monte de informações, mas você quer se concentrar no estilo de design geral dessa barra lateral particular. Por exemplo, aqui eu tenho uma cor escura para o fundo do título, escolhi uma fonte específica para os títulos, e o design geral é bastante limpo. Assim, o foco é mais no conteúdo e não necessariamente no design. Então você pode ou não precisa projetar uma barra lateral para ir com o site, e novamente isso depende do site. Os objetivos para esse site e seu cliente. Certo, então são itens de Thesixties que compõem a anatomia de um site. Nas próximas lições, eu quero apenas rever algumas práticas recomendadas de design adicionais antes de começarmos realmente a projetar as diferentes partes do nosso site. 9. Introdução à seção de estilos de design: Olá e bem-vindo de volta mais uma vez. Tudo bem, então nesta seção, vamos aprender tudo sobre estilos de web design, e a primeira coisa que vamos fazer é dar um passo na faixa da memória e dar uma olhada em alguns web designs criados de 15 a 20 anos atrás. Assim, podemos aprender o que não fazer ao projetar sites, mas também dar-lhe algumas dicas profissionais adicionais ao longo do caminho. Depois disso, vou compartilhar com vocês os sete estilos de Web design mais populares agora em 2019. Se você estiver assistindo isso em um ano diferente dos estilos populares de Web design, talvez diferente. Então você quer ter certeza de que você está atualizado anualmente sobre os estilos de design mais populares . Tudo bem, então depois de passarmos por isso, vamos dar uma olhada em alguns lugares que enfraquecem ir para a inspiração para que possamos ter algumas idéias sobre como projetar um projeto específico em que estamos trabalhando. Então, se você estiver pronto, dedo do pé, aprenda tudo sobre o que os estilos de design levaram a fazê-lo 10. Meus pensamentos: Olá e bem-vindo de volta uma taxa. Então, nesta lição, eu só quero rever brevemente algumas informações sobre as tendências do Web design. Tendências são como a indústria da moda. Estão na moda até não estarem. Há coisas que foram feitas nos anos 90, como este site em particular que é puro mal ou coisas que eu nunca faria novamente. Isto é simplesmente horrível. E o Web design percorreu um longo caminho desde a introdução da World Wide Web e dos Web sites que costumávamos visitar naquela época através de tantas coisas erradas com este Web design específico . Eu não sei por onde começar, além de dizer, se você tiver uma chance, basta fazer uma pesquisa no Google por Web designs dos anos noventa e você encontrará sites que ainda estão vivos e ativos que foram projetados no final dos anos noventa, e você vai ver um monte de coisas que você não deveria estar fazendo hoje em dia. Dito isto, se avançarmos para 2004 ainda tínhamos sites que estavam sendo projetados que estavam cometendo muitos erros, e isso é tão ocupado, eu não sei onde procurar. Eles estão vendendo um monte de coisas, aparentemente, e eu não tenho certeza do que eles estão tentando alcançar. Mas é tão ocupado e isso é algo que eu recomendo fazer. Quando se trata de um Web design, há muitos estilos diferentes. Há muitas tendências diferentes. Diferentes tipos de tendências vêm e vão. Eles ficam desatualizados porque todo mundo começa a fazer isso. E os empresários que estão dirigindo esses sites querem se destacar de sua concorrência. Então eles vão refazer seu site com base na última tendência. E continua mudando uma e outra vez porque as tendências mudam o tempo todo. Mas os sites que continuam a usar o mesmo tipo de design básico como Media Temple. Este é um site mais moderno e clássico limpo e mesmo que ocasionalmente mudem as coisas em torno de um pouco, a marca geral para o seu negócio particular permanece a mesma. Eles usam os mesmos esquemas de cores. Eles usam um estilo de design muito semelhante, que é moderno e limpo. Este tipo de estilo resistirá ao teste do tempo. Ele não ficará desatualizado porque não está usando muitos elementos gráficos e está limpo. Mas, ao mesmo tempo, se você der uma olhada neste site, você pode ver que eles estão usando um monte de gráficos e como você pode ver, ele é semi ocupado. Eles estão usando elementos gráficos do final dos anos 90 com o botão Grady aqui e alguns outros elementos também. Mas esta empresa é uma grande empresa e eles são muito populares no mundo do marketing para especialistas em mídias sociais e aqueles que querem se tornar especialistas e mídias sociais e expandir seus negócios através de mídias sociais. Então você ainda pode projetar algo assim e ter um site de sucesso. Portanto, este site em particular tem um tema, e o design desse tema ou sua marca é projetado de acordo com o que sua mensagem está tentando retratar. Então se resume a um saber o que seu cliente está tentando alcançar, o que seu site, e então você tem que decidir qual é a sua marca. Eles já têm uma marca específica em vigor? Então é isso que você vai projetar o site ao redor. Se você foi contatado por um templo de mídia para atualizar seu site existente e você propôs esse tipo de estilo de design, eles provavelmente vão rejeitá-lo porque ele não corresponde a sua marca específica que eles já estabeleceram Mas se você tem um cliente novo que não tem uma marca no lugar, então é isso que você precisa desenvolver primeiro e descobrir o que eles estão tentando dizer. Qual é a mensagem deles e como eles querem retratar isso com sua marca? Então, às vezes, o Web design vem depois de desenvolver uma marca e um logotipo. Mas muitas vezes os clientes obterão um logotipo primeiro baseado no que eles gostam, e então isso se torna sua marca, e então seu site é projetado em torno dele. Mas isso não significa que esse design em particular coexista com sua mensagem particular. Por exemplo, um médico provavelmente receberá um logotipo primeiro, e então vamos querer um Web design. Mas eles podem gostar deste tipo de estilo. Isso é o que eles gostam pessoalmente, mas não se alinha com o que eles estão tentando fazer no mercado. Eles estão tentando construir uma clínica com mais clientes. Este tipo de estilo não vai representar o que eles estão tentando alcançar e o tipo de negócio em que eles estão. Pelo menos essa é a minha perspectiva pessoal sobre este design em particular versus uma indústria profissional . Eu não submeteria este tipo de estilo de design a um médico profissional ou qualquer outra pessoa em outros tipos de indústrias profissionais. Então, o design tem que combinar com a indústria em que essa pessoa em particular está. Esta empresa em particular é baseada em mídias sociais e suas mensagens de mídia social, selva e que coexiste o que sua indústria particular. Porque se você sabe alguma coisa sobre marketing e mídia social, é uma selva. Há um monte de coisas acontecendo, e eles são marca, e seu design deste site em particular funciona para essa mensagem em particular. Então, quando se trata de projetar sites, você tem que decidir que tipo de designer você é? Você é um que vai ser mais criativo e fornecer gráficos como este? É esse o estilo que você gosta? Então você tem que construir seu portfólio com base nisso, e então você precisa localizar clientes que vão apreciar seu estilo. Mas se você quiser tentar e projetar para todos, você vai ter mais dificuldade em tentar apaziguar todo mundo. Porque agora você vai ter que ter um portfólio com este estilo moderno, clássico e limpo e outros estilos, bem como contra apenas este particular. Então, se você se concentrar em um estilo em particular. Então você será capaz de atrair os clientes que, como esse estilo me pessoalmente. Prefiro projetos mais limpos, clássicos e modernos do que esse tipo de design. Então eu nunca desenhei nada como isto. Eu faço designs mais modernos e limpos versus sites que têm muitos gráficos, e a outra coisa que eu não gosto de fazer é aplicar Grady INTs aos menus. Gosto dos meus botões, e os meus homens costumavam ser chatos. Eu não quero nenhuma distração de gráficos, outros tipos de elementos, ingredientes para distrair do que eu quero que meus leitores façam. E isso é navegar facilmente sem qualquer distração. Mais uma vez, essa é a minha preferência pessoal. No meu estilo pessoal, você pode gostar de algo completamente diferente, e com base no que você aprende nos projetos neste curso, é apenas um ponto de partida. Você precisa fazer pesquisas sobre tendências de design digital. Faça uma pesquisa no Google por tendências de Web design, e você verá todos os anos há novas tendências de design sendo introduzidas aqui. Temos 13 tendências de Web design para observar em 2017, você precisa estar atualizado sobre o que possivelmente vai estar em tendência para esse ano, porque seus clientes vão ver esses tipos de elementos de design sendo usados em seus sites concorrentes e eles estão vai querer o mesmo para os seus próprios. E você precisa saber se isso é algo que você quer oferecer ou não. E novamente, você tem que se comunicar com o cliente e informá-lo que uma tendência de design não significa necessariamente que eles serão bem-sucedidos com esse site. O que é que eles estão tentando fazer com o site deles? Há tentando ganhar clientes ou é apenas um site pessoal com uma pistola que? Se essas tendências de design distrair os visitantes e visitantes do ar incapazes de navegar para obter as informações que eles querem, então eles vão sair do site e não comprar ou fornecer um endereço de e-mail. E seu cliente perde esse cliente em particular porque você projetou o site com elementos que não vão ajudar o proprietário da empresa a alcançar o que ele quer. Então, antes de Web design vem comunicação com seu cliente para descobrir exatamente o que é que ele quer alcançar com seu site e, em seguida, descobrir sua marca e, em seguida, projetar o site em torno dessa marca. Se eles não têm uma marca ou logotipo, então você tem a oportunidade de vender seus serviços de design para fornecer-lhes um logotipo e uma marca e, em seguida, no site para combinar com essa marca. 11. Sete estilos de design popular: Olá e bem-vindo de volta. Tudo bem, então eu disse que vamos rever alguns tipos diferentes de estilos de design. Há um monte de diferentes tipos de estilos de design e nós só vamos rever cerca sete estilos de design diferentes. Nesta lição. Há definitivamente mawr e estes ar, os mais populares a partir de hoje. Agora, 15 anos atrás, havia estilos de design que eram muito populares então que não são realmente usados muito hoje. Mas isso não significa que esses estilos de design não voltarão à moda e se tornarão mais populares do que o que é popular hoje em dia. Então nós não vamos realmente cobrir o que era popular 15 anos atrás. Espero que alguns desses estilos de design não voltem porque eles são horríveis. E eu nunca os usaria em meus designs de sites de qualquer maneira, então vamos limitá-lo a esses tipos mais populares de designs. partir de agora. Agora, em relação ao seu portfólio, você deve representar seu estilo ou seu estilo de design com designs que você preferir criar . Você deve ter um tipo específico de estilo de design, e você pode pegar os sete principais tipos de estilos de design e criar seu próprio design a partir deles. Ou você pode ficar com os conceitos básicos de cada estilo de design apertado e concentrando-se em projetos que você prefere criar. Então, será mais fácil encontrar clientes que apreciem seu estilo particular se você tentar representar todos os sete estilos de design diferentes do que você está tentando acomodar todos os tipos de clientes, e vai ser muito mais difícil crescer seu negócio ou obter mais empregos porque você não está focado em um tipo específico de estilo. E isso porque quando você se especializa em um estilo específico, torna mais fácil se concentrar em encontrar clientes que, como esse estilo específico, em vez de tentar fazer tudo por todos. Certo, com isso em mente, vamos dar uma olhada nos sete tipos diferentes de estilos de design. Então os primeiros a desenhar estilos que vamos olhar são conhecidos como design plano e realismo , ou também conhecidos como skewer morph ism. No início, na história do Web design, realismo era o design popular de escolha não só no Web design, mas também na interface do usuário . Por exemplo, aqui podemos ver ambos os estilos de design que a Apple aplicou ao seu sistema operacional para seus smartphones, e seus tablets em diferentes momentos da história. Então, aqui à direita, temos o design do realismo e à esquerda. Temos um design plano, então, no realismo, temos muito mais detalhes nos ícones. Temos texturas, lançamentos, até fotos realistas para alguns dos ícones, depois à esquerda. A maioria desses detalhes foram retirados, que nos dá o nosso estilo de design plano. Então você pode pensar neles para projetar estilos como a estética visual dos elementos desses ícones ou a página da Web ou a interface, ou o que quer que seja que você está projetando. Aqui está outro exemplo. Então, à esquerda, temos realismo à direita. Temos um design plano. Aqui está outro design plano, então não há muitos detalhes. Não há sombras, texturas ou detalhes dentro dos próprios gráficos. O mesmo com este. Ele tem um pouco de sombra aqui neste ícone e este ícone aqui, mas no geral é um tipo bastante plano de design, e mais em 99 projetos, isso é sim, eles têm uma postagem de sangue sobre a escola, mais projetos FIC, e você pode ver uma tonelada de exemplos para esse estilo de design específico. E você pode ver que há definitivamente mais detalhes nos ícones e nos abdominais e tudo mais . Para esses projetos específicos, há textura detalhada. Há sombras, destaques e muito mais para dar a ele aquele tipo de visual realista. Então, quando se trata de escolher um desses estilos de design sobre o outro, eu prefiro o design plano e me chamar de preguiçoso. Mas os projetos fugiram são mais fáceis de criar e menos demorados para criar. No entanto, o maior benefício do design plano é o baixo tempo. Leva menos tempo para carregar uma página da Web no seu navegador ou smartphone ou tablet dentro desse navegador, comparação com um design realista com todas as suas texturas, sombras e fotos e Grady INTs, etc. Portanto, um design plano tem uma melhor chance de classificação e mecanismos de busca, comparação com um design de realismo baseado na velocidade de que o site carrega. Agora, há outros fatores, claro, que entram na classificação de um site também, mas a velocidade é um deles, então quanto mas a velocidade é um deles, mais rápido o seu site carregar, melhor a pontuação que você obtém do Google ou de outra pesquisa com base na rapidez com que o site carrega. No final, porém, se resume a uma questão de preferência pessoal, identidade da marca do seu cliente e o objetivo do site. Tudo bem, agora, vamos dar uma olhada em outro estilo de design neste que vamos olhar é chamado minimalista. Muitas vezes minimalista pode ser confundido com o estilo de design plano. No entanto, há uma diferença distinta. Um estilo de design plano e o estilo de realismo, para que a matéria se refere à estética visual dos elementos de uma página Web os menus, botões, fundos e quaisquer outros gráficos que compõem a página. minimalismo, Ominimalismo, por outro lado, refere-se a uma filosofia de design. Menos é mais como designer, seu objetivo é apenas para os pés. Adicione os elementos mais essenciais e necessários para alcançar o objetivo dessa página da Web, é por isso que às vezes é confundido com design plano, já que também é bem, mínimo em seu design. No entanto, a diferença não está nos próprios elementos gráficos ou na estética visual, mas quantos elementos são usados em um design novamente, Menos é mais assim. Vamos dar uma olhada em alguns exemplos, então a Apple nos fornece um exemplo perfeito de minimalismo. Temos um cabeçalho aqui no topo com alguns itens de menu. Temos conteúdo que é muito direto ao ponto. Temos um par de botões de ação chamados e, em seguida, temos um produto muito, muito simples. Realmente não há necessidade de adicionar mais nada a isso porque você sabe exatamente o que esta página em particular é tudo sobre. O iPhone 10. Ou você quer aprender mais ou você quer comprar. Agora é muito mínimo. A mesma coisa com este site aqui, embora eles estejam usando uma imagem para o fundo. Mas ainda é muito simples e até o ponto que você sabe exatamente o que eles fazem com base na imagem e no conteúdo aqui. E então você tem opções para navegar para outras partes do site muito mínimo, e então o próximo site é mínimo também. É dividido com o conteúdo do produto lateral no meio e, em seguida, algumas informações adicionais aqui à direita, por isso é muito mínimo e direto ao ponto. Nosso próximo estilo de design é um pouco mawr oposto ao minimalismo e talvez até mesmo o design plano , porque a estética dos elementos gráficos tem muito mais informações ou detalhes, então vamos dar uma olhada em um design retro estilo. Então, esse estilo engloba o verso Mawr menos. E como eu mencionei, ele tem um pouco de realismo nele também para retratar os elementos que compõem a página para, bem, dar-lhe um olhar tipo retro. E esse estilo de design é um gosto adquirido, e será limitado com base na identidade da marca do seu cliente, seus objetivos para seu site e o que eles estão tentando retratar com seu estilo de design particular ou seu visual. Tudo bem, então vamos em frente e dar uma olhada em alguns desenhos retro só para ter uma idéia do que podemos fazer com esse estilo em particular e como criá-lo. Então, um design retro é composto de diferentes elementos para dar a ele aquela sensação retrô, e que pode incluir banners e fitas, o tipo de texto e, claro, outros elementos tipográficos, como este pequena borda em torno do conteúdo que está desgastado e tipo de se parece com um tipo de velha escola de papel e, em seguida , é claro, outros elementos e fontes também. Este site em particular tem uma sensação de realismo para ele, bem como uma sensação retro, e isso é baseado nas imagens que são usados para dar-lhe. Esse olhar retro tem um processo de 1/2 tom. Aplicar para as imagens, que é o que ocorreu no dia em que imprimir em uma prensa. E então, é claro, o uso de fontes particulares e outros elementos gráficos também aumenta a sensação retro, que você possa misturar e combinar estilos diferentes para criar seu próprio estilo. Então este, é claro, o retro e o realismo foram misturados para este design particular. Este tem feito basicamente a mesma coisa, tanto quanto adicionar realismo com uma foto real e , em seguida, tipos específicos de fontes para dar-lhe uma sensação retro. Este está usando uma combinação de fontes, cores e elementos gráficos para dar-lhe aquela sensação retro. Estas cores particulares aqui, os cinza e as laranjas, são representativas do que foi usado nos anos cinquenta e sessenta. Claro, há outras cores também, dependendo do período de tempo, mas estas mostram algumas cores populares daqueles períodos de tempo. Este está usando uma combinação de elementos gráficos, texto e diferentes tipos de cores retro para completar o design retro, bem como adicionar alguns elementos gráficos que são quase realismo na natureza com base na quantidade de textura e detalhes nos pássaros e nos cães e coisas assim. Então, estes são todos os tipos diferentes de maneiras que você pode criar um design retro. Mas novamente, é um gosto adquirido, e vai ser algo que talvez seu cliente vai querer e pediu especificamente. Ou pode ser algo que você pode recomendar com base em sua clientela e sua identidade de marca particular. Certo, então o próximo estilo de design que quero compartilhar com vocês é conhecido como um estilo de design de ilustração . Então, ele vai consistir na maioria das ilustrações versus fotos. Assim, este estilo de design pode consistir em ilustrações que são planas ou têm uma aparência mais realista. Ou, se você estiver se sentindo realmente criativo, você poderia fazer um híbrido do plano e do realismo com seu Web design ilustrado. Então esses tipos de projetos tipo de dar a sensação de um tipo de ambiente divertido e descontraído e assim como alguns outros estilos de design, escolher este tipo específico de estilo de design vai ser dependente de seu cliente particular e sua identidade de marca. Então vamos em frente e dar uma olhada em alguns exemplos. Agora, assim como todos os nossos diferentes estilos de design, as próprias ilustrações podem vir em diferentes tipos de estilos também. Assim, para este site em particular, temos uma ilustração com algumas texturas sobre os elementos que foram desenhados para este site em particular. Este próximo também tem elementos gráficos que têm texturas nas ilustrações ou Grady INTs. Mas alguns dos elementos também são planos e design, para que você possa misturar e combinar isso também com suas ilustrações. E, em seguida, outro estilo de ilustração é criar um efeito de tipo três D. Ou, se você é da velha escola e seu cliente é da velha escola e você quiser fazer mais de um desenho de lápis ilustrativo de seus personagens, você pode fazer isso. E este site está incorporando esse tipo de ilustração junto com fotos realistas para mais realismo para vender seu produto específico. Mas em todo o site, você vai notar que há um monte de outros tipos de ilustrações que são incorporados no design do site. E, claro, há outros tipos de médiuns também. Este em particular, está usando uma ilustração aquarela como sua imagem dominante para seu site. Assim, você pode pensar no design ilustrativo como outro conceito que você pode promover para diferentes tipos de sites com base no dedo do pé do cliente e na identidade da marca para essa empresa em particular. E então, é claro, você tem que decidir sobre o estilo dessa ilustração. Uma vez que você decidir que você quer ir com esse estilo de design particular para um site, então não é apenas uma questão de ok. Eu quero fazer desenhos de tipo ilustrativo. Bem, que tipo de ilustrações você quer para desenhos a lápis aquarela, três desenhos planos D? Portanto, há muito mais decisões que vão para a criação de um Web design de tipo ilustrativo . Certo, então o próximo design, então eu quero compartilhar com você, é conhecido como um estilo grunge, que, como o design retro é o oposto do minimalismo. Runge é tudo menos mínimo ou mesmo simétrico ou equilibrado. Grunge tem um olhar sujo com o seu regular, às vezes não tão bonito elementos visuais. Este é outro desses estilos de design que se limitará ao gosto do seu cliente ou sua identidade de marca, ou até mesmo ao público que eles estão perseguindo. Então você pode pensar em estilo grunhidos para talvez rock ou mesmo enquanto músicos grunge ou até mesmo outros tipos de empresas que atendem a esses músicos ou artistas. Então eles podem estar mais inclinados a usar este tipo particular de estilo de design versus, digamos , um médico ou um dentista. Então vamos dar uma olhada rápida em alguns designs de estilo de corridas, assim como com o estilo de design retro. Os elementos que compõem a página e as texturas e as imagens usadas criarão esse efeito grunge. Assim, as fontes usadas são mais do tipo grunge de uma fonte e a textura geral e sobreposição dessa textura sobre imagens, bem como os outros elementos de design. Dê a ele aquele olhar grunge ou que toque grunge neste site em particular. Este está bem, está usando alguns elementos gráficos para criar essa aparência e sensação grunge, e isso é baseado no gráfico de fundo aqui, onde parece que o papel ou o site está sendo tor nem rasgado, e tem uma sensação grunge para ele, juntamente com as fontes que estão sendo usadas como parte do logotipo, cria uma sensação grunge. Nosso estilo final de Web design é conhecido como um estilo de design geométrico, que consiste em usar formas ou outros elementos gráficos de uma forma que seja visualmente agradável aos olhos. E pode até fornecer uma composição com essas formas geométricas que levam um visitante na direção que você quer levá-los. Com este site em particular, eles estão usando diferentes formas geométricas que não são consistentes com o que vimos no passado de outros sites na forma de quadrados ou retângulos ou até mesmo círculos. Esta forma geométrica em particular não é usada tanto quanto as outras formas, e faz para um design interessante e organiza todas essas diferentes fotos, textos e conteúdo dentro deles para ajudar a organizar e tornar mais fácil encontrar o que queremos encontrar. Este próximo site também está usando formas geométricas para colocar conteúdo dentro dele, para separá-lo do outro conteúdo, e visualmente ele torna muito mais fácil de ver versus apenas ter tudo espalhado em apenas alguns retângulos. E isso é basicamente o que você vê em muitos sites é apenas conteúdo dentro de quadrados, retângulos ou círculos, e este está usando diferentes formas geométricas como parte do design. O que é muito mais interessante, eu acho, do que o tipo convencional de formas que usamos no passado. Este está usando formas geométricas para manter o conteúdo dentro dele também, mas ele está fazendo isso de uma maneira mais única e simplificada em comparação com os outros dois sites. Mas ainda está confinando esse conteúdo dentro das formas geométricas. E ele está fazendo isso de uma maneira que nos faz querer seguir esta seta aqui, rolar para baixo e continuar nossa jornada com base nessa forma geométrica onde ele está criando esse ponteiro apontando para baixo, que é uma boa maneira visual de obter seu para continuar rolando pelo resto da página. Então essa é apenas outra maneira de usar formas geométricas em seus projetos. Tudo bem, então nós cobrimos sete tipos diferentes de estilos de design e os desenhos. forma como escolher para um projeto específico dependerá do cliente, da identidade da marca e do público. Você tem que levar tudo isso em consideração antes de decidir sobre um estilo de design. Mas se você se especializar em um estilo de design específico, então você sabe que os clientes que estão vindo até você estarão esperando esse estilo de design particular . E você não precisa se preocupar muito em se concentrar em qual estilo de design escolher, já que eles estão escolhendo você para sua especialidade. Ok, então é isso para nossos estilos de Web design na próxima seção ou na próxima lição que vamos começar a tomar. Olhe para a anatomia de um site, todas as diferentes seções e partes que compõem uma página da Web. Vamos entrar em cada uma dessas seções em detalhes, e eu vou te dar algumas dicas profissionais e algumas práticas recomendadas para projetar cada uma dessas seções diferentes. Então, se você está pronto para chegar lá sobre isso, vamos fazê-lo. 12. Inspire-se: Vamos falar sobre como inspirar como Web designer as melhores práticas e coisas a evitar . Então, provavelmente, a coisa mais fácil a fazer é apenas fazer uma pesquisa no Google por ideias de Web design. Melhores Web designs. Ou talvez se você estiver preso em uma parte específica do site, você poderia fazer Web design, ideias de cabeçalho, Web design, ideias de rodapé, coisas assim para obter alguma inspiração para o seu projeto atual. Então essa é uma maneira de obter inspiração é através do Google. O outro é através de 99 projetos, e este é um lugar de seleção de público onde você pode ir como um designer gráfico e licitar em empregos. Então, qual é o seu designer A e você é um membro desta comunidade. Você pode entrar e navegar em concursos, e você pode filtrar até o que é que você precisa de inspiração. Então aqui eu tenho projetos de design Web e APP, e há mais de 14.000 projetos neste momento que estão fechados que eu posso filtrar e procurar ajuda, me dar alguma inspiração para o meu projeto atual e também selecionei projetos finalizados versus open porque open não vai sempre mostrar projetos para esse projeto em particular porque ah muitos deles são projetos cegos, então é melhor ir para o status final e então você pode navegar para diferentes concursos para ver esses diferentes tipos de projetos para obter inspiração a partir de agora. A única coisa que você não quer fazer é que você não quer copiar um design. Exactamente. Então aqui podemos ver para este concurso em particular. Este foi o design vencedor que o cliente selecionou. E se você decidir entrar e projetar um site, seja por conta própria ou através de um serviço como 99 designs, especialmente se você for um designer nesta plataforma de fornecimento de multidões, você será arrancado a partir da plataforma porque você vai encontrar no código de conduta do designer que fazer arte original é uma obrigação. Se você copiar este design em particular e tentar vendê-lo para algum outro cliente, você será suspenso desta comunidade e você não será mais capaz de rebocar através desta empresa, então eles têm uma política de suspensão que vincula ao código de conduta do designer . Isso explica que você tem que fazer o trabalho original porque todos os designs são, por padrão, por direitos autorais do artista original. E ao copiar esse artista, você está infringindo seus direitos autorais, e você será banido desses sites de crowdsourcing. Não só isso, se, por exemplo, você trabalha para uma empresa de tecnologia e você vai ao site da Apple e você diz, quer saber? Eu amo o layout deles e você copia o layout deles exatamente. Bem, adivinha? Eventualmente, a Apple vai descobrir porque a sua empresa está a crescer e o design do seu website é exactamente igual ao deles. Eles vão entrar em contato com você, e vão processá-lo por roubar o web design deles. Alguém projetou este site em particular, seja uma empresa separada ou alguém dentro da empresa. A Apple possui esse design específico, e você não pode copiar exatamente isso. Caso contrário, você vai infringir os direitos autorais deles, e eles vão processá-lo por compensação pelo roubo. Então, o que quer que você faça, não roube projetos de sites de outras pessoas. A outra coisa que você tem que considerar é a imagem e qualquer tipo de clip-art que você usa em seu Web design. Ambos são protegidos por direitos autorais, dependendo do licenciamento para essa obra de arte específica. A maioria das imagens stock quando você vai para stock photos dot com, por exemplo, todas essas imagens têm direitos autorais, e você tem que pagar uma licença para usá-lo. Mas você pode usar essas imagens com uma marca d'água de direitos autorais sobre elas como parte de seu design. Mas você tem que deixar seu cliente saber que essas imagens específicas protegidas por direitos autorais e se eles querem usar exatamente a mesma imagem que eles têm que pagar os direitos de usá-lo o mesmo com clip-art. Se você usar qualquer clippard protegido por direitos autorais, então você terá que pagar por uma taxa de licenciamento. Ou, às vezes, quando se trata de clip art, o criador de que Clipper vai pedir uma atribuição que diz, Este site em particular foi criado com clip art e, em seguida, você fornecer um link de volta para esse artista. Então isso é algo que você colocaria no rodapé. Então, você quer descobrir o contrato de licenciamento para esse trabalho artístico específico que você deseja usar para um site antes de realmente usá-lo em um site de vida. Então, por exemplo, este pequeno ícone de pesquisa aqui foi criado por alguém que um designer criou isso, e se você encontrasse essa lupa em particular online e você roubasse essa imagem em particular sem dar um atribuição ou pagar por uma licença do que esse designer gráfico pode basicamente voltar. E assim você como a Apple fez. Portanto, não use qualquer tipo de imagem ou clip-art sem primeiro descobrir qual é o uso dos direitos autorais e o licenciamento para essa obra de arte específica antes de você realmente usá-lo. Essas são as melhores práticas. Então, faça o que fizer, não roube o trabalho de outras pessoas. Certifique-se de que tudo está licenciado corretamente. Antes de começar a usá-lo em sites de vida ou mesmo em concursos como através de 99 projetos. Você não deseja usar arte protegida por direitos autorais. Caso contrário, você será expulso da comunidade deles. Então, quando você está olhando para diferentes sites para inspiração, você tem que perguntar a si mesmo. Ok, eu gosto do layout. Gosto das cores. Gosto das fontes, mas o que posso fazer para melhorar? Bem, a empresa para a qual você está trabalhando, eles vão ter uma identidade de marca diferente em relação a esta empresa aqui. Eles vão ter cores diferentes e talvez fontes diferentes que fazem parte de sua identidade de marca , então isso vai ser diferente. Mas a outra coisa que você pode fazer de forma diferente é reorganizar alguns itens usados imagens diferentes . Você não quer usar esta imagem aqui. Você quer fazer sua seção de heróis talvez um tamanho diferente. Talvez em vez de sangria total na imagem, você a limita ao tamanho desse conteúdo, que é essa informação aqui embaixo. Então talvez isto tenha 960 pixels de largura. Então você faria essa imagem desse tamanho para que ela se alinhe para a esquerda e para a direita do conteúdo, e isso faz a diferença. Eu poderia talvez mover o menu aqui no topo, talvez colocar esta informação de conteúdo aqui em cima com os itens de pesquisa aparecem. Se os itens de pesquisa deles, talvez você queira adicionar um nascimento de pesquisa, então isso vai fazer a diferença. Você não quer fazer exatamente o mesmo. Mas talvez você goste do sombreamento na sombra desta área do menu aqui. Então você pode realmente virar isso e mover isso para o topo. Você pode mover o logotipo para dentro para a esquerda do menu. Basicamente, estás a reutilizar o sombreamento para este menu em particular. Mas você está reorganizando os itens para que você venha com seus próprios designs exclusivos, o mesmo com os ícones. Você não quer usar exatamente o mesmo ícone. Você quer encontrar ícones diferentes ou criar seus próprios ícones para tornar o design geral diferente? Então é assim que eu iria sobre encontrar inspiração para um projeto específico no qual estou trabalhando é descobrir a identidade da marca para meu cliente, chegando com as cores e as fontes que eu quero usar primeiro, e então começar construindo as diferentes seções de sua página da Web com base no que eles precisam. Eles precisam de uma barra lateral? Se não? Bem, você não tem que se preocupar com a barra lateral. Eles vão precisar de um cabeçalho. Eles vão precisar de navegação. E então é só uma questão de decidir como você vai colocar tudo para fora. Além da estética visual do cabeçalho, que seria a sombra para o fundo do menu e qualquer outra coisa como faras. O estilo vai do texto e qualquer um dos outros tipos de elementos gráficos para essa seção particular 13. Introdução ao sistema de grade: Tudo bem. Eu sei que você provavelmente está ansioso para começar a projetar nossos projetos, mas há mais uma coisa que precisamos saber e aprender antes de começar a projetar sites e gimp e que é o sistema de grade. Então, nesta seção, vamos aprender o que é um sistema de grade e por que queremos usá-lo com nossos projetos da Web. E eu vou mostrar onde você pode obter diferentes tipos de sistemas de grade de graça. Então, se você está pronto para aprender tudo sobre o sistema de grade, vamos fazê-lo. 14. Sistema de grade: Olá e bem-vindo de volta. Antes de entrarmos em nossos projetos de Web design, primeiro quero compartilhar com vocês o sistema de grade que usaremos para esses projetos de Web design. E eu também quero explicar o que é um sistema de grade, caso você não tenha certeza do que é. Então, nesta lição, eu vou apenas compartilhar essa informação com você. E então eu vou mostrar onde você pode baixar o sistema de grade para que você possa usá-lo com os projetos de Web design ao longo deste curso. Então, basicamente, um sistema de grade permite que você simplifique seus projetos da Web porque ele fornece dimensões comumente usadas com base em um específico com. Agora, o padrão da indústria costumava ter 960 pixels de largura, e há duas variações diferentes desse sistema de grade, que é 12 ou 16 colunas. Então, por que vamos usar um sistema de grade como este? Bem, isso nos ajuda ao pré-definir os tamanhos das colunas e nos permite espaçar uniformemente, são elementos gráficos diferentes e fornecer espaçamento igual entre eles para nos ajudar a alinhar todos os elementos e dar simetria aos nossos projetos Web. Por exemplo, se tivermos três colunas de conteúdo. Então sabemos que uma grade de 12 colunas funcionará melhor para essa configuração específica. E a razão é porque 12 colunas divididas em três é igual a quatro. E então, se tivermos quatro colunas de conteúdo, seria melhor mudar para um sistema de 16 colunas, uma vez que 16 dividido por quatro é quatro, e no geral, ele vai espaçar melhor nosso conteúdo nesses aspectos. Agora, o sistema de grade que estou usando vem deste site aqui, que é de 9 60 pontos gs. Então vá em frente, navegue até este site, e se você rolar para baixo aqui e clicar em mostrar grade, você vai ver essas colunas diferentes, qualquer sobreposição vermelha, e você vai notar como todos os diferentes elementos do design da página se alinham, e podemos ver que a quantidade de espaçamento entre esse conteúdo é mesmo em toda a página da Web . Então, usando este sistema de grade, você garante que todos os elementos estão uniformemente espaçados alinhados, e isso, no final, lhe dará um design muito melhor do que se você fosse apenas para empalar e ter elementos espalhados por todo o lugar. Não vai haver simetria. Vai ser difícil navegar pela página, e vai ser muito caótico se você não estiver usando um sistema de grade. Não só isso, mas usar um sistema de grade definitivamente ajuda a agilizar seu fluxo de trabalho e torna mais fácil e rápido para você projetar tudo e colocar tudo em uma posição adequada. Agora, o único problema com o sistema de rede 960 é que ele está um pouco desatualizado. Você ainda poderia usá-lo, mas ele não foi realmente projetado para sites responsivos para smartphones ipads, coisas assim. Então, no dia anterior aos smartphones que temos hoje em dia e tablets, este sistema era tudo o que você realmente precisava. Mas agora, com todos os diferentes tamanhos de dispositivos móveis e o tamanho de monitores, precisamos de um sistema de grade maior, e o que eu recomendo é um sistema de grade de 1200 ou 1200 pixels de largura. Então isso vai acomodar mais dispositivos e mais tamanhos de monitor versus 9 60 também será perfeito. Primeiros sites que precisam ser responsivos. O outro benefício é que, se um cliente tiver um requisito de tamanho específico, você pode facilmente reduzir o tamanho para o sistema de grade necessário para esse projeto. Agora vamos baixar o sistema de grade daqui. Mas o problema é que eles não têm um sistema de 1200 grade, então podemos facilmente consertar isso baixando o sistema de grade 9 60 daqui. Basta clicar neste grande e velho botão de download aqui para baixar o sistema de grade 9 60. Vamos abrir esse arquivo e convertê-lo em um sistema de grade 1200. Então vamos entrar em modelos. Iam escolher Photoshopped? Vamos fazer a coluna 12 Grid por enquanto. Abra isso. Vá para a imagem, vá para o tamanho da imagem e agora deve dizer 10 20 por 10 20. Então temos 40 pixels extras, então temos um pouco de espaço de respiração em ambos os lados do sistema de grade. Então, para o tamanho da imagem, vamos adicionar 200 pixels. Então agora temos 1220 por 1220 que vai nos dar nosso sistema de 1200 grade. Tudo bem, agora que você tem o sistema de grade redimensionado, salve-o como um arquivo mestre e então vamos usá-lo para todos os projetos de design neste curso e o que você quer fazer é, uma vez que você começar em um projeto é você vai querer salvar, como assim você pode salvar este arquivo para esse projeto de Web design específico e mantê-lo separado de seus arquivos mestre para que você sempre possa voltar para o seu arquivo mestre para o próximo projeto são Hey, agora que finalmente temos todas essas informações fora do caminho, é hora de começar a projetar sites. Espero que esteja pronta. Estou animado e mal posso esperar para compartilhar com você todas as minhas dicas e segredos para projetar sites e Photoshopped. Então, se você está pronto, vamos fazê-lo. 15. Pixel Perfeito.: para esta lição. Eu só quero dar mais algumas dicas ao projetar um site, e o primeiro 1 é manter-se organizado. Quando você está projetando seu site, você estará construindo diferentes partes desse site com base na anatomia do site, seja o cabeçalho, o herói, o corpo, o rodapé barra lateral, o que quer que seja que você quer ser organizado. E o que eu quero dizer com isso é que você quer organizar suas camadas e longe para que seja fácil acessar e encontrar o que você precisa. Por exemplo, esta página Web específica tem várias secções. Como podem ver, tenho um jogador de grupo para o cabeçalho, o herói, o corpo e o rodapé. Para que eu possa acessar facilmente o que preciso para essa seção em particular dentro daqui. Nós temos o corpo e eu tenho algumas partes diferentes do corpo, bem como uma seção sobre e uma revisão, bem como, e tudo está organizado dentro dessas camadas agrupadas agora dentro da camada de grupo. Eu também tenho jogadores de grupo adicionais com conteúdo adicional, para que eu possa acessar facilmente essa parte do site. Ele também ajuda com o desenvolvedor da Web. Quando você entrega esse arquivo para o desenvolvedor da Web, eles precisam saber o que vai para onde e organizando tudo em camadas agrupadas. Isso torna mais fácil para eles encontrar um acesso a essas informações para que eles saibam em que passo eles precisam trabalhar em seguida. A outra coisa que você quer fazer é que você quer projetar seus projetos Web pixel perfeito. E o que quero dizer com isso é que você quer ter tudo alinhado perfeitamente. Então, se este título e esta seção de conteúdo foram desligados por alguns pixels aqui à esquerda , bem, adivinha? Os desenvolvedores da Web vão pensar que você fez isso de propósito e não vai se alinhar com esta caixa aqui, e vai ser para a esquerda. Mas se você fizer isso pixel perfeito do que o desenvolvedor da Web deve alinhar esses elementos à esquerda como projetado. Então, se você cometer algum erro em seu design, o desenvolvedor da Web não vai saber que foram erros e vai realmente codificar o site com base no que você realmente dá a eles. Então você quer criar um design web perfeito pixel e perfeitamente alinhar tudo como seu design e antes de entregá-lo para o desenvolvedor Web. A outra coisa vai fazer é que ele vai colocar você no hábito de criar desenhos perfeitos de pixel desde o início, e também vai ser simétrico. Nem sequer temos espaço entre estas três colunas. E se esta coluna fosse mais à esquerda e o espaço entre as duas colunas fosse maior do que esta, então não será simétrico. E não vai ser equilibrado. Isso vai olhar para fora. Não vai ser um bom design, vai ser um design ruim. Você quer ser capaz de criar um design que seja agradável aos olhos, agarra o interesse da pessoa, mantenha seu interesse, e então, com base nas ações chamadas, você os leva a fazer o que você quer que eles façam para esse projeto em particular. Se você não está projetando com uma intenção perfeita de pixel desde o início, então seus projetos vão parecer desleixados. Você não vai ser capaz de comandar um preço alto para seus projetos, e você vai ter menos negócios, então certifique-se de que você projetar com a mentalidade perfeita pixel. Tenha tudo alinhado adequadamente simétrico e não tenha nenhum erro e seus projetos antes de sair para o desenvolvedor da Web ou até mesmo seu portfólio, , porque alguém pode notar um erro e decidir não contratá-lo porque você não teve tempo para prestar atenção aos detalhes finos desse design em particular. E eles vão querer contratar alguém que tome esse tempo para prestar atenção a esses pequenos detalhes, e eles são mais propensos a pagar um preço mais alto por essa atenção aos detalhes. Então, à medida que você começa a projetar e criar designs para o seu portfólio e, em seguida, começar a promover seus serviços, você quer ter isso em mente, organizar tudo e projetar com essa mentalidade perfeita de pixel. Então você condena e um preço mais alto e obter mais empregos no processo. 16. Introdução aos sete projetos: Tudo bem. Então adivinha que horas são. Isso é certo. É o momento que esperou toda a sua vida. Tudo bem, bem, talvez não muito tempo, mas é hora de começar a desenhar sites e Gipp. Sim. Tudo bem. Então temos sete projetos de design que vamos trabalhar, e vamos usar muitas das ferramentas e gimp para realizar esses projetos. E vamos usar muitas das ferramentas uma e outra vez, o que é ótimo, que é ótimo, porque quando você terminar de fazer todos os sete projetos, você deveria ter dominado ou pelo menos ter uma idéia muito boa sobre como usar as ferramentas gimp precisa usar para projetar nossos sites e gimp. Ok, então não só você vai pegar o projeto e recriar o meu projeto que eu vim para cima como prática. Mas quando acabares com isso, quero que recries esse website na tua própria visão criativa. Eu quero que você invente algo melhor para que você possa então ter esse design para o seu portfólio. Então, se você está pronto para começar a projetar sites e Gib bem, vamos fazê-lo 17. Projeto 1: Nike Briefing: Tudo bem, vamos dar uma olhada na página inicial atual da Nike, e como você pode ver, ela tem um design agradável, limpo e moderno. A navegação é centralizada, e quando você passa o mouse sobre cada um dos itens, você pode ver que um mega menu irá se apresentar e mostrar todos os diferentes produtos disponíveis. Também temos acesso fácil a marcas e opções específicas para acessar facilmente uma conta. Se você já tem um acesso a um Kurt de compras, algumas opções de ajuda e um botão de pesquisa para encontrar algo específico. Portanto, este site foi projetado com clientes novos e existentes e mente, tornando mais fácil para seus visitantes encontrar exatamente o que eles precisam. Esta página realmente não precisa de um redesenho, mas eu queria mostrar a você como colocar todos esses elementos diferentes juntos em um novo design e mostrar como ser criativo pode adicionar interesse adicional a uma página dedão ou agarrar atenção e levá-los a fazer o que você quer que eles façam neste caso por alguns sapatos ou outros produtos. Então, nem todos os sites terão todos esses elementos diferentes. Nem todas as empresas, eles vão ter várias marcas, e eles podem não ter uma conta porque talvez eles não estão vendendo algo diretamente em seu site. Como este site, que é mais de um tipo e comércio de site versus um tipo corporativo ou comercial tradicional de site. Você ainda pode vender produtos, mas talvez não tê-lo configurado em um estilo tradicional e commerce tipo. Esta página inicial não é um estilo de tipo e commerce. É mais um tipo de informação de página da Web, mas quando você navega para seus produtos específicos, é mais um tipo de layout de página e comércio. Então, para a reformulação, nós realmente não queremos remarcar o site porque a Nike já tem uma marca sólida em seu site existente. Nós podemos apenas adicionar a ele adicionando diferentes elementos para fazer com que os visitantes façam qualquer que seja o seu objetivo específico. E eu acho que para eles seu objetivo é vender mais de seus produtos. Então, para o redesenho, eu não fiz uma remarca do site. Eu só queria me concentrar mais em suas três principais marcas, que são a Air Jordan, o Hurley e Covers, e eu queria pegar seus modelos de sapatos mais recentes. Destaque esses produtos para chamar a atenção das pessoas para esse produto específico e tornar mais fácil para as pessoas comprá-los através de um chamado botão de ação. Mas ele também queria colocar esses produtos de uma forma diferente de qualquer outra coisa que você verá lá fora. E é aí que a criatividade entra em jogo quando você tenta diferenciar seu design de outros sites. Mas ao mesmo tempo, entanto, eu não queria exagerar, e eu mantive isso simples apenas adicionando três elementos principais. Temos o conteúdo com a ação chamada, o sapato principal e, em seguida, uma pessoa, ou uma imagem de uma pessoa interagindo com esse sapato. Então, os três sapatos principais, todos eles têm um público específico naquela década ou duas na maioria dos casos. Então o ar Air Jordans vai atender mais àqueles que, como basquete ou sapatos altos em geral, então Hurley vai ter uma combinação de sapatos e sandálias. Então talvez frequentadores de praia ou surfistas ou coisas assim, e depois conversar, ou talvez mais popular entre skatistas ou outros tipos de pessoas nessa multidão. Ou talvez apenas ou talvez eles apenas gostam do olhar do converse em geral E é aqui que comunicar com seu cliente sobre esses produtos específicos para determinar como sua moeda, também, apresentar esses produtos de uma forma que é diferente, criativo, mas simples o suficiente para não ser muito confuso e você ainda é capaz de chamar a atenção de uma pessoa e levá-los a fazer o que você quer que ela faça, que é comprar mais. Assim, a comunicação é fundamental para qualquer tipo de Web design. Então eu escolhi um tipo específico de pessoa para cada um desses produtos para mostrá-los em ação com os sapatos reais. Então, é claro, nós temos uma foto de Michael Jordan para este sapato em particular porque eles são os Air Jordans , e eu queria mostrar não apenas o design desse novo sapato, mas a inspiração para Esse sapato. Então temos Michael Jordan voando pelo céu, e parece que ele vai mergulhar dentro da filmagem. Isso sozinho é diferente, e vai chamar a atenção de um espectador porque eles nunca viram isso antes. Então eu tenho uma surfista surfando no topo de uma sandália e depois escapando da fronteira, fazendo a coisa dela na frente do sapato. Então, cada uma dessas idéias. substituições da imagem das pessoas nos sapatos ajudam a criar interesse visual para esse sapato específico ou essa marca em particular. Então, para este projeto, você vai aprender como ele pegou todos esses elementos e colocá-los juntos. Como retocar a imagem é como organizar as camadas, como criar o mega menu e organizá-lo de uma forma que o desenvolvedor vai entender que este não é apenas um menu de navegação típico, e você vai aprender mais dicas profissionais ao longo do caminho também. Então, a primeira coisa que vamos precisar fazer é pegar algumas imagens para este design em particular . Se estiver pronto para começar, vou mostrar onde consegui essas imagens na próxima lição. Então vamos fazer isso. 18. Imagens: Quando se trata de imagens, ou você vai obter as imagens diretamente do seu cliente ou você vai ter que usar imagens stock em seu design. As chances são se o declínio está lhe dando imagens do que eles já compraram a licença para usar essas imagens no site. Se você estiver saindo e encontrando imagens de agências de ações ou de imagens do Google ou onde quer que você encontre a imagem, você deve informar os clientes que essa imagem em particular é protegida por direitos autorais e que eles não podem usá-la em seu site até que comprar uma licença para utilizá-la em seu site. Caso contrário, seus clientes vão se meter em problemas e eles podem acabar por vir atrás de você por danos por usar uma imagem protegida por direitos autorais. Então você só precisa informar que todas as imagens que você incluiu em seus designs, nossos direitos autorais protegidos e eles precisarão comprar essa imagem específica para usá-la . Então, para completar o projeto, precisamos baixar algumas imagens para que possamos usá-las no projeto. Então eu encontrei todas as imagens nas imagens do Google, e eu também criei um arquivo de texto com um link para todas as imagens que eu estou usando para que você possa baixar este arquivo desta palestra e navegar para cada uma das imagens e depois adicioná-las ao seu gimp documento. Agora eu quero salientar que, mesmo que eu tenha fornecido links diretos para as imagens que estou usando , elas podem ou não estar disponíveis no momento em que você está assistindo a este tutorial em vídeo. Como as imagens às vezes são removidas das imagens do Google , o que é bom, basta ir em frente e encontrar outra imagem que é semelhante à que estamos usando no projeto. Porque as ferramentas e as técnicas que você vai usar para retocar essas imagens podem ser aplicadas a qualquer imagem. Então eu só quero dar algumas dicas rápidas sobre como adicionar essas imagens ao seu documento de presente bem como imagens do Google antes de passar para o próximo tutorial onde vamos retocar essas imagens. Então, primeiro, vamos para as imagens do Google. E quando eu procuro imagens através de imagens do Google, eu gosto de encontrar as imagens da mais alta qualidade disponíveis, e se formos para ferramentas, temos algumas opções de classificação, então, se formos enfraquecer abaixo do tamanho, selecione grande e isso nos dará arquivos muito maiores com o trabalho, e eles tendem a ser de maior qualidade. E foi assim que encontrei esta primeira imagem de Michael Jordan, e vamos realmente usar esta imagem no projeto. Então, para adicioná-lo ao projeto, vamos clicar com o botão direito do mouse e selecionar copiar imagem. Então vamos para o Gimp e abrir o arquivo de grade que baixamos de uma lição anterior e, em seguida, com o atalho de teclado deles, podemos usar o controle Commander na letra V para colar esse arquivo, ou você pode subir para editar e selecione colar a partir daqui. Agora, se formos para outra imagem agora, quando é como esta borda de surf e copiamos esta imagem para a área de transferência, vamos para o nosso documento novamente, podemos ver que esta camada aqui foi adicionada, e é selecionado no momento. Agora, quando eu ir em frente e colar isso em, nós temos uma camada que diz seleção flutuante então antes se torna um real mais tarde, nós precisamos clicar com o botão direito sobre esta camada e selecionar para nova camada, e então ele irá adicionar esse arquivo a um nova camada, ou eu vou ir em frente e desfazer isso com o comando ou controle e a letra Z. Se formos para a nossa ferramenta de seleção de retângulo ou uma ferramenta de seleção de retângulo, selecione-a e, em seguida, basta clicar em qualquer lugar em seu documento. Ele irá adicionar automaticamente isso à camada. O único problema é que está a adicioná-lo à camada onde tínhamos o Michael Jordan, por isso também não queremos fazer isso. Então, neste caso, o que eu vou fazer é criar uma nova camada. Vamos dar o nome de surfista. Vou torná-lo transparente. Clique em OK e, em seguida, eu vou colá-lo e, em seguida, clique em. E então ele é adicionado a essa camada por si só. Então, essas são algumas maneiras diferentes de copiar e colar imagens em seu documento do gimp. A outra coisa que você quer fazer uma vez que você adicionar todas as suas diferentes camadas de novas imagens é que você quer entrar e clicar duas vezes para renomear as camadas de acordo com a imagem em si, então queremos dar-lhe uma descrição do que é essa camada. Isso é para nós e para o desenvolvedor da Web para nos ajudar a organizar melhor nossas imagens. Então sabemos qual deles é qual Então, se você for para novo, vá em frente e adicione o nome da camada aqui. Se você não fizer isso dessa maneira, basta clicar duas vezes e, em seguida, dar essa camada no nome com base na descrição dessa imagem. A outra coisa que queremos fazer é usar arquivos P e G para os logotipos. Então, sob ferramentas, podemos ir para cor e selecionar transparente. E isso vai nos dar uma lista de todos os arquivos PNG para esse logotipo em particular. E isso torna muito mais fácil contra tentar descobrir qual deles é PNG de todos esses arquivos, porque a maioria deles vai ser um arquivo J peg, e você vai ter que clicar em todos eles para descobrir quais são transparente e quais são os que você deseja usar. Como este. Aqui está um arquivo J Peg, e não é algo que possamos usar para este projeto em particular de qualquer maneira. Então, esses são exibidos algumas dicas sobre como usar imagens do Google e adicionar essas imagens ao seu arquivo gim. Então vá em frente e e todas as imagens e, em seguida, no próximo tutorial irá em frente e retocar . A imagem é 19. Imagens de retoque: Olá e bem-vindo de volta. Ok, então você deve ter todas as camadas de imagem colocadas em seus documentos de grade, e você deve ter todas as camadas nomeadas apropriadamente. Nós só agora precisamos organizar suas camadas um pouco para que o conteúdo semelhante seja agrupado . Então eu tenho todos os meus logotipos juntos aqui no topo, depois meus sapatos e depois todas as imagens com as pessoas. Você pode reorganizar camadas clicando e arrastando-as para um novo local. Guerra. Você pode usar as teclas de seta para cima ou para baixo para movê-las dessa maneira. Vamos em frente e desligar todas as camadas, exceto duas. E esse seria o logotipo da Nike e nosso fundo branco. Então vamos primeiro ao Logotipos Reese Ice e colocá-lo em posição, aparecer no topo. Então vamos remover o fundo de nossos produtos e as imagens com as pessoas. Então, redimensionar. A primeira coisa que precisamos fazer é mudar o limite da camada. Se você subir para visualizar e selecionar mostrar limite de camada, podemos ver o limite para esta camada é o tamanho real do documento. Isso não é o que queremos Queremos que este limite de camada se encaixe no tamanho do conteúdo real da camada, que seria nesta área bem aqui. Então precisamos fazer isso primeiro antes de redimensionar. Caso contrário, a escala será muito mais do que queremos, porque será dimensionada com base no tamanho do documento e não no tamanho do logotipo real. Então vamos subir para cortar a camada do conteúdo, e agora o limite da camada é redimensionado para o tamanho do logotipo em si e não o documento. Ok, para tornar este logotipo menor, porque é muito grande, precisamos usar nossa ferramenta de escala, que está localizada bem aqui. E o atalho de teclado é Shift Plus s. Agora só precisamos clicar em nosso logotipo, ter certeza de que ele está selecionado no painel de camadas, e então você está indo para obter esta caixa de limite em torno desse logotipo com alguns quadrados. Será que você pode clicar em para clicar e arrastar para dentro ou para fora para redimensionar. A outra coisa que podemos fazer é que podemos realmente digitar o real com ou a altura, e podemos ligá-lo para que se você digitar um a altura ou o com mude automaticamente para mantê-los em proporção. Então, se você tiver isso desligado aqui, isso significa que a largura e a altura não estão ligadas. Então, se eu redimensionar o com 2 50 a altura não muda e ele permanece em 418 pixels de altura e distorce o logotipo. Não é isso que queremos. Então nós vamos ligar isso, e nós vamos ir em frente e digitar 75 para a guia de clique de largura. E agora a altura é 27, o que mantém esse logotipo em proporção. Vamos clicar na escala, pegar sua ferramenta de movimentação com a letra V. Certifique-se de escolher mais cedo ou guia selecionado para que quando você clicar nela, você está realmente selecionando essa camada e, em seguida, basta movê-la para cima. Tudo bem, vamos fazer o mesmo com o logotipo Converse desta vez. Precisamos remover o texto do logotipo porque eu não quero isso como parte do logotipo. Então vamos pegar nossa ferramenta retangular aqui ou com a letra m. Desenhe uma caixa em torno dela, em seguida, clique em sua tecla delete ou sua tecla backspace, e então precisamos de selecionar com comando ou controle e a letra D. Tudo bem, não vamos esquecer de mudar a fronteira do Delayer. Vamos subir para camada, selecione cortar o conteúdo. Pegue sua ferramenta de escala com shift plus s. E desta vez vamos fazer 50 para a escala com clique. Voltar à ferramenta de movimentação. Mova-se para cima. Eu vou realmente fazer esse o último. Então eu vou colocar isso ali, e eu vou mover este para baixo um ar Jordan vai ser o segundo. Então vamos pegar que um corte Lear para ferramenta de escala de conteúdo. E vamos fazer 54 este no último também. Ok, vamos pegar nossa ferramenta de retângulo novamente com a letra M. E nós vamos excluir o comando de texto ou controle e a letra D para de Select Crop, a ferramenta de escala de conteúdo e 50 novamente. Tudo bem, os logotipos estão prontos. Vamos em frente e desligue isso. Por agora. Este é provavelmente um bom momento para salvar seus arquivos. Então aperte o comando ou controle e as letras s e eu vou trabalhar em meus sapatos Nike primeiro, então eu vou em frente e mover essa camada para cima e Converse será o terceiro. Muito bem, vamos continuar a gostar da camada de sapato Nike e vamos ligá-la. Kayla, amplie com a ferramenta de zoom agora. O que queremos fazer é que queremos um fundo branco puro. Agora, é um tom mais escuro de branco ou cinza. Então o que precisamos fazer é selecionar o fundo, bem como a sombra, porque eu quero me livrar da sombra e vamos precisar usar uma de nossas ferramentas de seleção para fazer isso. E então vamos usar uma máscara de camada para remover esse plano de fundo. Então, para esta edição, eu vou pegar minha ferramenta de seleção difusa, e eu vou definir meu limite para vamos fazer 20 para o limite e, em seguida, clique no plano de fundo para fazer sua seleção. Então agora é praticamente selecionado tudo em segundo plano e nada mais. Se eu apertar minha tecla delete, o plano de fundo é removido, mas não é isso que queremos fazer. Então precisamos adicionar à nossa seleção porque não está adicionando a sombra como parte da seleção para que possamos usar outra de nossas ferramentas de seleção para fazer isso. Mas o meu método preferido é usar o modo de máscara rápida, que está localizado aqui em baixo através deste ícone e, em seguida, o atalho de teclado para alternar o modo de máscara rápida. honra é a letra Q. Assim que ligar, vai ter uma máscara vermelha sobre o sapato nas sombras. Então agora, essa é a área que não está selecionada. Então vamos em frente e zoom no sapato aqui para que possamos ver a sombra um pouco melhor . E então o que vamos fazer é pegar nossa ferramenta de pincel, a fim de adicionar ou remover da seleção. Portanto, queremos que nossas cores de primeiro plano e plano de fundo sejam brancas e pretas. Eu só vou adicionar uma cor escreveu rápido, porque eu quero mostrar como é fácil mudar as cores para o primeiro plano e o fundo. E isso é simplesmente pressionando a letra D em seu teclado, e ele mudará para preto e branco. Lembre-se , Lembre-se , temos uma máscara de camada vermelha sobre a área que não está selecionada. Assim, o plano de fundo é selecionado e queremos remover da seleção. Então, neste caso, branco removerá da seleção ou removerá a máscara vermelha. E então, quando você alternar para fora deste modo de máscara rápida, você terá apenas o plano de fundo selecionado e não a sombra ou os sapatos. Então vamos pegar esse pincel, e vamos dimensioná-lo de acordo. E então você pode ajustar a dureza entre 25 75 dependendo da imagem. E agora eu vou deixar a dureza ajustada para 75 porque novamente, eu não vou sentar aqui e tentar fazer isso perfeito, porque o cliente pode me dar uma imagem diferente mais tarde. Então eu vou entrar aqui e remover a máscara vermelha das áreas que eu não quero que seja assim. Não faz parte da seleção. Então eu posso usar meu espaço Barkey para navegar para outras partes da imagem, bem como, apenas para ver se eu preciso encontrar Tune minha seleção. Isso parece muito bom. Então eu vou apertar a letra Q e então eu vou usar minha ferramenta de zoom e manter pressionada a tecla Control onde a tecla Command para que eu possa diminuir o zoom. Você também pode fazer essa seleção aqui. Amplie, diminua o zoom e você pode ver que o atalho de teclado está bem aqui. É controlado porque eu estou em um PC, e se você estiver em um Mac, vai ser comando, Tudo bem, então agora temos tudo selecionado que queremos remover as sombras e o fundo. Mas o que precisamos fazer é inverter a seleção ou reverter a seleção para que o sapato seja selecionado. E então, quando entramos na camada, mascarar o fundo e a sombra será removida. Então vamos subir para selecionar inverter e agora apenas o sapato está selecionado, e se eu cortar, você pode ver que os sapatos agora desapareceram. Então vamos para o nosso painel de camadas e selecionar máscara de camada. Você quer se certificar de que você tem a seleção selecionada e clique em Adicionar, e agora a sombra e o plano de fundo se foram. Ok, vamos selecionar com Controle de Comandante e a letra D. E se você der uma olhada na sua máscara de camada aqui, você pode ver que é preto e branco. Então preto remove formigas brancas e você pode ver o contorno do sapato bem ali em branco. E se não invertermos nossa seleção do que teria feito exatamente o oposto, agora que fizemos esse sapato, agora precisamos fazer a mesma edição para os outros dois sapatos. Ok, então o que vamos fazer são exatamente os mesmos passos que fizemos para o sapato Nike. Então, ao invés de eu ficar aqui retocando essas imagens e você me vendo fazer a mesma coisa , vou deixar você fazer isso sozinho. Então vá em frente e edite seus outros dois sapatos, e eu vou te contar um pequeno segredo. Vamos usar exatamente os mesmos passos. Quatro são imagens também, exceto talvez pela ferramenta de seleção. Porque embora a ferramenta de seleção difusa provavelmente funcionasse, teríamos que continuar trabalhando no aumento do limite para selecionar mais da imagem. Então, em vez disso, o que eu vou fazer é eu vou usar uma ferramenta de seleção diferente para começar com, e isso vai ser a minha ferramenta de seleção livre, então eu vou apenas clicar e arrastar e rastrear em torno do assunto principal aqui, que é Michael Jordan. Então, uma vez que temos nossa seleção, podemos entrar no modo de máscara rápida para ajustar nossa seleção. Então, para completar a seleção com o livre selecionável, tivemos que voltar ao ponto exato onde começamos e passar o mouse sobre essa área até que tenhamos esse pequeno círculo. Depois de fazer isso, você pode soltar o botão do mouse e, em seguida, pressionar a tecla Enter a tecla Return e, em seguida, você receberá sua seleção a partir dessa ferramenta. Agora podemos ir para o modo de máscara rápida pressionando a letra Q e, em seguida, usando nosso pincel para adicionar ou remover para a seleção conforme necessário. Então eu vou em frente e fazer isso. Mas eu vou avançar com essa parte do vídeo para que você não tenha que assistir isso em câmera lenta, porque não há muito mais que eu possa acrescentar que eu ainda não contei a você . A única coisa que eu recomendaria é manter sua mão perto da letra X, e a razão é que, se você pressionar a tecla X, ele mudará as cores do primeiro plano e do fundo de acordo. E então você pode facilmente selecionar essa chave se você sair da linha onde você precisa ir . Então, se eu entrar aqui, talvez eu esteja em seu rosto e seu braço aqui, eu comprimo a letra X e então eu posso remover rapidamente a máscara onde ela não deveria estar. E eles pressionam X novamente para continuar adicionando a máscara de camada conforme necessário. Tudo bem, então eu vou em frente e rápido em frente enquanto eu vou em frente e termino isso. Agora que tenho minha seleção refinada, vou pressionar a letra Q para sair do modo de máscara rápida. Agora que tenho minha seleção refinada, Agora, desta vez não preciso inverter a seleção porque o assunto está selecionado. Então eu só preciso vir e selecionar minha máscara de camada, fazer a sua seleção está selecionada e clique em Adicionar aqui e que remove o fundo. Quão legal é isso? Eu amo isso agora. Eu passei rapidamente por essa edição em particular, e eu talvez precise passar e encontrá-lo mais tarde. Se o cliente aprovar esta imagem em particular, você pode ver que eu não segui ao longo das bordas muito bem. E deixei alguns dos antecedentes aqui também. E é por isso que usamos máscaras de camada porque nos permite trabalhar de forma não destrutiva. E então eu posso selecionar minha máscara de camada para entrar e refinar essa edição. Ok, então eu vou deixar assim por enquanto. Agora, sua tarefa é ir em frente e terminar as outras duas imagens também, apenas usando as mesmas técnicas. Use qual ferramenta de seleção de sempre você acha que funcionará melhor para essa imagem em particular. Usado o modo de máscara rápida para refinar sua seleção na máscara de camada. E então você vai ser todo o trabalho definido dedo do pé no próximo tutorial que estará trabalhando na primeira parte do nosso cabeçalho. 20. Acampamento 1: Olá e bem-vindo de volta. Tudo bem, então para este tutorial, vamos começar a trabalhar em nosso cabeçalho do nosso site, e vamos organizar e configurar nossos logotipos e colocá-los exatamente onde eles precisam estar. Então, temos o posicionamento perfeito do pixel. Vamos usar nossa ferramenta de alinhamento e algumas formas de traços, etc. E, em seguida, no próximo tutorial, vamos seguir em frente e encerrar a parte do cabeçalho do design e a razão pela qual eu estou quebrando isso porque vai ficar um pouco longo porque eu quero explicar um monte de coisas ao longo do caminho para dar você algumas dicas pro para projetar o cabeçalho de seus sites. Então vamos em frente e começar. Eu vou fazer zoom, e assim eu posso ver meu logotipo é um pouco melhor. E agora eu tenho as grades desligadas, então eu vou ir em frente e ligá-los novamente. Mas eu também quero ativar meus guias que estão incluídos neste modelo de grade. Então, para vê-los, você pode ir até ver e selecionar mostrar guias. Aqui está o atalho de teclado para o que é Commander Control e a tecla ponto-e-vírgula. Uma vez que você liga isso, você vai ver todos os seus guias, e eles estão alinhados com as colunas também. Então esta primeira diretriz aqui está à esquerda da coluna. E então temos outra diretriz à direita da coluna também, que é uma quantidade igual de espaço entre aqui e aqui. E esta diretriz basicamente divide o espaço entre a primeira e a segunda coluna uniformemente e a mesma coisa com a segunda e 1/3. Temos outra diretriz que divide isso, etc. Então isso apenas espaça igualmente todas as colunas para que possamos usar as diretrizes como um guia para alinhar nossos elementos de uma forma que tudo esteja alinhado perfeitamente e tenha simetria. Então o que queremos fazer é colocar nossos logotipos diretamente no centro das colunas da esquerda para a direita. Mas eu também quero definir a altura do espaço do cabeçalho. E então vamos alinhar esses logotipos entre a parte superior e a parte inferior da altura do cabeçalho também. Então isso vai fazer muito mais sentido à medida que vamos ao longo deste tutorial e começamos a alinhar tudo corretamente. Então vamos em frente e definir a altura do cabeçalho primeiro. Então o que eu quero fazer é que eu quero torná-lo maior do que a largura desta coluna aqui. Então temos algum espaço entre a parte superior e a parte inferior dos logotipos também. Então primeiro temos que determinar o que o com é para esta coluna em particular. Bem, nós podemos sentar aqui e podemos contar os pixels, mas nós realmente temos uma ferramenta de medida, que está localizada bem aqui, que nos dará a medição ou a distância entre o lado esquerdo e o lado direito de a coluna. Então, se pegarmos esta ferramenta e, em seguida, clicar neste segundo guia aqui e, em seguida, arrastar para o segundo guia, uma vez que soltarmos o botão do mouse, ele vai adicionar o ponto dessa ferramenta de medição bem ali. E então, se dermos uma olhada aqui, podemos ver o número de pixels ou a largura dessa coluna, que é de 90 pixels. Então a altura precisa ser mais de 90 pixels, então temos que decidir quantos pixels de espaço queremos na parte superior e na parte inferior dos logotipos? Então, digamos 20 pixels para a parte superior e 20 pixels para a parte inferior, modo que isso é 40 pixels no total. Precisamos adicionar isso ao com. Então isso é 130 pixels para a altura do nosso cabeçalho. Então podemos ir em frente e apertar a tecla de escape no teclado para nos livrarmos dessa medição. E então podemos ir em frente e pegar nossa ferramenta de movimento com a letra V. E então nós só precisamos adicionar um guia aqui em baixo a 130 pixels. Mas é meio difícil de ver a menos que você amplie ou tente contar o número de barras aqui para encontrar 1 30, mas nós temos uma pequena ferramenta aqui embaixo novamente que nos mostrará exatamente onde é a colocação desse guia enquanto o arrastamos para fora, disse Toe, adicionar um guia. Precisamos clicar na régua aqui em cima e arrastado para baixo e para baixo lá. Se você der uma olhada lá em baixo, ele diz adicionar guia 11 Então nós estamos adicionando esse guia em ah 111 pixels para baixo. Nós queremos 30 então continuamos descendo até chegarmos em 1330 Ok, então essa é a altura do nosso cabeçote. E agora podemos ir em frente e na fila. São logotipo Nike da esquerda para a direita e de cima para baixo. Então, a fim de alinhar nosso logotipo neste espaço, precisamos criar uma seleção e, em seguida, usar nossa ferramenta de alinhamento para alinhá-lo dentro dessa seleção. Então vamos pegar nossa ferramenta de seleção de retângulo e desenhar uma seleção no espaço. Então podemos pegar nossa ferramenta de alinhamento, que está localizada aqui e, em seguida, nas opções da ferramenta. Precisamos ter certeza de que temos relativo e ter seleção selecionada. Também queremos ter certeza de que nosso logotipo foi selecionado, e agora precisamos definir o objeto que precisa ser alinhado. E podemos fazer isso clicando no nosso logotipo. Uma vez que o fizermos, você vai ver esses quatro pequenos quadrados em cada canto e que permite dar Não, este é o objeto ou o elemento que precisa ser alinhado dentro da seleção. Então voltamos para nossas duas opções e selecionamos um centro de linha do alvo e agora ele foi perfeitamente alinhado do lado esquerdo e direito. Então ele está centrado no meio da coluna, e então precisamos fazer o mesmo para a altura. Então, um meio deitado do alvo e agora está perfeitamente alinhado no centro da seleção. Vamos em frente e de selecionar com o Commander Control e a letra D. Ok, precisamos fazer a mesma coisa para nossos outros três logotipos também. Mas antes de fazermos isso, eu quero ir em frente e adicionar um círculo para cada um dos logotipos. Então a primeira coisa que precisamos fazer antes de criarmos nossa forma é que precisamos criar uma nova camada. Então, clique neste ícone aqui. Vamos nomeá-lo, Círculo um, e vamos ter certeza de que temos transparência selecionada e clique em OK, agora podemos pegar nossa ferramenta Elipse, certifique-se de que você tenha fixo e proporção selecionada, e então apenas clique e arraste uma forma. E então precisamos torná-lo 90 pixels de largura por 90 pixels, mais alto como se fosse seu brega e agora que você tem sua forma, podemos preenchê-lo com uma cor branca, então mudou o primeiro plano um branco, pegar seu balde, ferramenta de preenchimento e, em seguida, clique no interior. Eu também quero adicionar um traçado em torno dessa forma, então vamos subir para editar e selecionar a seleção de traçados. Certifique-se de que você tem cor sólida selecionado anti alias ing e, em seguida, para a linha com Queremos um. Queremos alterar o preto de volta para a cor do primeiro plano e, em seguida, clique em traçado. OK, então agora temos um traço em torno da nossa forma, e precisamos de selecionar com o Commander Control e a letra D. Vamos pegar essa forma com a nossa ferramenta de movimento e movê-la aqui para a segunda coluna. Nós também queremos alterar o limite da camada para este círculo porque agora é o tamanho do nosso próprio documento. Então, se eu vir aqui, eu realmente preciso de um zoom todo o caminho para fora. Podemos ver o limite da camada, que é esta linha pontilhada amarela e preta, e precisamos colapsar isso para o tamanho do nosso círculo. Então vamos para a camada cortar o conteúdo e agora o limite da camada mudou. Eu vou ir em frente e esconder isso Agora nós precisamos alinhar esta forma particular diretamente no centro desta coluna para que eu possa usar minhas teclas de seta para movê-lo para a esquerda, direita para cima ou para baixo um pixel de cada vez para alinhá-lo diretamente para a esquerda, direita. Mas agora precisamos usar nossa outra técnica para alinhar criando uma seleção nesta área com nossa ferramenta de seleção. E então podemos pegar nossa ferramenta de alinhamento. Clique nessa forma, certifique-se relativo à seleção ainda está selecionado e que sua camada está selecionada e, em seguida, uma linha no meio do alvo. Ok, esses controles de comandante selecionados na letra D. Agora precisamos mover essa camada particular abaixo do logotipo da Air Jordan, e agora precisamos pegar esse logotipo e alinhá-lo diretamente no centro do nosso círculo. Então vamos em frente e pegar nossa seleção de retângulo para novamente e fazer uma seleção. E então, com a ferramenta de alinhamento, você deseja clicar no logotipo e, em seguida, alinhar a área central e central. Vamos em frente e adicionar um círculo para nossos outros dois logotipos, bem como uma linha cada um dos elementos dentro de seu espaço. Então vamos pegar nossa camada de círculo. E em vez de fazer isso do zero, podemos realmente duplicar a camada clicando neste ícone aqui. Vamos chamá-lo circulado para, e vamos mover isso para baixo do logotipo Hurley. Vamos agarrá-lo com a nossa ferramenta de movimento e movê-lo. Kate estúpida, esta aqui. Ok, vamos começar alinhando o logotipo Hurley, e então vamos fazer cada camada depois disso. Então seleção, ferramenta, alinhamento, ferramenta, ferramenta, Clique no logotipo e, em seguida, alinhe-o. Certo, já que já temos essa área selecionada, tudo o que temos que fazer é pegar nosso círculo para camada, e então com nossa ferramenta limite, clique no círculo e então podemos alinhar esse. Kayla faz o alinhamento para as últimas camadas de seleção. Vamos em frente e usar nossa ferramenta de zoom para diminuir o zoom apenas para dar uma olhada melhor na maneira como tudo está alinhado. E isso parece muito bom. Vá em frente, desligue a camada de grade e a primeira parte do nosso cabeçalho é feita. Tudo bem, então nós vamos em frente e passar para o próximo tutorial, que vai incluir adicionar a segunda parte do nosso cabeçalho, que é a segunda navegação Dairy aqui à direita. E eu também vou dar algumas dicas profissionais adicionais sobre como encontrar topografia ou tipos específicos de fontes que estão sendo usados em sites. Porque talvez seu cliente tenha comprado ou usado um tipo específico de fonte em seu site e porque você está redesenhando, eles querem usar a mesma fonte, mas eles não sabem o nome do fundo. Bem, vou mostrar-te exactamente onde encontrar o nome dessa fonte. Então, se você está pronto, vamos em frente e começar com isso. 21. Organizar: Olá e bem-vindos de volta bem antes de começarmos o mega menu. Como mencionei na última lição, primeiro quero ajudá-lo a se organizar com seus arquivos de Web design, e há algumas razões pelas quais você quer se organizar. A primeira é para seu próprio benefício. À medida que trabalhamos neste projeto, vamos adicionar muitas mais camadas às camadas que já temos. E se você precisa voltar e fazer ajustes em alguma coisa, você vai gastar muito tempo rolando através tentando encontrar isso especificamente er assim. O que você pode fazer é organizar as camadas em camadas de grupo para tornar mais fácil encontrar o que você precisa. A outra razão pela qual você quer se organizar é que este arquivo provavelmente irá para um desenvolvedor da Web para ser revestido se você não estiver fazendo isso sozinho, então você vai enviá-lo diretamente para um desenvolvedor da Web. Ou talvez você tenha sido contratado por uma agência que vai terceirizar para um desenvolvedor da Web. Em ambos os casos, eles vão enviar este arquivo de volta para você e dizer que ele precisa ser camadas organizadas e agrupadas. E se isso acontecer com você porque eles não foram organizados, você vai parecer antiprofissional. E as chances são de você não trabalhar com esse grupo particular de pessoas novamente. Então deixe-me ir em frente e mostrar-lhe como organizar todas essas camadas em camadas de grupo para que você possa torná-lo muito mais fácil para você e dedo do pé. Pareça mais profissional quando você trabalha com outras pessoas em sua equipe ou se você é contratado por uma agência. Então, uma das coisas que precisamos fazer, como fizemos com algumas de nossas camadas anteriormente é que precisamos nomear as camadas apropriadamente com base no que essa camada se trata. Então aqui temos a caixa principal para a nossa caixa de navegação, o que é bom, mas o nosso carrinho de compras. Embora tenha carrinho de compras nele, é mais simples apenas fazer duas palavras. Carrinho de compras versus o que estava lá antes. E, em seguida, aqui podemos renomear este menu de navegação principal camada, e então este seria o nosso menu de navegação secundário. E o que eu recomendo fazer é entrar no hábito de renomear e agrupar suas camadas enquanto você está trabalhando, não no final do projeto porque se você esperar até o final do projeto, você vai levar muito mais tempo para percorrer e encontrar todas as camadas diferentes que deveriam estar juntas e agrupar-se. Então, novamente, é muito melhor e mais rápido fazê-lo como você está trabalhando em vez de fazê-lo no final. Então, vamos clicar em nossa camada superior clique com o botão direito e selecione Novo Grupo de Camadas. Então aqui está o nosso jogador do grupo e vamos nomear esta navegação primária. E então vamos arrastar todas as camadas que fazem parte da navegação primária para que elas sejam agrupadas. Nós vamos clicar e arrastar para cima uma vez que liberar essa camada será recuado dedo do pé à direita, e isso permite que você saiba que essa camada particular está nesta camada de grupo. Então, se fecharmos esse jogador do grupo em particular, essa camada desaparecerá. Por isso, também temos o nosso menu de navegação principal. Eu vou colocar essa taxa aparecer no topo. Ok, então é isso para a navegação primária. Vamos em frente e fechar isso, e vamos criar um novo grupo de camadas acima do nosso carrinho de compras. Ele e foi chamado de navegação secundária, e nós vamos colocar lá, é claro, claro, o carrinho de compras e o menu de navegação secundário. Tudo bem, agora temos um monte de logotipo, então vamos em frente e adicionar um novo grupo de camadas para os logotipos, e vamos colocar cada um deles dentro. Agora, a outra coisa que você pode fazer para ajudá-lo a organizar ainda mais suas camadas é você pode colocar camadas de grupo em outras camadas agrupadas. Então, se selecionarmos nossa camada Air Jordan clique com o botão direito e criar um novo grupo de camadas, ele será adicionado acima disso. E então podemos colocar o logotipo da Air Jordan e circular um dentro de lá. E então podemos renomear este grupo aqui logotipo Jordan. Então vamos fazer isso para os outros dois logotipos também. E novamente, isso apenas mantém tudo junto que é semelhante a outras camadas. Agora que temos todas essas camadas agrupadas em três camadas de grupos, não é tão difícil navegar e encontrar o que precisamos. Também precisamos fazer a mesma coisa com os sapatos, mas vamos agrupá-los à medida que chegarmos às partes do projeto. Por enquanto, vamos em frente e começar o mega menu no próximo tutorial. Então, se você está pronto para isso, bem, vamos fazê-lo 22. Acampamento 2: Olá e bem-vindo de volta. Tudo bem, então nesta lição, vamos trabalhar em nossa navegação primária e secundária. Mas primeiro, quero compartilhar rapidamente com você uma ferramenta que você pode usar para encontrar fontes específicas em sites ao vivo . Isso é útil se o seu cliente tiver uma fonte específica que deseja usar no site existente ou no site de outra pessoa, mas ele não sabe o nome do fundo. Então esta ferramenta, é uma ferramenta de desenvolvedores da Web e é gratuita. E já está instalado na maioria dos navegadores modernos, como Chrome e Firefox. Prefiro usar cromo. Então vamos em frente e vamos para o cromo. E, em seguida, se clicarmos com o botão direito do mouse em mim pedaço de texto, selecionamos inspecionar. E então nós temos essas duas colunas aqui na parte inferior do navegador, e então nós só precisamos navegar e encontrar uma família divertida, que é bem aqui. E então você verá uma lista de todas as fontes que estão sendo usadas para esse pedaço de texto . Agora, por que há tantos? Bem, a primeira família 5 aqui, uma moeda Nike é a fonte principal, e a que deve ser carregada no seu navegador se não estiver disponível no seu navegador, porque talvez você esteja usando um navegador mais antigo e não é suportado. Então ele vai carregar a segunda fonte, que é Trade Gothic. Se esse não estiver disponível, isso vai carregar Helvetica, e então ele vai tentar Aereo, e é por isso que há mais de um. Então, o que queremos usar e nosso Web design, se o cliente ainda quiser usá-lo, é uma moeda Nike. Infelizmente, não temos acesso a este funt, e depois Trade. Gótico é uma fazenda premium, que requer uma compra e, em seguida, os dois últimos são fontes gratuitas. Mas eles parecem completamente diferentes desses dois fundos aqui, então podemos tentar e acessar esse achado de nosso cliente se eles ainda têm disponível. Ou podemos tentar encontrar um Funt semelhante, e podemos ir para fontes dot google dot com para tentar encontrar um fundo que é semelhante aos estão sendo usados no site existente. Agora todos esses fundos são de graça. Há outros lugares onde você pode baixar fontes gratuitas também, então é apenas uma questão de fazer alguma pesquisa e tentar encontrar um funt que é semelhante ao que eles querem usar se você não pode obter a fonte real que eles querem usar. A não ser, é claro, estejam dispostos a comprar esse fundo em particular. Então, para este Web design em particular, eu vou usar uma fonte completamente diferente. E eu vou usar uma fonte chamada Oswald para a navegação primária e para títulos e , em seguida, ferroviária para a navegação secundária e algumas outras coisas também. Então você pode baixar esses fundos daqui. Se você quiser usar exatamente as mesmas fontes, não importa. Você pode usar qualquer fonte que você deseja usar, então vamos em frente e começar a navegação secundária primeiro digitando, faça login. E então vamos adicionar cinco espaços para adicionar separação, digitar ajuda e, em seguida, mais cinco espaços. E isso é porque nós vamos adicionar um ícone de carrinho de compras à direita disso também. Eu também preciso mudar por fonte e tamanho, então eu apenas clique duas vezes dentro para selecionar o texto, e então eu só preciso digitar o nome da fonte que eu quero usar aqui, que é na verdade ferroviária. E então eu vou digitar 16 para o tamanho da fonte. Assim que eu cliquei em Tab, ele vai redimensionar esse conteúdo para mim. Vamos em frente e mover isso para o topo. Por enquanto, vamos pegar nossa ferramenta de movimento. Eu preciso de um zoom em um pouco aqui. Vamos também ligar os nossos guias com o Commander Control e o filho Michael e Key para que possamos ver onde colocá-los. Então eu vou movê-lo aqui para o lado direito desta última coluna. Se ligarmos a grade, podemos ver isso um pouco melhor. Agora só precisamos encontrar um ícone de carrinho de compras, e vamos fazer uma pesquisa rápida no Google para um ícone de carrinho de compras gratuito. Agora, assim como acontece com as imagens, elas podem ou não ser gratuitas, e podem ou não ter direitos autorais. Se eles têm uma marca d'água como esta aqui, bem, nós praticamente sabemos que vai ser um Icahn protegido por direitos autorais. Então, ou precisamos comprar o ícone e, em seguida, construir nossos clientes por essa taxa, ou podemos criar o nosso próprio no Gimp ou podemos tentar encontrar um ícone gratuito. Este ícone aqui é gratuito, mas tem o que é conhecido como uma ATRIBUTION necessária para usá-lo. Então o que é uma atribuição e atribuição é um conjunto de código que ele teve que colocar em seu site? Esse é um link de volta para este site em particular, Então ele diz aqui, licença livre com atribuição. Então, se você quiser usá-lo, você tem que adicionar um link de volta ao site. Isso normalmente não é algo que eu queira fazer. Eu quero encontrar um ícone 100% gratuito, mas por enquanto, vamos apenas baixar este ícone em particular. Realmente não importa nenhum ícone que você queira usar. É só para praticar. Então vamos em frente e navegar até a página de download. Vamos selecionar PNG 16 para o tamanho, e então você pode ver aqui o código que você precisa adicionar ao site para uma atribuição novamente. Isso não é algo que eu recomendo fazer. Então é por isso que você quer encontrar um ícone 100% gratuito. Vamos em frente e baixar este por agora e, em seguida, adicioná-lo ao nosso design de site aqui , eu vou apenas clicar e arrastá-lo sobre o meu documento. Uma vez que eu liberar, ele vai ser adicionado em uma nova camada. Então essa é apenas outra maneira legal de adicionar arquivos adicionais ao seu documento. Só vou ampliar um pouco para que eu possa pegar este ícone e colocá-lo no lugar. Tudo bem, vamos em frente e pegar nossas ferramentas retangulares. Podemos alinhar tudo exatamente onde deveriam estar. Vou passar por cima da área da calha e esta coluna aqui para alinhar esta camada diretamente no centro, cima para baixo, direita, esquerda para ter certeza que a camada está selecionada. Uma ondulação. Pegue sua ferramenta de alinhamento. Agora vamos nos certificar de que clicamos em nossa camada aqui também, que gimp saiba que é a camada que queremos ah, linha no espaço. Certifique-se de que você tem a seleção selecionada e, em seguida, um centro de linha de destino e alinhe o meio do alvo. Vamos em frente e de select e fazer a mesma coisa para o nosso carrinho de compras. Tudo bem, então a última parte é adicionar nossa navegação primária. Vamos ir em frente e diminuir um pouco aqui. Vou esconder meus homens com o Controle de Comandante e o cólon voltar para a ferramenta de texto. Vamos digitar tudo em maiúsculas vai fazer homens, e então vamos fazer cinco espaços. E novamente, isso nos dá alguma separação entre cada item de linha. Vamos manter pressionada a tecla Shift e, em seguida, usar a tecla de seta para a esquerda e mover por cinco espaços para que possamos selecionar todos os cinco espaços para que possamos copiar isso e colá-lo no final de cada item. Assim, o teclado para cortar é comando ou controle e ver. E então, se eu apertar minha tecla de seta para a direita, eu vou para o fim, e eu posso continuar digitando e, em seguida, comando ou controle e V para colar esses cinco espaços. Ok, eu vou em frente e terminar o resto dos itens do menu. Vou selecionar tudo com Commander Control e a letra A Vou mudar o dedo do pé da fonte Oswald e 24 para o tamanho. Apresse-se. Vamos pegar nosso movimento, ferramenta, e vamos apenas movê-lo aqui para o topo, e então vamos usar nossas ferramentas de alinhamento novamente para alinhá-lo diretamente no centro do nosso documento. Então vamos começar aqui do lado esquerdo todo o caminho para a direita. Culpe, ferramenta, clique sobre ele e, em seguida, um centro de linha e meio do alvo. Agora, a última coisa que eu quero fazer é realmente mover isso para cima um pouco mais alto, porque é para baixo muito longe. E se ligarmos os nossos guias com o Commander Control e o semi dois-pontos, podemos ver que há muito espaço no topo e os ícones de que precisamos para chegar um pouco mais perto. Então este primeiro guia é às 13:30 Eu acho que vou fazer um segundo guia em 1880 Então lembre-se olhar para a parte inferior da sua interface agora, a fim de obter o guia em 1880 Tudo bem, vamos em frente e desligar nossa grade. Isso vai tornar mais fácil selecionar esta camada em particular e vamos movê-la para cima. Então o que vamos fazer é refazer esse alinhamento que acabamos de fazer para que possamos colocá-lo diretamente no centro, falar sobre ele e à esquerda deste novo tamanho que criamos para o menu. Tudo bem, vamos em frente e pegar nossas ferramentas retangulares para que possamos realinhar nossa navegação primária, obter a ferramenta limite, clicar no menu e, em seguida, realinhar uma taxa selecionada. Agora, antes de passarmos para a próxima parte deste projeto, acho que há algumas coisas que podemos fazer para melhorar esse design de cabeçalho. O que eu quero fazer é pegar esses logotipos aqui e quero diminuir a opacidade para que eles não estejam tão escuros como estão agora. Porque este é o logotipo principal. Estes secundários aéreos e eu não quero esses logotipos competindo com este aqui. E podemos simplesmente fazer isso diminuindo a opacidade dessas três camadas. E vou deixá-los cair também. 30 para a opacidade em todos os três. Agora, a última coisa que eu quero fazer é adicionar uma linha acima e abaixo da navegação primária . Isto vai ajudar a separar a parte superior da cabeça. Então, para fazer isso, vamos subir até o topo aqui, e vamos criar uma nova camada. Vamos chamá-lo de caixa primária. Vamos mantê-lo definido para transparência para o clique de preenchimento. OK, então vamos pegar nossa ferramenta de retângulo e precisamos ligar nossos guias também. Então vamos fazer uma seleção aqui, subir para editar selecionar seleção de traçado e, em seguida, todas as configurações que criamos para os círculos devem ser as mesmas. E vamos usá-los novamente. Então, basta clicar no traço. Vamos selecionar o Controle do Comandante nos guias D e Haider e agora temos essa linha acima e abaixo dela. Ok, eu acho que estamos prontos para passar para a próxima parte do projeto, que vai ser o mega menu deste web design. 23. Mega: Olá e bem-vindo de volta. Tudo bem, então o próximo passo do nosso cabeçalho é criar um mega menu para que nosso desenvolvedor da Web saiba que esses links para a navegação não são apenas links padrão, mas links que ligam a um mega menu. Então, se voltarmos para o site da Nike e eu passar o mouse sobre um dos itens do menu, podemos ver o enorme mega menu de links adicionais que mostram todos os diferentes produtos nas diferentes categorias. A outra coisa que temos é esta pequena linha preta bem aqui embaixo dessa categoria em particular , e não a vemos em nenhum outro lugar até navegarmos para essas outras categorias. Então isso é conhecido como um estado de pairamento, e a outra coisa que você vai notar é que há uma mão lá, e quando eu me afasto dela, ela muda para uma seta, modo que a mão também é parte do estado flutuante. Então, quando se trata de seu estado flutuante, há muitas coisas diferentes que você pode fazer. Além de adicionar uma linha na parte inferior, você pode adicioná-la no topo. Você poderia adicionar uma caixa. Você pode alterar a cor do texto ou do plano de fundo ou ambos. Há muitas coisas diferentes que você pode fazer, independentemente do que você decidir para o seu Web design. Você precisa mostrá-lo nesse Web design para que o desenvolvedor da Web saiba o que vai acontecer quando você passar o mouse sobre uma determinada área. Então, neste tutorial, vamos criar nossos estados de foco e criar nosso mega menu. Vamos ir em frente e ampliar nossa navegação primária, e a primeira coisa que eu quero trabalhar é aquela linha abaixo da categoria que estava pairando sobre. Vou sair dos meus guias com o Commander Control e o semi-cólon, e vamos arrastar um guia até o fim e o início desta palavra aqui. Vamos então pegar nossa ferramenta de seleção com a letra M. Vamos desenhar uma seleção entre esses dois guias e vamos como nossa caixa principal. Muito bem, use seus teclados foram cortados para copiar aquela área em particular com controle de comandante na letra C e, em seguida, acelerá-lo com comando ou controle e a letra V voltar para suas camadas porque temos uma seleção flutuante, precisamos movê-lo para sua própria camada para que possamos fazer isso clicando com o botão direito do mouse e selecionar para nova camada. A Kate. Vamos renomear essa linha de focagem, e isso realmente precisa sair desse grupo de jogadores, ou vamos puxar tudo para fora. E vamos criar um novo grupo de camadas chamado Hover State e vamos colocar sua linha de foco dentro. Agora o que eu quero fazer é que eu quero deixar essa linha um pouco mais escura. Vou esconder os meus guias aqui com o Comandante de Controlo e o Semi Colon. Vamos pegar nossa ferramenta de enchimento de balde. Certifique-se de que você tem preto selecionado para o primeiro plano e, em seguida, clique nessa linha para torná-lo preto puro. Tudo bem, vamos fazer uma pesquisa no Google para o nosso ícone de mão. Permite digitar ícones de mão do mouse livre. Clique neste botão PNG para ajoelhar suas buscas. Este aqui parece que vai funcionar. Vamos clicar com o botão direito do mouse em Selecionar cópia de imagem e, em seguida, Commander Control e V para colá-lo . E vamos à direita. Clique na camada e selecione uma nova camada. Tudo bem, definitivamente muito grande. Tudo bem, vamos em frente e diminuir o zoom com comando ou controle e a tecla zero e vamos pegar nossa ferramenta de escala foi Shift plus s e vamos mover isso para baixo um pouco para que possamos vê-lo um pouco melhor. E vamos pegar um canto e deixá-lo para, digamos, 91. Por enquanto, talvez precisemos ir mais pequeno. Vamos dar uma olhada ampliando. Na verdade, é um pouco grande demais ainda certo. Então vamos reduzi-lo novamente. Se você pegar o centro desta caixa de escala bem aqui, você pode movê-lo para a posição. Então, vou movê-lo para lá. Clique na escala. E a outra coisa que quero fazer é remover esta flecha porque não precisamos disso . Vai pegar a ferramenta de retângulo com a letra m selecioná-lo e, em seguida, aperte o backspace ou excluir a tecla. Não é um ícone de alta qualidade, mas funcionará por enquanto. Se vamos usar um ícones personalizados como este, eu gastaria um pouco mais de tempo em encontrar um ícone de maior qualidade. Então, para tornar isso um pouco mais fácil, vamos voltar para o site da Nike e vamos copiar o conteúdo de cada coluna e criar uma nova camada para cada coluna em nosso projeto de Web design. Então vamos para a primeira coluna, selecionar todo o Controle de Comandante e ver para copiar e depois o quê? Sua ferramenta de texto podemos colar com Commander Control na letra V. Nós vamos selecionar tudo e vamos redimensioná-lo para 16 pixels para o tamanho da fonte, e vamos usar a ferrovia para o Funt. Vamos, na verdade, ousar. Uma vez que esta primeira coluna é negrito em seu site irá em frente e coincidir com isso por enquanto. Vou selecionar minha ferramenta de movimento para sair de lá e ampliar um pouco. Tudo bem, vamos voltar e fazer alguns ajustes no nosso texto. Agora mesmo. O texto é muito próximo, e está tornando mais difícil de ler, então eu quero adicionar algum espaço entre cada uma das linhas. A outra coisa que eu quero fazer é aumentar o tamanho, e eu acho que eu quero mudar o estilo da fonte bem para algo com um peso mais pesado . Eu vou com ultra negrito e, em seguida, dedo do pé adicionar o espaço extra entre cada linha. Nós vamos aumentar a linha de base do texto selecionado, então eu acho que 14 vai funcionar muito bem. Parece muito mais fácil de ler, então vamos com isso. Vá em frente e zoom aqui e vamos colocar esta primeira coluna aqui para a direita. Na verdade, vamos tirá-lo do estado pairante porque não é parte do Estado pairante. E vamos em frente e mover que estamos aqui para a esquerda. Certo, vamos copiar a próxima coluna e basicamente a mesma coisa desta vez. Não vou usar Ultra Bold. Eu vou com o mesmo tamanho médio, esses 16 pixels e depois 16 novamente para a linha de base. Agora, o título dos sapatos deve ser um pouco mais escuro, já que é um título. Então vamos mudar isso para Ultra Bold. Então só precisávamos fazer isso mais três vezes. Vou em frente e acelerar este vídeo tutorial para que você não tenha que assistir isso em câmera lenta , já que eu já fiz isso duas vezes. E então você pode ir em frente e fazer isso sozinho também. Tudo bem. O que? Elas estão ligadas. Vou em frente e mover isto para a coluna da direita aqui e depois este aqui . Eu vou para a coluna da esquerda, refrigerante alinha com o logotipo da Nike aqui. Mas eu preciso mudá-lo para a escolha de uma camada ou opção guia. Caso contrário, vou continuar a mover esta camada para cá. Certo, vamos criar um novo grupo de camadas. Vamos chamá-lo de mega menu texto, e vamos colocar cada uma dessas colunas dentro. Eu também vou organizar minha camada para que eles estejam na ordem correta e vamos renomeá-los . Então temos novos lançamentos, sapatos e roupas. Certo, vamos desligar os guias. Tudo bem, vamos alinhar todas as nossas colunas para que elas estejam alinhadas no topo para que possamos pegar nossa ferramenta de retângulo para criar uma seleção para nos dar um ponto de partida. E então só precisamos pegar cada uma das colunas individualmente com nossa ferramenta de alinhamento , e precisamos ter certeza de que selecionamos agora. O problema é que estamos selecionando toda a camada de grupo e não a camada em que clicamos. Então vamos precisar mover estes para fora da camada de grupo para que possamos alinhá-los e em seguida, podemos movê-los de volta. E então vamos selecionar uma linha para a borda superior do alvo. E então vamos fazer isso para as outras colunas é enquanto precisamos ter certeza de que selecionamos essa camada bem com a ferramenta de alinhamento. Ok, vamos selecionar e mover tudo de volta. Tudo bem, eu vou pegar todo o grupo de texto, e eu vou movê-lo para baixo. E antes de tentar movê-lo, certifique-se de mover a camada ativa selecionada e, em seguida, clique nela e, em seguida, use as teclas de seta para movê-la para baixo. Ok, então a última coisa que precisamos fazer é adicionar algum espaço adicional entre as colunas. Temos muito aqui e não o suficiente aqui, então vamos ligar nossa rede e Spacey está um pouco melhor. Agora, antes de fazer isso, vamos em frente e ampliar e adicionar um guia para o topo de nossas colunas aqui. Então sabemos exatamente onde ele precisa ir para alinhar e vamos eleger a loja por camada de tendências . Mas eles são movidos ferramenta e, novamente, precisamos ter certeza de mover camada ativa é selecionado para que possamos selecionar essa camada e não outra coisa. Eu vou movê-lo aqui para esta coluna de grade bem aqui e então eu vou apenas usar minhas teclas de seta para movê-lo para o lugar. Ok, vamos em frente e alinhar o mega menu diretamente no centro. Tudo bem, então tudo parece muito melhor agora. Então a última coisa que quero fazer é adicionar outra linha aqui para mostrar que é o fim do mega menu. Vamos entrar em nossa navegação primária e selecionar nossa caixa principal e duplicado infinito Renomeá-lo mega menu. Resumindo, mova isso aqui. Vamos pegar nossa ferramenta de movimento, e nós vamos mover esta linha aqui para baixo para o canto inferior direito sobre lá deve ser bom . O que eu quero fazer é me livrar desta linha de topo aqui. Nós não precisamos, então vamos voltar para a ferramenta de retângulo com a letra M, selecioná-la e, em seguida, pressione a tecla delete ou backspace. Tudo bem, vamos nos certificar de que temos uma quantidade uniforme de espaço entre o final desta linha e o topo desta linha para o nosso mega texto do menu. Vamos selecioná-lo e usar nossa ferramenta de seleção novamente para fazer uma seleção para a altura. Perfeito. Tudo bem, vamos criar um novo grupo, camada. Na verdade, não dentro dessa. Este nome, este mega menu. E nós vamos colocar esta camada de grupo dentro e a linha de fundo, bem como nosso estado de foco . Nós também precisamos colocar essas camadas de grupo em particular na ordem adequada também. Devemos ter os logotipos no topo, seguido do secundário primário, e então fazer um menu. Ok, agora que terminamos com o nosso mega menu, podemos começar a trabalhar na próxima parte do nosso site. Mas antes de fazermos isso no próximo tutorial, eu quero rever alguns pequenos ajustes que devemos fazer para o nosso cabeçalho antes de começarmos na seção de heróis. Então vamos cobrir isso no próximo tutorial. 24. Ajustes menores: Olá e bem-vindo de volta. Muito bem, estamos quase a acabar com o nosso cabeçalho. Mas antes de passarmos para a seção de heróis, eu só quero falar um pouco mais sobre o cabeçalho e o design atual que temos, porque eu acho que isso pode ser feito muito melhor do que o que temos atualmente. Então, enquanto eu estou projetando, eu posso perceber que o design atual que eu tenho não é muito bom e eu posso torná-lo melhor . Por exemplo, eu acredito que a navegação primária deve ser a parte mais proeminente do nosso cabeçalho fora desses três elementos aqui. Mas agora temos os logotipos muito maiores do que a navegação primária, e nossos olhos estão saltando para frente e para trás entre esses dois. E então temos algo aqui e apenas tenha em mente que o mega menu não seria visível até que passássemos o mouse sobre a navegação primária. Então ele está muito ocupado agora, e eu acho que nós precisamos corrigi-lo para que não seja tão ocupado e colocar a proeminência de volta na primária. Navegação e enfraquecer simplesmente fazer isso, agarrando nossos logotipos e tornando-os menores. Então vamos em frente e fazer isso Vamos pegar nossa escala para com Shift Plus s e vamos apenas pegar um canto e torná-lo menor. Então, bem ali, podemos ver que definitivamente coloca o foco de volta na navegação primária. Então esta é a primeira coisa que vemos do que seus olhos meio que gravitam aqui, e então podemos ver que há algo aqui, então não está tão ocupado como antes. A outra coisa que precisamos fazer muito rápido é realinhar os logotipos. Então vamos pegar os logotipos e colocá-lo de volta no lugar ao longo do lado esquerdo da grade. E nós vamos pegar nossa ferramenta retangular com a letra M e uma linha de cima para baixo. Certo, então isso conserta essa parte do projeto. Agora a outra coisa que eu acho que precisamos fazer é fazer as fontes um pouco maiores , e precisamos adicionar algum espaço adicional agora. A próxima coisa que eu acho que podemos fazer para melhorar o design geral do nosso cabeçalho é aumentar a quantidade de espaço entre as palavras e aumentar o tamanho da fonte e talvez o estilo das fontes, bem como torná-las um pouco mais ousadas do que atualmente são, e isso vai ajudá-lo a se tornar muito mais proeminente. E nossos olhos vão gravitar para essa seção primeiro, mais do que é agora. Então a primeira coisa que vamos fazer é pegar nossa ferramenta de texto, e vamos selecionar esses cinco espaços no meio. As palavras iam copiá-las, e então nós vamos colá-las no final de cada uma das palavras para que possamos aumentar a quantidade de espaço entre cada palavra. Tudo bem, vamos em frente e realinhar para o centro. Então vamos pegar nossa ferramenta de retângulo com a letra M. Nós vamos fazer nossa seleção, e nós realmente precisamos trazer esta camada de menu de navegação principal para fora do jogador de grupo para que possamos selecioná-lo com nossa ferramenta de alinhamento, e, em seguida, podemos alinhar o centro do alvo. Vamos colocar isso de volta. Na verdade, acho que devíamos ter aumentado o tamanho da fonte primeiro, mas está tudo bem. Vamos em frente e selecionar tudo e aumentar o tamanho da fonte para 28. E vamos também selecionar Oswald bold para aumentar o estilo ou a densidade dessa fonte. Tudo bem, então vamos ter que ir em frente e realinhar novamente. Tudo bem, vamos em frente e aumentar a quantidade de espaço entre essas duas linhas aqui, vamos pegar nossa caixa primária. Precisamos ir até a camada e selecionar cortar para o conteúdo para que o limite da camada se encaixe nas próprias linhas e não no documento inteiro. Agora vamos pegar nossa ferramenta de escala com Shift Plus s, e então podemos simplesmente pegar o topo da parte inferior e apenas puxá-lo para baixo ou trazê-lo para aumentar a quantidade de espaço algo ir em frente e selecionar 78 para a altura. E agora só precisamos alinhar ao centro da parte superior e inferior da nossa caixa. Então vamos retirar o menu de navegação principal de novo. Pegue sua ferramenta de retângulo, faça uma seleção, certifique-se de clicar nela com a ferramenta de alinhamento e, em seguida, uma linha no meio do alvo. Perfeito Comandante Controle Andy para selecionar. Vamos colocar isso de volta. E eu acho que isso é 10 vezes melhor do que era antes. Nossa navegação principal é agora a mais proeminente. Destaca-se mais. Nossos olhos gravitam a isso. Primeiro, o cabeçalho não está tão ocupado como era antes. Nós ainda reconhecemos que há algum logotipo aqui e esses links de ar possivelmente para nos levar para outro lugar. E nós temos uma navegação secundária aqui que é muito menor do que a navegação primária e logotipos. Então nós basicamente temos nossos olhos indo daqui para aqui para aqui e depois de volta para nossa navegação primária , que é para onde queremos que eles vão, porque é onde eles vão encontrar os produtos que estão procurando. Agora vamos ter outro problema agora que ajustamos o tamanho da navegação primária e da caixa primária, e é aí que ligamos o nosso mega menu. Tudo mudou. Nós precisamos e algum espaço adicional para nossas colunas aqui porque é muito apertado e nossos estados de pairamento agora precisam ser movidos para cá para esta categoria também. Então vamos em frente e fazer esses ajustes e estaremos prontos e prontos para passar para nossa seção de heróis. Então, a primeira coisa que eu quero fazer é trabalhar no estado pairante. Então vamos encontrar o estado flutuante e temos a nossa mão aqui. Eu também preciso mudar o nome deste ícone também pairar, e vamos em frente e mover isso para cima. Eu também tenho a linha de pairar que eu preciso para mover, bem, e eu realmente preciso torná-la um pouco maior. Então eu vou pegar minha ferramenta de escala com Shift Plus s. E eu vou apenas deslizar isso para a direita para combinar com a de nossa palavra. Tudo bem, agora que temos isso, vamos em frente e zoom para trás e vamos mover esta linha de fundo para baixo apenas um pouco para que possamos ter um pouco mais de espaço para nossas colunas se encaixarem. Então vamos pegar a nossa ferramenta de movimento gramatical mega menu e movê-la um pouco para baixo . Vamos pegar a nossa camada de texto mega menu agrupada a letra M para a nossa ferramenta de retângulo para que possamos alinhar de cima para baixo, e também tivemos que puxar esta camada de grupo para fora da outra camada de grupo para que possamos selecioná-la com nossa ferramenta de alinhamento aliando meio do alvo e Vamos colocá-lo de volta dentro do mega menu de Select. E agora vamos em frente e adicionar nosso fundo ao mega menu. Então vamos pegar nossa ferramenta de retângulo novamente e desenhar uma seleção. Vamos mudar o primeiro plano para um branco, e vamos pegar nossa ferramenta de enchimento de balde. Nós também precisamos criar uma nova camada para colocá-lo em, Vamos chamá-lo de fundo, fazer um menu, e então podemos preenchê-lo com branco. Isso é de seleto. E agora vamos em frente e mover isso para a camada de grupo adequada, que estará em nosso mega menu na parte inferior. Perfeito. Tudo bem agora, a outra coisa é, quando você enviar este Web design acabado para o desenvolvedor da Web, você não quer ter o mega menu ativado. Em vez disso, você quer desligá-lo. Como eles estão trabalhando através de todos os diferentes grupos, camadas e camadas, eles vão se deparar com os mega homens. Você notará que ele está desativado, eles vão ligá-lo, e então eles vão saber que eles têm que codificar isso para a navegação primária também. A outra coisa é, se você der uma olhada no site da Nike, você vê todas essas categorias diferentes, e cada uma tem seu próprio mega menu exclusivo, então você teria que criar um mega menu para cada categoria para representar todos os links diferentes para essa categoria específica. Caso contrário, o desenvolvedor da Web só vai codificar o um mega menu quatro homens. Então não vamos fazer isso, já que você já sabe como fazê-lo. Se você quiser praticar, você pode ir em frente e fazer isso para cada categoria, e então eu daria a eles nomes diferentes também. Então nós temos mega menu homens, e então eu faria um para mulheres, meninos , meninas, etc. E então eu desligaria isso para o desenvolvedor da Web , é claro, mas para você também, porque você não quer ter isso ligado quando você está trabalhando em sua seção de heróis, que é nesta área bem aqui. Ok, agora que atualizamos nosso cabeçalho, parece muito melhor do que antes. Novamente, como estou trabalhando em diferentes seções do meu site, não tenho problema em voltar atrás e fazer ajustes para melhorar o design. Se eu vir algo que não está funcionando com o design geral Ok, então em seguida, vamos trabalhar em nossa sessão de herói. Então, se você está pronto para trabalhar nisso, vamos fazê-lo. 25. Herói: Olá e bem-vindo de volta. Muito bem, agora vamos trabalhar na nossa secção de heróis. E como você sabe, de lições anteriores, a seção de heróis é uma das partes mais importantes de que página precisamos para pegar o interesse de uma pessoa e espero que ela faça algo antes que ela navegue para outra página ou antes de decidirem deixar o site inteiramente. Então, quando uma pessoa chega em uma página da Web, ela primeiro precisa decidir. Estou no lugar certo? E se assim for, este site vai me dar o que eu preciso? Neste caso, vamos usar imagens de uma forma criativa, a fim de garantir que essa pessoa saiba exatamente onde está e para agarrar seu interesse porque eles podem estar interessados no novo Air Jordan 9. Então vamos em frente e criar nossa seção de heróis, e vai ser muito fácil de fazer porque temos três partes principais da seção de heróis . Temos nossa manchete que inclui o botão “Comprar agora “são “Shoe “e “Michael Jordan “ mergulhando no sapato. Então primeiro precisamos definir a altura da seção de herói e essa seção de herói vai mudar com base no dispositivo ou no tamanho do monitor do computador que essa pessoa está usando. Então, o que os desenvolvedores da Web têm que fazer hoje em dia para garantir que essa seção herói é visível na maior quantidade de dispositivos é criar o que é conhecido como resposta de código. Mas para nós, precisamos definir a seção de herói, a altura que irá acomodar a maior quantidade de tamanhos de tela. E dependendo de quem você fala, pode estar em qualquer lugar a partir de 700 dias 100 pixels. Então eu gosto de manter minha seção de heróis e essa área. E então eu deixo um desenvolvedor Não, que o site precisa ser responsivo, e a seção herói precisa estar disponível ou visível e tantos dispositivos e tamanhos de tela quanto possível. Então vamos em frente e ligar nossos guias com comando ou controle e a tecla semi dois-pontos, e vamos arrastar um guia até 750 esta será a área de contenção para nossa seção de heróis. Então vamos em frente e pegar nosso primeiro conjunto de sapatos, que são os sapatos Nike. Não tem que ser exatamente os mesmos sapatos que eu selecionei. Isto é só para praticar. Então vá em frente, pegue o sapato, pegue sua ferramenta de movimento e mova-o para a posição. Também precisamos de uma busca Michael Jordan. Então vamos encontrá-lo. E vamos trazê-lo para esta parte da página da Web também. Vamos pegar nossa ferramenta de texto e desligar nossos guias. E vamos criar nosso conteúdo para o lado esquerdo da nossa seção de heróis. E em todas as maiúsculas, vamos endireitar a nova entrada para colocar um J nove na segunda linha e vamos deixar nosso texto preto. Eu também quero mudar a fonte para Oswald Bold e vamos aumentar o tamanho da fonte para 100. Vamos pegar a nossa ferramenta de movimento e voltar ao nosso sapato Nike para que possamos girá-la que o nosso novo texto se encaixe um pouco melhor nessa área. Vou ligar os meus guias e depois girar os sapatos. Vamos pegar nossa ferramenta de rotação, que está bem aqui, que está bem aqui, e eu tenho o atalho de teclado configurado para controlar ou comandar mais T. Então seu atalho de teclado, talvez diferente, baseado se você ou não atualizado que no início do curso. Uma vez que você tem isso, vá em frente e clique nos sapatos, e então você pode digitar o ângulo que deseja, ou você pode girá-lo manualmente clicando em qualquer lugar do lado de fora e, em seguida, movendo o mouse para a esquerda ou para a direita. Então eu só vou movê-lo para algo assim em torno de 32 ou 34 para o ângulo. Quando eu clicar, girar e, em seguida, com a ferramenta de movimento, eu posso movê-lo para a posição direita sobre lá. Talvez precise mudar isso assim que tiver tudo preparado. Então vamos pegar nosso têxtil com a letra T. Vamos selecionar tudo porque o que eu quero fazer é reduzir a quantidade de espaço entre essas duas linhas. Há muito espaço. Então, para reduzir a quantidade de espaço entre as duas linhas, podemos usar esta segunda opção aqui, e queremos adicionar um número negativo para reduzir essa quantidade de espaço. Então eu vou digitar menos 40 e isso parece muito melhor agora, ok? E vamos pegar nossas ferramentas retangulares para que possamos criar nosso botão de compra primeiro. Vamos em frente e criar um novo mais cedo. Vamos chamá-lo por botão e vamos em frente e ligar nossas grades porque o que eu quero fazer é criar um botão de compra com três colunas de largura. E então vamos pegar nosso balde. Ferramenta de preenchimento, escolha uma cor para o seu botão de compra e, em seguida, vá em frente e preenchê-lo e de selecionar. Ok, eu vou pegar minha ferramenta de zoom aqui para que eu possa ampliar um pouco. Vamos ativar o nosso guia para que possamos alinhar tudo. Vamos em frente e mover nosso conteúdo primeiro, e nós realmente temos que colocar isso um pouco acima. Isso é Graham são por botão e mover isso para cima em posição bem ali. Agora vamos criar o texto para o nosso botão de compra. Vamos voltar a Branco para ver a cor do texto. E vamos fazer agora 75 pelo tamanho do texto, e eu vou para Vamos usar a ferrovia para o botão. Vou usar a ferrovia ultra ousada. É um pouco grande demais, então podemos usar nossa ferramenta de escala para condensá-la para caber dentro da caixa. Então, com shift e s, obteremos nossa ferramenta de escala. Vamos desligar o link para que possamos apenas ajustar o com de nosso conteúdo. Então eu só vou fazer isso em, tipo, então clique escala. Tudo bem, vamos em frente, diminuir o zoom e consertar Michael Jordan para que ele não seja tão grande quanto agora , então vamos em frente e pegar a camada de dívida. Certo, então vamos pegar nossa ferramenta de escala e reduzi-las. Então ele não é tão grande, provavelmente muito pequeno. Então eu vou ficar um pouco maior aqui. Vou ligar os meus guias porque quero ter a certeza de que o pé dele está na borda da grade. Vamos escalá-lo. Vamos pegar nossa ferramenta de movimento e mover o sapato um pouco, e eu vou realmente pegar este conteúdo aqui e torná-lo um pouco maior. Mas antes de fazer isso, vamos em frente e criar um novo grupo de camadas. Vamos chamá-lo de conteúdo. Eu vou colocar nossa informação por botão de prego lá, bem como nosso conteúdo, e então nós precisamos mudar o limite da camada para esta camada de grupo particular indo para a camada e selecionando cortar. O conteúdo pode. Vamos voltar para a ferramenta de escala. E vamos aumentar isso para preencher o espaço aqui. Clique na escala. Vamos desligar os nossos guias e as grades dela. Tudo bem, isso parece muito bom. Vamos em frente e terminar de nos organizar aqui. Vamos criar um novo grupo de camadas. Vou dar um nome de imagens. Vamos colocá-los lá dentro, encontrar o sapato. Vamos colocar isso aí também. E depois mais um grupo de camadas para a seção de heróis. Então vamos chamá-lo de herói. Puxe-o para fora. Vamos colocar o nosso conteúdo e a nossa imagem lá dentro. E vamos em frente e mover isso para cá também. Então a outra coisa que precisamos fazer é que ainda não fizemos é colocar todas essas camadas de grupo em sua própria camada de grupo chamada Header. Então vamos em frente e fazer isso também para que você possa ver colocando tudo em suas próprias camadas de grupo. Ajudamos a organizar o painel de camadas, por isso é mais fácil encontrar exatamente o que precisamos. Então agora temos nosso cabeçalho em nosso herói em grupos separados, camadas e nossa seção de heróis agora está pronto. Então, no próximo tutorial, vamos começar a trabalhar na seção de corpo do nosso site 26. Corpo: Olá e bem-vindo de volta. Tudo bem, então para esta parte do nosso projeto, vamos começar a trabalhar na seção de corpo da página da Web, e vamos pegar este conteúdo existente e duplicado para que possamos ser consistentes em todo o nosso design, e torna mais fácil versus reiniciar do zero. Mas temos um pequeno problema, e é quando redimensionamos esse texto maior. Na última lição, ele reformatou o texto de uma camada vetorial para uma camada gráfica, e você pode ver que o texto está desfocado e não tão nítido como antes. E se pegarmos nossa ferramenta de texto e clicarmos nela, vamos receber uma pequena mensagem aqui perguntando se queremos continuar editando nosso texto. Se eu clicar em editar, ele vai mudar o texto de volta para o tamanho original que era antes de ser dimensionado. E então precisamos selecionar tudo e redimensionar esse texto para se ajustar ao tamanho que queremos. E vamos fazer 130 para os pixels. E vamos em frente e mover este texto de volta para cima. Então à direita sobre lá deve ser bom e vamos em frente e fazer a mesma coisa para este conteúdo aqui para o por botão de prego. Clique nele. E então desta vez vamos realmente selecionar Criar nova camada e ele vai pegar essa informação e vamos colocá-lo em uma nova camada para nós. Por isso vou pôr isto aqui. Agora você se demitiu. Vamos dar uma olhada em nossas camadas aqui e podemos ver que temos dois tipos diferentes de camadas. E falamos sobre todos os diferentes tipos de camadas no início do curso na palestra de camadas, e falamos sobre todos esses diferentes tipos de camadas. Então esta camada aqui é uma camada de texto, e sabemos que porque tem este ícone aqui como parte dessa camada, a camada explode, mesmo que contenha a mesma informação. Até agora, não é realmente uma camada de texto. É agora uma camada de gráficos preocupação camada pixels, e ele foi convertido em uma camada de pixel quando re dimensionado ele. Então você tem que ter cuidado quando você está redimensionando seu texto porque ele vai mudá-lo de um vetor para uma camada de pixel, e você pode simplesmente alterá-lo novamente usando sua ferramenta de texto. Então eu vou continuar e apagar isso agora. Camada aqui, a camada de pixel porque não precisamos disso. McGahan renomeou o número um removido, e nós só precisamos mover isso de volta para a posição. Tudo bem, vamos em frente e uma linha de texto diretamente no centro do botão ao longo dos quatro lados. E para fazer isso, precisamos primeiro pegar isso agora, camada e movê-lo para cima. Então está fora dessa camada de grupo. Caso contrário, não poderemos selecioná-lo com nossa ferramenta de alinhamento. Agora podemos pegar essa ferramenta de retângulo para fazer a seleção e a ferramenta de alinhamento. Vamos clicar nele e alinhar o centro e o meio do alvo. Tudo bem, ouça com o texto por prego dentro da camada de grupo. Vamos fechar isto. Selecione o jogador do Grupo de Contatos e duplique. Tudo bem, vamos em frente e puxar isso para fora porque vai ser em uma seção diferente, e agora podemos pegar isso com nossa ferramenta de movimento e movê-lo para baixo em posição. Vamos ligar nossos guias para que possamos alinhá-lo ao lado direito aqui. Certo, encontre suas sandálias Hurley. Vá em frente e ligue essa camada. E vamos encontrar o nosso surfista também. Tudo bem, vamos colocar nossas sandálias no lugar aqui. A sandália parece um pouco pequena demais da minha parte. Então eu vou ir em frente e redimensionar isso com a minha ferramenta de escala, torná-la um pouco maior e alinhá-la ao lado esquerdo da nossa grade. Aqui, vamos pegar nosso surfista também. Vou colocá-lo em um lugar e escala também. Então vamos fazer parecer que aquele surfista está surfando do outro lado da sandália aqui . Isso vai movê-lo um pouco dolorido bem ali é bom. E eu também quero pegar esse conteúdo e movê-lo para cima. Na verdade, vamos descobrir algum espaço entre a seção de heróis e nosso conteúdo. Eu só quero mudar esse conteúdo para conteúdo e essa cópia de conteúdo. Muito bem, vamos Graham a nossa ferramenta de medida. E vamos medir 75 pixels da parte inferior da seção de heróis para que possamos colocar esse conteúdo na parte inferior desses 75 pixels. Então, vamos clicar no nosso guia aqui, arrastá-lo para baixo até vermos 75 pixels lá no canto inferior esquerdo da nossa interface. Então aqui, diz 75 quando eu solto, e então eu parabéns a um guia e arrastá-lo para onde estão aquelas mira. E então eu sei que está a 75 pixels de distância da parte inferior da seção de heróis. Vamos em frente e pegar a ferramenta de movimento. E vamos mover nosso conteúdo para que a primeira linha esteja bem ali naquela diretriz específica que acabamos de criar. Certo, vamos diminuir o zoom. E acho que podemos subir o nosso Sando e o nosso surfista também. Acho que o nosso surfista ainda é um pouco alto demais. Então eu vou pegar a balança de novo e apenas deixá-lo um pouco menor. Certo, vamos criar um novo grupo de camadas para nossas imagens. E então vamos em frente e movê-los para cima com nossa ferramenta de movimentação. Ok. Eu vou reduzir o surfista um pouco mais porque eu quero ter certeza que o cotovelo não está acima daquela linha em particular ali. Tudo bem, isso parece muito bom. Vou em frente e colocar outro guia no fundo das sandálias, e depois vou medir mais 75 pixels. Então temos uma quantidade igual de espaço entre aqui e este sapato e o próximo produto. Então pegue sua ferramenta de medição novamente e meça 75 pixels e coloque seu cara lá . E então é só uma questão de repetir os passos que acabamos de dar para aquelas sandálias e fazer o mesmo para os sapatos Converse também. Então vamos em frente e ligar nosso próximo às imagens e criar um novo grupo Lear para eles chamado Imagens número dois. Só vou mover tudo aqui um pouco e novamente nossos patinadores um pouco grandes demais . Então vamos usar a nossa balança para outra vez. E vamos fazer com que pareça que ele está patinando no topo destes sapatos aqui. Então deve ser bom. Eu realmente quero pegar as duas imagens e movê-las para a direita para que elas estejam alinhadas com o lado direito das grades. Tudo bem, vamos pegar nosso conteúdo aqui e duplicá-lo novamente, e vamos em frente e mover isso para baixo em posição todo o caminho para o lado esquerdo desta grade. E então precisamos mover o texto para que ele se alinhe com o novo guia que acabamos criar. Tudo bem, vamos em frente e mover nossas imagens para cima um pouco. Ok, então agora temos uma quantidade igual de espaço entre cada um dos produtos, mas pessoalmente, eu acho que ainda é muito apertado. Então, vamos voltar e adicionar mais 25 pixels de espaço entre nosso conteúdo. Então vamos usar essa ferramenta de medida novamente e apenas medir 25 pixels e então vamos colocar nosso novo guia lá. E então só precisamos mover tudo para alinhar com esse guia, e precisamos fazer a mesma coisa para este. Mas desta vez vamos levar esse cara para o fundo dos sapatos. Então precisamos ter certeza em duas opções que selecionamos escolher uma camada ou guia para que possamos selecionar esse guia para movê-lo. E depois o quê? A ferramenta de medida. Eu vou medir 100 pixels, e eu realmente vou me livrar deste guia aqui nós não precisamos mais desse. E então nós só precisamos mover tudo para a posição e ter certeza de que você voltar para mover o ato de camadas. Ele podia mover todo o conteúdo da camada de grupo. Ok, vamos agrupar estes em sua própria camada apertada. Então novo grupo de camadas novamente. Vamos chamá-lo de Hayley Sando. Então, o conteúdo um vai dentro daqui, bem como essas imagens e, em seguida, um novo grupo de camadas para este chamado Converse. Vou diminuir o zoom com o comando ou controle da NZ e esconder os guias. Agora, eu acho que adicionar que 25 pixels extras definitivamente ajuda o design geral. Então não está tão apertado como era antes. Uma última coisa antes de seguirmos em frente, vamos pegar nossas sandálias e nossos sapatos conversados e agrupá-los em sua própria camada de grupo chamada corpo. Ok, vamos tirar isso e depois colocar as sandálias e os sapatos e lá e pronto. Estamos todos fartos do corpo. Incrível! Tudo bem. Espero que esteja gostando disso. Até agora, temos mais uma seção para este projeto Web design, e esse é o rodapé. Então, se você está pronto para começar com isso, bem, vamos fazê-lo 27. Rodapé 1: Então vamos em frente e cópia dessas colunas e Adam para o nosso documento descreveu a ferramenta de texto colada em selecionar Todos Nós vamos fazer 14 pontos para o tamanho da fonte. Vamos mudar para Ferrovia que seleciona a ferrovia Bold. É cedo exatamente onde eu preciso, então eu vou deixar agora mesmo para as outras bombas deixarem uma coluna de espaço entre elas. Então vamos em frente e copiar o resto da informação. - Agora a única coisa que quero fazer é tomar isto. A única coisa que realmente deve ser negrito ID nessas duas colunas é os títulos. Então vamos em frente e pegar essas três linhas e apenas selecionar ferroviário regular e, em seguida, a mesma coisa com essas cinco linhas. Vamos mudar isso para ferrovia. Certo, temos mais uma linha de conteúdo que precisamos copiar, e essa é a informação dos direitos autorais. Vamos fazer a ferrovia média itálica só para misturar um pouco, e então vamos alinhar isto aqui para o lado esquerdo. Vamos diminuir o zoom porque precisamos criar uma linha horizontal duas colunas e este conteúdo aqui, vamos pegar nosso vamos pegar nossa ferramenta de retângulo. E então, quanto à cor, eu sou um pouco mais brilhante que o fundo. Então 34 34 34 parece bom por enquanto. E então vamos bem agora podemos ir em frente e preencher isso. Ok, eles selecionam. Estão mentindo. Eu acho que pode ser um pouco grosso demais com o então eu vou. Então eu vou pegar minha ferramenta de escala com Shift Plus s. O único problema é que o limite da camada precisa ser corrigido. Então vamos sair dessa ferramenta com a tecla de escape. Verifique se o conteúdo da camada agora. A única coisa é, eu acho que esta linha é um pouco grossa demais, então certifique-se e vamos nos certificar de que selecionamos nossa camada adequada aqui. Eu também quero desligar meus guias e minha grade. Pegue sua ferramenta de alinhamento. Clique neste conteúdo aqui está funcionando. Então vamos mover esta camada todo o caminho até o topo assim e uma linha no meio do alvo algum dia. Bem, então às vezes gimp nos faz mover Lee, então às vezes podemos selecionar esses elementos com nossa ferramenta de alinhamento onde as camadas estão. Mas às vezes o gimp não reconhece onde estamos clicando, então precisamos mover a camada para uma nova posição mais parecida com o painel de camadas acima de todas as outras camadas para que você possa realmente selecionar. É meio difícil de ler. Então, vamos começar com sobre Nike Graver Textual Select tudo com controle Commander e um e depois lembrar em duas opções. Podemos descer aqui e aumentar a quantidade de com esta opção aqui. E desta vez vamos aumentar a quantidade de espaçamento. Então vai ser positivo. Da última vez que tivemos que dizer para estes também, Ok, eu vou dar uma olhada em meus guias novamente, e isso é e vamos escolher uma camada ou guia porque eu quero me livrar deste guia aqui . Vamos em frente e colocar essas colunas lá, então vamos em frente e copiar essas colunas e Adam para o nosso documento que a ferramenta de texto colá-lo em, selecionar tudo o que vamos fazer 14 pontos para o tamanho da fonte. Vamos mudar para ferrovia. Essa é a ferrovia selecionada e vamos mudar a cor de preto para branco. E vamos em frente e ativar nosso guia para que possamos ir em frente e alinhar isso corretamente. Parece que já está exatamente onde eu preciso, então eu vou deixar agora mesmo, pois as outras duas colunas iam deixar uma coluna de espaço entre elas, então vamos em frente e copiar o resto da informação. Agora, a única coisa que realmente deve ser negrito ID nessas duas colunas é os títulos. Então vamos em frente e pegar essas três linhas e apenas selecionar ferroviário regular e, em seguida, a mesma coisa com essas cinco linhas. Vamos mudar isso para ferrovia. Certo, temos mais uma linha de conteúdo que precisamos copiar, e essa é a informação dos direitos autorais. Vamos fazer a ferrovia média itálica só para misturar um pouco, e então vamos alinhar isto aqui para o lado esquerdo. Tudo bem, vamos diminuir o zoom porque precisamos criar uma linha horizontal para criar um divisor ou separação entre as três colunas e este conteúdo aqui. Vamos pegar nossa ferramenta de retângulo para que possamos criar uma forma e, em seguida, até a cor, eu vou apenas ir um pouco mais brilhante do que o fundo. Então 34 34 34 parece bom por enquanto. E, em seguida, vamos preencher isso com o nosso filtro de balde vontade. Mas primeiro, antes de fazer isso, vamos criar uma nova camada. Vamos chamá-lo de divisor. Tudo bem, agora podemos ir em frente e preencher isso. Ok, eles selecionam. Tudo bem, acho que esta linha é um pouco grossa demais, então vamos ampliar aqui e pegar nossas ferramentas de escala para que possamos torná-la um pouco menor . Vamos ao contrário. E vamos mudar a altura também. Vamos fazer três para a altura, e eu só quero movê-lo um pouco para baixo. Então deve ser bom. Agora só precisamos fazer nosso alinhamento de todas as nossas colunas e nosso conteúdo aqui embaixo. Então vamos pegar nossa ferramenta de retângulo com a letra M, e vamos espaçar esse conteúdo entre o divisor e a parte inferior do rodapé, e vamos nos certificar de que selecionamos nossa camada adequada aqui. Eu também quero desligar meus guias e minha grade. Pegue sua ferramenta de alinhamento Clique neste conteúdo aqui não parece que ele está funcionando, então vamos mover esta camada até o topo. Tudo bem. Agora podemos selecioná-lo e uma linha no meio do alvo. Então, às vezes, podemos selecionar esses elementos com nossa ferramenta de alinhamento onde as camadas estão. Mas às vezes o gimp não reconhece onde estamos clicando, então precisamos mover a camada para uma nova posição na parte superior do painel de camadas acima todas as outras camadas, para que você possa selecioná-la com a ferramenta de alinhamento. Ok, vamos de selecionar. E então vamos pegar nossas três colunas aqui e alinhá-las ao topo. Então vamos adicionar nossas diretrizes de volta, e então nós só precisamos mover cada coluna para essa diretriz. Não importa onde essa diretriz esteja, porque vamos alinhá-las do topo do rodapé e do divisor em apenas um segundo. Agora, antes de fazermos o nosso alinhamento, eu só quero adicionar algum espaço adicional entre as linhas porque está muito apertado agora e é meio difícil de ler. Então vamos começar com sobre Nike mais grato textual Selecionar tudo com Commander Control e um e, em seguida, lembre-se em duas opções, podemos descer aqui e aumentar a quantidade de espaçamento entre as linhas com esta opção aqui mesmo. E desta vez vamos aumentar a quantidade de espaçamento. Então vai ser positivo. Da última vez tivemos que reduzi-lo e foi negativo. Então vamos fazer, vamos fazer sete. E então vamos fazer o mesmo por estes também. Certo, vou dar uma olhada nos meus guias de novo. E vamos escolher uma camada ou guia porque eu quero me livrar deste guia aqui. Vamos em frente e colocar essas colunas em sua própria camada de grupo, clique com o botão direito do mouse e selecione Novo grupo de camada. Vou dar um nome a ele. Três colunas. Está bem. Agora podemos pegar esta camada de grupo e uma linha para o centro da parte superior e inferior bem aqui. Então, o que? Eles são uma ferramenta retangular. Poderíamos ir em frente e fazer nossa ferramenta de alinhamento de seleção, clicar em uma das colunas, e novamente, ela não está nos deixando selecioná-la. Então vamos mover esse jogador do grupo até o topo, e vamos tentar clicar nele novamente. Desta vez, deixe-nos selecioná-lo e, em seguida, podemos alinhar meio do alvo. Então agora temos uma quantidade igual de espaço entre aqui e aqui. Que de selecionar com Commander Control e D e vamos em frente e mover isso de volta para baixo. Então precisamos criar um novo grupo mais tarde para o rodapé para todas essas informações. Mas temos algum conteúdo adicional que precisamos adicionar ao nosso outro lado do rodapé dela aqui à direita, que vai incluir nossos ícones de mídia social. Mas vamos cobrir isso no próximo tutorial. Então, se você está pronto para fazer tudo isso, vamos fazê-lo. 28. Rodapé 2: nosso material final para este projeto em particular é adicionar alguns ícones de mídia social. Mas antes de fazermos isso, quero compartilhar com vocês algo que talvez nunca tenham ouvido falar antes porque ninguém está falando sobre isso, e isso é violação de direitos autorais dos logotipos de mídia social. Agora, do que exatamente estou falando? Bem, vamos dar uma olhada no site da Nike novamente e dar uma olhada no pé deles ou aqui, e você pode ver os ícones sociais que eles têm aqui para Twitter, Facebook, YouTube e Instagram. E cada um desses logotipos é colocado dentro de um círculo, e quando você passar o mouse sobre eles, você verá o estado de pairar, que acaba por ser branco. Bem, adivinha? Esta é uma violação de direitos autorais nesses logotipos específicos. Novamente, você está tipo, que estou falando? Bem, vamos descobrir o uso adequado dos Logotipos de mídia social para que você não infrinja essas empresas. Direitos autorais. Então vamos fazer uma busca pelo logotipo do Facebook. Nós não vamos fazer imagens porque essas infrações ao ar, exceto talvez algumas delas, vamos rolar para baixo e selecionar ativos. Então, Facebook, Twitter, Instagram e todas as outras plataformas de mídia social têm um recurso em seu site que se parece com isso que explica como você deve usar o logotipo deles em seu site. Então, se nós rolarmos para baixo aqui, podemos ver os logotipos e os emblemas que eles fornecem para você diretamente do Facebook que você pode usar em seu site. E se você rolar para baixo, você também verá alguns outros itens, explicando como você pode usar o logotipo deles sem infringir seus direitos autorais. Agora, se você quiser usar este ícone de logotipo específico, se você clicar nele, você vai acabar indo para outra página. E então você pode baixar este logotipo específico para usar em seu site para que você tenha que escolher o bem de sua mídia. Existem diferentes requisitos para impressões e embalagens online, TV e filme. Agora você não pode nem usá-los na TV e no filme sem obter permissão por escrito do Facebook primeiro. Mas já que estamos trabalhando online, vamos dar uma olhada nas diretrizes e vamos avançar e rolar para baixo e olhar para elas você não possa estilizar os olhos seu logotipo. Você não pode deformar ou modificar sua cor ou a forma. Tudo isso não é permitido, e ele diz se você não consegue usar a cor correta devido a limitações técnicas. Bem, então você pode convertê-lo em preto e branco, e ele diz aqui não use ícones ou imagens para representar o Facebook diferente do que é encontrado neste site. Então aqui à esquerda, não permitido à direita permitido. Então, se você não fizer o que o Facebook diz que pode fazer com o logotipo, então você está infringindo a lei. Você está infringindo a cópia deles, certo? E eles podem legalmente vir atrás de você ou da empresa para a qual você está trabalhando por infringir os direitos autorais. Agora, isso significa que eles realmente vão buscar danos para os milhões e milhões de sites que estão usando seus logotipos e corretamente? Duvido, mas não significa que não tenham o direito de o fazer. E eu acho que neste momento, tornou-se aceitável reutilizar esses logotipos com cores diferentes e formas diferentes e o que você tem. Mas, novamente, ainda há uma chance de que o Facebook pode vir atrás do proprietário do site, seja Nike ou mãe pequena e pop shop e dizer que você está infringindo meus direitos autorais, ou alterá-lo ou nós vamos atrás de você por danos. Novamente, acho que não vão atrás das pequenas lojas de mãe e pop, mas talvez de uma marca como a Nike. Eles podem ir atrás de uma empresa como essa. É uma empresa de $1.000.000.000, e tenho certeza que a Nike não ficaria feliz se você pegasse seu logotipo e começasse a mudá-lo e mudar as cores e distorcê-lo e estilizá-lo de maneiras diferentes para promover algo em seu site de modo que novamente seria uma infração no logotipo da Nikes. Mas por alguma razão, está tudo bem para ícones de mídia social e logotipos de mídia social, então isso é apenas algumas informações que eu pensei em compartilhar com você. Mas o que vamos fazer para este projeto de Web design é ir em frente e infringir seus direitos autorais porque vamos pegar seus logotipos e colocá-los dentro um círculo, e vamos mudá-los apenas um pouco pouco. Não muito, mas é apenas para a prática para que você possa aprender a criar essas formas diferentes e gimp e toe aprender algumas das outras ferramentas que temos um gimp para fazer coisas diferentes. Então o que vamos fazer é ir em frente e fazer o download. O recurso é diretamente do Facebook e Instagram e Twitter e Pinterest ou qualquer plataforma de mídia social que você quiser. Basta baixar quatro logotipos de cada um de seus sites. Basta fazer uma pesquisa no Google por recursos do Facebook. O Twitter ativa coisas assim, e você verá que cada uma dessas empresas terá um lugar onde você pode baixar seus logotipos para usar em sites. Então eles vão lhe dar algumas cores diferentes, a cor original, e então eles devem ter algumas cores para preto e branco também. Então vamos em frente e baixar tudo em branco, então isso é tudo consistente. E então vamos em frente e vamos de lá até o tamanho. Encontre algo em torno de 50 a 60 pixels porque vamos em frente e reduzir o tamanho deles de qualquer maneira. Mas vamos começar com um ícone de logotipo de alta qualidade, porque se formos com algo menor como 15 ou 20 pixels e precisarmos torná-lo maior, maior,ele ficará pixelizado. Então vamos começar com algo em torno de 50 a 60. Ok? Então, uma vez que você tenha todos aqueles baixados, vá em frente e adicione-os ao seu documento. Você pode simplesmente arrastá-los e soltá-los no documento e, em seguida, uma nova camada será criada para cada um deles. Ok, eu tenho todos os meus logotipos no meu documento agora, e eu coloquei ele nesta ordem Facebook, Instagram, Pinterest e Twitter. Você pode fazer o mesmo ou uma ordem diferente. É inteiramente com você. Isso realmente não importa. A outra coisa que fiz foi ativar meu limite de camada de show porque quero mostrar algumas coisas com nossa ferramenta de alinhamento. Quando vamos para uma fila, cada um dos logotipos. E se ele fez o exercício de alinhamento no início do curso, então você já está familiarizado com o que vamos cobrir quando chegarmos ao ponto precisamos alinhar nossos logotipos e são elementos. Mas por enquanto, o que precisamos fazer é redimensionar tudo para que eles estejam todos da mesma altura agora , dependendo do logotipo que você baixou, eles podem ser menores do que o que eu tenho, que é Tudo bem. Vamos redimensionar todos os logotipos para uma altura de 30. Então vamos Graham, nossa ferramenta de escala, e eu vou começar com minha primeira camada aqui, e eu sou um novo 30 para a altura, e então eu vou continuar com os outros também. Agora, antes de eu fazer o logotipo do Twitter, há uma coisa que precisamos fazer, e papai é removido esse fundo acinzentado que temos no logotipo agora porque podemos ver que o limite da camada está em torno disso fundo e não o logotipo em si. Eu quero o limite da camada em torno do logotipo para que possamos redimensioná-lo para que ele seja a mesma altura de todos os outros logotipos. Caso contrário, o pássaro do Twitter vai ser muito menor. Então vamos pegar nossa ferramenta de seleção difusa. E, em seguida, nas opções de ferramenta apenas definir o limite para cerca de 2018 para 20 é bom. Selecione o plano de fundo e, em seguida, pressione delete ou a tecla backspace para se livrar desse plano de fundo. Então nós vamos de select, e então nós podemos ir em frente e ir para a camada e selecionar o conteúdo cortado, e agora são camada. Boundary é onde deveria estar, então vamos em frente e redimensioná-lo para baixo para 30 para a altura e vamos em frente e mover todo o pouco vai para baixo para o lugar aqui. Agora eu não posso ver alguns deles porque eles são brancos puros. Na verdade, aqui está o Facebook aqui, mas está tudo bem, porque Mas isso é OK, porque desde que eu movi o líder ativo, eu posso apenas clicar em qualquer lugar do meu documento e ele vai mover isso camada para mim. Então eu só vou fazer esse o primeiro 1 Vamos pegar o Instagram. Isso vai ser o segundo. Temos o Pinterest aqui em algum lugar, e eu vou fazer o terceiro. Ok, vamos pegar nosso Instagram porque se o seu é preto como o meu, precisamos transformá-lo em branco. E podemos fazer isso indo até as cores selecionando aumento de cor e, em seguida, clique nesta barra de cores aqui e selecione branco. Então isso vai mudar o dedo do pé branco para nós. Certo, seguir, precisamos criar alguns círculos para os logotipos entrarem, então vamos pegar nossa ferramenta Elipse no painel Ferramentas. Queremos ter uma relação de aspecto fixa selecionada, e eles estavam indo apenas para clicar e arrastar uma forma e vamos fazer 50 para a largura e a altura. Nós também vamos criar uma nova camada chamada Círculo. Vamos chamá-lo logo Circle com um preenchimento com transparência Mais uma vez, clique. Está bem. E então vamos mudar nossa cor para este número. Bem aqui. 333333 Clique em. Ok, e então nós vamos pegar nossa ferramenta de preenchimento de balde para preencher essa cor em de select, e então nós temos nossa primeira forma. Ok? Com a minha ferramenta de movimento. Vou mudar isto. E a outra coisa que eu preciso fazer é mudar o limite da camada para ele porque é muito grande. E isso é importante porque estamos indo para uma mentira todos os nossos círculos uniformemente, de cima para baixo e distribuir e até mesmo quantidade de espaço entre eles. E precisamos ir até a camada de corte para o conteúdo, a fim de ajudar a tornar esse processo mais fácil. Ok, eu vou colocar esses círculos bem abaixo do logotipo do Facebook, e então eu vou duplicar esse círculo. Vamos movê-lo para o Instagram e, em seguida, movê-lo para baixo desse logotipo. Então vamos repetir isso para cada um. Tudo bem. Vou mover-me com este círculo aqui e longe. Então eu posso mostrar a vocês como é fácil alinhar esses círculos ao topo e distribuir uma quantidade uniforme de espaço entre todos eles. Agora, como você deve ou não saber, podemos selecionar mais de uma camada no painel de camadas. Mas felizmente, com nossa ferramenta de alinhamento, podemos selecionar várias camadas e, em seguida, usar as opções nas opções da ferramenta para alinhar rapidamente tudo. Então eu vou clicar no primeiro círculo, e podemos ver esses quatro quadrados mostrando que esta camada em particular foi selecionada para ser alinhada. Agora, se eu quiser selecionar os outros círculos, se eu clicar neles, ele se livra das outras seleções. Então, o que temos que fazer para selecionar todos eles é segurar em nossa chave show e, em seguida, clique no próximo círculo. Agora, enquanto eu estou segurando minha tecla shift, eu posso clicar no próximo círculo para selecioná-lo, e então eu ainda estou segurando minha tecla shift pressionada, que ainda me permite selecionar o 4º 1 O problema é, os outros três foram selecionados, então é uma espécie de bug. Eu acho que se você manter pressionada a tecla shift enquanto você está selecionando diferentes camadas, às vezes ele irá funcionar e permitirá que você selecione todas as camadas. Mas às vezes não acontece, e vai de selecioná-los. Então aqui está a solução. Vamos selecionar o 1º 1 segurando sua tecla Shift. Clique nele. Solte a tecla Shift. Mantenha pressionada a tecla shift novamente. Clique nele. Solte a tecla Shift de novo e você adivinhou. Mantenha pressionada a tecla shift novamente e clique na última camada. Então, isso permitirá que você selecione continuamente quantas camadas quiser. Talvez você tenha 67 10 12 camadas. Então essa é uma maneira de permitir que você selecione todas as camadas. Tudo bem, agora que temos todas as camadas selecionadas com nossa ferramenta de alinhamento, eu quero alinhá-las para que fiquem todas iguais no topo. Então, vamos para as opções de ferramentas e selecionar em relação ao primeiro item. Então este seria o primeiro item. Então queremos alinhá-los à borda do alvo. E não temos a chave de vestuário, por isso vai estar no topo. Agora eu quero adicionar uma quantidade uniforme de espaço entre todos os círculos aqui. Temos um espaço enorme. Então, como fazemos isso? Então ainda temos relativo ao primeiro item selecionado. Nós vamos descer para as outras opções aqui que dizem distribuir para que possamos clicar neste item bem aqui, Distribuir centros horizontais de alvo e obter uma quantidade uniforme de espaço. Você também pode alterar o deslocamento para qualquer número que desejar. Então, se eu mudar isso para cinco em vez de 90 e, em seguida, clique sobre ele, ele começa a se sobrepor de círculos. Então você tem que encontrar um meio feliz e encontrar a quantidade de espaço que você deseja entre os círculos digitando um número para deslocamento X, que é horizontal. Se você tem um conjunto vertical de camadas, então você vai fazer offset. Por quê? Então agora eu vou fazer 75 e adiciona uma quantidade uniforme de 75 pixels entre cada camada para que eu possa continuar adicionando números diferentes para obter resultados diferentes. Então agora temos 200 que não estão funcionando porque estão saindo do documento aqui à direita. Então eu vou desfazer isso com o Comandante de Controle na letra Z e vamos fazer 75 por prego. E temos tudo perfeitamente alinhado. Muito bem, agora vamos colocar os nossos logótipos dentro dos círculos online, e acabamos tudo. Então eu vou selecionar escolher uma camada ou guia em minhas duas opções para que eu possa simplesmente pegar esse logotipo e colocá-lo no lugar versus vir aqui e selecionar a camada no painel de camadas. Muito bem, vamos para o nosso primeiro círculo de logótipos. Vamos eleger são difusas, Selecionar ferramenta, e vamos clicar no interior dela. E então vamos pegar nosso logotipo do Facebook, nossa ferramenta de alinhamento. Nós vamos clicar no logotipo, e então nós vamos alinhá-lo ao centro no meio do alvo. Mas primeiro, precisamos mudar em relação a duas seleções, já que estamos alinhando B da seleção. Ok, então nós vamos fazer a mesma coisa para os outros. Vamos pegar o círculo, a ferramenta fuzzy, selecione. Você pode usar o atalho de teclado. Eu tenho w para o atalho de teclado para mim. Vou fazer a minha seleção. Então, como a ferramenta de alinhamento. Selecione o logotipo e, em seguida, uma mentira para essa seleção. Então vamos em frente e terminar isso para os outros também. Vamos em frente e organizar tudo. Vamos criar uma nova camada clicando com o botão direito do mouse no grupo nuclear. Vou dar um nome a este Facebook. Nós vamos, e então eu vou criar um novo grupo de camadas para cada um dos logotipos. - Tudo bem, vamos em frente e criar uma camada de grupo para o nosso rodapé também. Coloque tudo dentro de lá que pertença dentro. E outra vez. Estamos organizando tudo para que seja mais fácil encontrar o que precisamos. Parece que tenho uma camada extra aqui, então vou apagar isso. Só vou arrumar algumas das minhas camadas aqui. Acho que precisamos nos alinhar. São ícones sociais também. Eu vou em frente, ligar meus guias e mover isso para cima. Eu quero colocá-lo aqui. Ok, vamos desligar os guias e o que vamos fazer é alinhar nossos logotipos ao topo das colunas dela também. Então vamos pegar nossa ferramenta de alinhamento. Vamos selecionar o primeiro item. Ok, vamos tentar e selecionar essa camada de grupo. Não está selecionando. Então, vamos nos mexer. As três colunas e ícones sociais fora dessa camada de grupo. Vamos ver se podemos selecioná-lo agora. Ainda não está funcionando. Vamos até o topo. Aqui vamos nós. Então eu tenho isso selecionado. Agora quer manter pressionada a tecla Shift e clique nos logotipos e, em seguida, usar em relação ao primeiro item e uma linha para o topo virou as guias novamente. Tudo parece alinhado. Tudo está alinhado ao longo do resto da página web, e eu acho que estamos todos feitos. Vamos colocar isso de volta no rodapé. Parabéns são ódio. Eu acho que finalmente terminamos com nosso primeiro projeto de Web design, e se você seguiu e criou este site enquanto você estava assistindo os tutoriais, então você está pronto. Se não, agora é hora de passar por este projeto e refazer este projeto você mesmo para que você possa se acostumar a usar as ferramentas e gimp e entrar no hábito de alinhar as coisas e reforçar adequadamente tudo o que você tem Aprendi agora. Uma vez feito com isso, para créditos extras de bônus, você pode pegar o que você aprendeu e aplicá-lo com sua visão criativa para criar seu próprio redesenho desta página da Web. Então, o que você pode fazer para fazer isso? Qual página? Melhor para o usuário e o design geral do próprio site. Você provavelmente é um designer melhor do que eu, e você provavelmente poderia inventar algo. Muito melhor e talvez mais criativo do que o que eu inventei. Portanto, o que quer que você crie, você pode usar isso para o seu portfólio e começar a promover seus serviços. Como Web designer, você tem que ter um portfólio para mostrar às pessoas o que você pode fazer. Então eu recomendo muito pegar o que você aprendeu na criação de seu próprio design. Não podes usar este porque é o meu design. Eu possuo os direitos autorais, então crie seu próprio design e comece a criar seu portfólio. E se você quiser, eu adoraria ver sua visão criativa final e ver sua página web. Então, se você quiser compartilhar isso com a comunidade, vá em frente e poste isso na seção de perguntas e respostas e me avise se quiser algum feedback, e eu ficaria feliz em fornecer qualquer feedback sobre o que eu acho que você pode fazer para melhorá-lo. Ou talvez seja perfeito do jeito que é. Então, isso é inteiramente com você. Se você já fez os dois bem, então você está pronto para trabalhar no segundo projeto. Então, no segundo projeto, vamos aprender Ah, muito mais sobre conceitos e idéias de design. E vamos continuar reforçando o que aprendemos sobre as ferramentas e gimp e possivelmente aprender novas ferramentas no processo. Então, se você está pronto para começar, o próximo projeto levou a fazê-lo. 29. Projeto 2: Manhatten Bridge Capital Briefing: Olá e bem-vindo de volta. Muito bem, vamos trabalhar no nosso segundo projecto de Web design, desta vez para uma empresa chamada Manhattan Bridge Capital. Agora, ao contrário da Nike que já tem um estilo bem definido, limpo e minimalista, este site ou empresa em particular, ele realmente não tem uma marca forte. O design geral ou layout do site não é limpo. Está desatualizado. Ele tem gráficos e imagens de má qualidade e precisa de muita ajuda. Embora este site tenha direitos autorais de 2018, não parece que este site foi atualizado com um novo design em 20 anos. Este fundo Grady int atrás da navegação e ao longo das bordas e no rodapé é uma reminiscência de sites que vieram para a cena 20 anos atrás. E é extremamente desatualizado. Não só isso, é muito difícil ler o que está sendo colocado nesta página específica, e o layout do conteúdo está espalhado por toda parte, e não temos certeza por onde começar. Nossos olhos saltam de um elemento para outro, e no geral o site não parece muito profissional. Esta empresa em particular fornece empréstimos a investidores na área da cidade de Nova York e por causa da falta de profissionalismo de seu site. Eu acho que no geral isso vai dificultar sua eficácia e conseguir novos clientes, não apenas por causa dos elementos ultrapassados e do não profissionalismo. É muito difícil ler este conteúdo. Temos vermelho brilhante para a nossa manchete e, em seguida, o estilo eo texto escolhido para esse conteúdo é muito pequeno e difícil de ler. Então, uma das primeiras coisas que eu gostaria de fazer para esta empresa em particular é atualizar seu logotipo. Está desatualizado e, no geral, parece um gráfico de baixa qualidade e texto foi usado, então eu gostaria de usar algo com um maior rez, gráfico e melhor texto. Então ele não parece tão pixelado como parece agora. E este fundo no cabeçalho aqui não é necessário e não adiciona nenhum valor ao site geral. Imagens, bem em todo o site não é muito bom e eu gostaria de atualizar as imagens, bem como para contar uma história melhor do que esta empresa faz e por que você gostaria de fazer negócios com eles ou realmente ficar sozinho através deles. Há outras coisas que podemos fazer para aumentar a possibilidade de que os investidores queiram fazer negócios com eles para obter seu empréstimo através desta empresa em particular versus através de outras fontes, como uma cooperativa de crédito ou um banco de estilo tradicional. Também não há incentivo riel para ninguém que eu quero entrar em contato com esta empresa. Sim, temos suas informações de contato, mas por que devemos contatá-los? O que eu ganho quando eu estou projetando um site, eu quero me colocar no lugar dos visitantes, e a primeira coisa que um visitante quer saber quando eles vão a um site é por que, o que eu quero fazer negócios com você. O que eu ganho com isso? O que vou ganhar se decidir fazer negócios com você? Então é aí que a ação chamada na seção de heróis entra em jogo. O que vai oferecer a eles que não podem recusar? Porque é tão incrível. Eles têm que ter isso agora, e eles vão te dar informações, seu nome, seu número de telefone, seu e-mail faria ou qualquer informação que você quiser em troca de algo que você está vai dar-lhes. Você tem que começar esse relacionamento com aquele cliente dando algo a eles. Nem sempre tem que funcionar assim, mas acho que na maioria dos casos você tem que começar a construir essa relação desde o início. Caso contrário, eles vão navegar para trás e procurar outra empresa para lidar, porque uma que provavelmente está desativada por causa do layout do design. Talvez eles não estejam achando que todo esse layout de design é horrível. Não estou fazendo negócios com eles. Em vez disso, eles estão pensando, enquanto esta empresa não parece que eles se preocupam com sua imagem e este lugar parece pouco profissional e eu lidar com um agiota, ou estou lidando com um profissional financeiro instituição porque eles querem saber que eles estão lidando com alguém que não vai vir atrás deles e quebrar a perna ou tirar sua vida porque eles faltaram com o empréstimo? Sim, eles provavelmente vão tomar sua propriedade, mas isso parece mais um tipo de empresa de agiota, pelo menos para mim, porque no geral não parece profissional. Nada contra agiotas. Por isso, se estás a ouvir, não quero dizer nada mau. Você só precisa criar algo um pouco mais profissional para que você possa garantir que você obtenha clientes potenciais MAWR para entrar em contato com você para seus serviços específicos. Portanto, há coisas que podemos fazer para garantir que possamos obter suas informações antes sair do site, e também queremos tornar um pouco mais fácil para eles entrar em contato conosco e encontrar mais informações sobre nós. Talvez queiram visitar nossa instituição antes de decidirem ficar sozinhos através de você. O que, claro, provavelmente são os passos. Você tem que ter uma consulta. Descubra que tipo de propriedade este potencial investidor quer, e você tem que passar por alguns passos diferentes. Bem, por que não fornecer uma maneira para eles visitarem seus escritórios, mesmo que você só faça consultas? Onley Se uma pessoa está disposta a tomar o tempo para vir ao seu escritório, para visitar, descobrir mais informações e para marcar uma consulta, isso em si é um cliente muito mais forte contra alguém que apenas liga. Portanto, há um monte de pequenas coisas que podemos fazer para este design de site específico para garantir que nós damos aos nossos clientes potenciais todas as oportunidades de marcar uma consulta conosco ou nos encontrar pessoalmente, a fim de obter seus negócios. Então o projeto que criei está bem aqui, e eu tenho minha ação chamada e eu tenho imagens melhores que relacionam Mawr ao seu potencial . Os investidores versus apenas um simples aperto de mão também incluíram alguns itens adicionais e algum conteúdo adicional que a empresa pode usar para vender seus serviços. Por que Manhattan Bridge Capital? Por que você deveria fazer negócios com a gente? Bem, aqui estão todas as razões pelas quais você deve fazer negócios conosco. Também incluí algumas informações adicionais, como perguntas frequentes que eles podem querer fazer no momento da consulta. Vamos dar-lhes algumas dessas informações agora antes que nos contactem. E então eu projetei uma seção de conexão com várias maneiras de entrar em contato com a empresa, bem como um mapa embutido onde você pode obter direções diretamente para o escritório deles. Talvez estejas nas proximidades, e querias parar e dizer olá. Apresente-se, etc. Então eu quero fazer. É fácil para clientes potenciais fazer negócios com a Manhattan Bridge Capital em seu site específico. Tudo está agarrado aqui à esquerda. Eles nem sequer têm um endereço de e-mail. Sim, eles têm o endereço deles aqui para que eu pudesse pegar essa informação e deixá-la no Google Maps ou algo assim, ou eu posso fazê-lo diretamente daqui. Então, estamos tornando o mais fácil possível para os clientes obter as informações que eles querem versus tentar fazê-lo fora do site e, em seguida, na área de rodapé. Tenho os nossos links sociais, links adicionais aqui na parte inferior das informações de direitos autorais. Mas também limpei o design geral. Então é mais limpo. Isso é amore, estilo minimalista, limpador mais moderno. E todos esses elementos diferentes tornam um site muito mais limpo e fácil de navegar e ler. Então esse é o nosso briefing sobre o nosso próximo projeto de Web design. Vamos começar com o redesenho do logotipo na próxima lição. 30. Redesign de logotipo: Olá e bem-vindo de volta. Tudo bem, então quando você está citando e trabalhando para um projeto de Web design, você tem uma oportunidade de ouro para cima. Vender seus serviços para incluir outros serviços de design gráfico, e eu acho que neste caso eles poderiam usar uma nova marca e um logotipo. Então você só precisa se comunicar por que você acha que eles podem se beneficiar de um novo logotipo. E então você também pode incluir isso em seu preço, mas mantê-lo separado do projeto Web design em si. Dito isto, este curso em particular não é sobre baixo bom design em si mesmo. Não vamos entrar em muitos detalhes sobre como desenhar logotipos. Vamos criar algo simples e básico como eu criei aqui. E mesmo assim, eu ainda acho que isso é 10 vezes melhor do que o que eles têm atualmente. Então vamos em frente e trabalhar no logotipo primeiro, e então vamos trabalhar no cabeçalho do Web design. Então primeiro, vá em frente e pegue seu arquivo mestre de design de grade, e então vamos em frente e criar um novo documento para o logotipo. Vamos fazer 325 por 125 e então em opções avançadas. Queremos preencher com transparência. Vá em frente e clique. OK, agora, vamos em frente e pegar nossa ferramenta de texto. E em todas as capitais, vou fazer Manhattan pela cor verde. Só vou escolher uma cor verde escura. Qualquer cor é fina e do tamanho fará 60. E então Oswald, ousado e novamente, você pode usar qualquer diversão que você quiser. Vou mover meu logotipo, aparecer na parte superior com a ferramenta de movimentação e, em seguida, com o retângulo selecionável, vou fazer uma seleção. Vou selecionar a minha ferramenta de alinhamento, Clique nela e, em seguida, uma linha para o centro. Vamos em frente e fazer a seleção. Tudo bem, agora que ele está no centro, vamos em frente e de selecionar e pegar nossa ferramenta de texto novamente. Desta vez era devido. Ponte Capital Selecione tudo. E então vamos fazer 30 para o tamanho. Vamos fazer a mesma fonte. Não vamos jogar tigela. Vamos fazer o normal. E eu acho que eu também quero deixar cair a opacidade para baixo para esta camada também. Vou fazer cerca de 50. Tudo bem, vamos pegar nossa ferramenta de movimento. Então podemos movê-lo para cá agora. O que eu quero fazer é esticar o capital da ponte para que seja do mesmo comprimento que Manhattan . Agora podemos usar a ferramenta de escala para fazer isso, mas vai distorcer um pouco as letras, e vai convertê-la em uma camada de pixel. E eu não quero fazer isso porque talvez eu queira mudar algo mais tarde. Então, em vez disso, vamos voltar para a nossa ferramenta de texto novamente com a letra T selecionar tudo e, em seguida, nas opções de ferramenta. Temos uma opção aqui para aumentar a quantidade de espaço entre cada letra. Então vamos em frente e aumentá-lo até ter o mesmo comprimento que Man Han. Então mais oito parece bem perto. Vamos pegar nossa ferramenta de seleção de retângulos novamente e alinhá-la ao centro. Ok, de select. Vamos pegar nossa camada de fundo, pressione a letra D e, em seguida, certifique-se de que o branco está definido para os quatro gramas e, em seguida, vamos adicionar essa cor à camada de fundo e é isso. Nosso logotipo agora está pronto, então vamos em frente e organizar nossas camadas adicionando-as a um novo grupo anterior. Vou chamá-lo de logo e vamos em frente e salve isto com o Commander Control e a letra s. Vou chamar-lhe logo e certificar-me de que tens o X CF para a extensão para que todas as camadas sejam salvas. E isso nos tornará mais fácil fazer mudanças no futuro se nosso cliente gostar do logotipo, mas talvez queira fazer uma ou duas mudanças. Você pode acessar facilmente as camadas individualmente agora porque você as salvou como um arquivo ex CF. Tudo bem, vamos em frente e Graham nossa camada de logotipo aqui, clique e arraste-o para sua grade e solte. Então, essa é uma ótima maneira de adicionar outro documento ou camadas de arquivos a um novo documento. Eu só vou colocá-lo aqui em cima, e nosso logotipo é todo feito maior ódio. Então, na próxima lição, vamos em frente e adicionar o cabeçalho à nossa página da Web. 31. Cabeçalho: Ok, vamos em frente e terminar a parte do cabeçalho do design da nossa página Web porque tecnicamente, nosso logotipo é parte do cabeçalho. Então a primeira coisa que eu quero fazer é um sinal, uma certa quantidade de espaço entre o topo da página e o topo do logotipo. Então vamos em frente e ligar nossos guias. E dependendo do design e dos elementos gráficos, vou adicionar de 20 a 50 pixels de espaço entre o logotipo e o topo da página da Web. Mas, novamente, poderia mudar com base no design. Então, se você clicar e arrastar para fora, como você pode se lembrar, podemos ver quantos pixels foram adicionando essa diretriz para Baseado na informação que é exibida aqui, ele vai dizer Adicionar Guia, e eu vou puxar isso para baixo para 25. Ok, vamos em frente e mover o nosso logotipo, mas antes de você, você quer ter certeza que você tem mover ativamente ou selecionado Caso contrário, se você clicar no logotipo, ele vai selecionar a camada que você clicou dentro do camada de grupo. Assim que tivermos isso ativado, podemos mover tudo juntos e eu vou colocar isso em posição. Vamos em frente e diminuir o zoom. Vamos desligar nossos guias e adicionar nossa navegação. Aparecem à direita. Então pegue sua ferramenta de texto e então vamos em frente e digite a navegação então eu vou para casa e depois seis espaços. Certo, vamos selecionar. Todos os seis espaços foram copiados para que possamos adicioná-lo ao final de cada item do menu. E vamos em frente e terminar de digitar tudo. Vamos fazer sobre. Vou colar dois comentários Paste Team e Connect. Tudo bem, selecione tudo com Controle de Comandante e um Vamos mudar a fonte para 18 e é meio difícil de ver agora, então vamos em frente e mudar a fonte branca para Preto. Nós vamos mudar o dedo do pé branco mais tarde, mas eu só quero ser capaz de vê-lo facilmente versus vê-lo de longe. Fundo. Vamos mudar a fonte para ferrovia. Vamos selecionar o caminho de ferro negrito e então podemos ir em frente e movê-lo aqui para a direita e , em seguida, com os nossos guias ligados, eu só quero conectá-lo ao lado direito desta coluna aqui e agora eu preciso alinhá-lo ao topo deste logotipo então eu posso arrastar isso para cima, que seria a opção mais fácil, ou eu posso usar minhas ferramentas de alinhamento. Então agora temos um alinhamento perfeito no topo entre os dois elementos. Ok, eu vou em frente e desligar meus guias. Vamos diminuir o zoom. E em seguida, nós só precisamos organizar nossas camadas adicionando uma nova camada de grupo clique com o botão direito do mouse e selecione nova camada de grupo. Vamos chamá-lo de Cabeçalho ele e vamos colocar os dois dentro. Eu também vou mudar o nome desta navegação, tudo bem. Nosso cabeçalho agora está feito, e ao lado de Tora vamos começar na seção de heróis da página da Web, e provavelmente vamos dividir isso em duas partes diferentes porque vai haver muita informação que eu vou compartilhar com vocês sobre como eu vim com este design particular e por que eu escolhi esta imagem em particular. E eu vou te dar algumas dicas profissionais adicionais também. Então, se você está pronto para começar com isso, vamos fazê-lo 32. Hero parte 1: Olá e bem-vindo de volta. Tudo bem, então agora vamos trabalhar na seção de heróis para este site, e temos um monte de coisas legais que vamos aprender nesta lição em particular. Temos uma forma personalizada aqui em dois tons diferentes, e então temos uma imagem confinada a essa forma. Também temos um Grady Int que eu apliquei para adicionar um pouco de morte. E nós, é claro, somos chamados de ação. Então, a ação chamada é algo que deve ser um benefício para o visitante do site, e deve ser algo que é difícil de recusar. Então você tem que descobrir do seu cliente o que seus clientes precisam ou querem e que tipo de problemas seus clientes têm? E como seu cliente pode resolver esses problemas? Então, digamos, por exemplo, às vezes as aprovações de empréstimos podem levar 23 ou cinco dias úteis para serem aprovadas. Mas digamos que um investidor precisa do dinheiro muito mais cedo porque eles vão a um leilão para um prédio ou um armazém ou uma casa ou seja lá o que for que eles estão investindo. E eles precisam daquele dinheiro naquele dia. Mas e se a Manhattan Bridge Capital pudesse fazer um empréstimo em 60 minutos? Bem, aquela oferta que chamou a ação enrolada em torno daquela aprovação de empréstimo de 16 minutos vai agarrar o interesse dos investidores. E eles vão querer se candidatar para descobrir se eles podem se qualificar para comprar aquele prédio através do leilão que está acontecendo naquele dia versus esperar três 45 dias úteis ou o tempo que levar, porque aquela casa ou aquela O prédio já poderia ter ido porque outra pessoa tinha o dinheiro naquele dia. Então essa chamada ação vai permitir que esta empresa, Manhattan, gere mais negócios porque eles estão oferecendo algo que sua concorrência não está oferecendo. Então este é outro tipo de serviço que você pode oferecer além do seu serviço de Web design , ajudando seus clientes a criar uma ação chamada que irá ajudá-los a gerar mais negócios. Então vamos em frente e começar a juntar as peças da nossa seção de heróis, e eu vou fornecer algumas dicas profissionais adicionais à medida que avançamos. Então a primeira coisa que precisamos fazer é definir a altura da nossa seção de heróis. Então vamos em frente e ligar nossos guias com comando ou controle no semi dois-pontos. E então nós vamos clicar e arrastar um guia até chegar a 700 nós sabemos que estamos em 700 com base nas informações na parte inferior e na interface. Tudo bem, vamos em frente e adicionar uma cor de fundo para a seção de heróis. Então vamos em frente e criar uma nova camada chamada Fundo. Vamos preencher com transparência e, em seguida, clicar. OK, nós vamos puxar isso para fora dessa camada de grupo particular porque ele precisa estar em sua própria camada de grupo. E então nós vamos pegar nosso retângulo selecionável com a letra M, e então nós vamos clicar e arrastar uma seleção com base na localização da seção herói . Vamos então escolher uma bela cor azul. Esta é a cor que usei. Você pode usar qualquer azul que quiser, e então, com nossa ferramenta de preenchimento de balde, podemos preencher essa cor. Vamos em frente e mover a camada de fundo abaixo da cabeça mais cedo para que possamos ver todo o resto. Tudo bem, vamos de selecionar e desligar os guias e a próxima coisa que eu quero fazer é voltar para o Grupo de Cabeçalho e selecionar minha navegação. E, em seguida, com a minha ferramenta de texto, vou clicar em uma das palavras e selecionar tudo. E vamos mudar o dedo do pé branco. Certo, acho que estamos prontos para adicionar nossa imagem a seguir. Mas primeiro, vamos dar uma olhada nessa imagem porque eu quero explicar por que eu escolhi essa imagem em particular contra outra que eu tinha escolhido originalmente, que era essa imagem aqui. Então a nossa empresa, Manhattan Bridge Capital, concede empréstimos a investidores imobiliários. E meu primeiro pensamento foi uma foto do centro de Manhattan mostrando o horizonte, alguns arranha-céus, alguns edifícios e coisas assim. E eu escolhi esta imagem porque tem uma cor azul agradável nublado, e eu queria ter algo que tivesse um contraste em relação ao verde do logotipo e do botão. Além disso, não é muito dominante porque ele meio que se mistura com as outras cores da seção de heróis também. Mas então eu comecei a pensar, OK, por causa daquela cor azul. É meio frio e desligado, e são apenas prédios. E com quem é que Manhattan trabalha para quem estão a dar empréstimos? Bem, no final, mesmo que eles trabalhem com investidores imobiliários ou empréstimos imobiliários, eles não estão realmente emprestando dinheiro para os próprios edifícios. Eles estão emprestando dinheiro para as pessoas. Então é por isso que decidi encontrar uma imagem de alguém que representasse melhor quem eles são e com quem lidam, contra um edifício em si. Então porque os edifícios podem obter empréstimos e as pessoas fazem. É por isso que decidi escolher uma imagem com uma pessoa nela, e acabei encontrando essa imagem aqui. E a razão pela qual eu escolhi esta imagem em vez de algumas das outras que eu encontrei com as pessoas foi baseada no tipo de investidores que este cliente lida com ou com esta empresa lida. Eles lidam com investidores, mas que tipo de investidores? Portanto, há muitas opções quando se trata de selecionar uma imagem com investidores. Você quer alguém de terno e gravata, ou você quer alguém de shorts e mostra que trabalha em casa perto da piscina? Ou você quer alguém vestido com trajes de negócios casuais em um ambiente semita casual, de negócios ou talvez algo completamente diferente. Tudo depende do que a empresa para a qual você está trabalhando está vendendo em seu tipo de cliente. Então, quem era a principal clientela deles? Bem, para esta empresa em particular, investidores de terno e gravata não são o dedo principal do pé do cliente. É o investidor individual que trabalha para si mesmo contra uma corporação. Então eu senti que alguém em trajes de negócios casuais em um ambiente casual e semi de negócios era mais apropriado contra alguém de terno e gravata ou um ambiente de negócios mais formal. Foi por isso que resolvi esta imagem em particular. Mas há outra razão pela qual escolhi esta imagem, e isso é por causa da direção em que ela está olhando. Então estudos mostraram que você quer que as pessoas olhem diretamente para os visitantes criem contato visual. Ou, mais importante, você quer que eles olhem para algo, porque quando você olha para essa pessoa, você quer ver o que ela está olhando, e seus olhos tendem a seguir na direção em que estamos olhando, que é neste caso e isso é correto são chamados de ação. Então ela está olhando para esta área, o que nos leva a essa chamada de ação e nós queremos que nossos visitantes percebam que chamado ação e porque nós tivemos tempo para descobrir nosso cliente o que eles estão vendendo e os problemas de seus clientes, criamos uma ação fria que é irresistível. Resolve um problema. Precisam de dinheiro hoje. Vamos aprová-lo em 60 minutos ou menos, e esta vai ser uma ótima maneira de captar o interesse de alguém, porque ninguém mais em sua área está oferecendo este tipo de serviço de aprovação de empréstimo. Então isso vai gerar mais negócios para o cliente porque eles estão resolvendo um problema real que seus clientes têm. Então, novamente, eu só quero reforçar o fato de que este é um tipo de serviço de marketing que você pode tirar seus clientes que outros Web designers não estão oferecendo, e você pode ir além do que outros Web designers ar fazendo e ajudar seu cliente ganhar mais negócios. E com quem você acha que eles entrarão em contato quando precisarem atualizar seu site? Eles vão entrar em contato com você, então vamos em frente e pegar essa imagem aqui. E a coisa legal sobre este site aqui escolhe obedecer dot com é que todas as suas imagens não são apenas livres, mas seus direitos autorais livres para que você possa usá-los em seus clientes site ao vivo sem qualquer atribuição ou pagar uma taxa para usar essa imagem. Então, se você quiser baixar exatamente essa mesma foto, escolha Subait dot com, crie uma conta e então você pode baixar essa imagem em particular em diferentes tamanhos de resolução . Então, para baixar esta imagem, basta digitar este número aqui e pegar um testamento, encontrar a imagem, e então você pode baixá-la, e então vamos continuar trabalhando em nossa seção de heróis. Tudo bem, vamos em frente e fazer nossas formas que vão estar do lado esquerdo da nossa imagem. Na verdade, ainda não tenho minha imagem aqui, então vou pegar minha imagem e arrastá-la para o meu documento. Eu vou em frente, desligá-lo para prego, e nós vamos Graham são ferramenta Ellipse. Desta vez, queremos ter certeza de que em nossas opções de ferramenta temos corrigido desligado e vamos fazer um tamanho de Vamos fazer 5 40 por Vamos fazer 7 40 Para a altura. Nós realmente precisamos reduzir isso um pouco para que possamos preenchê-lo com uma cor de nossa escolha. Vamos em frente e criar uma nova camada. Primeiro, vamos chamá-lo de forma. Sentir o quê? Transparência Clique em OK e, em seguida, para a nossa cor, vamos escolher um azul mais escuro versus o plano de fundo. Então acho que vou usar algo assim um pouco mais sombrio. Você pode fazer o que quiser qualquer cor de sua escolha. Eu só vou fazer isso. Clique, Ok. E então eu vou pegar por balde ferramenta de preenchimento com a letra G para preencher isso. Eu vou em frente e de select, e eu só vou movê-lo mais um pouquinho. Eu também quero ir para a camada e selecionar cortar para o conteúdo para alterar o limite da camada. E vamos em frente e criar um novo mais cedo. Nós vamos chamá-lo de forma também, e então com nossa ferramenta de elipse, vamos em frente e criar uma nova forma com o mesmo tamanho. Então vamos fazer 540 por 740 Vamos puxar isso para baixo. E eu quero escolher uma cor mais clara desta vez. Então eu vou escolher algo diferente, pouco mais leve, ele e vá em frente e preencha isso. Certo, vamos de selecionar. Tudo bem, eu vou mover esta camada para que ela se sobreponha à primeira forma e vá para lá. Vamos subir para camada e cortar para conteúdo para alterar o limite posterior, bem como, na verdade, indo para alinhar estes um pouco melhor. Então eu vou ativar meu guia para que eu possa criar um novo guia para colocar a segunda forma em linha com a outra. Certo, vamos mover esse cara. E fora de lá, não precisamos mais disso. Tudo bem , estamos quase terminando. O que vamos fazer agora é pegar a segunda forma e duplicá-la. Porque o que vamos fazer é usar isso para cortar as duas formas. Então nós temos aquela borda de elipse agradável ao longo do lado esquerdo, e então ele vai ser transparente deste lado, então eu vou mostrar a vocês o quão legal e fácil isso é. Então vamos mover isso um pouco mais, então vamos subir para nossos modos de mesclagem e selecionar cor ou corrida e boom. Agora temos as nossas duas formas com a nossa transparência aqui à direita. Agora há um problema que é apagar todas as cores abaixo. Então, se eu voltar para minha imagem aqui, ele vai tirar a cor ou os pixels para essa camada também. Então, qualquer pixel abaixo desta camada que tenha o modo de mesclagem nele, ele vai apagar as cores e os pixels e dar-lhe transparência para o resultado final . Então vamos consertar isso, e é muito fácil de consertar. O que vamos fazer é clicar com o botão direito do mouse em selecionar um novo grupo de camadas. Vamos chamar isso de formas. E então, uma vez que colocamos essa camada de forma na camada de grupo, ele remove esse modo de mistura de todas as camadas abaixo dela, porque ele está contido dentro do grupo. Agora, uma vez que trouxemos as outras duas formas e ele apagará os pixels abaixo dele no grupo, não afetará nada do lado de fora do grupo. Então isso é muito legal. Eu gosto disso muito incrível. Tudo bem, vamos em frente e mover isso para cima. Precisamos ter certeza de que movemos a camada ativa selecionada, e vamos avançar e mover isso para cima na posição. Então, bem ali, vou aumentar a minha imagem só por um segundo, poder ver onde estou a colocar isto. Então eu queria fora do topo da página, e ele vai para o lado de fora da parte inferior da seção de heróis também. E então vamos criar uma máscara de camada para removê-la da parte inferior da seção de heróis . Tudo bem, uma imagem mais severa de volta, porque precisamos colocar isso em posição. Também precisamos invertê-lo porque, como você pode ver, ela está olhando na direção errada. Queremos que ela olhe para a ação chamada, então vamos em frente e fazer isso primeiro indo para camada, selecionar, transformar e, em seguida, selecionar virar horizontalmente. Infelizmente, eu selecionei a camada errada, então eu vou fazer isso com o Controle de Comandante e as letras. A Vamos selecionar nosso investidor aqui. Na verdade, vou renomear esse investidor de camada, e então vamos voltar para a transformação de camada invertida horizontalmente. Agora ela vai olhar para a ação chamada Vamos pegar nossa escala para desejar shift plus s, e então, e então para a altura, eu vou digitar 700 que é a altura da nossa seção de heróis e, em seguida, com a tecla tab , ele vai redimensioná-lo. E então eu posso agarrá-lo no meio e movê-lo para o lado direito. E quero trazê-lo todo o caminho. Então direito sobre lá deve ser bom e, em seguida, clique habilidade. Eu tenho um pouco de azul aqui em cima, então eu só vou pegar minha ferramenta de movimento e movê-la um pouco para cima com minhas teclas de seta, então isso deve funcionar. Agora, só precisamos nos livrar da imagem no canto superior esquerdo e no canto inferior esquerdo aqui. E podemos simplesmente fazer isso adicionando uma máscara de camada e selecionando branco porque, como você sabe, anúncios brancos e preto remove. Então vamos começar mantendo a imagem inteira intacta com uma máscara de camada branca. Agora, vamos pegar nossa ferramenta de pincel com a letra B. Vamos mudar isso para preto e branco com a letra D, e então podemos pintar com preto para remover. Quão legal é isso? Ah, adorei. Muito bem, vamos fazer a mesma coisa para o nosso grupo Shapes mais tarde. Podemos, na verdade, e uma máscara de camada para um jogador de grupo. Então, a mesma coisa. Máscara de camada. Anúncio branco. Agora, desta vez, em vez de usar nosso pincel para removê-lo, vamos pegar nosso ângulo direito selecionável com a letra M. Vamos fazer uma seleção onde queremos remover, e então nós estamos pressionando nossa tecla delete ou backspace. Mas infelizmente, nada aconteceu. E isso porque ele está pegando as informações da cor de fundo para substituí-las . Então precisamos mudar o fundo e a cor do primeiro plano com a letra X. E quando apertamos a tecla delete ou o backspace Kate, ele remove-o. Tudo bem. Eu acho que este é um bom ponto para parar e continuar com a nossa seção de heróis no próximo tutorial. Então, se você está pronto para isso, sempre faça. 33. Hero parte 2: Tudo bem. Então, o que nos resta para a nossa seção de heróis é a ação chamada e possivelmente fazer algumas pequenas alterações no layout geral da seção de heróis também. Então vamos em frente e começar com o nosso texto para que possamos adicionar um título para a nossa ação chamada. Vou digitar a aprovação do empréstimo em 60 minutos. Vamos selecionar todo o conteúdo para que possamos alterar a cor da fonte para Branco. Eu também quero fazer 50 para o tamanho do pixel, e eu vou usar Railway bold para a família divertida. E então só precisamos mover isso para a esquerda aqui. Então as linhas com o nosso logotipo e parece muito bom aqui. O único problema é que agora estamos a rebater as formas. Vamos em frente e puxar essa camada para fora porque ela não deveria estar lá dentro. Traga isso abaixo do grupo de cabeçalho, e acho que precisamos mover a forma e talvez a imagem também. Então vamos pegar essa camada de forma e movê-la para a direita. Bem ali deve ser bom, e vamos também mover a imagem também. Agora, se você pegar o polegar máscara camada agora e não a camada em si. Em seguida, você só vai mover a máscara de camada, então certifique-se de selecionar a miniatura da imagem para que você possa mover ambas juntas. Então eu vou jogar set bem ali. Então precisamos remover essa parte da imagem. Então vamos pegar a máscara de camada, miniatura do pincel e, em seguida, certifique-se de que você tem preto definido para o primeiro plano para que você possa remover essa parte da imagem. Muito bem, vamos mudar o nome desta manchete da camada e vamos movê-la um pouco para cima. Tudo bem, vamos em frente e digitar um pequeno parágrafo de informação. Pegue sua ferramenta de texto. Vou em frente e colar um parágrafo que um bonitinho escreveu, então não importa o que você escreva. Basta fazer cerca de três linhas de informação, e então vamos mudar o tamanho da fonte para 14 Branco, e eu acho que eu quero ir com um fot diferente. Agora, quando se trata de um corpo de conteúdo de três ou mais linhas, eu vou usar uma fonte como Georgia ou Helvetica, e esses tipos de fontes são muito melhores nos olhos, é mais fácil lê-las versus uma fonte como ferrovia ou Oswald. Então, por agora, vamos em frente e vamos com a Georgia. Eu acho que eu preciso fazer esse texto um pouco maior, então eu vou subir aqui e mudá-lo para 18 e então nós só precisamos movê-lo para cima em posição agora. Neste momento, estou achando que o parágrafo ainda está competindo com a manchete. Tem a mesma intensidade de peso. Mesmo sendo uma família de fundos diferente, ainda está dificultando a leitura. Então vamos pegar essa camada e soltar a opacidade para 50% e isso definitivamente ajuda a criar alguma separação dos dois e torna isso mais fácil de ler. Eu acho que podemos ir em frente e criar nosso botão aplicar prego. Vamos em frente e criar uma nova camada chamada Aplicar agora transparência de botão, é claro, E então, com nosso retângulo selecionável, vamos criar uma forma com o seguinte tamanho. Vamos fazer 375 para o com e 110 para a altura. Agora, o que eu quero fazer é criar cantos arredondados agora não temos uma ferramenta de seleção para fazer isso. Mas se vamos sob a opção de menu de seleção, não temos opção aqui chamado retângulo arredondado. Então, uma vez que você seleciona que você condena. Defina o raio desses cantos arredondados para que você possa configurá-lo entre o que quiser. 0 a 100. Então eu vou em frente e fazer 35 clique, OK, OK, e agora você pode ver os cantos arredondados. Quão legal é isso? Incrível. Tudo bem, espero que você esteja aprendendo coisas novas enquanto continuamos com novas lições. Vamos em frente e escolher uma das cores verdes que usamos anteriormente e clique. OK, vamos em frente e preenchê-lo com seu balde de preenchimento para uh e D Select está certo. Vamos em frente e pegar essa camada e duplicá-la para que possamos criar uma espécie de sombra . Vou puxar esse para baixo e eu vou dar um nome. Aplique agora, sombra de botão. Agora, antes de mover essas camadas para a posição, vamos em frente e subir para a camada e selecionar cortar para o conteúdo para ajustar o limite da camada. E vamos fazer a mesma coisa para a primeira camada aqui conteúdo e depois o quê? Eles são movidos para um podemos clicar sobre a esquerda e para cima um. Ok, agora podemos ir em frente e colorir a sombra do botão. Vamos selecionar essa camada. Suba duas cores e selecione colorir. Clique na barra de cores e, em seguida, clique na mesma cor de verde que você selecionou para o botão superior e, em seguida, clique em OK e automaticamente torna mais escuro. E eu só quero mudar o meu um pouco. E eu só vou usar minhas teclas de seta para movê-lo para a esquerda, acabar um pixel de cada vez. Então aí parece muito bom. Vamos em frente e colocá-los em uma camada de grupo. Chame isso. Aplicar agora botão e vamos em frente e alinhá-lo para os outros dois elementos também. Colocou uma taxa sobre lá. Ok, eu vou em frente e selecionar meu parágrafo e vamos em frente e usar nossas teclas de seta para selecionar isso também. E para usar suas teclas de seta sobre isso, você precisará clicar nele com sua ferramenta de movimento primeiro. Caso contrário, você só usará suas teclas de seta para navegar no painel de camadas. Vamos em frente e renomear este parágrafo vamos colocar a manchete no topo são aplicar . Agora botão abaixo deles e podemos então criar um novo grupo de camadas para aqueles chamados chamada ação. Ok, temos uma coisa que nos esquecemos de fazer, e que é adicionar o nosso texto para o nosso botão. Então, o que? São textuais. Vamos digitar, Aplicar agora e vamos selecionar branco bem velho e vamos fazer 70 pixels para o tamanho da fonte. Mas isso aí e vamos em frente e uma linha que diretamente no centro do nosso botão eu vou mover isso aqui com nosso botão aplicar prego, e então vamos fazer uma seleção com nossa ferramenta de seleção difusa. Certifique-se de que você tem sua camada de botão Aplicar agora selecionado, e então podemos usar nossa ferramenta de alinhamento para alinhá-lo diretamente no centro, e precisamos puxar isso. Aplicar agora, camada para fora no topo para que possamos selecioná-lo com sua ferramenta de limite e, em seguida, certifique-se de que você tem relativo à seleção e um meio linha e centro do botão. O único problema é que temos mais espaço no topo do que no fundo, então deixe-me mostrar por que isso aconteceu. Pegue o seu têxtil e clique nele e podemos ver dentro desta caixa de texto. Aqui temos mais espaço aparecendo do que aqui em baixo, e é aí que a ferramenta de alinhamento está fazendo seus alinhamentos com base no tamanho dessa caixa . Então, se clicarmos aqui no topo, podemos ver uma pequena caixa amarela, e podemos clicar e arrastar isso para que ele chegue ao topo do texto. O único problema é que ele empurra o texto para baixo e para baixo da caixa de texto, então é cortado. Mas isso é bom para o propósito de alinhar. Isso é bom. Vamos voltar ao nosso botão de aplicação de prego e seleção er com nossa ferramenta de seleção difusa. E, em seguida, com a sua ferramenta de alinhamento, podemos re centralizar isso diretamente no centro. Agora precisamos de selecionar e voltar com a nossa ferramenta de texto e mover essa caixa para cima até obter todo o texto visível dentro dessa caixa de texto. E agora deve estar perfeitamente alinhado. Lindo. Tudo bem, vamos em frente e diminuir o zoom. Certo, então vamos dar uma olhada rápida em nossa seção de heróis aqui para ver se há algo que possamos fazer para tornar isso um pouco melhor. Então temos dois lados, e a imagem do nosso investidor está olhando para trás desta forma, que é o que queremos. Mas eu acho que há muitos elementos concorrentes aqui, e parece muito ocupado. Então, quais são as partes mais importantes desta parte da seção de heróis? Eu diria que o botão aplicar agora é o mais importante porque esse é o chamado à ação. Esta é a oferta, mas o botão aplicar prego leva você para o próximo passo, modo que deve ser o maior. O que é bom. - É. Mas ainda está competindo com o logotipo aqui em cima porque o logotipo é bastante grande. Então o logotipo está competindo com o botão de aplicar prego, e está meio que tirando nossos olhos desta seção. Então eu acho que nós precisamos pegar esse logotipo e torná-lo menor. Vamos em frente e mexam-se. Aplique agora, volte para o jogador de grupo apropriado. Vamos encontrar nosso logotipo, que deve estar em nosso cabeçalho e com nossa ferramenta de escala, vamos em frente e escalar isso para uma altura de Vamos com 98 para a altura. Agora, como você sabe, isso agora foi convertido em uma camada de pixel. E se quisermos atualizar esse conteúdo, temos que selecionar nossa ferramenta de texto e selecionar a opção apropriada para alterá-lo. Mas isso é bom, porque nós projetamos o logotipo em um documento separado e dizemos que, com sorte, podemos sempre voltar a esse documento em particular e atualizá-lo com base no feedback de nossos clientes. Se eles gostam do logotipo como está, tudo bem. Mas se elas tiverem alterações, você poderá voltar ao documento original e arrastar essa camada em vez de tentar corrigi-la a partir daqui. Então, como você pode ver fazendo esse local menor, ele não está competindo como antes. E agora os nossos olhos gravitam nesta área. Lemos a manchete. Talvez queiramos ler este parágrafo aqui para mais informações, mas sabemos o que temos de fazer a seguir, e isso é aplicável agora. E essas são pequenas coisas que você vai ter que pensar enquanto você está projetando quais são os elementos mais importantes? Qual deve ser o maior no que deve ser o menor. Dito isto, acho que o nosso texto aqui e a nossa navegação são um pouco pequenos demais. Então eu vou pegar minha ferramenta de texto e selecionar tudo. O único problema é que eu posso acessar as opções de ferramentas acima dela porque ela está sendo escondida na parte superior do documento. Então vamos sair dessa. E então, com sua ferramenta de movimento, podemos simplesmente soltar isso para baixo e então entrar e fazer mudanças. Vou fazer isto 22 pontos pelo tamanho e depois temos de ter a certeza que está alinhado para o topo e para a direita. Muito bem, gosto do tamanho da navegação. Agora está um pouco perto demais dessas formas aqui. Então eu vou ir em frente e fechar todos esses jogadores do grupo para fora e mover meus jogadores de forma fora apenas um pouquinho. Então deve ser bom. E agora eu preciso pegar a máscara de camada da imagem para que eu possa pintar com branco para que eu possa trazer volta a imagem nesta parte e nesta parte da seção de heróis, porque nós apagamos parte disso mais cedo, e agora nós só precisamos adicioná-la de volta em naquela área. K tão branco e preto remove. Muito bem, então a nossa secção de heróis está terminada. Ou é? Na verdade, há uma coisa que podemos fazer para melhorar a seção de heróis para aumentar as chances um investidor aplicar prego versus rolagem em uma parte diferente da página ou navegar fora da página, ou talvez até sair do site. E vou explicar mais sobre isso no próximo tutorial. 34. Hero parte 3: Vamos em frente e terminar nossa seção de heróis. Agora precisamos de um ingrediente adicional, que não fizemos no tutorial anterior, e também precisamos organizar nossas camadas para a seção de heróis também. E então eu só quero falar sobre uma outra coisa que nós conduzimos para melhorar a seção de heróis para aumentar as chances de que um investidor vai tirar proveito desta chamada à ação e aplicar agora. E vamos cobrir isso em apenas um minuto porque podemos ou não querer adicioná-lo à seção de heróis , e eu vou explicar mais sobre isso. Uma vez que passamos por esses outros passos, vamos em frente e trabalhar na adição de um Grady int ao nosso plano de fundo. E para começar, vamos em frente e criar uma nova camada. Vamos nomear ingrediente com um preenchimento de transparência. Vá em frente e clique. OK, vamos tirá-lo dessa camada de grupo. Então vamos em frente e ativar o limite da camada sob vista e, em seguida, basta clicar em mostrar limite da camada e podemos ver que esta camada em particular está cobrindo todo o documento. E se adicionarmos o nosso ingrediente são ingredientes vai ser adicionado nesta área também, e teríamos que usar uma máscara de camada para removê-lo dessa área. Mas há uma maneira mais fácil de fazer isso. Nós podemos realmente dimensionar esta camada específica para a altura da seção de herói, então não precisamos nos preocupar em adicionar a máscara de camada para aqui em baixo. Então, para fazer isso, vamos clicar com o botão direito na Escala de Seleção de Ingredientes aqui. Queremos desbloqueá-lo e definir a altura para a altura da seção de heróis, que é 700. E, em seguida, quando você clicar em escala, você notará que o limite da camada foi alterado. Podemos realmente clicar e arrastar para cima que parte da camada para a seção herói e agora são camada. Limite é em torno da seção herói e ingrediente será aplicado apenas a esta área. Então vamos em frente e adicionar ingrediente com nossa ferramenta de saudação, que está localizada bem aqui. Eu não tenho um atalho de teclado para ele, mas se você usá-lo muito, você pode querer e um para si mesmo. Ok, nas opções de ferramentas, temos algumas opções aqui que precisamos configurar para o nosso ingrediente sob forma. Queremos ter certeza de que temos rádio selecionado para que tenhamos um tipo circular ingredientes, por isso é como um holofote. Nós também queremos o espaço de cores da mistura, definir o dedo rgb linear, e então precisamos mudar as cores do nosso ingrediente. Agora, o meu está mostrando o dedo preto branco. O seu pode ser diferente dependendo se você usar esta ferramenta específica antes ou não. Então eu vou ir em frente e clicar sobre isso, e eu vou obter uma lista de todos os diferentes INTs gananciosos que estão disponíveis novamente. O seu pode ser diferente do meu porque eu já criei ingredientes personalizados antes e, em seguida, salva-os automaticamente neste painel. Então, para mudar as cores, precisamos clicar neste pequeno ícone aqui para editar o Grady int. E então somos apresentados com um novo painel aqui chamado Degrading and Editor, e então podemos fazer ajustes nessa cor específica. Então temos alguns triângulos aqui e o centro um. Nós podemos realmente mover os endpoints que não podemos, então eu posso ajustar quanto preto e branco é adicionado ao Grady int. Eu gostaria de manter o meu no meio, por isso são 50 e 50. E então, para mudar as cores, precisamos fazer nossas seleções de cores no primeiro plano e nas cores de fundo. Então a cor que Grady e eu queremos é azul branco, e eu quero uma cor específica de azul, que é esta cor aqui, o fundo da nossa seção de heróis. Então, já tem branco configurado. Então vá em frente e defina que, se for diferente para você e, em seguida, para a cor de fundo, vamos selecionar esta cor com nossa ferramenta conta-gotas, que está localizada bem aqui. Então, uma vez que você clica sobre isso, você começa um pouco de conta-gotas e então você pode clicar nesta cor, e ele vai adicionar essa cor aqui. Ok, então agora temos essa cor. Podemos ver que meu ganancioso e editor também mudou de azul dedo branco automaticamente. Então eu vou mostrar a vocês como mudar isso um pouco porque nós queremos azul branco e nós também podemos fazer seleções de cores a partir daqui um pouco. Então vamos fazer isso. Vou clicar. OK, então se chegarmos ao Grady e Editor e clicarmos com o botão direito do mouse, teremos um menu pop-up, e podemos ver aqui o tipo de cor esquerda. Eu tenho a cor de fundo selecionada, e é por isso que ela mudou automaticamente no Grady, um editor quando eu selecionei aqui. O seu pode ser diferente. Anos podem ser corrigidos, e provavelmente não mudou de cor. Então clique com o botão direito do mouse no editor de grade e, em seguida, diga ao gimp qual cor você deseja usar para o lado esquerdo. E neste caso, eu quero branco. Então eu vou selecionar a cor do primeiro plano e, em seguida, clique com o botão direito e selecione o tipo de cor direita e a cor de fundo desta vez. Então agora eu tenho o meu dedo branco azul. Então vá em frente e configure suas cores e, em seguida, volte para o painel de camadas. Certifique-se de que você tem grade selecionada e, em seguida, clique e arraste para fora o seu ingrediente. Então veja como ele está sendo confinado ao limite da camada. Se não tivéssemos feito isso , teria sido encobrindo. Aqui em baixo é bem, nós teríamos passado mais tempo editando o Grady Int, então ele não está aparecendo aqui porque nós só queremos que ele confinado à seção de heróis. Então, quanto mais longa esta linha, mais branco ou maior o círculo é para aquele Grady int particular. Eu venho aqui bem apertado, é mais um holofote e é muito menor. Não é isso que eu quero. Então eu vou me arrastar, também. Oh, eu não sei. Acho que talvez lá deva ser bom. Agora podemos ir em frente e clicar, entrar ou retornar para criar aquele int ganancioso. Então nosso ingrediente foi aplicado, e agora precisamos fazer ajustes porque não podemos ver nossa imagem. Então a primeira coisa que quero fazer é baixar minha opacidade para cerca de 5 a 10 para a opacidade. Eu não quero muito brilhante ou muito intenso. E se eu der uma olhada no antes e depois, isso me dará uma idéia melhor de onde eu quero colocar essa opacidade particular. E eu vou para seis para mim. Você pode fazer o que decidir. Parece melhor do seu lado. Agora a outra coisa que precisamos fazer é remover o Grady int da imagem. Eu não quero o int ganancioso aqui do lado, então precisamos fazer uma máscara de camada para fazer isso. Então vamos em frente e adicionar uma máscara de camada com branco e clique e, em seguida, com a minha ferramenta de seleção de retângulo , eu vou fazer uma seleção aqui. E então eu quero ter certeza de que eu tenho preto definido para o fundo e, em seguida, pressione delete ou a tecla backspace, e que remove ingrediente dessa seleção. Agora eu preciso fazer uma seleção aqui para remover o resto dele para que possamos entrar em nossas formas. Agrupe essa camada, e eu quero selecionar a camada superior, que é esta aqui e, em seguida, com a minha ferramenta de seleção difusa, eu posso clicar nesta área para fazer minha seleção. Eu vou ir em frente e fechar este jogador de grupo e voltar para cima e selecionar minha máscara de camada para essa camada Grady Int e, novamente, excluir ou backspace chave para se livrar do resto do ingrediente. Agora vamos dar uma olhada no antes e depois. Só está sendo aplicado nessa área ali. Quão legal é isso? Tudo bem, então isso adiciona um pouco de profundidade ao nosso fundo, torna-o um pouco mais interessante e não é plano. Tudo bem, vamos em frente e criar um novo grupo de camadas e vamos chamá-lo de seção de herói ou apenas herói. E vamos colocar todas as nossas camadas de grupo aqui em qualquer ar individual. Ok, então nós temos nossa seção de cabeçalho ou herói, e tudo é bom, limpo e organizado. Tudo bem, vamos trabalhar na seção de heróis um pouco mais porque podemos ou não ter uma seção que queremos adicionar na seção de heróis. E no design original, adicionei alguma prova social para aumentar a probabilidade de que um investidor aproveitasse esta oferta e aproveitasse a chamada ação aplicando agora. Por isso, a razão pela qual gostaria de acrescentar provas sociais é porque acrescenta credibilidade e credibilidade. Para uma empresa como esta é enorme quando você está falando de dinheiro em geral. Então, ao mostrar potenciais investidores que esta empresa em particular foi destaque nestas publicações e meios de comunicação em particular mostra que essa empresa em particular é confiável e muitos investidores querem ter certeza de que eles estão lidando com alguém que é confiável e não um agiota. Então isso pode ajudar a aumentar a possibilidade de que alguém queira fazer negócios com esta empresa em vez de não ter essa informação. O único problema é, onde colocamos? Vamos colocá-lo dentro da seção de heróis agora? A seção de heróis é aqui em cima, mas a prova social está abaixo dela. Então vamos movê-lo para a seção de heróis e dar uma olhada no que acontece. Então agora a seção de heróis está muito mais ocupada. Temos muito mais acontecendo. O que podemos fazer é reduzir o tamanho do logotipo e o botão Aplicar agora e mover tudo para que esta informação se encaixe. Ou podemos tomar essa prova social e podemos ajustar a opacidade dos logotipos para diminuir a intensidade deles. Eles ainda são visíveis e ainda mostram credibilidade, mas não é tão ocupado como era antes. A outra coisa que podemos fazer é pegar esses logotipos e enfraquecê-los de modo que eles não são tão grandes quanto eles são agora, e então eles não estão competindo com o resto do conteúdo. Então vou deixar essa decisão criativa com você. Se você vai colocá-lo na seção de heróis, lembre-se de realinhar seus elementos e redimensioná-los de acordo para que a seção de heróis não esteja tão ocupada quanto está atualmente. Você vai ter que mover a imagem também e mover isso para cima. Ou você pode fazer o que eu fiz e colocá-los logo abaixo da seção de heróis assim. Ok, então é isso para a nossa seção de heróis. A não ser, é claro, que você esteja colocando sua prova de mídia social lá dentro. De qualquer forma, vamos começar a criar a seção de prova social e essas três colunas no próximo tutorial, que é o início da criação da seção corpo de nossa página da Web. Então, se você está pronto para fazer isso, vamos fazê-lo. 35. Prova social: Olá e bem-vindo de volta. Tudo bem, então neste tutorial, vamos continuar e criar nossa seção de provas sociais, e também vamos criar três colunas de informações. E em sua página original, eles tinham um link aqui, serviços que foram para outra página que explicava os três principais tipos de investidores para os quais eles forneceram empréstimos. Então eu pensei que seria bom colocar trechos dessa informação na página inicial dessa forma se eles decidissem que queriam mais informações sobre um desses tipos específicos de empréstimos do que eles podem facilmente navegar para essa página através do link que é criado através da manchete. Então vamos em frente e criar essas três colunas também. Então vamos em frente e começar com nossa seção de provas sociais primeiro. Então o que precisamos é de 4 a 5 logotipos. Estes foram os que escolhi os formulários da Street Money Inc e da CNBC, e vamos adicioná-los ao nosso documento. Então eu fiz uma pesquisa no Google para cada um desses logotipos e selecionei transparente ou PNG quaisquer que sejam as opções porque você quer ter certeza de que esse arquivo específico que você vai adicionar ao seu documento é transparente. Então, vamos clicar com o botão direito do mouse em selecionar cópia de imagem, e, em seguida, de volta em nosso documento, podemos colar com o Commander Control e a letra V. Se você não receber essa opção, onde automaticamente adiciona a uma nova camada para você, você pode obter esta opção em vez disso. Isso diz, seleção flutuante. Nesse caso, basta o botão direito, clique e selecione para nova camada, e então ele irá adicionar isso a uma nova camada para você. Ok, eu não preciso de ambos, então eu vou em frente e remover um, e então nós só precisamos selecionar, surgir e redimensionar cada um dos logotipos, e nós também precisamos renomear os logotipos. Então vamos fazer a Forbes. Eu tenho alguns diferentes. Aqui está bem, eu tenho dinheiro da CNN em vez de dinheiro. Realmente não importa. Isto é só para praticar de qualquer maneira. E eu só vou com três neste momento. Então vamos até as cores e selecione colorir. E então queremos selecionar branco para mudar tudo dedo do pé branco. Então vamos em frente e fazer isso para cada um dos logotipos. Está bem? Com nossos guias ativados com o controle Commander no semi dois-pontos. Vou em frente e um guia para o 785. Vamos pegar a nossa ferramenta para festas para que possamos preenchê-la com uma cor. Vamos fazer uma nova camada também. Vamos chamá-lo de fundo e vamos escolher uma cor azul escuro e, em seguida, com sua ferramenta de preenchimento de balde , você pode ir em frente e preencher isso. Ok, eu vou de selecionar e desligar meus guias. Vamos mover a camada de fundo abaixo dos logotipos, e também precisamos redimensionar nossos logotipos e alterar o limite da camada também. Então vamos subir para a camada e selecionar Cortar o conteúdo e vamos em frente e fazer os outros dois também. Agora, se o limite da camada já está cortado para o conteúdo, você vai receber esta pequena mensagem aqui, então parece o mesmo para a Forbes também, então estamos prontos para ir lá. Vamos em frente e pegar nossa ferramenta de escala e certificar-se de que a altura e a largura estão vinculadas. E então, para a altura vamos fazer 50 pixels. Eu deveria ir um pouco mais baixo. Vamos fazer 35 e, em seguida, ir em frente e escalá-lo e apenas movê-lo para a posição. Certo, vamos fazer o mesmo com os outros dois logotipos também. Nós somos, quantos logótipos você tem. Todos eles vão ter 35 anos. Ok, vamos ligar nossas grades porque eu quero ter certeza de que tudo está devidamente alinhado. Eles também precisam mover minha grade lier acima de todas as outras camadas. Podemos realmente vê-lo. Vamos em frente e colocar este logotipo aqui diretamente no centro destes dois. Então vamos pegar nossa ferramenta de seleção de retângulo e fazer uma seleção. E então, com nossa ferramenta de alinhamento, queremos clicar nessa camada e movê-la para cima, se necessário. E então vamos nos alinhar ao centro do alvo. Ok, vamos em frente e colocar todos esses logotipos em uma camada de grupo. Então clique com o botão direito do mouse e selecione o novo grupo anterior chamado Logotipos. Agora vamos em frente e aliando nossos logotipos diretamente no centro de nosso plano de fundo. Vamos para a camada de fundo primeiro e selecionar a camada e criar um conteúdo para alterar o limite da camada, e então com a ferramenta de alinhamento, vamos clicar nela. Mas parece que tenho de levar isto até ao topo. Então, vamos clicar nisso. Então vamos mover os logotipos para o topo, segurando a tecla Shift e clique nos logotipos. Desta vez vamos alinhar com o primeiro item, que é o plano de fundo. E então vamos alinhar centro e meio do alvo para alinhar esses logotipos diretamente no meio da forma. Tudo bem, então essa parte da página que está feita, vamos criar um novo grupo de camadas para ele chamado Prova Social. Certo, temos tudo isso organizado. Vamos em frente e mover isso para baixo abaixo da seção de heróis. E agora vamos trabalhar em nossas três colunas. Agora, antes de fazermos isso, eu realmente quero voltar e selecionar os logotipos e baixar a opacidade para cerca de 50 apenas uma espécie de tom para baixo apenas um pouco. Tudo bem, então isso faz com que seja menos ocupado do que antes. Então vamos em frente e trabalhar em nossas colunas agora. Então, a primeira coluna vamos definir o título para senhorio. Vamos mudar para Oswald Bold. Vamos fazer 30 para o tamanho e depois para a cor, vamos escolher a cor verde do botão dela. Então descreva sua ferramenta conta-gotas aqui e clique no botão para obter esse clique de cor. OK, e nós realmente precisamos mover esta camada particular para fora deste grupo. Essa camada. Tudo bem, vamos em frente e colocar isso aqui no fundo, e então nós vamos apenas criar um novo parágrafo com algumas novas informações. Não importa o que diz. Apenas escreva alguma coisa. 567 linhas está bem. E vamos fazer este texto 12 para o tamanho e, em seguida, para a cor que vamos digitar 333 333 Clique em sua tecla tab Clique em OK, e vamos mudar a fonte para Georgia parece um pouco pequeno. Então, talvez um pouco maior. Vou em frente e selecionar tudo e mudá-lo para 14 e então vamos movê-lo para posição aqui, certo? Acho que temos de ligar a nossa rede. Então vamos em frente e ligar isso, e eu vou continuar e criar um novo grupo anterior para esse conteúdo. Vai chamá-lo de senhorio e vamos dar uma olhada no nosso cabelo espacial. Eu acho que quando eu quero fazer é que eu quero pegar este parágrafo e condense-lo de modo que ele preenche em duas larguras de coluna. Então vamos voltar para o nosso têxtil com a letra T. E então precisamos ir dentro da nossa camada de grupo aqui para selecionar nosso parágrafo, e então podemos clicar nele para ativar a caixa de texto para que possamos redimensioná-lo. Então eu só vou pegar este canto aqui e arrastá-lo para a esquerda e para baixo até que ele preencha essas duas colunas apenas indo para reajustar meu texto aqui um pouco. Então, eu tenho dois parágrafos. Isso é bom. E agora está condensado a estas duas colunas, que é o que eu quero. E então vamos adicionar um par de colunas de espaço entre as colunas enquanto criamos as outras colunas também. E vamos tornar isto muito fácil de dialogar. O que precisamos fazer é pegar nossa camada agrupada senhorio, e vamos duplicar duas vezes vamos colocar o senhorio um no topo que é chamado barbatanas, e vamos chamar isso de novo. Vamos pegar essa camada e depois? Eles são movidos para um testamento. Basta movê-lo para escrever sobre o deles. Então certifique-se de que você tem duas colunas de espaço e entre elas, como ela eu acho que é demais. Vou em frente e movê-lo para a esquerda, então temos uma coluna de espaço entre eles e de volta para nossas ferramentas de texto. Podemos alterar o título, selecionar tudo, alterá-lo para 30 e, em seguida, alterar a fonte também. Como Oswald Velho e nós precisamos ter certeza de que tínhamos a cor, e então nós vamos mover a outra camada também. Então precisamos de uma coluna de espaço. Está tudo bem aí e vamos mudar o título. Agora só precisamos alinhá-los ao topo para que eles estejam perfeitamente alinhados ao longo dessa borda. Vamos em frente e desligar esses três melhores jogadores, e devemos ser capazes de selecioná-los agora com nossa ferramenta de alinhamento. Vamos em frente e clique em Landlord, mantenha pressionada a tecla shift, clique em flippers e, em seguida, soltou a tecla shift, segurando a tecla novamente e, em seguida, clique em Novo tudo bem, nós vamos para relativo ao primeiro item e em seguida, selecione uma borda superior de linha de alvos, Tudo bem aí. Agora perfeitamente alinhado ao longo do topo. Só precisamos centrá-los no meio do nosso documento aqui. Certo, antes de aliarmos essas três colunas diretamente no centro, vamos criar uma seção para essas colunas e especificar uma altura específica para elas. Então vamos ligar nossos guias com o Controle de Comandante no ponto semi dois-pontos. Vamos pegar nossa ferramenta de medição e medir 300 pixels de altura. Kate, pegue seu cara e puxe-o para baixo e para a mira bem ali. Agora, antes de selecioná-los com sua ferramenta de alinhamento, vamos em frente e criar um novo grupo de camadas chamado três colunas para que possamos colocar cada uma dessas colunas nele. E então podemos selecionar esse grupo de camadas específico com a ferramenta de alinhamento versus cada coluna individualmente, e então ele tornará mais fácil e rápido alinhá-lo diretamente no centro. Então, com a nossa ferramenta Lehman, nós só precisamos clicar nela uma vez e, em seguida, ah, deitado centro do alvo e alinhar meio do alvo. Ok, de, selecione e desative guias, e então podemos ir em frente e ligar as outras camadas também. Vamos em frente e manter a grade fora por enquanto. Agora há uma última coisa que eu quero fazer antes de seguirmos em frente, que é, eu quero alinhar os títulos diretamente no centro dos parágrafos. Agora, quando você faz algo assim e você já agrupou tudo, vai ser muito mais difícil do que fazê-lo desde o início. Mas às vezes isso acontece porque talvez o cliente queira fazer uma mudança e vai querer centralizar isso. Mas você não fez isso no início como nós fizemos, e você terá que passar por cada uma delas, agrupar as camadas e puxar todas as camadas para fora, a fim de selecioná-las com sua ferramenta de alinhamento . Também precisamos desativar essas camadas novamente para que possamos selecioná-las, e então podemos selecionar essas camadas com nossa ferramenta de alinhamento para que possamos então uma linha relativa ao primeiro item e um centro de linha de destino. Agora, neste caso, o parágrafo mudou para a esquerda porque estamos alinhando com o primeiro item. Então, em vez de selecionar o senhorio primeiro, podemos selecionar o parágrafo porque eu quero que o senhorio se mova para a direita. Caso contrário, perdemos essa quantidade uniforme de espaçamento entre cada coluna e então eu posso selecionar senhorio, e isso vai se mover ou Ok, vamos colocar de volta e então fazer isso para as outras duas colunas também. Vou renomear esses títulos com o nome do título só para dar uma descrição um pouco melhor . E, em seguida, como faras o nome do parágrafo para a camada. Eu vou ir em frente e renomeá-lo parágrafo para que, às vezes, o cliente não terá o conteúdo disponível. Então você vai apenas usar algum texto como este, ou texto fictício, sobre o qual vamos falar em um próximo tutorial. Ou você pode realmente navegar para o site deles e pegar alguns dos conteúdos que eles já têm o lugar dentro daqui. Mas, por enquanto, vamos deixar assim. Certo, temos três colunas. Vamos colocar esse golpe herói prova social e cabeça voltados e tudo está indo bem. Tudo bem, agora que temos isso feito, vamos em frente e trabalhar na próxima parte do nosso corpo no próximo tutorial 36. Parte 1: para a nossa próxima seção do nosso site. Eu queria criar algo que explicasse por que você deveria fazer negócios com essa empresa em particular . Então é como a página sobre nós. O que há sobre nós? O que fazemos? Estas são as coisas que nós dilatamos. Então eu acho que algo que é muito mais poderoso do que nós. Página está listando benefícios de por que você deve fazer negócios com uma determinada empresa que você ainda pode fazer sobre nós página. Mas eu prefiro tentar vender os serviços dos meus clientes a potenciais visitantes do site sobre por que eles devem fazer negócios com eles. E isso é o que esta seção em particular representa. Porquê Manhattan? E então listamos de 4 a 7 benefícios de porque você deve fazer negócios com Manhattan Bridge Capital Now. Este conteúdo não está disponível em seu site, por isso é algo que eu teria que falar com eles e ordenou para descobrir quais são os benefícios de usar sua empresa específica versus outros serviços de empréstimo na área. Então isso é algo que eu poderia vender meu cliente porque eu ou ajudá-los conteúdo correto para esta seção, ou eu permitiria que eles forneçam essa informação para mim. Se eu próprio o escrevesse em nome deles com base nos benefícios que eles fornecem, então, é claro, cobraria uma taxa adicional por isso. Se eles estão fornecendo a informação, eu não estou. Então esta é apenas mais uma oportunidade para ir além. Ser apenas mais um Web designer. Você não precisa fazer os direitos autorais você mesmo. Se você não é bom em escrever como eu sou, você ainda pode terceirizar, mas marcar o custo de obter esse conteúdo específico escrito , e então você ganha renda adicional. Mas, ao mesmo tempo, você está fazendo um serviço para sua espécie, fornecendo sua experiência profissional para saibam que eles podem aumentar a quantidade de clientes ou clientes potenciais que vão entrar em contato com eles vendendo-os sobre por que eles deve fazer negócios com você. Se você não tem essa informação, é apenas informação geral. Sim, nós fornecemos esses tipos de empréstimos. Podemos fazer um empréstimo em 60 minutos, mas não está dizendo por que você deve fazer negócios conosco. Sim, você pode obter uma aprovação em 60 minutos, mas tem que haver outros benefícios além de nós que atrairão as pessoas a fazer negócios com eles. Eles poderiam fornecer taxas de juros mais baixas em relação à concorrência. E eles podem explicar que vamos economizar centenas de milhares de dólares porque nossas taxas de juros são mais baixas do que qualquer outra pessoa na área. Isso seria um benefício. Outro seria seu em um leilão. Você junto à imobiliária. Você já sabe que está aprovado para esse empréstimo em particular. Mas Manhattan Bridge Capital poderia ir mais longe e transferir automaticamente esse dinheiro para o leiloeiro após a aprovação ou aceitação de sua oferta para que não haja atraso em obter os fundos para aquela casa de leilões. Então você pode tomar posse desse imóvel hoje versus esperar pelo capital da ponte para enviar-lhes um cheque ou qualquer que seja o caso para essa empresa em particular, você tem que se comunicar com seu cliente para descobrir quais são os benefícios de fazer negócios com você. Por que perspectivas que não sabem nada sobre você? Por que eles deveriam fazer negócios com você? Se não lhes deres uma razão para fazerem negócios contigo contra a concorrência ? Bem, as chances são que você não vai conseguir o negócio deles porque talvez sua concorrência esteja fazendo isso agora. E isso faz parte da sua pesquisa. Você vai conferir a competição na área deles. Você vai escolher os 4 a 5 concorrentes e sua área e descobrir o que eles estão fazendo em seus sites. E se eles estão oferecendo benefícios em sua home page, bem, então essa é outra razão para seu cliente fazer isso também, que eles possam aumentar suas chances de obter novos clientes. Eu não quero que este seja apenas outro curso de Web design. Qualquer um pode criar um site. Quero compartilhar com você dicas e idéias sobre como você pode aumentar seus resultados, mas ao mesmo tempo ajudar seus clientes a obter um retorno maior sobre seu investimento, bem como quando eles estão realizando um novo site. Então a parte fácil deste Web design é colocar esses três elementos juntos. O que temos, temos algum texto, temos uma manchete, e temos uma foto. É tão fácil projetar algo assim. É mais difícil se comunicar com seu cliente sobre por que você está fazendo a página da Web específica e por que eles devem tê-lo e o resultado final é, basta perguntar ao seu cliente. Você gostaria de ter o dedo do pé potencial ganhar mais renda por ter mais clientes? Claro, eles vão dizer sim, eles querem mais negócios. É por isso que eles estão tendo um site feito. Eles querem gerar mais renda. Bem, com base na minha experiência profissional, esta é uma maneira de ajudar a vender seus serviços para que você possa garantir que você obtenha um retorno maior sobre seu investimento e proteja mais clientes dizendo às pessoas por que eles devem fazer negócios com você. Tudo bem, então agora que passamos por isso, vamos em frente e projetar esta seção em particular. Eu escolhi uma imagem do centro de Nova York ou Manhattan, e eu escolhi um horizonte que me permitiu colocar conteúdo dentro dele que também equilibrado com o resto da imagem, com um edifício alto à direita e edifícios adicionais. Porque é onde Manhattan Bridge Capital faz o negócio deles, Manhattan ou centro de Nova York. Então eu queria pegar uma imagem do quintal deles, por assim dizer. Então, para esta imagem em particular, fui escolher sbeih dot com. Digitei no prédio de Nova York. Eu selecionei vertical para a orientação porque eu queria algo que fornecesse um edifício muito alto e não tanto uma orientação paisagística. Assim que eu digitei isso e selecionei vertical, a segunda imagem aqui pegou minha intenção. Gosto da cor da imagem. Ele fornece um monte de horizonte para o nosso imposto. Nós só precisamos cortá-la de uma maneira que o nosso edifício principal alto aqui está fora para a direita e o conteúdo está à esquerda dele. Então, se você quiser baixar esta imagem, vá em frente e crie uma conta gratuita e, em seguida, vamos baixar o tamanho 12 80 por 1920 . E você também pode chegar a este particular vinculado digitando este número. E ele irá levá-lo diretamente para a URL desta imagem em particular. Uma vez baixado, você pode arrastar e soltar isso em seu documento, então ele é um arquivo bem grande, mas ele não cobre o completo com de nossa página da Web agora, e o que eu quero é uma imagem de sangria completa, em outras palavras, afiou a borda. Então vamos redimensionar essa imagem, mas também precisamos fazer nossa tela maior, porque não temos espaço suficiente aqui na parte inferior. Então vamos em frente e fazer isso primeiro. Ao subir para a imagem e selecionar o tamanho do campus, certifique-se de que o dentro da altura está desbloqueado e vamos fazer 5000 para a altura. Depois de clicar na sua aba Chave, você verá a visualização aqui. E vai mostrar todo o espaço extra que vai ser adicionado à sua tela. Vá em frente e clique em redimensionar. A outra coisa que precisamos fazer é pegar nossa camada de fundo e branco para o resto da tela também. Então eu vou apertar a letra D e X para ficar branco no primeiro plano e então com a ferramenta cheia de balde com a letra G, eu posso ir em frente e preencher isso. O único problema é que nosso limite de camada está confinado à altura anterior do nosso campus, então vamos subir para camada e selecionar camada para tamanho de imagem, e isso aumenta o limite para essa camada específica, e então podemos preenchê-lo em. Tudo bem, então nossa imagem está dentro há três colunas pelo menos para mim. Eu não quero isso lá, então eu vou puxar isso para fora e vamos puxá-lo para baixo também. Certo, vamos redimensionar nossa imagem com nossa ferramenta de habilidade. E a tela é atualmente 1400 pixels branco. Então é isso que vamos fazer para a imagem também. E se estiver bloqueado, fará automaticamente a altura, que é 2100. Vá em frente e escale, em seguida, precisamos ativar nosso guia para que possamos mover isso para a posição e alinhá-lo com diretriz que criamos anteriormente em uma lição anterior. Tudo bem, então isso é o topo agora. O único problema é que não tenho espaço para o meu conteúdo aqui à esquerda. Então eu quero realmente fazer isso maior para que o prédio se mova para a direita e nos dê mais céu aberto. Então vamos pegar nossa ferramenta de escala novamente. Desta vez, vou usar o canto superior direito aqui para clicar e arrastar para torná-lo maior. Então aí mesmo, vá em frente e escale, e a lição que precisamos fazer é criar um fundo para nossas três colunas para que a imagem não esteja sangrando nessa seção. Então vamos para nossas três colunas aqui. Vamos criar uma nova camada chamada plano de fundo Clique, OK, e eu preciso puxá-lo para fora dessa camada de grupo e colocá-lo abaixo dela. E depois vou encher com a minha ferramenta de balde. E finalmente, eu vou ir em frente e pegar meu retângulo selecionável para que eu possa selecionar esta parte da página da web e rolar todo o caminho para baixo para que possamos remover o fundo desta área e seguida, ir em frente e apenas clique em seu delete ou a tecla backspace para remover essa parte do plano de fundo. Podemos selecionar e desligar os nossos guias? E agora temos nossa imagem no lugar. Tudo bem, vamos em frente e criar nossa caixa de texto e emitir. Precisamos de nossos guias contra Nós sabemos exatamente onde alinhá-lo no lado esquerdo porque queríamos alinhar com todo o outro conteúdo, aparecem na seção herói também. Então nós vamos colocá-lo direito neste segundo guia, clique e arraste para fora tão direita sobre lá. E este é o tamanho do meu texto atual, Caixa 600 por 978 Não tem que ser exatamente do mesmo tamanho Justus, desde que esteja neste espaço vazio da nossa imagem aqui, tudo ficará bem. Pode ser um pouco alto demais. Preciso de mais espaço para a minha manchete. Então eu vou derrubar isso só um pouquinho. Caranguejo de Kayla, nossa camada de imagem e criar uma nova camada chamada caixa de texto. Clique. Ok, e então vamos preenchê-lo com White. Acho que quero diminuir o tom da caixa de texto só um pouco do dedo do pé. Permita que parte dessa imagem passe por trás dela. Então vamos deixar a opacidade abaixo um pouco disso. Vou fazer por volta dos 80, então aí é muito bom. Não quero fazer muito. Caso contrário, será mais difícil ler o texto. Vamos em frente e pegar nossa ferramenta de texto e digitar o título e vamos fazer Oswald negrito. Vamos fazer 75 para o tamanho então deve ser bom e vamos desligar todas as nossas outras camadas para que possamos usar nossa ferramenta de alinhamento para alinhar o título diretamente no centro da caixa de texto. E antes de fazer isso, precisamos ir para a camada e selecionar o conteúdo cortado e, em seguida, manter pressionada a tecla Shift para selecionar o título. E então podemos alinhar o Centro de Alvo. Muito bem, seguir, vamos adicionar os nossos benefícios à nossa caixa de texto. Vamos adicionar 56 ou talvez sete parágrafos, e o que vamos fazer é usar o que é conhecido como texto fictício. Portanto, o texto fictício é um texto que é usado por Web designers para preencher um espaço que requer ou deve ter conteúdo. E é usado para preencher esse espaço porque o conteúdo final não está sendo fornecido pelo cliente. Talvez sejam uma empresa nova. Eles ainda não têm o conteúdo, então em vez de tentar inventar algo que deveria ir lá para eles, vamos usar texto fictício em vez disso. Então não é legível, e não é para ser lido. Só é usado como enchimento. Outro nome para o texto falso é Laura um, Ipsum. É o padrão da indústria para simulações de design e protótipos como Web designs e, como eu mencionei, permite que você mostre aos clientes objetivo ou versão completa do seu projeto sem realmente ter que investir tempo e redação cópia Riel. Mas apesar de todos os benefícios do ipsum quente, é apenas texto latino aleatório, e pode ficar meio chato ao longo do tempo porque não é realmente legível. E de certa forma, tudo bem, porque você realmente não quer que os clientes se concentrem no conteúdo. Você quer que eles se concentrem no design. Mas se você tem um cliente que tem um bom senso de humor, você conduz a uma pesquisa do Google para geradores de texto fictícios, e você vai encontrar um monte de sites diferentes que oferecem diferentes tipos de conteúdo versus apenas conteúdo latino aleatório. E aqui está uma lista de algumas das opções disponíveis. Você vai ter uma mensagem falsa em bacon. Se o seu cliente gosta de gatos, você pode fazer não pode ipsum cupcakes e muitos mais. Há um para Bob Ross. Se você não está familiarizado com ele, ele é dos anos 80. Há um para Harry Lips, e muitos mais. Há um para Harry Lips, , Então, basta fazer uma pesquisa no Google por quatro geradores de texto fictícios, e você pode obter alguns desses tipos de Laura Um em alguns geradores para usar como enchimento para o seu conteúdo. Então, vou fazer uma busca no Google pela Laura. Hum, hip alguns. E este 1º 1 aqui é um texto latino simples e chato. Então vamos em frente e pegar quatro ou cinco parágrafos deste texto fictício. Vamos copiá-lo, e então vamos pegar nossa ferramenta de texto e colado. Agora, a outra coisa que podemos fazer muito rápido é fazer ajustes nas nossas opções de ferramentas aqui . Então temos o tamanho correto do texto versus ter que refazê-lo aqui. Então eu vou mudar meu tamanho aqui para 16. Vou mudar a fonte para Georgia, e vou mudar a cor para aquela cor cinza escuro que usamos anteriormente. Que é todos esses três números aqui não podem agora, uma vez que eu colar, ele vai acabar adicionando os estilos de fonte que digitamos aqui. Agora a outra coisa que precisamos fazer é pegar um desses cantos e continuar redimensionando o texto até que ele se encaixe dentro da caixa de texto. Vamos pressionar comando ou controle final zero para ampliar todo o caminho, e isso tornará mais fácil e rápido para redimensionar esta caixa de texto. Então eu vou colocá-lo bem dentro daqui e vamos em frente e zoom de volta. Agora vamos em frente e uma mentira que o texto diretamente no centro da nossa caixa de texto, vamos pegar essa caixa de texto primeiro com nossa ferramenta de alinhamento, mantenha pressionada a tecla do navio e clique no texto e, em seguida, um centro deitado e meio do alvo . A outra coisa que quero fazer é voltar ao nosso texto aqui e redimensionar os títulos de cada parágrafo. Então eu vou fazer 20 para o tamanho e eu também vou fazer um negrito Eu também vou adicionar um espaço entre o parágrafo eo título também. Então vamos fazer isso para cada título apenas torna um pouco mais fácil de ler. E eu não estou muito preocupado com o texto não preencher toda a área. Temos texto extra aqui que está além da parte inferior da nossa caixa de texto, mas tudo bem. Se este fosse o texto real do cliente, então eu gastaria um pouco mais de tempo recebendo a caixa de texto o tamanho adequado nas fontes, o tamanho adequado do dedo do pé tem tudo caber. Mas, por enquanto, isso vai funcionar muito bem. Ok, vamos em frente e voltar a ligar as outras camadas. Há uma última coisa que eu acho que devemos fazer, e eu acho que devemos diminuir a cor desta imagem em particular, então é melhor combinar com o resto do site. É um pouco quente demais, então eu quero suavizar adicionando uma sobreposição de cor a ele. Então vamos em frente e pegar essa camada de imagem. Vamos renomeá-lo Trade Center, que é o nome do prédio em si, este grande aqui. E então vamos criar uma nova camada chamada sobreposição de cores. Vamos escolher uma bela cor azul. Qualquer cor azul serve, e então vamos preenchê-lo com essa cor e, em seguida, baixar a opacidade para cerca de 15 a 20 . E eu acho que isso definitivamente ajuda a esfriar a imagem um pouco. Então não é tão quente, e é melhor combinar com o resto do site. Então, novamente, projetar esta parte do site Super simples. É apenas uma questão de se comunicar com nossos clientes por que eles precisam desta seção específica em seu site e como ela não só irá beneficiá-los a longo prazo, mas também vai tornar mais fácil para clientes potenciais decidirem se eles devem fazer negócios com eles contra outra pessoa. E se esses benefícios que eles têm para oferecer não estão sendo oferecidos pela concorrência, então as chances são boas. Eles vão garantir o negócio deles agora. Na próxima lição, vamos em frente e criar outra seção para esta página da Web específica que ajudará os visitantes a determinar se querem fazer negócios com esta empresa ou não. E de certa forma, vai ajudar Manhattan Bridge Capital também. Porque o que vamos fazer é adicionar uma seção F A Q, e vamos pegar suas perguntas mais frequentes e respondê-las para esses clientes potenciais agora para que essas perguntas sejam respondidas antes de entrar em contato com a Manhattan Capital, que em por sua vez, poupa-lhes tempo de não terem que responder a essas perguntas pelo telefone ou pessoalmente. Então, se você está pronto para começar com isso, vamos fazê-lo 37. Corpo 2: Olá e bem-vindo de volta. Tudo bem, então nesta lição, vamos criar nossa seção de perguntas freqüentes, e isso fornecerá alguns benefícios para os visitantes do site e benefícios para o seu cliente também. Para os visitantes, ele vai dar-lhes acesso fácil às respostas às perguntas que eles vão ter antes de tomar esse passo de compra desta empresa em particular. E então eles podem decidir se querem passar para a próxima parte do processo de decisão de compra com base nas respostas que eles recebem daqui. diz respeito ao seu cliente, isso os ajuda porque um que eles não têm que responder a essas perguntas pessoalmente ou no telefone ou em um e-mail, e para uma espécie de, de certa forma pré-qualifica um cliente potencial. Porque se um cliente potencial recebe essas respostas para essas perguntas específicas e decide continuar enquanto eles estão altamente interessados no que você tem a oferecer, o que seu cliente tem a oferecer porque eles não decidiram, você sabe o que, Não gosto destas respostas. Vou ver alguns resultados. Eles gostam da resposta, então eles querem continuar com o processo de decisão de compra, a fim de fazer negócios com seu cliente. Então, para este design, é muito simples. Temos uma mensagem. Temos uma manchete. Nós temos um botão, temos uma caixa de texto que contém a pergunta, e então nós também vamos criar um estado que mostra o que acontece quando você clica neste pequeno ícone aqui. Ele realmente vai expandir para revelar a resposta por baixo dele, e nós vamos projetá-lo e configurá-lo de uma forma. Então o desenvolvedor sabe que este é um estado de foco e o que vai acontecer quando o botão é clicado antes de começarmos na seção FAA, vamos avançar e fazer alguns ajustes em nossa grade. Lier e organizados são camadas da seção anterior, então precisamos estender nossa grade para o final da página, e vamos fazer isso com nossa ferramenta de escala. Vou digitar 5000 para a altura, e também precisamos organizar essas camadas. Então vamos colocá-los em um novo grupo chamado Por que Manhattan? Tudo bem, vamos em frente e começar a seção FAA com nossa ferramenta de texto. Vamos criar nossa manchete, e vamos usar Oswald Bowled 72 para a cor, eu vou escolher nossa cor verde que temos usado ao longo deste projeto e então em todas as maiúsculas de um Q e minúsculo s Tudo bem, vamos alinhar isto ao lado esquerdo aqui para alinhá-lo com todo o outro conteúdo na seção de heróis . Tudo bem, vamos em frente e criar nossa primeira caixa de perguntas, e nós vamos fazer com que seis colunas de largura, é por isso que nós ampliamos a grade para tornar isso um pouco mais fácil para nós. Então vamos em frente e pegar nossa ferramenta de seleção de retângulo e desligar fixo e, em seguida, apenas criá-lo seis colunas de largura, e eu também quero mudar a altura para que ele é 67 pixels e precisamos criar uma nova camada. Vamos chamá-lo de caixa de texto de pergunta e vamos em frente e preencher isso com Branco, e eu também quero adicionar um traçado para a seleção também. Então vamos subir para editar e selecionar seleção de traçados. Eu vou fazer uma linha com um, e eu também preciso ter certeza de que eu tenho preto definido para o primeiro plano e agora temos o nosso derrame. Vamos em frente, amplie e certifique-se de que isso está devidamente alinhado com tudo o resto . Parece que está um pouco desligado, então eu vou pegar minha ferramenta de movimento e clicar nela e então usar minha tecla de seta para a direita para movê-la . E vamos ver se o lado direito está dentro dessa coluna. Não é. Queremos alinhamento perfeito de pixel, e vamos redimensionar isso com nossa ferramenta de escala. Mas primeiro precisamos ir para a camada e selecionar cortar o conteúdo, e então podemos pegar nossa ferramenta de escala no lado para puxá-lo para dentro. Tudo bem, vamos em frente e criar nosso botão para esta caixa de texto em particular. Então, de volta para a ferramenta de seleção de retângulo. Desta vez eu vou voltar e selecionar proporção fixa e vamos em frente e digitar. Vamos fazer 42 pelo tamanho. Eu também quero adicionar cantos arredondados e nós vamos subir para selecionar retângulo arredondado, e eu vou fazer 20 para o raio para meus cantos arredondados, e então eu vou pegar uma cor azul claro para preenchê-lo com. E antes de fazermos isso bem rápido, precisamos criar uma nova camada. Vamos chamá-lo de botão de pergunta a seleção e vamos em frente e pegar nossa ferramenta de letreiro novamente para que possamos alinhá-lo diretamente no centro desta coluna. Vamos desligar fixo para que possamos corrigir isso diretamente no local. Nós precisamos dele. Muito bem, vamos desligar estas camadas. Aqui podemos selecioná-lo com nossa ferramenta de alinhamento. E antes de fazer isso novamente, precisamos ir para a camada e selecionar cortar para o conteúdo. E então precisamos ter certeza de que temos seleção selecionada e, em seguida, um centro de linha e meio do alvo. Tudo bem, vamos voltar para a nossa ferramenta de texto para que possamos adicionar um pequeno símbolo dentro. Eu só vou digitar um sinal de mais, e eu também vou mudar o dedo branco. Então, novamente, estou usando Oswald bowled 72 e agora só precisamos movê-lo para a posição. Então, desta vez vou usar minhas setas para colocá-lo bem no centro. Tudo bem, vamos em frente e criar um novo grupo anterior para essas duas camadas. Chame de botão de pergunta. E agora vamos escrever a nossa pergunta. Vou mudar a fonte para Georgia. Vamos fazer 18 para o tamanho e, em seguida, são de cor cinza escuro. E depois escreva uma pergunta que vou fazer. Qual é a sua taxa de juros de 90 dias? Realmente quer fazer isso maior? Vou fazer 24 pontos. Ok, vamos colocar isso em posição bem ali deve ser bom. Vamos dar uma olhada na nossa orientação. Então é bem ao longo dessa borda da coluna. Isso é perfeito. Só preciso ter certeza de que está perfeitamente centrado, cima para baixo também. Então vamos em frente e fazer nossa seleção para que possamos fazer isso. E se necessário, puxou essa camada para fora, você pode selecioná-la e, em seguida, um meio deitado do alvo. Ok, então isso está alinhado. Vá em frente e coloque isso de volta. Ok. O próximo passo é criar nossas caixas de texto de perguntas adicionais, mas primeiro precisamos colocá-las em um novo grupo de camadas. E vamos chamar de pergunta uma lata. Vamos colocar todas essas camadas e assinar, exceto o F a Q. Não queremos isso lá, porque é separado. Então nós vamos realmente colocar esse no topo e eu vou ir em frente e desligá-lo apenas por enquanto. E vamos em frente e pegar nossa pergunta uma camada agrupada e duplicada três vezes. Ok, o que? Mudaram-se para quê? Vamos apenas selecionar cada camada e para baixo. Acho que quero aproximá-los um pouco mais, e então vamos usar nossa ferramenta de alinhamento para distribuir a quantidade de espaço entre eles uniformemente. Mas eu acho que temos um pequeno problema porque eu posso dizer pelo limite da camada agora ele está fora da nossa caixa de texto. Deve ser ao longo do topo e do fundo aqui. E acho que é por causa do nosso pequeno sinal de mais que criamos. Podemos ver que é muito mais alto que o resto da caixa, então vamos entrar e pegar cada uma dessas camadas e cortar o conteúdo da camada até o tamanho real desse elemento em particular. Então vamos entrar em cada uma dessas perguntas e ir em frente e fazer isso. Tudo bem, agora, que fizemos isso, podemos ver que o limite da camada está agora colocado exatamente onde queremos. Vamos em frente e fazer nossas seleções com nossa ferramenta de alinhamento. Mantenha pressionada a tecla shift e solte e repressione a tecla shift novamente para cada item. E então vamos para relativo ao primeiro item, e então vamos selecionar esta opção aqui para distribuir centros verticais. O único problema é que eles estão todos sobrepostos e estão no mesmo local agora. Então vamos desfazer isso com o Commander Control e as letras A E o que precisamos fazer é dizer ao Gimp quantos pixels queremos compensar o espaço vertical. Então vamos tentar 100 e, em seguida, selecione esta opção aqui novamente. E agora é perfeitamente adicionado uma quantidade uniforme de espaço entre cada pergunta. Se mudarmos este número para outra coisa que vai aumentar a quantidade de espaço, então vamos ficar com 100 por enquanto porque eu acho que vai funcionar muito bem. A outra coisa que eu quero fazer é ter certeza de que cada uma dessas camadas de grupo está no local apropriado e então eu vou renomear cada uma dessas camadas. Pergunta dois a quatro. Agora, vamos pegar essas quatro camadas e colocá-las em um novo grupo anterior. Não vou mudar o nome agora porque tudo o que vamos fazer é pegar este grupo e duplicá-lo. Adicione mais quatro perguntas do outro lado. O caso vai pegar este grupo de camadas, duplicá-lo e então podemos movê-lo para a direita. Também ligaram minha grade para que eu possa ver para onde está indo. Então, lá vamos nós. Vou colocar este grupo de camadas de topo e, na verdade, vamos mudar o nome deste também. Perguntas. Então nós temos o nosso de um a quatro, e então nós vamos pegar esses grupos de camadas aqui e colocá-los dentro daqui e então renomeá-los de cinco a oito. E não precisamos mais deste. Algo vá em frente e apague esse também. Podemos apenas organizar nossas camadas um pouco aqui? Vou em frente e ligar algumas das minhas outras camadas aqui também. Vamos acendê-los todos para pregar. Provavelmente é uma boa hora para salvá-lo. Então, eu vou continuar e economizar com o Commander Control e a letra S. Agora, só precisamos trazer tudo à tona porque temos muito espaço aqui em cima. Então eu vou fazer uma medida do espaço bem aqui, Toe Adicione isso na parte inferior da página de Manhattan também. Então vamos pegar nossa ferramenta de medição. E vamos fazer uma medição daqui até aqui, e parece 75 pixels. Então eu vou adicionar a mesma quantidade de espaço aqui. 75 pixels. Eu estava em um guia lá, e então vamos em frente e mover tudo para cima. Tudo bem, vamos em frente e fazer outra medição. Quero descobrir quanto espaço tem aqui. Então vamos medir isso. Então eu tenho 32 pixels. O seu pode ser diferente. Isso é bom. Apenas meça, descubra. E, em seguida, da parte inferior do Q. Meça quanto espaço você precisa. Eu tinha 32 e depois vamos colocar as nossas perguntas ao longo deste guia. Certo, então são falsas. Sua seção está feita. Não precisamos criar um estado de foco para que nossos clientes e nosso desenvolvedor da Web saibam qual é o código. Quando uma pessoa clica neste pequeno botão, o que vai acontecer é que ele vai abrir uma caixa de texto com a resposta para a pergunta. E como este tutorial em particular está ficando muito longo, vamos em frente e dividi-lo em parte dois na próxima turnê. Você está bem? Então, se você está pronto para fazer isso, vamos em frente e continuar na próxima lição. 38. Parte 3: Olá e bem-vindo de volta. Certo, então vamos em frente e terminar nossa seção F A Q com nosso estado que mostrará a resposta para nossas perguntas. Então a primeira coisa que precisamos fazer é criar um novo grupo Lear para a parte atual da seção R. F.A F.A. Vamos chamá-lo de F.A.Q . Vamos colocar esses dois dentro, e vamos em frente, navegar para nossa primeira pergunta e duplicá-la. Vamos mudar o nome de “Resposta “, e vamos tirá-lo de lá. Mão acima da camada agrupada F A Q. Certo, então vamos fazer algumas modificações nesta camada ou camadas em particular. Queremos selecionar o símbolo de adição que criamos anteriormente. Vamos em frente e zoom aqui para que possamos ver pegar sua ferramenta de texto e clicar nela. Então recebemos uma pequena mensagem do gimp perguntando se queremos editar nosso texto. Fazemos isso clique nele e lembre-se que a razão pela qual obtivemos isso foi porque redimensionamos o limite da camada e cortamos para baixo para o símbolo em si. Então vamos em frente e selecionar tudo com controle Commander e um Vamos mudá-lo para um sinal de menos e vamos mudá-lo para Branco e então vamos apenas ir em frente e pegar nossa ferramenta de movimento e colocá-lo em posição. Então eu vou apenas usar minhas teclas de seta para colocá-lo visualmente diretamente no meio. Ali deve ser bom. E agora só precisamos adicionar o nosso pequeno ícone de mão flutuante nesta área aqui. Então vamos para o Google e fazer uma pesquisa de ícone de mão de estado do pairar. E então queremos um pouco PNG e Pointer. E acho que o que encontrei é este aqui. É um arquivo PNG, então vou copiar isso e colá-lo. Então temos uma seleção flutuante, então precisamos toe e ele para uma nova camada clicando com o botão direito e selecionando duas novas camadas. Vamos renomear este ícone de focalização. Também é muito grande, então vamos reduzi-lo com nossa ferramenta de escala e para as alturas. Vá em frente e ligue isso para a altura. Eu vou fazer 40. Vou selecionar a camada para cortar o conteúdo. Vamos clicar na escala. Tudo bem, então agora que ele desapareceu vamos em frente e zoom todo o caminho para fora com o Controle Comandante e zero lá está ele. Assim, desde que você tenha movido ativamente ou selecionado e passe o ícone Lear selecionado, você pode encontrá-lo. Coloque-o em posição aqui e estamos quase terminando. Vamos em frente e criar nossa caixa de texto de resposta. Vamos criar uma caixa, preenchê-la com algum texto e tudo pronto. Então vamos em frente e ir para fora da nossa camada agrupada resposta apenas por um momento, e nós vamos criar um novo mais cedo e vamos chamá-lo de caixa de texto de resposta e, em seguida, apenas desenhar um retângulo que irá cobrir todas as outras três perguntas abaixo dele. E então com Branco irá preenchê-lo, e nós também queremos adicionar um traço em torno dele também. Então vamos subir para editar e selecionar seleção de traçados. Vou mudar o primeiro plano de volta para Preto e adicionar o meu derrame. A Kate. Vamos de select e eu preciso selecionar a minha ferramenta de movimento e clicar nela e, em seguida, usar minhas teclas de seta apenas para movê-lo um pouco. Bem ali parece bom. E agora estou um pouco longe demais do lado direito. Então vamos em frente e recorte para conteúdo do limite da camada. E então, com nossa ferramenta de habilidade, vamos apenas derrubá-la apenas um pouco entre ir em frente e digitar 305 e tentar isso para tentar três ou 43 ou quatro trabalhos. Escale isso. Perfeito. Ok, vamos em frente e zoom aqui e vamos em frente e colocar isso dentro agora. Tudo bem. Quatro. A nossa resposta. Vamos começar com uma letra grande, um maiúsculo inteiro, e vamos mudar isso para verde. Coloque um pouco de tempo no final, e eu vou colocar isso em posição. Tudo bem? Vamos em frente e encontrar algum texto falso. Eu quero adicionar um pouco de bacon. É, hum, então eu vou fazer dois parágrafos. Vai ser tudo carne e vamos clicar em, me dê um pouco de começar. Tudo bem, então isso provavelmente é muito conteúdo. Então, vou descrever o primeiro parágrafo. Entendido, e então eu vou em frente e adicionar isso. Então, em vez de apenas clicar e andar, vamos criar uma caixa de texto onde queremos que esse texto seja, então eu vou clicar e arrastar uma caixa de texto aqui e agora eu posso acelerar isso e não precisamos nos preocupar em redimensionar a caixa de texto. Tão pequenas coisas. Vou apresentar-lhe novas dicas e técnicas para trabalhar com o Gimp. Vamos mudar os sinais para 16. Vamos um pouco maior. 17. Quero preenchê-lo para tentar 18. Perfeito. Então 18 funciona, mas é a fonte errada. Vamos para a Georgia e eu só vou descer aqui e colar um pouco ou conteúdo que preencha tudo. E ela quero fazer esta caixa um pouco menor. Está chovendo este ipsum começado, e agora só precisamos alinhá-lo. Então está diretamente no centro da parte superior e inferior da caixa de texto de resposta. Diga isso 10 vezes bem rápido. Tudo bem, vamos em frente e desenhar uma seleção. Então deve ser bom. Vamos pegar nossa ferramenta de alinhamento e mudá-la para seleção. Agora, eu não tenho certeza se eu vou ser capaz de selecionar isso, então eu vou tentar. Não parece que seja. Então vamos fazer isso todo o caminho para fora. Tente de novo. Não, temos que desligar todas as nossas camadas no processo de fazer nossa seleção de alinhamento. E agora podemos ir em frente e uma linha no meio do alvo. Nós de selecionar e vamos voltar a ligar tudo o resto. E então vamos em frente e colocá-los de volta lá dentro. Agora eu tenho um pouco de casta de cor azul em vez de branco puro. E isso é por causa da camada de cor que criamos dentro da seção de Manhattan. E o que precisamos fazer é adicionar uma máscara de camada para que possamos remover esse elenco de cor do resto do documento aqui. Ou podemos cagar o limite da camada para essa seção. Então vamos em frente e fazer isso. Em vez disso. Vamos em frente e criar uma seleção em torno dele e, em seguida, ir para a camada e selecionar corte para seleção de seleção, e agora nosso limite da camada de corte é definido para esse tamanho, e removeu essa sobreposição de cor do resto do documento. Agora eu só quero limpar isso um pouco porque eu tenho um pouco de texto mostrando aqui. Então vamos voltar para dentro dessa camada de texto e excluir todo esse conteúdo. Ok? Nossa seção agora está pronta. Temos o nosso estado de pairar. Temos todas as nossas perguntas. E quando eu apresentar isto aos meus clientes, vou deixar este estado visível para que eles saibam como é quando alguém clica ar paira sobre esta área em particular. E então, quando enviarmos para o desenvolvedor da web, eles se depararão com essas camadas agrupadas e perceberão que este é um estado de foco e codificará cada uma das perguntas de acordo, com base nas informações que lhes demos em o nosso design. Certo, então no próximo tutorial, vamos começar a trabalhar na seção de conexão. 39. Corpo 4: Olá e bem-vindo de volta. Tudo bem, então nesta lição, vamos abordar o projeto da seção Contact US. Agora. Eles tinham uma página de contato nos EUA que você poderia ir para preencher um formulário, e então eles ligaram de volta ou e-mail para você de volta e, em seguida, em sua página inicial. Eles tinham o endereço do escritório, bem como o número de telefone, mas é meio que recheado aqui à esquerda. É meio difícil de ler, e no geral, acho que é muito difícil para potenciais clientes entrarem em contato com essa empresa. Então, queremos torná-lo o mais fácil possível e dar-lhes opções Zeman E. Então eu coloquei tudo em um lugar versus dividi-lo tudo, então nós temos uma maneira de enviá-los por e-mail. Temos o endereço deles. Temos o número de telefone deles e a melhor hora para ligar porque seus escritórios abrem entre essas horas. Também incluí um mapa do Google do escritório deles para que eles possam obter direções diretamente a partir desta seção do site. Então todas essas coisas, incluindo este pequeno primeiro aqui, se eles querem apenas enviar um e-mail e enviar uma ou duas perguntas. Ou talvez eles só queiram contatá-los. aqui, por favor. Ligue-me a esta hora. Seja qual for o caso, eu só quero torná-lo tão fácil para clientes potenciais ou existentes para contatá-los em vez de dividi-lo em páginas separadas como eles fizeram aqui, onde eles têm uma página de contato conosco. E então aqui, você meio que tem o dedo para procurar as informações de contato. Não é um bom lugar para colocá-lo, porque você não está realmente esperando informações de contato aqui à esquerda. Você quer saber mais sobre a empresa primeiro e depois tudo bem, sim. Gosto desta companhia. Quero contatá-los. Bem, sim, está tudo bem aqui. Mas novamente, é apenas um design muito, muito ruim e um layout ruim. E eu acho que isso é muito mais convidativo para clientes potenciais ou clientes obterem as informações de que precisam, porque talvez eles queiram visitar o escritório diretamente em vez de ligar ou enviar e-mails. Talvez eles estejam na área, e eles podem obter rapidamente direções do site aqui. Então vamos em frente e colocar este design juntos. É composto principalmente de formas, por isso vai ser muito fácil de desenhar e montar. Só precisamos encontrar alguns ícones e, em seguida, uma imagem do Google Maps. Então vamos em frente e fazer isso primeiro. Vá em frente e vá para o Google. Digite ícones de negócios gratuitos e vá em frente e baixe alguns ícones para e-mail. Encontre-nos e ligue para nós então use o que todos você quer. Eu recomendo usar arquivos PNG porque nós vamos adicionar uma sobreposição de cores versus usando ícones que ar pré coloridos ou preto e branco ícones. Então você pode ir para o Google Maps e digitar 60 cortador moinho estrada número 205 e aqui está o CEP bem aqui. Então vá em frente e digite isso. Você deveria ter algo assim. E então o que eu fiz foi condensá-lo um pouco para que eu pudesse ter algo em um formato mais horizontal. E então eu só usei um plugue de captura de tela aqui para capturar, e então eu copiei e adicionei ao meu documento. Então vá em frente, baixe essas imagens e vamos em frente e começar. Ok, agora que temos nossos ícones e nosso mapa do Google, vamos em frente e terminar nossa seção de contato. A primeira coisa que eu quero fazer é pegar esses ícones e uma sobreposição de cores para mudar a cor de preto para uma cor específica. O problema é que, e gimp, não temos uma ferramenta de sobreposição de cores. Mas tudo bem, porque vou mostrar-lhe como adicionar uma sobreposição de cores aos seus ícones. Então a primeira coisa que eu vou fazer é pegar meu ícone de mapa ou meu ícone de endereço e eu também coloquei estes em ordem com base em onde eles vão ser posicionados, e eu os renomeei de acordo também. Então, se você não fez isso, vá em frente e faça isso em seguida. Vamos em frente e criar uma nova camada. Vou chamar-lhe sobreposição de cores. E então eu vou usar meu seletor de cores aqui para selecionar o azul deste botão, e então nós vamos preenchê-lo com nossa ferramenta de preenchimento de balde. Tudo bem, próximo passo é ir para o nosso modo de mistura e selecionar um dos modos e vamos escolher adição e bam. Olhe para isso. Agora temos uma sobreposição de cores em cada ícone. Quão legal é isso? O único problema é que ele está adicionando essa sobreposição de cor a todas as camadas abaixo dela. Então, nosso Google Maps também tem essa sobreposição de cores. Então, há uma solução fácil para isso. E falamos sobre como fazer isso anteriormente sobre como limitar uma cor específica a camadas específicas. Então você provavelmente já se lembra de como fazer isso. O que é, isso está correto. Vamos subir e criar um novo grupo de camadas. Vamos chamá-lo de sobreposição de cores. E então, uma vez que colocamos todas as camadas dentro dela, essa sobreposição de cores será aplicada apenas às camadas dentro desse jogador do grupo. Quão legal é isso? Tudo bem, eu adoro isso. Certo, então a próxima coisa que quero fazer é pegar essas camadas e movê-las um pouco para baixo . Eu quero adicionar nosso título para esta seção, então nós vamos entrar em F.A.Q F.A.Q . Vamos selecionar a camada de texto F A Q, e vamos duplicá-la. Vamos ir em frente e tirar isso do jogador do grupo e colocá-lo acima das sobreposições de cores. Vamos fechar F a Q e mudar o nome deste contacto. E agora só precisamos pegar nossa camada com nossa ferramenta de movimentação e movê-la para baixo. Ok. Agora, com o têxtil deles vai em frente e renomear este contato. Vamos fazer todas as maiúsculas, e acho que precisamos trabalhar um pouco no nosso espaçamento. Quero ter certeza de que temos uma quantidade igual de espaçamento aqui e aqui para consistência. Mas eu também quero ir até a nossa manchete de Manhattan parece encontrar a medida aqui porque eu acho que nós temos menos espaço aqui em comparação com esta área aqui em baixo. E nós fizemos uma medição anteriormente, mas eu quero apertar um pouco as coisas, e eu quero usar a mesma quantidade de espaço que temos aqui. Então vamos pegar nossa ferramenta de medição e medir do topo desta seção até o topo desta letra e eu tenho 57 pixels de espaço. O seu pode ser diferente. Isso é bom. Meça isso porque vamos em frente e medi-lo aqui e adicionar uma nova diretriz. Eu vou voltar para a minha ferramenta de movimento, e eu preciso selecionar escolher uma camada ou guia para que eu possa me livrar desse cara que tínhamos anteriormente. Então, eu só vou mover isso para cima. Eu posso me livrar desse também, porque vamos mudar tudo para essa diretriz agora. Então, de volta ao movimento, ferramenta e selecione. Mova a camada ativa e certifique-se de que você tem o jogador do grupo F A Q selecionado. Então, uma vez que você agarra isso, você pode ir em frente e mover isso para cima em posição. E se necessário, você pode usar suas teclas de seta também para obter tudo alinhado onde deveria estar. Muito bem, vamos voltar para a nossa ferramenta de medição e fazer outra medição a partir da parte inferior desta secção com a mesma quantidade de pixels de antes para colocar o nosso ataque de secção de contacto ao longo dessa linha. Então vamos em frente e pegar outra diretriz. Coloque-o bem ali, e então podemos mover nossa camada de contato para a posição. Ok, vamos trabalhar em nossas formas agora e vamos trabalhar no espaçamento. Assim que tivermos tudo preparado, vou ligar a minha grelha só por um momento. Então, porque estávamos usando um sistema de grade de 12 colunas. Podemos dividir cada uma dessas seções em quatro colunas e com. Então vamos usar nossa ferramenta de medição para descobrir o com dessas quatro colunas em seus 375 pixels. Agora, com o nosso retângulo selecionável, vamos ter certeza de que temos corrigido ativado com proporção, e vamos desenhar uma forma e, em seguida, digitar 3 75 Precisamos criar uma nova camada antes de preenchê-la com cor. Então vamos fazer isso. Vamos ligar para este endereço. Vamos escolher uma cor cinza clara. Qualquer cor é boa. Basta ir em frente e escolher um e, em seguida, preenchê-lo com sua ferramenta de preenchimento de balde. Vamos também adicionar um traçado indo para cima para editar seleção de traçado, e precisamos ter certeza de que temos preto para os quatro gramas e, em seguida, adicionar esse traçado. Certo, vou pegar minha ferramenta de movimento. Preciso de selecionar primeiro com o Commander Control e D e mover isso para cima. A outra coisa que eu preciso fazer é cortar o limite da camada, então vamos em frente e fazer isso. Vá até camada de conteúdo corrompido, e então vamos mover isso para a posição. Já que estamos aqui, vamos em frente e medir nosso espaçamento, e eu quero uma quantidade igual de espaço que temos daqui para aqui. Então, com nossa ferramenta de medição, vamos em frente e medir a partir da parte inferior do Q Teoh aqui, e eu tenho 34 pixels, alguns para ir em frente e medir isso. Vá em frente e amplie para que eu possa obter uma melhor medição. Vamos adicionar o guia dela, e então podemos ir em frente e mover esta caixa para a posição. Vamos em frente e mover essa camada em particular. Abaixo estão ícones também. Ok, vamos em frente e pegar nosso formato de endereço e duplicado duas vezes e então apenas vá em frente e movê-lo para a posição. Eu também quero reorganizar as camadas para que elas estejam em ordem. E então vamos renomear mais cedo é eu vou fazer e-mail e telefone. Tudo bem, vamos pegar nossa ferramenta de alinhamento com a letra A e vamos em frente e desligar todas as nossas camadas para que seja mais fácil para nós selecionar essas camadas e, em seguida, com sua tecla shift, irá selecionar o outro dois e vamos mudá-lo de relativo para o primeiro item e uma mentira para o topo. Certo, vamos voltar a ligar tudo. Além da nossa rede. Ok, agora só precisamos preencher nossas formas com as informações de contato para cada seção. E eu acho que eu só quero mover esses ícones por aí porque eu quero colocar a parte do endereço aqui. Então está logo acima do Google Maps porque vamos tornar este mapa do Google menor em apenas um minuto. Então vamos em frente e mover esses ícones ao redor. Nós vamos para a sobreposição de cores e depois movê-lo para cima e eu vou pegar meu ícone de e-mail. Ele mudou-se para cá e depois telefonou para o meio. Vamos também mover o endereço para baixo apenas para mantê-los um pedido. E agora podemos pegar nossa ferramenta de texto para adicionar essa informação. Então o 1º 1 vai ser e-mail. Eu vou mudar a fonte para ferrovia e, em seguida, para o tamanho vai fazer 36. E eu também quero mudar a cor para uma cor cinza escuro. Então eu vou fazer 333333 Agora o problema é porque nós temos nossa camada de texto dentro desta camada de grupo. Isso não vai nos permitir mudar de cores porque a sobreposição de cores está sendo aplicada a ela. Então é assim que vamos consertar. Vamos pegar essa camada, e vamos movê-la acima da cor ou do Relais. E agora, como está acima, ele vai adicionar a cor que selecionamos com a ferramenta de texto. Ok, vamos duplicar isso e vamos chamá-lo de telefone e vamos duplicar esse, e vamos chamá-lo de endereço e, em seguida, colocá-los na posição apropriada. Vamos pegar nossa ferramenta de texto e renomear cada uma delas. Ok, vamos em frente e adicionar algumas informações adicionais. Agora o que o têxtil selecionou? Eu quero ir para as minhas opções de ferramentas para fazer minhas seleções daqui para que eu não tenha que fazer isso a partir de H Layer individualmente. Então vamos fazer Georgia pela fonte. Vamos fazer 16 para o tamanho, e então vamos usar o mesmo clique de cor cinza escuro, OK, e vamos apenas digitar um endereço de e-mail falso. Eu quero selecionar todo esse texto aqui e alinhá-lo ao centro. Ok, vamos continuar e trabalhar em redimensionar nossos mapas do Google e adicionar nosso formulário aqui à esquerda . E, em seguida, no próximo tutorial, vamos prosseguir e trabalhar para realinhar tudo e colocar tudo exatamente onde eles precisam estar. Então, para o Google Maps, o que eu quero fazer é confiná-lo a oito colunas, então vamos fazer uma forma desse tamanho e então vamos colocar o mapa dentro dele. Então, vamos pegar nossa ferramenta de medição e descobrir o tamanho que precisamos, e parece com 775 pixels de largura. Ok, vamos sair dessa camada de grupo particular e vir aqui para o Google Maps e criar uma nova camada. Vamos chamá-lo de Google Maps e, em seguida, com o nosso retângulo selecionável, irá em frente e criar um tamanho de 7 75 por 500. Portanto, certifique-se de ter corrigido desligado. E vamos digitar isso na tecla Tab 775 Oops foi longe demais. 500. Então acho que é um pouco alto demais. Vamos em frente e redimensionar isso para 3 75, então é mais uma forma de retângulo para que este mapa se encaixe dentro de lá um pouco melhor. Vou pressionar a tecla X para que eu possa mudar minha cor de primeiro plano, biqueira branca, e então eu vou em frente e preenchê-lo com meu filtro de balde, e eu quero adicionar esse traçado novamente. Então eu vou editar seleção de traçados e, em seguida, preto no primeiro plano e traçado de select Commander Control e D e vamos colocar esta camada abaixo do Google Maps. Preciso alterar esse nome para a caixa Google Maps. Ok, a próxima coisa que precisamos fazer é cortar o limite da camada para nossa caixa do Google Maps . Então camada cortou um conteúdo e vamos pegar nosso mapa e redimensionar. E eu vou digitar 375 para a altura que vai coincidir com a nossa caixa e depois com isto. Vá em frente e mova-o para a posição aqui. Certo, agora precisamos limitar nosso mapa àquela caixa. Então, vamos pegar nossa caixa do Google Maps e depois ficar confusa. Selecione a ferramenta para fazer nossa seleção de volta para a camada de mapas do Google e, em seguida, vá para a camada e selecione cortar para a seleção. Ok, vamos em frente e de selecionar com o Comandante Controle e D. Tudo bem, vamos em frente e trabalhar no nosso formulário. Agora este vai ser o formulário de envio de e-mail. Vamos fazer a rosa com quatro colunas de largura, como fizemos antes. Vamos em frente e selecionar fundo e criar uma nova camada chamada nome do formulário. E então, com nosso retângulo selecionável, vamos desenhar uma forma e vamos torná-la de 3 75 de largura por 50 pixels de altura. E então vamos escolher a mesma cor cinza que usamos antes e depois preenchê-lo. Vamos adicionar esse derrame também. A seleção e vamos em frente e duplicar este. Vamos movê-lo para baixo. Vamos chamá-lo, formulário e-mail e vamos em frente e cortar para o conteúdo para cada camada também. Agora, quanto ao espaçamento, quero adicionar a mesma quantidade de espaço que temos entre as colunas da parte inferior desta forma e a parte superior desta forma. Então vamos em frente e medir isso. Então eu tenho 25 pixels. Vou em frente e medir isso. 25. Ok, vamos em frente e desligar nossos guias. Então a próxima forma eu quero ter a mesma quantidade de espaço, e eu quero que a altura desta área bem aqui para que o fundo se alinhe com a parte inferior do Google Maps. Então vamos em frente e medir 25 pixels novamente. E então precisamos medir daqui até o fundo do Google Maps. Então eu tenho 224 pixels de pedágio. Então vamos pegar fundo e criar uma nova camada chamada mensagem. E então, com nossa ferramenta de seleção de retângulos, podemos ir em frente e desenhar isso. Vamos nos certificar de que temos o tamanho certo. Aqui. Temos 375 por 224 Ok. A mesma coisa de novo, vamos preencher com essa cor ótima, e então vamos adicionar nosso traço. Ok, então a última coisa que precisamos fazer é e um título para cada seção. Vá em frente e selecione meu nome de formulário aqui para que eu possa ter certeza de que essa camada está configurada na parte superior. Eu também quero mudar minhas informações e duas opções. Primeiro, vamos à ferrovia. Vamos fazer 30 para o tamanho e, em seguida, são de cor cinza escuro. Então este será o nome. Na verdade, eu vou mudar isso muito ousado, e então nós vamos fazer e-mail para o próximo. Então isso apenas permite que o visitante saiba quais informações colocar em cada linha. E depois temos uma mensagem. Ok, então essa foi a parte fácil. Temos todas as nossas informações. Temos todas as nossas formas. A única coisa que precisamos fazer agora é alinhar tudo diretamente no centro de nossas formas. Certifique-se de que tudo está perfeitamente aliado para garantir que não temos sequer quantidade de espaço entre todas as formas diferentes. E vamos cobrir isso no próximo tutorial. 40. Parte 5: Ok, então nesta lição, vamos em frente e terminar nossa seção de contato, e também precisamos organizar nossas camadas. E agora eu tenho uma enorme confusão de camadas diferentes em lugares diferentes. Então eu vou começar a organizar minhas camadas e renomeá-las também para tornar mais fácil encontrar o que eu preciso e também agrupá-las para nos ajudar online. Assim que tivermos isso feito, vamos em frente e alinhar todos os elementos dentro das formas, ajustar o espaçamento, e então estaremos prontos para passar para a seção de rodapé. - Ok , agora que eu tenho tudo em grupo, podemos ir em frente e começar a alinhar todos os diferentes elementos. Para espaçamento, tenho 29 entre o ícone e o topo do e-mail. Para espaçamento, E então eu coloquei o endereço de e-mail mais perto do e-mail. Então sabemos que esses dois estão juntos. E então eu vou alinhar o resto dos ícones com base nessa quantidade de espaçamento. Então agora eu parabéns. Minha ferramenta de alinhamento com a letra A. Eu posso clicar na minha primeira caixa aqui, e então eu vou clicar em meus ícones de e-mail com base nesse grupo de camadas, eu vou definir o primeiro item para o relativo a, e então eu vou alinhar centro no meio dos alvos. Crianças, vá e vire nossos guias na escolha, camada ou guia. E nós vamos mover isso para o topo do e-mail para que eu possa alinhar tudo o resto. E também vamos colocar um guia aqui acima do e-mail. Então agora só precisamos pegar essas camadas e colocá-las em posição. Agora, bem rápido. Eu vou voltar para o e-mail porque eu quero ter certeza de que cada um desses elementos está alinhado no centro dos outros elementos também. Então, para fazer isso, vamos trazer tudo para fora do grupo, essa camada, e então vamos selecionar cada um com a tecla Shift pressionada, e então um centro de linha do alvo. Certo, precisamos colocar tudo de volta e realinhar o meio do centro, porque acho que isso afetará como ele se centrou nessa forma. Vamos fazer o mesmo com as informações do telefone. Vamos retirar toda essa informação. Nós também precisamos fazer nossa medição aqui de 29 pixels e, em seguida, vamos alinhar tudo no centro. Ok? Tudo de volta para o grupo e, em seguida, uma mentira para o fundo. Agora ele vai movê-lo um pouco mais alto porque nós temos uma segunda linha aqui em comparação com o nosso endereço de e-mail, o que é bom. Então vamos em frente e apenas deixá-lo assim porque eu quero que ele diretamente centrado no meio da caixa. Certo, vamos continuar e fazer o mesmo por essa informação também. Tudo bem, vamos em frente e alinhar nossas três linhas de texto aqui. Eu também quero ter certeza de que não estão perfeitamente deitado de cima para baixo também. Então vamos pegar nosso retângulo selecionável para fazer uma seleção e alinhá-los no meio do alvo. E então precisamos ter certeza de que temos seleção selecionada e, em seguida, uma linha meio de alvos . Certo, vamos fazer o mesmo com os outros dois. E então, para o último só vai medir a quantidade de espaço que temos aqui no topo , que é 14 pixels. - Ok , agora precisamos colocar nossos ícones de volta no grupo de sobreposição de cores para que possamos ter certeza de que eles têm a cor correta. Ok, vamos dar uma olhada rápida aqui. Tudo parece muito bom. A última coisa que precisamos fazer é criar um novo grupo de camadas para a seção chamada Contato. Ok, então isso foi muito chato e muito repetitivo. Mas é importante que tenhamos tudo devidamente organizado, para que saibamos onde estão as informações se precisarmos acessá-las novamente. E também ajuda o desenvolvedor da Web e encontrar os detalhes da página da Web como eles estão citando o site e tendo tudo, qualquer ordem específica torna mais fácil para eles acessar essa informação e chamado o site. Se tudo estiver por todo o lado , ele vai demorar muito mais para codificar o site e o fim. Vai acabar custando mais dinheiro ao seu cliente ter esse site codificado porque ele não está devidamente organizado e as chances são que você provavelmente não vai ter negócios repetidos dessa empresa em particular ou daquela agência se você estiver trabalhando através de um suas camadas não estão devidamente organizadas, sim, é chato e repetitivo, mas é imperativo ser organizado como um Web designer. Ele definitivamente vai tornar as coisas mais fáceis para você e todos os outros que vão estar envolvidos no projeto, e vai fazer você parecer muito mais profissional a longo prazo. Agora que a seção de contatos está concluída no próximo tutorial, vamos terminar este projeto de Web design adicionando um rodapé à página da Web. Então, se você está pronto para começar a fazer isso, vamos fazê-lo. 41. Rodapé: Olá e bem-vindo ao projeto do rodapé para este site. É muito simples. Temos apenas alguns ícones sociais, alguns links e algumas informações de direitos autorais. Agora, normalmente, um rodapé terá muitos links para outras partes do site. Mas o que nós basicamente fizemos é que criamos um site de uma página, embora não seja completamente uma página, porque temos alguns links que irão navegar para outras páginas dentro dos sites, bem como algumas opções para as avaliações da equipe no uma seção sobre se fizermos uma seção sobre porque lembre-se, fizemos esta seção aqui, mas poderíamos criar uma página diferente para a seção sobre que talvez explique um pouco mais sobre a empresa versus os benefícios de usar o empresa. Então, no geral, é principalmente uma página Web design porque combinamos ah monte dessas páginas individuais na própria home page. Tudo bem, vamos em frente e terminar a seção de rodapé e será quase feito com este projeto de Web design. Então vamos em frente e criar uma nova camada para o nosso fundo de rodapé chamado Bem, vamos fazer pé ou clique de fundo. OK, então com seu retângulo selecionável. Vamos desenhar uma seleção de 1400 pixels de largura e 200 para a altura. Em seguida, com o nosso filtro balde, Will irá em frente e preenchê-lo com uma cor azul que usamos anteriormente e D select. Tudo bem, vamos pegar nossa ferramenta de movimento para que possamos mover isso para baixo na posição foi também selecionar corte camada para o conteúdo para cortar o limite da camada. Eu só vou usar minhas setas para movê-lo para baixo. Então, bem ali, então isso está parecendo muito bom. Então aqui está a parte fácil. Nós realmente vamos trapacear um pouco, e nós vamos pegar nossos ícones de mídia social do último projeto. Não há razão para refazer esses ícones de mídias sociais, já que já os fizemos uma vez antes. Certo, deixe-os lá dentro, mas não sei bem onde estão. Tudo bem. Parece que eles estão aqui em baixo, então vamos em frente e cortar o conteúdo de Lear. Tudo bem? Agora que temos aqueles lá embaixo, precisamos ir em frente e desligar essas camadas para que possamos alinhá-las com nossa ferramenta de alinhamento . Vou selecionar o fundo primeiro. e, em seguida, com a tecla shift, selecione-os e, em seguida, em relação ao primeiro item e um centro de linha do destino. Tudo bem, vamos em frente e adicionar nossos links aqui em baixo. Vá em frente e mude a cor da fonte, dedo do pé branco, e então eu vou fazer cinco espaços e copiá-lo para que possamos colá-lo no final dos outros links. Certo, vamos em frente e alinhe o centro do alvo também. Eu realmente preciso mover isso para cima um pouco mais alto, direito sobre lá deve ser bom e então mais um. Nós vamos fazer nossos direitos autorais a seguir, e então eu vou escolher a cor cinza escuro para a cor do fundo e então apenas digitar uma informação de copyright. E então, como antes, vamos alinhar esses dois centro do alvo e precisamos movê-lo para cima. Vamos em frente e colocá-los em um novo grupo de camadas. Vamos chamá-lo de conteúdo de rodapé, e vamos alinhar isso mais uma vez. Na verdade, acho que meus direitos autorais são muito baixos. Eu quero trazer isso um pouco mais alto porque eu quero responder mais espaço para o fundo disso. Muito bem, vamos voltar ao adiador do grupo de conteúdo do rodapé e alinhá-lo à altura da nossa caixa de rodapé . Então, linha no meio do alvo. E então, finalmente, vamos fazer uma seleção entre os ícones de mídia social e as informações de direitos autorais porque eu quero uma mentira os links aqui diretamente no meio desses dois elementos. Então tirei do grupo. Eu vou selecioná-lo e, em seguida, alterá-lo para seleção e, em seguida, uma linha meio do alvo. Certo, De Select. Vamos colocar isso de volta e vamos em frente, diminuir o zoom e ligar nosso conteúdo de volta. Ok, então o Web design está completo. Mas o que eu sempre gosto de fazer antes de entregar ao meu cliente para revisão é passar pela página da Web e ver se há algo que eu esqueci de fazer. Ou se houver algo que eu possa fazer para melhorar a página da Web. Agora, há algumas coisas que nós não fizemos, e eu fiz isso de propósito só para que possamos voltar e dar uma olhada na página da Web e fazer alguns ajustes finais e reforçar o fato de que você precisa passar por sua página da Web mais uma vez antes de entregá-lo porque você não quer entregar uma página da Web para revisão de seus clientes . Se há erros nele, porque se eles virem os erros, então isso vai fazer você parecer profissional a mesma coisa. Se você está passando por uma agência, se eles virem erros, isso não vai refletir o Bem em você. Portanto, há algumas coisas que precisamos fazer para tornar esta página melhor e organizá-la melhor para o nosso desenvolvedor da Web também. Então vamos falar sobre isso no próximo tutorial, e vamos ajustar esta página apenas um pouco para torná-la um pouco melhor e para garantir que tudo esteja alinhado corretamente. 42. Ajustes finais: Então estamos quase terminando este projeto. Temos apenas alguns ajustes finais que precisamos fazer para tornar o site um pouco melhor e e algumas das coisas que esquecemos. Então, o que nos esquecemos de fazer? Bem, nós temos um formulário aqui, mas não temos nenhum botão de enviar. Nós vamos em frente e isso dentro Precisamos aumentar nosso espaçamento aqui e ter certeza de que o espaçamento entre aqui e aqui é igual ao espaçamento aqui. Parece um pouco estranho agora, então queremos ter certeza de que nossos alinhamentos são consistentes em toda a página da Web. Então, por exemplo, espaçamento entre aqui e aqui é igual a aqui e aqui. Então, vamos passar e fazer algumas medidas para garantir que tudo esteja alinhado acordo, e então faremos ajustes à medida que avançarmos. Então vamos em frente e começar fazendo nossos ajustes aqui. Então vamos em frente e Graham são ferramenta de alinhamento e fazer algumas medições. Eu tenho 25 pixels aqui, que é o que nós tínhamos aqui em baixo é Bem, então eu vou ir em frente e medir 25 pixels aqui e eu vou adicionar meu guia bem ali. Agora, eu só preciso mover tudo para cima. Então vamos encontrar essa camada de grupo. Então, está em contato. Nós temos nosso formulário de envio de e-mail e nosso conteúdo do Google aqui, e nós podemos ir em frente e apenas movê-los individualmente. E então eu vou apenas clicar e arrastar isso para cima. A mesma coisa com este também. Certifique-se de que tudo é uma linha que parece bom. Parece que o nosso e-mail aqui é um pouco longo demais. Algo para voltar lá dentro e redimensioná-lo com a minha ferramenta de escala. Vai fazer 366 para o com que deve cuidar disso. E, em seguida, com a minha ferramenta de movimentação, eu vou ir em frente e selecioná-la e usar a tecla de seta para a direita para movê-la sobre um pixel. Tudo bem, então isso parece muito bom. Agora, vamos em frente e diminuir o zoom, ok? Agora que temos a quantidade certa de espaço entre todos esses diferentes elementos, essa parte está fixa. Agora eu quero passar e ter certeza que eu tenho a quantidade certa de espaço entre cada uma das seções. Agora posso ver que tenho mais espaço aqui em baixo contra aqui. Então vamos até o topo da página dela e dar uma olhada no espaçamento que usamos nesta seção. Então aqui temos. Parece que há muito mais espaço entre esses elementos e o topo dessa seção versus o que fizemos na parte inferior. Então, para consistência foram medir e adicionar a mesma quantidade de espaço e parece 75 pixels. Então eu vou ir em frente e fazer esse ajuste para esta seção também, para dar mais espaço para respirar e dar-lhe essa consistência. Então vamos em frente e medir 75 pixels. E se o seu é diferente naquela seção de três colunas, tudo bem. Basta descobrir a medida e depois usar isso para o resto do site. A outra coisa que eu posso fazer é Aiken organizar melhor essas camadas. Aqui temos dois elementos que devem ser agrupados em um novo grupo de camadas chamado Benefícios. E nós também poderíamos colocar o título lá também. E isso vai facilitar a movimentação de tudo. Certo, aqui temos menos espaço entre este edifício e este conteúdo versus o que tínhamos antes, mas tudo bem. Esta é a informação importante aqui, e é muito legível e fácil de ler. Então eu não estou realmente preocupado com aquele espaço ali. Certo, vamos continuar medindo 75 pixels de espaço e ajustando cada uma das seções. - Tudo bem, então nós adicionamos a quantidade certa de espaço entre cada seção e ficamos com algum espaço vazio na parte inferior da tela. Você pode ter mais ou menos do que eu com base na quantidade de espaço que você adicionou entre cada seção. Isso é bom. O que vamos fazer é reduzir o tamanho da tela, e se eu colocar meu cursor aqui, ele está me mostrando na parte inferior da interface que a altura é 49 42. Então eu preciso ir até a imagem e selecionar o tamanho da tela e digitar esse novo número, 49 42. Você também precisa dar uma olhada. Responda a uma pré-visualização aqui para ter certeza de que está tirando essa informação do local apropriado. É meio difícil de ver com este tamanho de um documento, mas eu posso ver bem aqui em baixo que está cortando aquela área que eu preciso cortar. Então eu vou clicar em redimensionar, e agora estamos no negócio. Ok, então estamos quase terminando. Vamos em frente e criar o nosso botão de envio. Vamos em frente e criar uma nova camada chamada botão enviar. Vamos pegar nossa ferramenta de seleção de retângulo fixo está desligado. E então, para o tamanho, vamos fazer 100 para o comprimento e 50 para a altura. Desta vez, vou selecionar uma cor verde que usamos anteriormente. E também quero contornar as esquinas. Então, em selecionar, selecione retângulo arredondado, vamos fazer 20 e, em seguida, preencha isso com sua ferramenta de preenchimento de balde. Vou desligar este fundo para poder ver o meu botão. Tudo bem, vamos em frente e mover nosso botão de enviar para a posição. Eu quero alinhá-lo ao fundo aqui, então eu vou arrastar um guia só para ter certeza que ele está exatamente onde eu preciso. E eu também preciso movê-lo para a esquerda um pouco para que ele se alinhe com este guia e essas submissões subiram aqui e agora eu vou ir em frente e ligar esta camada de mensagem, e eu vou ir em frente e mover um desses guias para o topo do porque o que eu quero fazer é medir outros 25 pixels a partir do topo deste botão. E eu só vou desenhar um novo fundo para ele versus re dimensioná-lo porque às vezes ele fica distorcido um pouco. Então eu vou fazer 25 pixels lá. Novo guia. Vamos excluir essa mensagem e criar uma nova camada chamada fundo da mensagem. E depois o quê? Eles são selecionáveis por retângulo. Vamos em frente e fazer essa seleção. E então precisamos pegar nossa cor com nosso seletor de cores de conta-gotas Tool clique em OK, e preenchê-lo com sua ferramenta de preenchimento de balde e vamos em frente e adicionar um traçado à seleção. Preto no primeiro plano e clique em traçado. Ok, a última coisa que precisamos fazer aqui é digitar enviar em todas as capitais. Vou fazer Oswald ousado para o Funt, e vou baixar para 24 para o tamanho. E vamos mudar isso, dedo branco. Ok, vamos em frente e movê-lo para cima, puxar isso para baixo e então nós só precisamos usar nossa ferramenta de alinhamento para alinhar isso diretamente no centro do nosso botão. Mas primeiro, vamos para o nosso botão enviar e selecionar camada. Corte o conteúdo e, em seguida, vá em frente e faça nossas seleções. Parece que precisamos desligar tudo novamente e, em seguida, certifique-se de mudar relativo para trás para o primeiro item e, em seguida, um centro de linha de alvos. Muito bem, vamos voltar a ligar isto tudo outra vez. Pode Novo Grupo de Camadas novamente? E desta vez é para o botão enviar, e então podemos colocá-lo dentro de nossa camada de grupo de contatos também. Ok, vamos em frente e diminuir o zoom. Acho que estamos quase terminando. A outra coisa que eu quero fazer isso, eu acho que vai fazer isso muito melhor é eu quero suavizar os ícones para que eles não são tão intensos, e eu também quero tonificar os ícones sociais no rodapé. Então vamos em frente e pegá-los primeiro. Vou baixar a opacidade para 50. Assim, nossos olhos não estão pulando por todo o lado porque temos tantas coisas competindo por nossa atenção. Queremos dar mais importância a certos elementos sobre outros. Então vamos em frente e pegar nossos ícones aqui também. Você realmente pega esse grupo nessa camada e deixa cair para 50 também, modo que definitivamente torna muito mais fácil para seus olhos e adicionar alguma importância a outros elementos versus ícones. Tudo bem, vamos dar uma olhada no resto do site para ver se precisamos adicionar mais alguma coisa. OK, eu acho que está parecendo muito bom, e nós fizemos nossos ajustes. Tudo está devidamente alinhado. Nós twittamos a área de contato para torná-la um pouco melhor do que era antes, bem como os ícones sociais. E acredito que já terminamos. Parabéns por terminar este segundo projeto Web design. Se você ainda não fez isso, vá em frente e conclua este projeto para praticar e, em seguida, vá em frente e tente descobrir o que você pode fazer para tornar este design de página da Web melhor exclusivo em seu próprio país para que você possa adicioná-lo ao seu carteira. Então essa é a sua próxima missão. Vá em frente e invente algo que você acha que é muito melhor do que isso. E se você quiser, vá em frente e envie-o na seção Q e A para feedback. Assim que terminar tudo isso, você estará pronto para passar para o nosso terceiro projeto de Web design na próxima seção. Obrigado por ouvir e tenha um dia incrível. 43. Projeto 3: resumo de época: Olá e bem-vindo ao nosso Projeto de Web Design número três para áudio e vídeo Seaside. Então vamos apenas fazer uma breve visão geral do site existente O que você pode ver agora e então eu vou mostrar a vocês o design que eu criei, e eu vou dar algumas dicas sobre por que eu projetei da maneira que eu fiz. Isso é o primeiro. Dê uma olhada no site original para que possamos descobrir o que precisamos fazer para melhorar este site. Inicialmente, a primeira coisa que vejo é o logotipo, áudio e vídeo à beira-mar. E parece que eles pegaram um Clippard brega grátis das imagens do Google e juntaram um logotipo. Não parece muito profissional. Parece desatualizado, e no geral, eu só acho que tem um sentimento barato para ele. Então eu acho que um design novo, atualizado , mais moderno , mais modernoe simples seria melhor para seu logotipo versus o que eles têm atualmente. Então, novamente, isso lhe dá uma oportunidade de vender seus serviços para incluir design de logotipo. Então, se você tem um cliente que está vindo até você para Web design e eles não têm site existente ou mesmo apenas logotipo picada não examinado, você pode querer dar uma olhada nisso e ver se você pode chegar a algo ainda melhor. E então você pode tentar e vendê-los no seu logotipo. Serviço de design. Talvez tenham algumas ideias de acampamento antes de lhes dar uma citação. Talvez apenas mostrar-lhes algo simples apenas para dar a eles uma idéia de por que seu logotipo é melhor do que o que eles têm atualmente. Essa é outra opção para você considerar quando o Web design é vender serviços adicionais . Como você pode ver em sua navegação, é um site muito simples. Eles não têm muito conteúdo. Eles têm áudio, vídeo e entre em contato conosco, e todos estes três vão para uma página separada, mesmo que todas essas informações estejam na página inicial também. Então não era bem certo por que eles tinham essas páginas adicionais quando tudo está na página inicial , então vamos ver isso em apenas um segundo. Então meu pensamento é, se vamos fazer páginas adicionais, eu gostaria de adicionar informações adicionais versus o que temos na página inicial. Não me importo de colocar algumas informações básicas na página inicial. Você pode ver aqui eles têm amostras para seu áudio e seus vídeos, o que é bom. Mas se eles querem informações adicionais, então podemos colocar isso naquelas páginas extras. Então vamos manter a navegação praticamente a mesma. Tudo bem, então depois disso, temos mídia social na frente e no centro. E se você nunca ouviu falar desta empresa antes e você está visitando o site deles pela primeira vez, você provavelmente não está pronto para começar a segui-los no Facebook e Twitter. Por que você iria querer seguir alguém que você não sabe nada sobre? Então eu não faria isso proeminente por essa razão. É por isso que você é melhor projetar isso no cabeçalho e torná-lo menor, não seja tão proeminente, mas as pessoas ainda podem acessá-lo facilmente quando estiverem prontas para segui-lo nessas plataformas de mídia social , e Eu só não gosto da idéia de colocá-lo na frente e no centro. Então, vamos começar. Começar com o quê? Não é uma manchete muito forte. Temos uma imagem muito ruim para o fundo também, e então temos suas informações de contato novamente. Não estou pronto para entrar em contato com você. Não sei nada sobre a sua empresa? Por que eu iria querer ligar para você? Você ainda não me deu nenhuma razão para ligar para você, então entre em contato com informações novamente. Se você quiser colocar seu número de telefone lá, eu colocaria no cabeçalho e tornaria pequeno. Portanto, não é dominante, mas ainda é fácil de acessar. Então, todas essas informações aqui podem ser combinadas no cabeçalho. Agora estamos a pensar porque devo fazer negócios contigo, áudio e vídeo para a tua marca. E depois explica o que eles fazem. E eles têm uma chamada ação, o que é bom. Descubra mais, então. Temos dois links aqui que são exatamente os mesmos links que navegam para as páginas de áudio e vídeo que estão disponíveis aqui no cabeçalho. Então eles estão repetindo essa informação novamente. Não precisamos colocar essa informação aqui duas vezes. Já está na navegação, mas eu gosto da idéia de colocar amostras na página inicial porque daqui você pode experimentar o tipo de trabalho que eles fizeram antes e ver o tipo de trabalho que eles fizeram antes. E então você vai navegar para as outras páginas. Se você quiser descobrir mais informações, Então, neste caso, ter o que é conhecido como um cabeçalho pegajoso seria benéfico para que quando uma pessoa rola para baixo que a navegação ainda está disponível. Então isso seria algo que eu recomendaria para este site em particular. A outra coisa que eu faria é que agora eles só têm uma amostra de vídeo, e a imagem desse vídeo é muito brilhante. Ele chama sua atenção porque é muito, muito vívida, mas eu não acho que seja uma imagem de boa qualidade no geral, e eu provavelmente mudaria isso. Mas, o mais importante, se não mudássemos a imagem, o que eu recomendaria é ter uma playlist de vídeos. Aqui temos várias amostras de áudio. Eu gostaria de ver vários exemplos de vídeo, bem como quatro, talvez cinco, talvez sete ou oito vídeos, amostras para incluir nesta área também, que você possa atender a diferentes públicos com base em quem você está segmentando, se é uma empresa profissional que você está segmentando, ou talvez você está fazendo casamentos também, você vai querer ter alguns exemplos de vídeo disso, bem como outros tipos de eventos de vida . Você vai querer ter alguns exemplos de vídeo de cada tipo de serviço ou eventos que você atende , e os tipos de empresas que você atende, seja apenas negócios para negócios ou uma combinação de negócios para negócios e casamentos e outros tipos de eventos de vida. Então isso é outra coisa que eu recomendaria para esta empresa em particular. E aqui em baixo, temos um contacto com a secção dos EUA, deixa-nos uma linha, liga-nos, Harry. Eles tornam mais fácil para as pessoas entrarem em contato com eles, ligando ou descendo uma mensagem . E, em seguida, no rodapé, temos uma enorme seção de direitos autorais com informações adicionais não relacionadas aos direitos autorais. Então, novamente, eu recomendaria apenas incluir informações de direitos autorais e, em seguida, links para políticas de privacidade e coisas assim. Porque se você der uma olhada aqui, eles têm uma política de cookies, então eu não colocaria necessariamente esse link de política de cookies nesta área aqui. Eu recomendaria colocá-lo na lata de rodapé. Então temos alguns links para as mídias sociais novamente, que é bom, e então temos alimentado pelo construtor de sites Go Daddy. Então isso diz a maio que essa empresa em particular construiu seu site, e mostra que ele é mal projetado, tem layout ruim, um logotipo barato. Não há estilo do texto e, em geral, a experiência do usuário pode ser melhorada por ter um site projetado profissionalmente. Então vamos rever meu projeto particular agora e por quê. Eu acho que as opções e o design que eu criei é melhor do que isso e como ele vai proporcionar uma melhor experiência ao usuário. Então vamos em frente e dar uma olhada nisso. O que eu decidi fazer foi criar um novo e simples logotipo moderno. Não é nada extravagante. Não vai me ajudar a ganhar nenhum prêmio, mas é muito mais profissional do que este logotipo em particular aqui. Adicionei alguns outros itens à navegação, bem como um hambúrguer Icahn, que mostrará ou ocultará a navegação quando clicado. Eu não acho que era necessário ter essa navegação visível, já que muito desse conteúdo e links para este conteúdo está disponível na página inicial agora, como parte de seu logotipo e sua imagem, eles estavam tentando incorporar à beira-mar palmeiras, vista para o mar coisas assim, e eu senti que, no geral, seu logotipo e sua marca seria melhor servido com cores do lado do mar. Então é por isso que eu escolhi um azul escuro para a água e, em seguida, uma laranja agradável para um rosa avermelhado Grady int cor para representar o sol. Então é por isso que eu escolhi essas cores e não imagens ou clip-art como eles fizeram originalmente. E depois na seção de heróis. Eu só tenho uma enorme declaração de texto tornando sua visão uma realidade. Ele realmente não diz muito, mas talvez ele agarre seu interesse porque você tem uma visão você mesmo, e é por isso que você está indo para esta empresa em particular e você não é um vídeo AGA para ou você não sabe como capturar corretamente o áudio profissionalmente. Portanto, esta afirmação por si só não vai fazer ninguém querer comprar os seus serviços, mas pode atrair o seu interesse agora. A única coisa que eu adicionei para a seção de heróis são esses logotipos de empresas para as quais esta empresa em particular trabalhou ou trabalhou para eventos ao vivo. Então isso acrescenta prova social ou credibilidade. Aumenta a credibilidade desta empresa e faz com que pareça muito mais profissional aqui . Cheesy, brega. Não há credibilidade real. Sim, então você está nas redes sociais que não é credibilidade ou prova social. Não há nenhuma prova de que você pode ir na página do Facebook deles e eles podem ter apenas 100 fãs. Grande negócio. Isto é um negócio maior. Você realmente trabalhou com essas empresas. Este vídeo AGA para tem trabalhado com essas empresas. Isto é muito mais impressionante do que isto. Então eu incluí isso na seção de heróis para que ele esteja acima da dobra e os visitantes deste site verão esta informação e se você puder, o que seria ainda melhor. É ter links que vão para uma página em cada um desses sites que mostra seu cliente e o trabalho que ele fez. Então a primeira coisa que veremos depois de começarmos a rolar para baixo são os serviços que eles oferecem. E, em seguida, cada um destes pode vincular outra página para obter mais informações. Então, novamente, você precisa vender seus serviços. Por que eu deveria fazer negócios com você? Bem, se você está procurando alguém para fazer vídeo ou áudio para um evento ao vivo enquanto você está interessado em eventos de vida ou som de vida, ou talvez você só precisa de alguns serviços de consultoria para que cada um deles possa ir para outra página que vai vendê-los sobre por que eles devem fazer negócios com áudio e vídeo à beira-mar. Depois disso, podemos ver algumas amostras de áudio e vídeo. Eu realmente não mudei muito para o design para esta parte particular do site. Parece muito semelhante ao que eles têm atualmente, e isso é porque eles têm suas amostras de áudio hospedadas na nuvem de som. E o que você pode fazer com o Sound Child é que você pode pegar algum código ou um plug in e colocá-lo em seu site, e ele irá então mostrar uma playlist de todas as suas músicas ou áudio para as pessoas experimentarem. Então não há realmente muito que eu gostaria de mudar com este design em particular. Eu só limpei um pouco. Eu fiz as imagens e os botões de reprodução maiores, mas todas essas atualizações de design dependem se você tem permissão ou não, ou se você pode modificar o código fornecido pelo Sound Cloud. Eu preferiria ver essas imagens, e o botão play é maior. Mas, novamente, isso depende se pode ou não ser feito. E se ele pode o orçamento do cliente porque, em seguida, o codificador teria que entrar e personalizar isso com base no que está disponível a partir do Soundcloud. Em seguida, temos nossas amostras de vídeo. E para este design, eu incluí um grande botão vermelho play porque eles estão hospedando seus vídeos no YouTube e você pode ver isso com este pequeno botão play bem aqui. Isso é um logotipo do botão de reprodução do YouTube, então eu pensei que seria melhor torná-lo maior. Mas o que eu recomendaria para este cliente é hospedá-lo em algo diferente do YouTube para o simples fato de que uma vez feito o vídeo, você vai começar a ver uma playlist de outros cinegrafistas e outros tipos de eventos. E isso pode distrair o visitante porque então eles vão começar a navegar para outros vídeos. Eles vão ficar desviados, e depois vão deixar o local. Então, queremos manter os visitantes em nosso site o maior tempo possível, então eu recomendaria hospedar os vídeos em outro lugar se você pode fazê-lo no Soundcloud do que eu recomendaria fazer isso ou escolher outro serviço como vídeo. A outra coisa que eu fiz para este design em particular é que eu adicionei uma playlist ou um controle deslizante adicionando alguns botões aqui para a esquerda e direita, e nós estamos atualmente em quatro de cinco amostras de vídeo, e então eu atualizei a conexão e incluí texto adicional para uma consulta gratuita. Então, por que eu deveria me conectar com você? O que há com isso para mim enquanto eu vou te dar uma consulta gratuita que vai aumentar a probabilidade de alguém te enviar uma mensagem, enquanto que aqui em baixo nós apenas temos contato conosco. Bem, deixe-nos uma linha. Por que eu deveria deixar uma linha para você? O que eu ganho com isso? Então você quer ter certeza de que você dar ao visitante uma razão para lhe enviar uma mensagem, e você pode fazer isso apenas dando-lhes algo em troca de lhe enviar uma mensagem. E então simplifiquei o rodapé com uma simples linha de direitos autorais e alguns ícones de mídia social. A única outra coisa que provavelmente adicionaria é uma política de privacidade e uma política de cookies que liga a essas páginas para esse conteúdo. E então eu também peguei o fundo que eu criei para o cabeçalho e a seção de heróis e adicionei ao rodapé para equilibrar o design geral e conectar tudo juntos. Então, no geral, é mais limpo. É mais moderno. Está mais atualizado. É mais fácil de usar, e parece muito mais profissional do que o que eles têm atualmente. Então, para este projeto, vamos recriar este design em particular. Vou mostrar-te como fiz isto. Grady int aplicou alguns desses efeitos especiais como lidar com situações quando você tem conteúdo vindo de outro site. Como obter essas imagens porque não foi fácil ou direto obter essas imagens específicas . Então eu vou mostrar a vocês como eu obtive essas imagens e então vamos em frente e criar um controle deslizante moderno simples para nossa seção de vídeo, e então vamos arredondá-lo com nosso connect e rodapé. Então, se você está pronto para começar este novo projeto, vamos fazê-lo 44. logotipo: Olá e bem-vindo ao primeiro tutorial para o nosso projeto à beira-mar. A primeira coisa que vamos fazer é criar nosso logotipo design simples, então não vai levar muito tempo para projetar. Então vamos em frente e começar. Então vamos criar um novo documento com comando ou controle e a letra, e vamos dimensioná-lo de 200 por 100. Também queremos definir a cor de fundo do dedo do pé branco clique, OK, e vamos usar para novas fontes que ainda não usamos. E você pode precisar baixar e instalá-los se quiser usar exatamente os mesmos fundos. Se não, tudo bem. Basta usar qualquer fonte que você quiser. É só para praticar. Então, o primeiro 1 está em fontes do Google. É fontes dot google dot com, e esta é a diversão que vamos usar. Não sei como pronunciá-lo, mas basta ir em frente e fazer uma busca por essa fonte no Google Fonts e o outro é chamado uma placa de cobre, e pode ser encontrado em fontes geek dot com, e você pode baixar esta fonte para livre uma vez que você tenha aqueles baixados e instalados. Vamos digitar Seaside para a primeira parte do logotipo. Mas primeiro, vamos entrar em opções de ferramentas e digitar nossas informações para esse Funt. Então eu quero escolher placa de cobre. Vamos fazer 36 para o tamanho e, em seguida, para a cor, vamos usar esta cor azul escuro. Então apenas digite este número aqui. Clique em OK e, em seguida, vá em frente e digite Seaside. Então eu fiz a primeira carta em uma maiúscula. O resto é minúsculo. Mesmo que pareçam capitais, eles são um pouco menores. Então eu vou ir em frente e selecionar tudo, e eu vou negrito essa fonte também. Então vamos em frente e mover isso para a posição, e então vamos pegar nosso têxtil novamente, e então vamos digitar o nome do próximo fundo que queremos usar. Vamos fazer 20 para o tamanho e vamos usar a mesma cor, então basta digitar áudio e vídeo em todos os campos. Vamos ousar isso também, e vamos em frente e pegar esse texto e movê-lo sobre um tipo de linhas com o lado esquerdo e o lado direito da beira-mar. Vamos em frente e agarrá-lo e movê-lo para baixo apenas um pouco porque nós vamos colocar uma linha que divide para aqui mesmo no meio. Então vamos em frente e ligar nossos GYNs e, em seguida, basta colocar um guia em ambos os lados do texto e, em seguida, com o seu retângulo selecionar, irá em frente e desenhar uma seleção. E vamos fazer o tamanho ou a altura dois pixels, pegue seu balde. Ferramenta de preenchimento, mesma cor azul. Precisamos preenchê-lo. Mas antes que possamos fazer isso, precisamos criar uma nova camada. Vamos chamá-lo de divisor de Select e, em seguida, usar sua ferramenta de movimento apenas para movê-lo para baixo na posição. Vamos em frente e ativar nosso limite de camada de show sob exibição e, em seguida, ir para a camada cortar o conteúdo, e então vamos avançar e alinhá-lo com nossa ferramenta de seleção de retângulo e nossa ferramenta de alinhamento . Vamos também colocar o relativo a dois seleção e, em seguida, um meio deitado do alvo. Ok, vamos em frente e pegar nossa camada de áudio e vídeo, e vamos baixar a opacidade só um pouco. Desça para cerca de 80 para a opacidade. Vamos esconder o ginecologista e vamos em frente e colocar isso dentro de um novo grupo de camadas, bem chamado logotipo. E vamos também garantir que salvamos este arquivo no caso de precisarmos fazer modificações nele mais tarde. Em seguida, queremos ter certeza de que temos nosso documento de grade mestre aberto para que possamos começar a partir de uma ardósia em branco para nosso novo design. Uma vez que você tem que abrir, você vai pegar sua camada de grupo de logotipo e arrastá-lo para o documento e, em seguida, movê-lo para cima para a posição aqui em cima na seção de cabeçalho. Então esse é o início do cabeçalho. Nosso logotipo é projetado, e vamos completar a parte de design do cabeçalho no próximo tutorial. 45. Cabeçalho: Olá e bem-vindo de volta. Tudo bem, vamos em frente e trabalhar no nosso cabeçalho, bem como na nossa seção de heróis, porque precisamos criar um ingrediente que é perfeito desde o cabeçalho até o herói. Então vamos em frente e criar o fundo do herói também. Então, antes de criarmos esses fundos, vamos em frente e definir a altura do cabeçalho e da seção de heróis, bem como os logotipos que são a prova social que adicionam credibilidade à empresa nessa seção de heróis também. E vamos adicionar alguns guias para cada um. Então o primeiro 1 nós vamos clicar e arrastar um guia para baixo para 150, em seguida, criar outro guia e 550 e, em seguida, o final vai ser em 700. Então vá em frente e adicione esses três guias e vamos em frente e criar nosso ingrediente. Vamos em frente e criar uma nova camada. Vamos chamar-lhe ingrediente. Está bem. Primeiro, precisamos definir nossa cor, então eu vou pegar as cores do documento que eu criei anteriormente. Então vá em frente e digite este número para a laranja brilhante, e você precisa definir isso para o seu primeiro plano. E, em seguida, para a cor de fundo vai ser esta cor rosa brilhante. Então vá em frente e digite este número aqui. Está bem? Uma vez que você tenha essas cores definidas para sua cor de primeiro plano e plano de fundo, nós condenamos. Vá em frente. E Graham são ingredientes. Precisamos ir para o editor de grade, que pode ser acessado clicando neste ícone aqui e, em seguida, aqui em cima e Editor de ingredientes , você precisa definir suas cores se elas não são definidas automaticamente, e você pode fazer que com o botão direito, clicando e selecionando o tipo de cor à esquerda, selecionando primeiro plano e, em seguida, clique com o botão direito novamente. E para o tipo de cor certo, você vai selecionar a cor de fundo e, em seguida, para o nosso triângulo branco bem aqui. Queremos ter certeza de que está no meio, por volta de 0,50 Então, basta chegar o mais perto possível, e então podemos criar nosso ingrediente. Vamos começar Argh! Radiante no canto superior esquerdo do cabeçalho. E vamos arrastar até aqui, no canto inferior direito da seção de heróis. Então basta clicar, arrastar a liberação e, em seguida, pressione sua tecla enter ou return para criar aquele int ganancioso. E agora é uma identificação para a nossa camada. Então vamos em frente e criar uma separação entre o cabeçalho e a seção de herói adicionando uma sombra. Então, para fazer isso, vamos primeiro criar uma seleção com nosso retângulo selecionável em torno do cabeçalho. Vamos copiar isso com comando ou controle e a letra C e depois colar com comando ou controle e a letra V e suas camadas de piano. Você vai obter uma seleção flutuante, clique com o botão direito e selecione para nova camada. Ok, então agora temos o nosso Grady int para o nosso cabeçalho. Vamos chamá-lo de fundo de cabeçalho e vamos realmente mudar este para fundo de herói. Certifique-se de ter o fundo do cabeçalho selecionado porque o que precisamos fazer é aumentar o limite da camada dessa camada atual. Neste momento, está a ser cortada aqui, que é bom, se é tudo o que precisávamos. Mas porque precisamos de anti-sombra, ele não vai realmente aparecer porque essas sombras vão descer aqui abaixo limite da camada, então precisamos aumentar o limite da camada para mostrar a sombra. E podemos fazer isso indo até mais tarde e selecionando camada para tamanho de imagem. Ok, agora nós vamos subir para filtros luz e sombra e selecionar sombra gota. Então, a partir daqui, você já pode ver que a sombra está sendo aplicada. E então podemos usar essas opções aqui para personalizar a sombra. Se você não estiver vendo a sombra suspensa, verifique se a visualização está ativada para que possamos aumentar a quantidade de sombra exibida pelos controles deslizantes X e Y. E se você tiver ambos ligados entre si, você pode ajustá-los ao mesmo tempo. Então, mais ou menos, vou menos. Vou por volta das duas. Eu também vou aumentar a opacidade para torná-la mais escura. E eu vou fazer isso por volta da uma. Você pode fazer o seu como quiser. Vou em frente e usar essas opções aqui e clicar. OK. E agora temos nossa separação entre o cabeçalho na seção de heróis. Ok, então a próxima coisa que precisamos fazer é definir o Grady int. Então ele só aparece na seção de heróis e não no resto do documento. Então vamos nos certificar de que temos nosso histórico de herói selecionado. E então vamos fazer uma seleção em torno dessa seleção de herói. E então nós vamos subir para selecionar e selecionar Inverter e Net irá inverter a seleção para que ele selecione tudo menos a seção herói. Então temos o cabeçalho selecionado e temos o resto do documento selecionado. Então agora vamos criar uma máscara de camada, preenchê-lo com branco, e então precisamos ter certeza de que temos preto definido para a cor de fundo e, em seguida, pressione sua tecla delete ou backspace para remover esse Grady int do resto do documento. Agora, é claro, isso realmente não fez diferença aqui em cima porque nós temos nosso fundo de cabeçalho lá também . Vamos em frente em de select com comando ou controle e a letra D Let's Haider guia por um momento. Nosso cabeçalho e parte de nossa seção de heróis agora é definido com aquele radiante, e é perfeito. Além da sombra que os separa. As cores são perfeitas. Vamos em frente e mover nosso logotipo para cima e vamos em frente e alinhá-lo diretamente no centro nesse cabeçalho de cima para baixo. Vamos também certificar-nos de que está alinhado à esquerda da coluna também. Caso contrário, pegue sua ferramenta de movimento. Certifique-se de que você moveu a camada ativa selecionada. Clique nele e, em seguida, mova-o para posições na linha para a primeira coluna da grade. Vá em frente e desligue a grade. Vou manter isso no topo por enquanto, por isso tenho acesso fácil a ele. Ok, vamos pegar nossa camada local agora e nossa ferramenta de seleção de retângulo e fazer uma seleção. Eu vou pegar minha ferramenta de iluminação com a letra A e eu vou clicar no meu logotipo. Vou definir em relação à seleção e, em seguida, uma linha no meio do alvo. Então agora está uniformemente espaçado entre a parte superior e a parte inferior. Muito bem, vamos trabalhar na nossa navegação a seguir. Nós já fizemos isso algumas vezes, e nós vamos basicamente usar o mesmo conceito que usamos nos designs anteriores adicionando cinco espaços após cada item do menu, copiando-o e colando-o no final dos outros. Então, com sua ferramenta de texto, vamos entrar em duas opções e definir a fonte para ferroviário o tamanho para 24 a cor biqueira branca. E você também quer ter certeza de que você está espaçamento é redefinido para zero porque nós não queremos nenhum espaçamento extra entre as letras para nossa navegação. E vamos em frente e datilografar. A Kate. Em seguida, precisamos criar nosso ícone de hambúrguer, então vamos fazer isso com nossa ferramenta de seleção de retângulo. Vamos também criar uma nova camada primeiro chamada Hamburger, e então para o tamanho vamos fazer 30 por oito. E então vamos usar nossa ferramenta balde para preencher isso com câmera branca e zoom em apenas um pouco e de selecionar. E antes que esqueçamos, vamos subir para a camada e selecionar cortar para o conteúdo e duplicar essa camada duas vezes com sua ferramenta de movimentação. Nós só vamos mover estes para baixo em posição. Certo, vamos pegar nossa ferramenta de alinhamento com a letra. Um porão em sua chave shift. Selecione-os todos definidos em relação ao primeiro item em relação ao primeiro item e uma linha à esquerda. A outra coisa que queremos fazer é distribuir e até mesmo quantidade de espaço entre cada um deles também. Então vamos rolar para baixo e definir o deslocamento. Por quê? Para 12 e, em seguida, selecione esta opção aqui para distribuir o espaço entre eles. Ok, vamos em frente e selecionar a camada superior, certo? Clique em e selecione. Mesclar para baixo e, em seguida, fazê-lo mais uma vez e isso leva todas as três camadas e combiná-lo no reboque. Um. Tudo bem, vamos em frente e pegar nossos novos elementos aqui e alinhá-los ao lado direito da nossa coluna aqui. E então vamos alinhá-lo ao topo na parte inferior com sua ferramenta de seleção de retângulo e nossa ferramenta de alinhamento. Também precisamos de um grama, nossa navegação retira isso, se necessário. E então vamos mover isso ao lado do nosso ícone de hambúrguer bem ali. E como adicionei esses cinco espaços ao fim do contato, posso ver o limite da camada bem aqui. E isso me dá uma quantidade igual de espaço entre cada uma das palavras e o hambúrguer. Eu venho. Está bem. Eu vou ir em frente e pegar minha ferramenta de seleção de retângulo novamente para que eu possa alinhar a navegação diretamente no centro de cima para baixo. Certo, tudo está no lugar certo. A última coisa que precisamos fazer é e um ícone de estado de pairar para representar o que acontece quando você clica no ícone de hambúrguer porque a navegação em si será escondida até que você clique nele . Então o que vamos fazer é ir para o arquivo anterior em que trabalhamos, e vamos pegar o ícone do pairar deste documento versus tentar encontrá-lo online novamente . Então, vou localizá-lo. Ele vai para a seção F A Q, e então basta clicar e arrastar essa camada sobre o nosso documento atual, movê-lo para a posição e isso é s ela moveu o ícone sobre a camada de hambúrguer deve renomear isso. Vou remover a cópia, e depois só temos de organizar as nossas camadas. Então vamos em frente e criar um novo grupo de camadas para o cabeçalho e é isso. Nossa seção de cabeçalho agora está concluída. Ok, Então, no próximo tutorial, vamos em frente e criar nossa seção de heróis e os logotipos para prova social 46. Herói: Olá e bem-vindo de volta. Muito bem, vamos trabalhar na nossa secção de heróis e terminar o desenho desta parte do projecto. Vai ser bem simples. Vamos adicionar algum texto e alguns logotipos para nossa prova social e adicionar alguma credibilidade ao áudio e vídeo à beira-mar. Então a primeira coisa que precisamos fazer é encontrar alguns logotipos, qualquer logotipo ou bom. Acabei de escolher cinco logotipos aleatórios que podem precisar dos serviços de um profissional de áudio e vídeo . Não tem que ser o mesmo logotipo. Basta fazer uma pesquisa de imagem do Google para alguns logotipos, baixá-los e adicioná-los ao seu documento. Porque tudo o que vamos fazer é alinhá-los com nossa ferramenta de alinhamento e apenas continuar praticando com algumas das ferramentas que precisaremos usar como um Web designer. Então, uma vez que você os tenha baixado e adicionado ao seu documento, podemos ir em frente e começar. Então eu vou ligar minhas guias e pegar minha ferramenta de movimento, e eu vou selecionar o primeiro logotipo e alinhá-lo à coluna esquerda. Então eu vou pegar meu último logotipo e alinhá-lo ao lado direito e este alinha com ícone de hambúrguer aqui e este com o logotipo aqui. Vamos então mover os outros três para a posição. Agora, a outra coisa que você pode precisar fazer é redimensionar seus logotipos. Então meus logotipos, eu sou habilidoso com o deslocamento da ferramenta de escala mais s, e eu redimensiono a altura para 75 pixels. Agora, se você tem um logotipo como este aqui, não há necessidade de redimensioná-lo para 75 para a altura porque a largura vai ser muito, muito maior do que é agora. Então eu vou deixar este como está, e eu vou apenas alinhá-lo no centro da coluna de qualquer maneira e, em seguida, distribuir uniformemente a quantidade de espaço entre eles. Tão simples. Então vamos em frente e fazer esse alinhamento primeiro, onde ele está alinhado dentro desta área aqui de cima para baixo. Então vamos fazer nossa seleção com nossa ferramenta de seleção de retângulos. Vamos pegar nossa ferramenta de alinhamento com a letra A e eu vou clicar no primeiro logotipo. Não parece que ele vai me permitir selecioná-lo, então eu posso precisar desligar o cabeçalho. Então vamos tentar isso. Lá vamos nós. Agora que eu tenho que selecionei quatro em relação a, e então eu posso selecionar um meio de linha do alvo. Ok, eu vou continuar e fazer isso para cada um dos outros logotipo também. Ok, eu vou mudar isso de volta para o primeiro item, e então eu vou selecionar meu primeiro logotipo com minha ferramenta de alinhamento, e então eu vou manter minha tecla shift pressionada para selecionar os outros logotipos. Ok, você provavelmente sabe o que vem a seguir. Isso é certo. Nós vamos distribuir, e então precisamos ter certeza de que temos nossas configurações para o X e y definido corretamente. Vou voltar a zero. Não tenho certeza do que preciso para o ex ainda, então vou tentar 250 e então vou selecionar essa opção aqui. Agora. O problema é que não nos deu uma quantidade igual de espaço entre o logotipo h. Então, às vezes, isso vai acontecer. Com base na camada e no tamanho dessas camadas e no número de camadas que você selecionou , ele nem sempre dará exatamente o que você deseja. Vou desfazer isso com o Commander Control e a letra Z. Então, o que podemos fazer para alinhar esses logotipos uniformemente entre eles? Bem, em vez de usar a distribuição, podemos alinhar este logotipo no centro e, em seguida, usar a nossa ferramenta de seleção para alinhar este logotipo entre estes dois e, em seguida, este logotipo entre estes dois e isso ainda vai nos dar um quantidade igual de distribuição. Não será exatamente a mesma quantidade, mas eles serão mais simétricos e mais próximos de serem distribuídos uniformemente dessa forma. E isso é porque este logotipo aqui é mais longo que este, e vai ter mais ou menos base do que o outro. Então vamos em frente e pegar nosso logotipo do meio com nossa ferramenta de alinhamento. Vamos subir e selecionar a imagem e, em seguida, um centro deitado do alvo para que o alinhe diretamente no centro do nosso documento, a largura do nosso documento. Então agora podemos ir para a nossa ferramenta de seleção e fazer uma seleção entre os dois, e então podemos pegar esse logotipo, alterá-lo de volta para a seleção e, em seguida, alinhá-lo no centro dessa seleção. Agora podemos fazer a mesma coisa com este logotipo aqui com nossa ferramenta de seleção de seleção com Commander Control e desligar as guias. E agora está tudo alinhado perfeitamente. Ok, a próxima coisa que precisamos fazer é e uma sombra que corresponda à sombra que colocamos no cabeçalho dela. Então vamos em frente e fazer isso. Vamos voltar a ligar os nossos guias. Vamos fazer nossa seleção em torno dessa seção. Vou selecionar minha camada de fundo porque quero que o plano de fundo permaneça branco. Vamos copiá-lo com o Controle do Comandante e ver e pagar com o Comandante Controle. Inveja. Podemos ter uma seleção flutuante? Então vamos adicionar isso a uma nova camada. Vamos mover isso para cima. Isso é chamado de fundo de prova social. Vamos subir para camada e selecionar camada para tamanho de imagem, e agora podemos subir e selecionar filtros, luz e sombra e sombra para criar essa sombra para combinar com o anterior. Agora nós deveríamos ter escrito os números exatos que usamos anteriormente porque ele vai para o padrão para as configurações padrão, e eu não lembro o número exato que eu usei para o X e o Y, E a opacidade que eu sei é muito próxima a um para a opacidade. Mas eu não tenho certeza sobre isso, mas é perto o suficiente por enquanto. Então lembre-se que no futuro, se você vai usar uma sombra várias vezes em um documento, é melhor o dedo do pé ter exatamente os mesmos números. Então você tem exatamente a mesma sombra em todo o documento. Ok, eu vou em frente e clique. OK, então nós temos o nosso prego de sombra, e nós temos a separação entre esta seção e esta seção aqui em baixo. O único problema é que também temos uma sombra sobre ela. Então o que eu vou fazer é fazer uma seleção com o retângulo selecionável que exclui a nave auxiliar. Mas queremos ter certeza de que selecionamos a sombra aqui embaixo. E então, quando vamos até a camada de corte para seleção, isso vai cortar o limite da camada e remover a sombra de cima dessa barra. Não queremos aquela barra por cima, porque vai haver muita separação. Então nós temos nossa seção de heróis e nossa separação daqui e aqui e agora nós só precisamos adicionar nosso texto. Então vamos pegar nossa ferramenta de texto e vamos mudar a fonte para placa de cobre. Vamos fazer 15 para o tamanho e depois para a cor, vamos escolher este clique de cor azul escuro. OK, vamos ter certeza que tudo está definido como zero aqui, e então podemos ir em frente e digitar a primeira linha, selecionar tudo e fazer negrito. Então é um pouco grande demais. Eu quero ter certeza de que eu fico dentro do lado esquerdo da primeira coluna e do lado direito da última coluna, então eu vou pegar meu têxtil novamente, mão selecionar tudo e mudar o tamanho até que ele se encaixe dentro desses limites. Então vamos tentar 107 bem perto. Então texto para selecionar novamente todos e parece que 105 vai ser perfeito. E, em seguida, em uma segunda linha com a nossa ferramenta de texto irá digitar uma realidade. Vamos fazer isso ousado bem ali. Vamos em frente e colocá-los em um novo grupo de camadas. É chamado de conteúdo de herói, e então vamos fazer nossa seleção nessa área. Então aqui e, em seguida, com a nossa ferramenta de alinhamento irá em frente e selecioná-lo. Mas vamos em frente e desligar todo o resto. Isso é acima dela. Podemos realmente agarrá-lo. E, em seguida, uma linha para o centro de seleção e meio de Target veio em um de select virou todos estes de volta e este organizado são camadas apenas um pouco aqui. Vou criar um novo grupo de camadas chamado Prova Social, e vamos colocar todos os nossos logotipos dentro daqui. E então mais um novo grupo de camadas chamado Hero e é isso. Nossa seção de heróis agora está pronta. O próximo tutorial vai começar a trabalhar na primeira parte do corpo, Então, se você está pronto para começar isso, bem, vamos fazê-lo. 47. Body 1: Olá e bem-vindo de volta. Certo, então a próxima parte do nosso projeto é criar quatro colunas de informações para ajudar a vender os serviços de seus clientes às suas perspectivas. Então vamos dividir quatro seções diferentes uniformemente ao longo de três colunas da nossa grade. Vamos adicionar um título e algumas informações que serão um trecho do que esse serviço é. E então, se isso atrair o cliente potencial, eles podem clicar no título ou na imagem para navegar até a página Eventos ao vivo ou a página Produções de Vídeo para ler mais sobre esses tipos específicos de serviços que estão interessado em. E quanto mais longe as imagens vão, vamos colocá-las dentro de um círculo e uma sombra, criar um traço, e em relação às imagens reais que usei, só uso algumas imagens do estoque do obturador. Podemos realmente ver a marca d'água nas imagens, e isso significa que as imagens estão protegidas por direitos autorais. E como você sabe, a fim de usá-los em um site de vida, você precisa comprar a licença completa dessas imagens e, em seguida, ser reembolsado de seus clientes. Então, se você quiser baixar exatamente as mesmas imagens. Vá para o obturador de estoque ponto com e digite este número em busca do primeiro item. Este número para a segunda imagem e, em seguida, esta foto eu d para esta imagem. E então, finalmente, esta foto eu d para esta imagem. Então vamos em frente e clicar nesta lupa pequena, clique com obotão direito, botão direito, selecione copiar imagem e, em seguida, colá-la em nossos documentos. Ok, vamos em frente e fazer isso para cada uma das imagens. Eu tenho uma seleção flutuante para este, então eu vou clicar com o botão direito do mouse e selecionar Nova camada. Certo, vamos renomear isso. Vou chamar isso de Consultas, produções de vídeo ao vivo e eventos ao vivo. Eu também vou reorganizar a ordem em que eles estão em querer eventos ao vivo primeiro este próximo e depois este 1/3. Certo, agora temos nossas imagens. Precisamos ir em frente e começar a redimensioná-los com base no número de colunas que temos e no número de imagens. Então nós temos 12 colunas com quatro imagens, então nós vamos fazê-las com três colunas de largura. Então vamos pegar nossas ferramentas de medição para que possamos descobrir quantos pixels de largura. Precisamos fazer nossas imagens, e parece que 275 pixels de largura. Então eu vou redimensionar minhas imagens para que elas sejam um pouco mais altas do que isso. Então vamos realmente fazer 300 pixels de altura. Então vamos pegar nossa ferramenta de escala com Shift Plus s. Vamos certificar-nos de que eles estão ligados e selecionar 300 para a altura. E vamos fazer isso para cada uma das imagens. Ok, com removido dito apenas movê-los para baixo em posição aqui. Na verdade, esse deve ser primeiro um segundo ponteiro, este 1/3. Tudo bem. Essa foi a parte fácil. Agora vem as coisas divertidas. Então nosso próximo passo é criar alguns círculos para colocar nossas imagens e rebocar. Adicione algumas sombras para eles também. Vamos em frente e desligar nossas seções de herói e cabeçalho primeiro, e depois pegar sua ferramenta Elipse nas opções da ferramenta. Certifique-se de ter uma relação de aspecto fixa selecionada, e queremos fazer o nosso círculo com três colunas de largura, então apenas desenhe um círculo e sabemos que o tamanho é de 75. Então digite isso e, em seguida, crie uma nova camada chamada círculo e, em seguida, com nossa ferramenta de preenchimento de balde , vamos preenchê-lo com branco e, em seguida, de select. Vamos também alterar o limite da camada, subindo para a camada e selecione cortar o conteúdo. E agora vamos criar um segundo círculo que vai manter a nossa imagem. Nós também vamos fazer este círculo menor para que quando ele se encaixa dentro deste círculo, o círculo inferior irá criar nosso golpe de peso para nós. Então vamos em frente e digite para 65. Para o tamanho, vamos criar uma nova camada chamada Círculo de Imagem, e então vamos preenchê-la com branco. Nós também precisamos cortar o conteúdo fora do limite da camada e, em seguida, com a nossa ferramenta lame it, vamos clicar na primeira camada. Holden, sua tecla Shift e clique na segunda camada. Em seguida, queremos definir em relação ao primeiro item e alinhar centro e meio do alvo . E agora nosso círculo de imagem está no centro do círculo inferior. Certo, vamos desligar o círculo M. Vamos pegar essa camada de círculo. Vamos voltar para a camada e selecionar a camada para o tamanho da imagem porque eu quero adicionar uma sombra para esta camada. E se não aumentarmos o limite da camada do que isso, as sombras não aparecerão como tínhamos falado nas seções anteriores. Então vamos para cima para filtros de luz e sombra sombra e, em seguida, ajustar para combinar com suas outras seções. Ou pelo menos chegar perto porque ainda não se lembra do que usei. Eu acho que foi algo assim e, em seguida, para a minha opacidade era 1.6 Agora nós podemos voltar para a camada e cortar para o conteúdo novamente e ligar o seu círculo de imagem. Certo, vamos colocar nossa imagem dentro desse círculo. Agora vamos pegar eventos ao vivo e movê-los para o topo, e também usar sua ferramenta de movimentação para movê-los sobre esse círculo. Agora eu quero compor essa imagem de uma certa maneira para que o primeiro plano esteja no centro do círculo. Bem, é meio difícil determinar como fazer isso quando não podemos ver o nosso círculo. Mas se clicarmos no círculo, vemos o limite da camada e, em seguida, com escolher uma camada ou guia selecionado com a nossa ferramenta de movimento, podemos clicar na imagem e, em seguida, posicioná-la dentro do limite da camada que podemos ver. Assim que soltarmos. Ele vai desaparecer, e não podemos mais determinar a composição a menos que clicemos no círculo da imagem e recomeçemos. Eu vou com isso. Por mim tudo bem. Agora vou pegar minha seleção fuzzy. Você garantirá que o círculo da imagem esteja selecionado e clique no centro para fazer uma seleção para essa forma. Vamos em frente e inverter a seleção de volta para eventos ao vivo. Adicione uma máscara de camada com branco, certifique-se de que o preto está definido para o fundo e, em seguida, pressione delete ou sua tecla backspace e boom ! Sua imagem agora está confinada a essa forma. Quão legal é isso? Eu adoro isso. Tudo bem. Isso é bastante incrível. Tudo bem, vamos em frente e ir para Círculo de Imagens e criar um novo grupo de camadas chamado Círculos. Vamos colocar os dois dentro, e agora tudo o que temos de fazer é duplicar isto três vezes para as outras imagens. Eu vou pegar minha ferramenta de movimento, mover o lier ativo, e eu vou movê-lo para a extrema direita, e eu também preciso mover essa camada de grupo para o fundo para que eu tenha tudo na ordem correta. Vamos fazer este 3º 1 e então este será o 2º 1 e vamos mudar o nome destes círculos um a quatro. Agora vamos em frente e criar um novo grupo de camadas para eventos ao vivo e círculos. Vamos chamá-lo de Imagem 1, e vamos em frente e ativar nossas guias, e então vamos mover essa camada de grupo para que ela se alinhe à esquerda da primeira coluna . Então deve ser bom por enquanto. E então vamos pegar nossos outros círculos e colocá-los onde deveriam estar. E este deve estar na quarta coluna ao longo do lado esquerdo. E vamos em frente e colocar estes em posição também. Agora vamos mover nossas imagens para a posição de acordo com o seu círculo. Vou desligar todos os círculos que ainda não foram trabalhados, e vamos limitar nossa imagem a essa forma. Agora vamos selecionar o círculo um seleto, escolher uma camada nossa guia e, em seguida, mover sua imagem para o lugar. Agora só precisamos pegar nossaferramenta fuzzy, selecionar, ferramenta fuzzy, selecionar, fazer uma seleção em verdejante e, em seguida, adicionar uma máscara de camada para a imagem excluir ou backspace chave e, em seguida, a seleção. Certo, então só precisamos repetir isso mais duas vezes. Ok, vamos em frente e adicionar alguns novos grupos de camadas para cada um desses círculos. Agora, com a nossa ferramenta Lehman, vamos alinhá-los todos ao topo. Então, selecione a sua tecla 1 shift e clique nas outras. Primeiro item ainda e uma linha para o topo. Certo, então ainda temos muito mais a fazer. Precisamos adicionar nossos títulos em nossos parágrafos, mas os tutoriais estão ficando um pouco longos. Então vamos em frente e continuar o resto desta seção no próximo tutorial. 48. Organismo 2: Olá e bem-vindo de volta. Certo, vamos em frente e terminar esta parte do nosso corpo. Vamos adicionar algum conteúdo, um alinhamento de fundo, tudo organizado, são camadas e será bom para ir. Então vamos em frente e começar com nossa ferramenta de texto. E vamos mudar o funt. Vou torná-lo ousado e vamos fazer 24 para o tamanho. E eu quero a cor azul escuro para essas manchetes. Então vamos em frente e datilografá-los. Agora, se eu apertar minha tecla de escape, ele vai me tirar dessa caixa de texto e então eu posso ir em frente e pegar outra ferramenta sem adicionar esse atalho específico para a caixa de texto. Tudo bem, vamos Paul todas essas camadas para fora. Vamos também organizá-los para que eles estejam na ordem correta. E então vamos em frente e girar nossa grade novamente e usar nossa ferramenta de seleção de retângulo e nossa ferramenta de alinhamento para alinhá-la ao centro dessas três colunas. Vamos em frente e desligar nossa seção de herói e cabeçalho também, que possamos ir em frente e alinhar isso e precisamos ajustá-lo de volta para seleção e, em seguida, um centro de linha de alvo. Vamos em frente e fazer o mesmo para as outras três manchetes também. Tudo bem, vamos em frente e pegar cada uma das camadas. Vamos fazer em sua nave, K selecionar todos os quatro e depois uma linha para o topo. Vamos em frente e colocá-los em um novo grupo de camadas, bem chamado de manchetes. Eu vou ir em frente e agarrá-lo também, então eu posso apenas movê-lo um pouco para cima, só quero ampliar. Então o que eu quero fazer é eu só quero mover isso para cima sem movê-lo para longe de onde deveria estar. Então ele ainda está centrado entre as colunas. Vou adicionar um guia aqui. Desta forma, eu posso apenas colocá-lo ao longo deste guia. Tudo bem? Eu posso ir em frente e remover esse cara agora porque eu não preciso mais dele, pelo menos por enquanto. Então, para o nosso parágrafo, nós só vamos pegar um texto falso. Não precisamos de muita coisa. Eu só vou pegar algumas linhas aqui, copiá-lo, copiá-lo, e então com minha ferramenta de texto, eu vou criar uma caixa de texto e, em seguida, apenas colá-lo dentro Também precisamos mudar a fonte em si. Então eu vou selecionar tudo e mudá-lo para Georgia 12 para o tamanho, e então vamos usar a cor cinza escuro que usamos anteriormente. Eu só vou trazer isso um pouco para que ele se alinhe com o nosso texto aqui e aqui. E, em seguida, em nossas opções de ferramenta, podemos selecionar justificado para a esquerda e para a direita para preenchê-lo. Só vou aumentar em ambos os lados um pouco. E agora tudo é a linha ali. Tudo bem, vamos sair de lá apertando nossa tecla de escape, e vamos em frente, diminuir o zoom e duplicar este parágrafo três vezes. Vamos tirá-lo do grupo de manchetes e ir em frente e duplicá-lo e depois movê-los para cima. Vamos em frente e voltar a ligar a nossa grelha. E a linha são parágrafos para o centro dessas três colunas, assim como fizemos antes. Tudo bem, vamos manter pressionada a tecla Shift e selecionar todas as camadas para que possamos alinhá-las ao topo. Vamos em frente e colocá-los em ordem e, em seguida, renomeá-los de parágrafo um a quatro. Tudo bem, precisamos adicionar um pouco de espaço entre os parágrafos e nossas imagens aqui. Então vamos em frente e medir a distância entre aqui e aqui. Então eu tenho 21 pixels. Vou adicionar a mesma quantidade de espaço aqui, vamos e seu guia. E então podemos pegar nossas imagens aqui. Vamos colocar os quatro num novo grupo de camadas, está bem? Nós só temos algumas coisas para fazer, e isso é organizar nossas camadas um pouco. E então precisamos pegar todo esse conteúdo e alinhá-lo diretamente no centro de nossos serviços de fundo de cima para baixo. Vamos em frente e pegar nossa camada de descanso par e criar um novo grupo anterior para colocar tudo dentro dele era chamado de Serviços Corporais e então vamos colocar todo esse conteúdo dentro, exceto o fundo dos serviços. Vamos deixar isso de fora por um momento. Agora, a fim de alinhar isso, se selecionarmos esta camada de serviços de corpo, você vai notar o limite da camada e podemos ver que há muito espaço em branco ou espaço vazio aqui, e há Nenhum no topo. Então, quando formos alinhar isso com nossa ferramenta de alinhamento, ela não vai centrá-la perfeitamente no meio do nosso alvo. Por causa deste espaço extra, haverá mais espaço no cabelo do que aqui em cima. Então, como você sabe, o que podemos fazer é cortar o limite da camada para caber logo abaixo de nossas imagens aqui. O único problema é que, como você sabe, ele vai cortar essa sombra, e então quando você vai aumentar o limite da camada, as sombras não voltarão. Então, efeito, quando você corta, ele vai apagar o fundo das sombras. E nós não queremos isso porque isso vai remover esse efeito visual. Então aqui está como vamos contornar isso. Vamos continuar e duplicar este jogador do grupo e desligar o original. Então agora podemos ir para esta camada de grupo e encontrar todas as camadas que são muito altas e, em seguida cortar o conteúdo para a parte inferior dos círculos, e então podemos usar o alinhamento do dedo da ferramenta de alinhamento, cima para baixo. E então podemos pegar nossa camada de outros grupos, ligá-lo novamente e movê-lo manualmente para a posição e ele será alinhado perfeitamente. Então você só tem um pouco de trabalho a fazer. Vamos entrar daqui. Vamos encontrar as nossas imagens. Vamos para o 1º 1 e vamos eleger nosso círculo inferior e podemos ver que o limite da camada está abaixo do círculo. Agora, se formos até a camada e selecionarmos o conteúdo recortado, vamos receber uma mensagem. Mas dizer que já está cortado ao seu conteúdo. E isso é por causa dessa sombra, as sombras realmente sendo emplumadas até a borda bem aqui. Então o que precisamos fazer é definir manualmente o limite da camada para a borda do círculo em si. E podemos fazer isso com nossa ferramenta de seleção de retângulos. E eu não estou realmente preocupado com os lados. Então eu vou apenas começar aqui e trazer para baixo a seleção para a parte inferior desse círculo, e então nós podemos ir para a camada e selecionar cortar para seleção de selecionar e agora nós temos exatamente onde queremos. Então precisamos fazer isso para cada um dos círculos. Então vamos para os outros grupos de três camadas e fazer a mesma coisa. Ok, vamos em frente e desligar nossa seção de heróis aqui se você está ligado e parece que nós reduzimos a quantidade de espaço. Mas ainda temos algum espaço lá, e isso é provavelmente por causa das imagens ou dos outros círculos. Então vamos voltar para dentro deles e clicar em cada camada, para que pareça que a camada de imagem é um pouco mais baixa lá. Esse círculo é bom, então vamos em frente e fazer a mesma coisa para cada uma das imagens também. Tudo bem, vamos em frente e pegar nossas ferramentas de seleção de retângulos para que possamos fazer uma seleção a altura do nosso fundo. Agora lembre-se, não podemos selecionar o plano de fundo dos serviços porque o limite da camada é muito alto, e se o cortarmos novamente, vamos excluir essa sombra. Então, é mais fácil fazer uma seleção e então usar nossa ferramenta coxa. Pegue em relação à seleção e, em seguida, uma linha no meio do Alvo K. Vá em frente e selecione Ativar sua outra camada de grupo e, em seguida, com sua ferramenta de movimentação. Basta ir em frente e clicar sobre ele e, em seguida, usar as teclas de seta para movê-lo para baixo. Vamos apagar os serviços corporais. Copiar e boom. Agora está perfeitamente alinhado de cima para baixo. Quão legal é isso? Certo, então esse é o seu trabalho para situações como essa. E só precisamos colocar nossa camada de fundo de serviços dentro dessa camada de grupo, e terminamos com essa seção do corpo dela. Parabéns. Tudo bem. No próximo tutorial, vamos começar a trabalhar na parte de amostras de áudio do corpo. 49. Parte 1: Olá e bem-vindo de volta. Então a próxima parte do nosso projeto é criar a seção de amostras de áudio e vídeo, e temos muito trabalho a fazer. Então provavelmente vamos dividir isso em três, talvez quatro palestras diferentes. E neste tutorial, vamos seguir em frente e começar a pegar nossas imagens, talvez fazer alguns botões em algum texto e, em seguida, no próximo tutorial, começaremos a juntar tudo. Então vamos em frente e começar criando nossa manchete inicial para esta seção. Vamos mudar a fonte para placa de cobre e o tamanho em 48 então a cor azul escuro é bom para isso também. E então vá em frente e digite o seguinte. Vou selecionar tudo e torná-lo ousado também. Não estou preocupado em me alinhar agora. Vamos em frente e fazer isso no próximo tutorial, então eu só vou movê-lo aqui por enquanto. A outra coisa que precisamos fazer é aumentar o tamanho da tela porque estamos ficando sem espaço. Então vamos até o tamanho da tela de imagem e vamos torná-la 5000 para a altura, certifique-se de que ela está desbloqueada e clique em redimensionar. Então a outra coisa que eu preciso fazer é pegar minha camada de fundo aqui, pressionar a letra D do que a letra X que nos dá branco para o primeiro plano e, em seguida, com nossa ferramenta de preenchimento de balde, nossa ferramenta de preenchimento de balde, podemos preenchê-lo. Mas primeiro precisamos ir para a camada e selecionar camada para o tamanho da imagem para alterar o limite do atraso . E agora podemos ir em frente e preencher isso com peso. Vamos em frente e criar nosso plano de fundo para nossa seção de áudio. Então, na seção de áudio, nós realmente temos que fundos porque nós temos uma sombra separando a lista de reprodução superior da lista de reprodução inferior. Então vamos criar duas formas para o fundo. Então pegue o seu retângulo selecionável e certifique-se de ter corrigido desligado e, em seguida, basta clicar para fora e desenhar uma forma porque nós vamos fazer um tamanho personalizado de 11 76 por 830, em seguida com comando ou controle e a letra C. Nós vamos certifique-se de que sua camada de fundo ainda está selecionada e, em seguida, comando ou controle, e a letra V para colá-la corretamente. Clique na sua seleção flutuante aqui e selecione a nova camada. Ok, eu vou usar minha ferramenta de movimento para movê-la um pouco para cima. E eu também quero mudar o limite da camada para ajustar a imagem porque precisamos adicionar uma sombra . Então vamos para a camada dois, tamanho da imagem. Vamos em frente e fazer nossos filtros de sombra de drogas, Layton Shadow e drop shadow. Tudo bem, vamos fazer outra caixa para a parte superior da lista de reprodução. Então, de volta ao retângulo selecionável. E desta vez vamos fazer 11. 76 para o com e 360 para a altura. Vamos nos certificar de que temos nossa seleção dentro de nosso documento. Volte para a cópia da camada de fundo e cole novamente e, em seguida, clique com o botão direito do mouse para nova camada. Aumente o tamanho do limite da camada novamente e adicione uma sombra à camada. Vamos também mover essa camada acima da outra camada e vamos renomear esses fundo da lista de reprodução superior como plano de fundo de amostra de áudio. Podemos ir em frente e pegar este top e movê-lo para cima. Agora você pode notar que a sombra é muito mais escura aqui, aqui e aqui comparado a aqui nessas áreas. E isso é porque estamos colocando outra sombra em cima de outra sombra, então ela fica mais escura. Então vamos em frente e consertar isso. Vamos pegar nossa ferramenta de seleção de retângulo e fazer uma seleção. Preciso ter certeza de que estou sofrendo a maior dor daquela sombra. Por isso, está mesmo por cima. E, em seguida, vamos criar uma máscara de camada branca, certifique-se de que preto está definido para o plano de fundo e, em seguida, excluir ou backspace chave. Então, isso remove a sombra de queda dos lados. Nós ainda temos um pouco mais aqui, então nós vamos ir em frente e Graham são ferramenta de seleção de formigamento direito aqui novamente para ir ao longo dos sinais e, em seguida, vamos excluí-lo de lá também. E, em seguida, a mesma coisa do lado. Ok, nós temos nossas sombras em nosso conjunto de fundo. Vamos em frente e pegar algumas imagens. Então, a primeira coisa que vamos fazer é fazer uma pesquisa no Google por um logotipo de nuvem de som. Eu vou selecionar este aqui é 300 por 300 é um arquivo PNG, então certifique-se de que você tem um arquivo PNG e, em seguida, clique com o botão direito sobre a imagem, copiou a imagem e, em seguida, vá em frente e cole-a com Commander Control e a letra V e , em seguida, no seleção flutuante, selecione para nova camada. E então recebemos uma pequena mensagem aérea dizendo que ela pertence à camada de massa porque foi isso que eu tinha selecionado antes de eu colar. Então não queremos fazer isso. E eu só queria te mostrar que no caso de você ter esse problema agora ou no futuro, vou desfazer isso com o Controle do Comandante e as cartas. R. Então, ao colar da área de transferência, você não quer ter uma máscara de camada ou qualquer camada menor do limite da camada do que o item em que você está colando. Então a melhor coisa a fazer é pegar sua camada de fundo porque ela tem um limite de camada muito maior do que a nossa imagem. E então nós podemos acelerar isso e adicioná-lo a uma nova camada, e então nós só precisamos mover essa camada acima de tudo o resto para que possamos vê-la. Vamos renomear este logotipo e vamos em frente e movê-lo aqui para cima, certo? Vamos apenas pegar todas as nossas imagens, e então vamos escalá-las em apenas um minuto. Ou talvez no próximo tutorial, veremos quanto tempo este tutorial dura. Tudo bem, vamos em frente e pegar seis imagens. Nós vamos para Soundcloud dot com forward slash seaside dash audio, e então nós vamos rolar para baixo apenas um pouco. E para a primeira imagem, vamos selecionar esta. O único problema é que quando clicamos com o botão direito, não há opção para copiar essa imagem. Então deixe-me mostrar-lhe como você ainda pode obter esta imagem mesmo que ela não esteja disponível neste menu . Aqui em baixo temos um item que diz Inspecionar. Acredito que já falamos sobre isso antes. Na maioria dos navegadores modernos terá essa opção. E se você não fizer isso, você precisa datar seu navegador ou usar um navegador diferente. Então, esta opção está disponível no Firefox chrome e safari, e eu estou usando o Chrome no momento. Depois de selecionar isso, ele irá destacar o código para o item em que você clicou com o botão direito do mouse. E depois aqui, na coluna da direita. Você vai ver uma opção para a imagem de fundo, que é esta imagem bem aqui. Então, se eu desligar isso, podemos ver que a imagem desaparece. E então temos uma URL bem aqui que nos levará a esta imagem. Então basta copiar o URL e, em seguida, colá-lo em uma nova guia, e então você terá acesso a essa imagem. Então vá em frente e copie a imagem. Vamos voltar para a camada de fundo e colá-lo e, em seguida, adicionar duas novas camadas. Agora, só precisamos pegar mais cinco imagens, e realmente não importa quais imagens você tenha. Qualquer um destes vai funcionar. Vamos apenas clicar com o botão direito, inspecionar. E então nós só precisamos obter o URL. E você também pode apenas clicar com o botão direito do mouse e selecionar copiar o endereço do link e colá-lo. Então vá em frente, baixe mais cinco imagens, Adam para o seu documento, e então continuaremos adicionando mais algumas informações. E eu vou acelerar essa parte do tutorial para que você não tenha que me ver fazer isso e câmera lenta. - Está bem . Eu fui em frente e renomeei cada uma das imagens também. 01 imagem através de 06 imagem. Então, se você ainda não fez isso, vá em frente e faça isso. E então eu vou apenas mover estes para o lado esquerdo aqui. E então eu quero pegar minha ferramenta de texto para que possamos começar a adicionar algum conteúdo para cada uma das imagens. E vamos mudar o fundo para a Geórgia. Na verdade, vamos usar essa fonte em vez disso. E para o tamanho que vamos fazer 18 e, em seguida, são de cor cinza escuro. Então vamos voltar ao nosso site aqui, e vamos apenas copiar algumas dessas linhas aqui. Então copie essa informação e cole-a com seu texto e copie mais cinco linhas de conteúdo e cole-a. Vamos ir em frente e colocar estes na ordem adequada, bem como, em seguida, vamos renomeá-los um conteúdo um através de 05 conteúdo. Vamos em frente e criar algum conteúdo aparecer e pegar nossa imagem de forma de onda, e então vamos continuar com esta lição no próximo tutorial. Eu acho que para este vai torná-lo um pouco maior Vamos fazer 24. E eu também quero pegar nossa segunda linha e selecionar apenas isso e mudá-la para nossa cor azul escuro . Certo, então a última coisa é pegar uma forma, vamos voltar para o topo aqui. E então o que queremos fazer é começar a tocar esta lista de reprodução para que possamos ver o temporizador e a cor laranja chegando. Então eu só vou fazer por cinco segundos, e então eu vou pegar meu software de captura de tela, que está embutido no Mac, e então eu vou apenas fazer uma seleção em torno dele, capturá-lo, e então eu vou trazê-lo para o meu documento. Então, basta ir em frente e usar qualquer software de captura de tela que você usa captura dessa forma, imagem de formulário, e, em seguida, trazê-lo e vamos renomeá-lo forma forma. Tudo bem, então ainda temos muito o que fazer. Precisamos organizar nossas camadas. Precisamos criar botões, e vamos continuar e começar a trabalhar em alguns desses no próximo tutorial. 50. Body de corpo 2: Agora que temos todas as nossas imagens e nosso conteúdo, vamos redimensionar as imagens e mover tudo para a posição. Vamos em frente e desligar essas camadas de três grupos, e então vamos selecionar o documento inteiro com comando ou controle e a letra A que possamos alinhar nosso título no centro do nosso documento Pode d selecionar. Agora vamos pegar nosso logotipo e torná-lo menor. Então pegue sua balança, mudança de ferramenta mais s e vamos fazer 100 para a altura e então apenas movê-lo de volta aqui para o topo, certo? Isto vai mudar este, e eu também quero aumentar o tamanho da nossa forma de forma. Então mude Plus s novamente, e eu só vou preencher o máximo da área aqui é que eu posso tão certo sobre deve ser bom. Vou em frente e fazer uma seleção em torno do meu formulário de modo que eu possa fazer esse limite de camada mais apertado para a imagem real. Então eu estou mais preocupado com o lado inferior e direito contra o esquerdo no topo. Então eu vou para lá e depois para baixo. Nós vamos selecionar cortar para seleção De Select e eu quero alinhar isso para a parte inferior da nossa imagem e eu vou colocar ambos em uma nova camada de grupo. Vamos em frente e selecionar tudo novamente para que possamos alinhar isso ao centro do nosso documento. Agora podemos ver que há um pouco mais de espaço neste lado vs este lado, e isso é porque nossas imagens de fundo precisam ser alinhadas ao centro também. Então vamos em frente e de select, e vamos fazer isso em seguida. Então eu não quero Teoh aliando a camada com uma máscara de camada porque nós não vamos ser capazes soltar o limite da camada para baixo para esse plano de fundo. Então vamos pegar nosso fundo de amostra de áudio o maior primeiro, e então vamos subir para cortar a camada do conteúdo e agora podemos usar nossa ferramenta de alinhamento para alinhá-lo ao centro do documento. E então vamos mover o outro manualmente. Então vamos em frente e desligue essa camada para que possamos selecionar este selecione tudo novamente e em seguida, de select pode ir em frente e agarrar este. Vou ampliar aqui para poder dar uma olhada. E então eu vou apenas usar minha tecla de seta para a direita para movê-lo sobre o comando que direita ou controle em zero para zoom para fora para a interface. Então nós precisamos fazer um botão aqui em cima, bem como alguns botões próprios aqui. Mas vamos em frente e corrigir essas imagens e o conteúdo primeiro. Então vamos pegar cada uma dessas imagens e reduzi-las para uma altura de 60. Vamos em frente e colocar sua imagem superior dentro, bem como nossa inferior, e então vamos alinhá-los todos à esquerda e distribuir o espaço uniformemente. Eu preciso ir em frente e desligar minha máscara de camada aqui está bem, então eu posso selecioná-los. Bem, Daniel, tecla Shift e selecione cada imagem. Certo, vamos para uma linha à esquerda. Agora vamos em frente e distribuir o espaço entre eles no deslocamento. Por quê? Vamos digitar 90 e selecionar esta opção aqui para distribuir centros verticais. E agora temos uma quantidade igual de espaço entre todos eles agora. Você pode se lembrar anteriormente quando estávamos trabalhando em nossos logotipos, não fomos capazes de fazer isso porque o tamanho dessas camadas era diferente um do outro . Mas quando as camadas são todas do mesmo tamanho, ele distribuirá uniformemente a quantidade de espaço. Ok, vamos em frente e pegar nosso conteúdo e movê-los para a posição, junto com uma das imagens que ele corresponde. Vamos também colocar o nosso logotipo dentro das imagens superiores também. Certo, agora vamos pegar nosso conteúdo e alinhá-lo ao centro de nossas imagens. Pegue sua ferramenta de seleção de retângulo, faça uma seleção e, em seguida, vamos alinhar meio do alvo. Então vamos fazer isso para todas as camadas diferentes. Em seguida , vamosaliar todo esse conteúdo à esquerda, então,ferramenta de alinhamento, porcaria. vamos Em seguida , , aliar todo esse conteúdo à esquerda, então, ferramenta de alinhamento, E, em seguida, clique em cada uma das linhas. Está mudando de volta para o primeiro item e uma linha esquerda. Tudo bem, vamos pegar todo esse conteúdo que acabamos de trabalhar e criar um novo grupo de camadas para ele chamado conteúdo inferior. Vá em frente e pegue isso e mova aqui para a direita um pouco. Então, temos espaço para os nossos botões. E eu também quero fazer uma seleção para alinhar todo esse conteúdo diretamente no meio dessa seleção. E apenas certifique-se de desativar a lista de reprodução superior novamente para que você possa selecionar esse conteúdo, alterá-lo novamente para seleção e, em seguida, alinhar o meio dos alvos. Então, de select, ligue este de volta. Vamos dar uma olhada rápida aqui. Ok, então estamos quase terminando. Nós só precisamos criar nossos botões e alinhar mais alguns elementos e organizar nossas camadas um pouco mais, mas vamos fazer isso na próxima lição. 51. Parte de áudio 3: Certo, estamos quase terminando. Vamos em frente e criar algumas camadas organizadoras de botões, e então veremos se ainda temos algo para fazer. Então vamos em frente e criar nosso primeiro botão, aparecer no topo e vamos pegar nossa ferramenta Elipse, e vamos criar um botão que é 60 por 60. Vamos pegar nossa cor azul escuro e depois preenchê-lo com nossa lã de filtro balde. Mas primeiro temos que criar uma nova camada. Vamos chamá-lo de botão superior. Preencha na seleção. Tudo bem, vamos em frente e criar nosso ícone de patas. Vamos pegar nossa ferramenta de seleção de retângulo E dentro daqui eu vou apenas desenhar um retângulo, e nós também precisamos criar uma nova camada chamada Pausa Ícone. Vamos pegar nosso balde, encher a ferramenta e preenchê-lo com White. Vá em frente e de selecione. Vamos pegar esse ícone e duplicá-lo. E então, com o movimento informado, vamos apenas movê-lo para aqui para a direita, apenas para dar-lhe um pouco de espaço e entre e, em seguida, para a direita, clique no ícone de pausa superior e selecione mesclar para baixo. Certo, tem o ícone de pausa. Vamos em frente e cortar o conteúdo para esta camada e o botão superior. E então vamos em frente e colocá-los em um novo grupo de camadas chamado botão superior. Tudo bem, vamos em frente e pegar isso para que possamos ir em frente e colocá-lo em posição. Vamos em frente e alinhá-lo à esquerda do nosso formulário de caminho, que está bem ali. Então isso parece bom e, em seguida, o topo da imagem. Então eu vou usar minha ferramenta de movimento e movê-la para cima para que ela se alinhe com o topo lá. Eu também preciso pegar meu conteúdo aqui e, em seguida, movê-lo para baixo para que ele se alinhe para o topo também . Vamos em frente e criar um novo grupo de camadas para esse conteúdo aqui. Vamos chamá-lo Top playlist. Eu também vou pegar meu logotipo e tirá-lo dessa camada de grupo para que possamos selecionar este conteúdo e alinhá-lo à parte superior e inferior do plano de fundo. Então vamos fazer isso fazendo nossa seleção e então, com sua ferramenta de alinhamento, vamos alinhar meio do alvo. Eu também vou pegar meu logotipo e eu só quero movê-lo um pouco para cima. Só vou usar minhas setas. Então, bem ali. E então poderíamos colocar isso de volta no grupo mais cedo. Andy Select. Vamos em frente e criar um novo grupo de camadas para esta seção. E vamos chamá-lo de amostras de áudio. Ok, nós vamos terminar o resto do nosso conteúdo aqui, e então nós vamos colocar essas camadas dentro dele. Tudo bem, vamos em frente e criar nossos botões para nossa lista de reprodução inferior agora e assim como antes, vamos começar com nossa ferramenta Elipse e vamos torná-la do mesmo tamanho, que era 60 por 60. Vamos criar uma nova camada chamada o botão e, em seguida, pegar sua cor azul escuro e preenchê-lo em de select para que possamos vê-lo agora. E isso porque está abaixo de algumas das outras camadas aqui também. Certo, vamos ampliar um pouco. Vamos em frente e alinhá-lo ao topo desta imagem, que fique muito bem ali. Vamos em frente. Desligue os guias. Agora vamos fazer uma pequena flecha por dentro. Isso está apontando para a direita. Então, vamos mudar nossa cor de primeiro plano do dedo do pé branco e, em seguida, com nossa ferramenta de seleção de retângulo , podemos fazer uma forma quadrada. Então vamos fazer 30 por 30. E vamos criar uma nova camada chamada Arrow Não parece um ainda, mas ele vai e então vá em frente e preencha isso com branco e de select. Agora vamos até o conteúdo de camada e corte, e agora estamos prontos para girar. Então vamos pegar nossa ferramenta de rotação aqui, e uma vez que clicarmos nela, podemos então clicar e arrastar para girar a partir daqui. Podemos usar este isqueiro aqui em cima ou enfraquecer tipo em um ângulo específico, e eu quero 45 para os ângulos tão apertados que em clique girar Agora nós só precisamos cortar parte da nossa forma de diamante para torná-lo mais parecido com uma seta. Então nós vamos Graham são ferramenta elipse e criar uma forma oval tipo e, em seguida, apenas colocá-lo sobre a forma de diamante. Então você tem uma idéia de como vai ser. Vamos criar uma nova camada chamada recortar e, em seguida, basta preenchê-lo com qualquer cor. Vá em frente e de select e crie um novo grupo anterior chamado Seta. E depois vamos tirar o corte e o ar mais cedo e colocá-lo lá dentro. E agora podemos levar essa camada cortada para, bem, bem, cortar essa forma usando nossos modos de mesclagem e selecionando uma corrida. Ok, vamos em frente e agarrar nossa flecha e apenas centralizá-la manualmente para a direita sobre sua aparência boa. E agora vamos criar um novo grupo de camadas para ele chamado botão pairar. E isso porque os outros botões que não estão sendo pairados serão um tom diferente de azul. Agora só precisamos duplicar esse botão quatro vezes. Mas primeiro, vamos em frente e organizar algumas dessas outras camadas antes de começarmos a adicionar Mawr ao nosso painel de camadas porque ele está ficando um pouco lotado agora. Vou mover esta camada para o topo, que é seguida por nossas amostras de áudio. Temos uma lista de reprodução superior e uma lista de reprodução inferior, então vou colocar isso dentro de vez em quando. Também temos alguns fundos aqui que podemos colocar dentro de cada grupo de camadas. Então vamos em frente e aqueles dentro. Tudo bem. Então isso ajudou a limpar nosso painel de camadas um pouco. Vá em frente e mova meu botão sobre tudo o resto por enquanto, que possamos realmente vê-lo. E vamos continuar e duplicar essa camada uma vez. Arraste-o para baixo e, em seguida, com a nossa ferramenta de movimentação, vamos arrastar essa camada para baixo. Vamos ter certeza que é uma linha para o topo aqui, e vamos em frente e mudar a cor desse botão também. E vamos fazer isso simplesmente baixando a opacidade para cerca de 80. Agora, antes que eu esqueça. Vamos seguir em frente e pegar nosso botão de pairar e cortar o conteúdo. E vamos fazer isso para este botão também. E vamos mudar o nome do botão um. Vamos duplicá-lo, e então vamos em frente e movê-lo para a posição, e então vamos repetir isso mais duas vezes. Tudo bem, vamos ter certeza que tudo está alinhado corretamente. Vá em frente e adicione um guia aqui que se alinhe com esta imagem, apareça na parte superior, e então vamos pegar nossos botões e movê-los para a posição. Certo, acho que estamos quase terminando. Vamos em frente e pegar todos os nossos botões e colocá-los em um novo grupo de camadas chamado Botões. E é isso. Nossa seção de amostras de áudio agora está concluída, e estamos prontos para passar para a seção de amostra de vídeo, e vamos começar isso na próxima lição. Então, se você está pronto para fazer isso, bem, vamos fazê-lo. 52. Vídeo de corpo: Olá e bem-vindo de volta. Certo, vamos trabalhar na seção de amostras de vídeo, e precisamos de algumas imagens para começar. Então vamos para escolher Sabei Dot com e fazer uma busca por imagens de concertos ao vivo. Qualquer imagem serve. Então vá em frente e escolha um. Vou selecionar este, e vou baixar 12 80 por 8 53 Vá em frente e baixe isso e depois adicione aos seus documentos. Também precisamos ir às imagens do Google e fazer uma busca pelo YouTube, ícones da placa de vídeo e, em seguida, sob ferramentas. Eu selecionei meio para o tamanho e transparente este 1 800 por 800. Isso é um pouco grande demais, este ainda é muito grande. Mas acho que vamos em frente e começar com este, e eu vou ir em frente, copiar este e colá-lo no meu documento. E agora vamos em frente e renomear essas camadas e vamos também ir em frente e desativá-las momentaneamente, porque o que precisamos fazer primeiro é criar um plano de fundo para esta seção. Então eu realmente vou para cima para a nossa seção de áudio e selecionar este fundo aqui. Se você tiver escolher uma camada ou guia, ele irá selecionar essa camada de fundo quando você clicar sobre ela e, em seguida, ele irá abrir todas as camadas de grupo que ele está dentro e, em seguida, você parabéns e duplicado. E agora podemos apenas clicar e arrastar isso para fora e renomear seu Ir de volta aqui e fechar esta camada de grupo. E agora eu preciso voltar para mover a camada ativa para que eu possa clicar e arrastá-la para baixo na posição. Então deve ser bom, então isso torna muito mais fácil contra tentar criar um a partir do zero. Certo, vamos redimensionar nossa mudança de imagem do YouTube mais s para a ferramenta de escala. E então, quanto ao tamanho, vamos para 680 para a altura, e então eu tenho uma largura de 10 20. Se você escolheu uma imagem diferente, ela pode ser diferente no com, então você pode precisar entrar e recortá-la ou voltar e baixar esta imagem. Então eu vou escalar isso e apenas movê-lo para a posição aqui mesmo. Vamos em frente e centralizá-lo dentro deste fundo. Então, com nossa ferramenta de alinhamento, vamos em frente e selecionar o plano de fundo, realmente precisa desligar as amostras de áudio primeiro. Agora eu posso selecionar essa tecla shift, clicar na imagem e, em seguida, um centro de linha no meio do alvo. Ok, vamos em frente e adicionar alguns botões ao lado esquerdo e direito da imagem, o que representará uma maneira de navegar em dois vídeos diferentes que fazem parte da playlist. Então vamos voltar para o nosso grupo de amostras de áudio para camada, e vamos selecionar um desses botões. Então, vamos voltar à nossa ferramenta de movimentação, escolher uma guia de camada e clicar na parte inferior. Então eu vou ir em frente e pegar botão para e duplicado e puxá-lo para baixo, e eu realmente quero colocar isso abaixo da imagem do YouTube para que parte dele esteja escondida atrás dele. Então vou mudar o nome deste botão, certo? Vou duplicar e depois chamá-lo de botão esquerdo. Certo, de volta para mover a camada ativa. Vamos colocar o botão esquerdo aqui e depois o botão direito aqui. Vamos fechar isto. Tudo bem, então precisamos ir em frente e redimensionar esses botões e torná-los maiores. Então pegue o botão esquerdo mais s e vamos torná-lo 90 para a altura e a largura e em seguida, o mesmo para o botão direito. Ok, vamos em frente e colocar isso em posição. Eu realmente quero centralizar esses botões de cima para baixo com o fundo, então eu vou pegar minha ferramenta de alinhamento novamente e vamos desligar amostras de áudio. Então, como a mudança de fundo mais o botão e, em seguida, uma linha do meio do alvo, vamos fazer a mesma coisa para o nosso outro botão aqui. E a outra coisa que precisamos fazer é pegar este botão aqui, o esquerdo, e girá-lo horizontalmente, então ele está apontando na outra direção. Então, o que? Eles são camada de botão esquerdo selecionada. Vamos subir para camada, transformar e selecionar flip horizontal. Eu vou seguir em frente e clicar nesta camada também, para que eu possa mover a seta e o botão para a esquerda um pouco. Vamos ampliar e pegar nossa ferramenta de medição para que possamos medir a borda da parte externa do botão até a borda. da imagem para que possamos adicionar a mesma quantidade de espaço do outro lado também. Então parece 67 pixels. Vamos também pegar essa imagem e diminuir a opacidade, então não é tão intensa. O único problema é que temos parte de nossos botões aparecendo agora, o que é uma correção fácil com nossa ferramenta de seleção. Vou pegar minha ferramenta de seleção de retângulo e fazer uma seleção. Vamos ativar nossas guias porque temos um guia aqui que minha ferramenta de seleção de retângulo também está encaixando . Então eu só vou mover aquele cara para a direita, apenas um pouco para combinar onde a borda das imagens e vamos verificar o outro lado também . Então isso parece bom. Agora posso ir em frente e fazer minha seleção. Vamos pegar o nosso botão esquerdo e e uma máscara de camada e preto branco disse para o fundo, e, em seguida, excluir ou backspace tecla. Certo, vamos manter essa seleção. O peso é pegar o botão direito ea mesma máscara camada coisa e, em seguida, excluir ou backspace chave. Ok, então isso cuidou da parte do player de vídeo. Vamos em frente e encontrar o nosso botão de reprodução do YouTube e vamos em frente e reduzi-lo apenas um pouco à direita sobre lá deve ser bom, e então vamos em frente e alinhá-lo ao fundo. Ok, agora vamos em frente e criar nossos círculos que representam o número de vídeos na playlist. Vamos criar alguns com um círculo branco e um traço laranja, e depois outro com uma cor azul sólida representando o vídeo que está sendo reproduzido neste momento . Então vamos pegar nossa ferramenta Elipse e vamos desenhar um círculo e torná-lo 26 por 26. Vamos criar uma nova camada que vou chamar de círculo de playlist. Eu também quero selecionar a cor laranja do nosso cabeçalho. Vamos pegar nossa ferramenta conta-gotas e fazer uma seleção, então vou usar isso para preencher esse círculo em particular. Vamos de selecionar e vamos em frente e criar uma nova camada, e então vamos desenhar um círculo menor desta vez de 20 por 20. Vá em frente e preenchê-lo em de select. Também queremos pegar essas duas camadas e cortar o conteúdo. Certo, vamos usar nossa ferramenta de alinhamento, nova para selecionar ambos e um centro de linha e meio do alvo. E então, é claro, um novo grupo de camadas. Vamos continuar e duplicar isso quatro vezes. Vamos colocá-los na ordem correta. Vamos pegá-los e separá-los. Então eu chamo este círculo de cinco, porque vai ser o final. Vou colocar o 4º 1 aqui, que vai ser uma cor azul sólida. Assim, como antes, ler Graham são Ellipse Tool. Estamos indo para o tamanho 26 por 26. Vou criar uma nova camada. Então vamos selecionar nossa cor azul escuro e preenchê-lo com essa cor. Ok, vamos em frente e pegar esta camada. Pregue e corte o conteúdo e, em seguida, use sua ferramenta de alinhamento para selecionar todos eles para que possamos alinhá-los. Vamos selecionar um dedo do pé, inferior ou superior deitado . Qualquer um está bem, e então queremos distribuir e, em seguida, para o deslocamento que vamos definir. Por quê? Para zero e x toe 100. Vamos tentar isso. Eu acho que isso é um pouco demais, então eu vou descer para 65. Ok, eu gosto disso. Vamos em frente e colocar tudo isso em um novo grupo de camadas. Parece que está um pouco fora do centro. Então vamos em frente e agarrar essa camada de grupo. Selecione tudo. E então um centro deitado do alvo pode. Vamos em frente e de selecionar. E vamos dar uma olhada aqui. Precisamos limpar nossas camadas aqui um pouco. Então vamos em frente e criar um novo grupo de camadas para o player de vídeo e os botões. Certo, vamos mostrar o plano de fundo por um segundo porque precisamos alinhar todo esse conteúdo no centro do nosso plano de fundo. Neste momento, temos muito mais espaço aqui em cima contra aqui em baixo. Então vamos pegar essa camada de grupo aqui, e então usar sua ferramenta de alinhamento novamente para clicar no fundo e, em seguida, uma linha meio do alvo. E então vá em frente e coloque seus antecedentes lá também. Ok. Vou em frente e ligar nossas amostras de áudio também. Tudo bem? Eu acho que todos nós terminamos com as amostras de áudio e vídeo à beira-mar. No próximo tutorial, vamos seguir em frente e abordar as seções de contato, então, se você está pronto para isso, vamos fazê-lo 53. Contato para o corpo: Olá e bem-vindo de volta. Certo, vamos trabalhar em nossa seção de contato, e o que queremos fazer é adicionar um suborno. Queremos atrair os visitantes a dar-nos o seu endereço de e-mail. Agora, se eles realmente querem descobrir informações sobre a nossa empresa ou a empresa do seu cliente, então eles vão dar essa informação livremente. Mas algumas pessoas podem precisar de um empurrão extra ou de um incentivo para dar essa informação, porque ou elas não têm certeza se estão prontas para dar o próximo passo ou estão com medo de serem abrangentes porque foram enviadas muitas vezes por spam. Eu sei como isso se sente. Tenho certeza que você sabe como isso se sente também. Então, se eu soubesse soletrar, teríamos um suborno que ajudaria a seduzi-los a dar-nos essa informação. Portanto, queremos tornar o mais fácil possível entrar em contato conosco, mas também dar-lhes algo em troca. O site original não tinha isso. A única coisa que eles realmente tinham era nos contatar e nos deixar cair uma linha. Mas por quê? O que eu ganho com isso? Então eu sempre penso em termos do que está nele para a pessoa que visita o site. Que benefícios eles vão ter por fazer alguma coisa? Então a razão pela qual eu estou enfatizando isso é porque nós queremos não apenas dar aos nossos visitantes site de nossos clientes uma boa experiência de usuário. Também queremos ajudar o nosso cliente a obter mais endereços comerciais ou mais endereços de e-mail para que eles possam comercializá-los mais tarde. Então vamos em frente e criar nossa seção de contato. Não é nada extravagante ou extravagante. Não vai ganhar nenhum prêmio, mas é direto ao ponto. Conecte-se conosco para uma consulta gratuita ou algo de graça. Então vamos em frente e fazer isso. Na verdade, antes de começarmos a fazer a seção de contato, precisamos criar nosso plano de fundo para a seção anterior e colocar todo esse conteúdo em sua própria camada de grupo. Então vamos pegar nossa camada de fundo e nossa ferramenta de seleção de retângulos e fazer uma seleção para que possamos criar nossa cópia de fundo e colá-la, e então colocar a seleção flutuante em um novo anteriormente chamado áudio mais fundo de vídeo. Vamos também pegar o limite da camada e aumentar o tamanho selecionando o tamanho da imagem e, em seguida , ir para filtros, luz e sombra para criar a sombra para esse plano de fundo específico. Agora vamos em frente e criar um novo grupo de camadas chamado Audio Plus Video. Ok, agora que já fizemos isso, podemos ir em frente e criar nossa seção de contato. Então vamos em frente e começar com o nosso passado. Primeiro, vamos em frente e ligar nossas guias e vamos pegar nossa ferramenta de medição e desenhar 800 pixels de altura e , em seguida, com nossa ferramenta de seleção de retângulos novamente, podemos ir em frente e fazer uma seleção com base nesse tamanho. E então, assim como antes, copie colar defina-o para uma nova camada. Vamos subir para a camada e aumentar o limite da camada, e então vamos adicionar nossa sombra novamente. Vou mudar o nome do Contact Background. Tudo bem, estamos prontos para adicionar nosso conteúdo. Agora vamos em frente e Graham são ferramenta de texto para a frente. Vou fazer chapa de cobre. Vamos fazer 60 para o tamanho e são de cor azul escuro. Eu também vou definir muito ousado e, em seguida, para um suborno, nós vamos mudar a fonte. Vamos também fazer isso ousado. Eu também vou baixar a opacidade para cerca de 90 apenas para dar um pouco de separação do nosso título. E eu também quero fazer o texto com a mesma largura que o nosso título. Então vamos usar a opção de espaçamento. Eu só vou ir em frente e uma linha estes primeiro e depois com o nosso fim de semana têxtil, selecionar tudo e, em seguida, aumentar o espaçamento. Então isso parece muito perto para ir em frente e fazer 1.2, talvez um pouco mais. Tente 1.4 e 1.6. Ok, isso parece bom. Vamos em frente e colocar essas informações em um novo grupo de camadas. Ok, vamos avançar e mover esta informação para cima e, em seguida, alinhá-la com a ferramenta Lehman deles. Vamos selecionar tudo primeiro, e precisamos desligar nossas outras camadas aqui em cima. Certifique-se de que você tem a seleção selecionada e, em seguida, um centro deitado do alvo. Tudo bem, vamos em frente e criar o formulário. O prego foi a primeira vez na nossa grelha. Parece que precisamos aumentar o tamanho para que possamos realmente vê-lo com agarrar nossa ferramenta de escala e ter certeza de que ela está desbloqueada. E vamos fazer 5100 para a altura e nossos formulários serão cinco colunas de grade de largura. Vamos ter que estar no topo, e então teremos uma coluna disponível em cada lado, que nos dará uma forma simétrica diretamente no centro. Então vamos em frente e Graham são selecionáveis retângulos para que possamos criar nossa primeira linha de formulário. Vamos criar uma nova camada chamada nome, e no que diz respeito ao tamanho, vamos fazer as cinco colunas, e vamos fazer com que 50 pixels sejam portados. Então, 475 por 50. Vamos escolher uma cor cinza agradável e, em seguida, vá em frente e preenchê-lo em K d Select. Vamos duplicá-lo e renomear seu e-mail. Vamos também levar ambas as camadas e cortar para o conteúdo. Vamos mover o e-mail para a direita, apenas para ter certeza de que temos tudo alinhado para o topo, que fique bem. E então vamos criar o formulário de mensagem novamente com nossa ferramenta de retângulo, e vamos fazer 10 colunas de largura, e, em seguida, até a altura, vamos fazer 360. Crie uma nova camada chamada mensagem e preencha-a. Certo, quanto ao espaçamento. Vamos fazer uma quantidade igual de espaço entre estas duas colunas aqui e depois esta linha e a corda da mensagem. E parece que eu também preciso mover minhas duas rosas para cá ou para o pixel certo. Então eu vou selecionar escolher uma camada ou guia para que eu possa selecionar cada um individualmente e, em seguida, basta usar a minha tecla de seta para a direita para movê-lo. Agora vamos pegar nossa ferramenta de medição para que tenhamos 25 pixels lá. Vamos em frente e desenhar 25 pixels aqui em baixo. Vamos em frente e guia er, e então podemos mover esta estrada para cima. Só vou usar minhas setas. Lata perfeita. Não precisamos mais da rede. Vamos em frente e desligar isso e então vamos organizar essas camadas aqui. Qualquer grupo nuclear, chamaremos de forma. Vamos adicionar seus rótulos para cada parte do formulário e, em seguida, para os fundos estavam indo para fazer esta fonte aqui e vamos fazer 24 para o tamanho, e então nós vamos escolher a cor cinza escuro que temos vindo a usar em partes anteriores do projeto. Vá em frente e mexam-se. Nomeie até o topo e vamos digitar o nome aqui. Vamos torná-lo ousado. Em seguida, temos e-mail, e selecionando a camada que estava adicionando o texto irá criar essa nova camada acima dela , que apenas torna mais fácil, para que não tenhamos que nos preocupar em movê-la depois. Ok. Vamos apenas ir em frente e alinhar tudo agora. Ok, vamos fazer uma medição aqui para que possamos adicionar a mesma quantidade de espaço do outro lado. Então eu tenho 18 pixels. Então, mais 18 aqui. Certo, vamos alinhar isto para o centro da parte superior e inferior da fila. Então, o que? A ferramenta de seleção de retângulo permite que o caranguejo. Isso parece que vamos ter que mover estes para fora dessa camada de grupo para que possamos selecioná-lo e, em seguida, seleção e uma linha do meio do alvo pode. Vamos colocar isso de volta, fazer a mesma coisa com o nome. Vamos fazer uma medida para o topo desta parte. Então eu tenho 17 pixels. Então 17 pixels aqui para velas de mensagem. Coloque o nome de volta, e então nós vamos tomar o formulário, e eu vou movê-lo um pouco para cima. Ok, vá em frente e pegue seu retângulo selecionável. E para este botão, quero cantos arredondados como fizemos antes. E você pode se lembrar se vamos até selecionar enfraquecer, selecione retângulo arredondado a partir daqui. Mas também há uma opção dentro de nossas duas opções aqui diz cantos arredondados. E você tem que nos selecionar. Adicione seu raio antes de fazer sua seleção. Então vamos em frente e digite 20 para o raio. E então para o tamanho, vamos fazer 200 por 85. Eu vou usar a mesma cor laranja que eu usei anteriormente, e eu vou preencher isso em de select. Eu só quero ampliar, ter certeza de que tudo está alinhado corretamente aqui. Parece bom. E depois o quê? Sua ferramenta de texto irá em frente e mudar a fonte para ferrovia. Vou usar negrito. Vamos tentar 24 branco vai fazer isso maior. Vamos tentar 36 quando eu tentar 44. Vamos ver se cabe lá dentro. Eu só queria o maior possível sem ir muito perto das bordas. Tudo bem, então isso parece muito bom. Tudo bem, vamos em frente e pegar nossa ferramenta de alinhamento para que possamos nos alinhar. Envie diretamente no centro do botão. Mas primeiro precisamos pegar nossa camada de botão e cortar o conteúdo. E então podemos fazer nossas seleções com nossa ferramenta de alinhamento quando muda de volta para o primeiro item e, em seguida, um centro de linha de alvos e meio do alvo. Ok, então vamos em frente e criar um novo grupo de camadas novamente chamado Button. Vamos em frente e limpar o resto destas camadas aqui. Então outro novo grupo de camadas chamado Contato e é isso. Terminamos a seção de contato. Então, mais uma seção esquerda e esse é o rodapé. Vamos em frente e terminar isso no próximo tutorial. 54. Rodapé: Olá e bem-vindo de volta. Tudo bem, então o último passo para este projeto é fazer o rodapé. Vamos mantê-la real. Simples, limpo. Vamos apenas adicionar um aviso de direitos autorais. Alguns ícones de mídia social e ingredientes fundo para os ícones de mídia social Eu uso os que baixamos de uma lição anterior. Então vá em frente, encontre esses arquivos e traga-os para o seu documento. Eu fui em frente e colocá-los em uma ordem específica, e também renomeei cada uma das camadas representando esse ícone de mídia social em particular. Agora que você tem que configurar, vamos em frente e fazer o fundo Grady int, e nós vamos realmente ir até o nosso cabeçalho e fazer uma cópia deste fundo cabeçalho para que possamos usá-lo para o fundo do rodapé. Vamos em frente e renomear este fundo do rodapé e, em seguida, basta arrastar esta camada até a parte inferior, e, em seguida, com a sua ferramenta de movimento, você vai clicar no fundo para que você possa arrastá-lo para baixo para a parte inferior da tela . Agora, neste momento,vai demorar uma eternidade. neste momento, Então, se você tem um botão de esquilo no mouse. Você pode realmente usar isso para navegar até a parte inferior da página muito mais rápido. Então isso é algo que você tem que configurar nas preferências se você tiver um botão de rolagem. Então vamos em frente e colocar isso em posição. E nós temos um monte de espaço vazio agora, então vamos em frente no corte são tela para a parte inferior do rodapé, menos a sombra solta. Então, estou no 42. 21 e eu sei que porque eu coloquei meu cursor do mouse bem na parte inferior e aqui embaixo, ele nos diz a altura do nosso campus naquele ponto. Então, uma vez que você descobrir a altura, você precisa cortar para ir até a imagem e selecionar o tamanho da tela e digitá-lo. Tudo bem, eu vou em frente e cortar o limite da camada para esta camada em particular também. Agora ele está mostrando que está neste ponto bem aqui, e isso é por causa da sombra, e tudo bem. Nós realmente não precisamos fazer mais nada com o fundo, então nós vamos apenas deixá-lo aqui. Vamos em frente e fazer nosso aviso de direitos autorais, e então para a diversão, eu vou fazer a ferrovia negrito e eu vou definir para 12 e branco para a cor. Certo, vamos ligar nossos guias e alinhá-lo à extrema esquerda da grade. Vamos em frente e ligar nossas grades aqui, e parece que é esta linha aqui. Então é aí que eu quero alinhá-lo. E então vamos em frente e alinhá-lo. Tampa a parte inferior do fundo do rodapé também. E agora você já deve saber como fazer isso. Nós vamos Graham são ferramenta de alinhamento de ferramenta de seleção retângulo e, em seguida, uma linha para o meio de seleção do alvo. Ok, vamos de selecionar e vamos em frente e mais sobre os ícones de mídia social. E eu vou colocar o logotipo do YouTube todo o caminho aqui do lado direito. E então eu vou pegar os outros também. Vá em frente e desligue os caras. Não preciso disso agora. Tudo bem, pegue sua ferramenta de alinhamento para que você possa alinhar isso no topo. Vou mudar o deslocamento para 100 e parece que temos mais espaço aqui do que aqui e novo. Isso porque esse logotipo é maior. Precisamos compensar ainda mais o espaço aqui. Mas em vez de tentar descobrir isso manualmente com essas opções aqui, digitando números uma e outra vez até encontrarmos, é mais fácil pegar sua ferramenta de medição e fazer uma medição entre esses ícones aqui, que é 46. Para mim, o seu pode ser um pouco diferente. Isso é bom. E daqui até aqui, vamos para o 46, então precisamos mover tudo para a esquerda. Mas faremos isso em um segundo. Eu quero ir em frente e e uma sobreposição branca para este ícone. Então vamos pegar o Instagram e criar uma nova camada chamada Overlay. Vamos preenchê-lo com branco, e então precisamos mudar o modo de mistura da adição normal de dois. E então tivemos que colocar esses dois dentro de um novo grupo de camadas. Uma vez que fizermos isso, será então capaz de ver o nosso ícone em peso. Tudo bem, vamos em frente e pegar essas quatro camadas e colocá-las em um novo grupo de camadas chamado Ícones Sociais . Tudo bem, estamos quase terminando. Vamos em frente e mover tudo para a direita. Também precisamos cortar o conteúdo, e agora podemos alinhá-lo com nossa ferramenta de alinhamento por meio de nossa seleção. De selecionar. Vamos em frente e criar um novo grupo de camadas para o rodapé e é isso. Nosso Web design agora está feito, assim como fizemos no projeto anterior. Precisamos passar pelo nosso Web design e ver se há algo que possamos fazer para melhorar o design geral. Ou talvez cometemos alguns erros e precisamos corrigi-los antes de enviá-los para o cliente. Então vamos trabalhar nos ajustes finais deste projeto de Web design no próximo tutorial. 55. Tweaks: no geral, acho que melhoramos muito o site existente. Com o nosso novo design. É muito mais fácil de usar. É muito mais profissional. O conteúdo é mais fácil de ler. O layout geral é muito melhor do que o que eles têm em seu site original. Além disso, adicionamos algumas informações para ajudar as pessoas noivas a fim de enviar para obter informações adicionais e fornecer seu endereço de e-mail. E com o cabeçalho fixo, nós tornaríamos mais fácil para eles encontrar a próxima página de informações que eles precisam se eles não navegassem até ela a partir desta área aqui. E, claro, nós adicionamos alguma credibilidade com nosso banner de prova social bem aqui na seção de heróis. Então eu acho que no geral o design é muito melhor. Mas há alguns erros e coisas que precisamos fazer para ajustá-lo, para torná-lo ainda melhor. E basicamente é o espaçamento das diferentes seções não são consistentes. Temos aqui este elemento que não está devidamente centrado no fundo. Temos uma enorme quantidade de espaço em branco bem aqui. Não estou gostando disso. Esta área é desequilibrada e não é apenas um bom design. Poderíamos fazer coisas diferentes para melhorar. Um. Poderíamos criar duas colunas de amostras de áudio, ou poderíamos mover esse conteúdo e apresentar uma imagem grande aqui. Neste caso, esta imagem que estamos reproduzindo pode aparecer aqui para que você possa configurá-la, talvez para reproduzir automaticamente o primeiro vídeo uma vez que eles naveguem para essa seção e depois essa imagem , qualquer imagem que corresponda com esse áudio será exibida aqui . Mas se eles tiverem amostras de áudio suficientes, você pode fazer várias colunas versus uma, e isso preenche esse espaço vazio e equilibra tudo. A outra coisa que não fizemos foi adicionar nosso ícone de estado de foco que usamos aparecer no cabeçalho. Precisamos colocá-lo aqui e criar camadas agrupadas, indicando que isso é, de fato, um estado de pairamento. E quando você passar o mouse sobre algo, ele vai mudar para este tipo de um botão ou este botão de cor versus esses outros botões aqui em baixo. Então eu acho que todas essas pequenas coisas são coisas que você tem que ter em mente. Lembre-se de fazer para que o design geral da Web e layout sejam consistentes, e isso tornará suas páginas da Web muito melhores porque você está prestando atenção a esses pequenos detalhes. Queremos pixel perfeito. Queremos uma quantidade uniforme de espaço entre todas as seções e eu posso ver aqui que há mais espaço aqui em cima do que aqui em baixo. E precisamos entrar e medir o espaçamento entre cada seção e ajustar todo o conteúdo dentro dela de acordo. Então você pode me ver fazer isso ou B. Se você já passou e projetou tudo neste momento, você provavelmente já sabe como fazer isso para que você possa ir em frente e ajustar o centro de espaçamento tudo corretamente se você não fez isso já e você pode entrar e criar uma segunda coluna ou criar seu próprio conceito de design. No geral, este projeto é apenas para prática e novamente, como os outros projetos, você não pode usar esse design específico em seu portfólio. Então, a melhor coisa a fazer é passar por tudo isso e pensar para si mesmo, Como você pode fazer este design de página da Web ainda melhor? Este provavelmente não é o melhor Web design. Você provavelmente poderia inventar algo ainda melhor do que o que eu criei. e esse é o objetivo de criar. sites que são fáceis de usar vão gerar mais negócios para seus clientes e fornecer o melhor Web design geral possível com base em sua visão criativa. Não a minha visão criativa, a tua visão criativa. Você vai se inspirar no meu trabalho e em outros sites. E então você vai pegar essa inspiração e criar algo novo baseado na sua visão e criatividade. Então eu estou bastante confiante de que as 2 primeiras seções são perfeitas. Tudo deve estar perfeitamente alinhado no centro, porque eu me lembro especificamente de usar a ferramenta de alinhamento em cada um dos diferentes elementos. Então vamos em frente e dar uma olhada em nossa próxima seção, que é a primeira parte do nosso corpo. E eu acho que podemos realmente melhorar o design desta seção um pouco aumentando o comprimento de nossos parágrafos. Eu acho que eles estão muito curtos agora, e o texto é muito apertado e torna um pouco difícil de ler. Então precisamos aumentar o espaçamento entre cada linha. Então vamos em frente e fazer isso para este primeiro parágrafo aqui, e nós vamos apenas estender para a esquerda e direita da nossa imagem aqui. Então, através de três colunas de grade. E vamos em frente e copiar esta informação e colá-la em algumas vezes para preenchê-la. Vamos também voltar para as nossas opções de ferramentas aqui e aumentar as linhas basing. E eu vou fazer dois, talvez três, para o espaçamento. Um apertou minha chave de fuga para sair dela para que eu possa dar uma olhada em tudo aqui. E eu acho que isso é definitivamente ah, muito mais fácil de ler do que isso aqui. Por isso, queremos tornar o mais fácil possível para os visitantes lerem o nosso conteúdo. Caso contrário, eles vão pular por cima, seguir em frente, talvez até sair do site. Então vamos em frente e mudar as outras três colunas para combinar com esta também. Eu só vou pegar a caixa de texto aqui e movê-la um pouco para cima porque eu posso ver o topo da próxima linha um pouco. Então eu só quero me livrar disso. Então, vou apagar estes três parágrafos. Então eu vou pegar este parágrafo e duplicado três vezes. Vamos em frente e colocá-los na ordem correta e depois movê-los. Que arrasto e orientação aqui em baixo é bom, então eu posso ter certeza que eles estão todos alinhados até o topo. Vamos em frente e renomear os parágrafos também. Ok, eu acho que no geral, isso torna esse conteúdo muito mais fácil de ler. E nós definitivamente aumentamos a qualidade projetada apenas fazendo isso sozinho. Tudo bem, vamos dar uma olhada e nossa próxima seção, e podemos ver que o espaçamento aqui é menor do que aqui. Eu também quero aumentar a quantidade de espaço aqui que é igual à quantidade de espaço aparecer . Então vamos pegar nossa ferramenta de medição e medir isso para que pareça 80 pixels. Então vamos em frente e desenhar 80 pixels aqui ou qualquer número que você tinha baseado em seu design. Lee desligando. Eu também preciso aumentar a quantidade de espaço entre a manchete e nossa primeira seção aqui também. Então eu vou fazer mais 80 pixels, e eu aposto que nós precisamos de um espaço Anson aqui em baixo também, e também parece que tudo está no centro um pouco. Vou adicionar um guia aqui. Vamos nos certificar que estão alinhados exatamente onde deveriam estar. Este é um pouco longe demais para a direita. Então eu vou voltar e selecionar aquele e movê-lo para que ele se alinhe com a outra seção abaixo dele. Vai mover o guia só para ter certeza. E acho que somos bons para o espaçamento lá. Eu acho que o espaçamento entre esses dois é bom, mas eu quero adicionar 80 pixels de espaço aqui em baixo, então parece que é mais de 80 pixels. Então vamos em frente e cortar só um pouquinho. Na verdade, nem temos que cortar. Só precisamos entrar e selecionar a camada de fundo. E então eu vou usar minhas setas para movê-lo para cima. Certo, vamos até o topo da seção, ver se tudo parece bem. Ainda podemos ter uma sombra? E tudo parece muito melhor do que antes. Não, se você der uma olhada no meu projeto aqui, se eu fizer zoom, eu poderia ver um pouco deitado passando por cima, e eu não tenho certeza do que é isso. Eu vou ir em frente e navegar para aquela seção as amostras de áudio, e vamos em frente e ligá-lo e desligá-lo. Ok, então ele desaparece quando eu desliguei aquele grupo a camada. Então tem que ser algo por dentro, e eu acho que é realmente o fundo em si. Vou seguir em frente e navegar e encontrar o fundo. Então é definitivamente isso aí. Uma vez que eu desligo, essa linha branca desaparece. Então eu vou pegar meu ícone de máscara de camada aqui, fazer uma seleção, e então eu vou excluí-la. Está bem? Eu preciso definir preto para o fundo. Então d e, em seguida, age e, em seguida, exclua na tecla de espaço traseiro para remover essa linha porque ele está adicionando preto para essa área e a sombra permanece no lugar. Ok, então nós limpamos isso. Isso parece muito melhor. Esta seção parece melhor agora. Precisamos mover tudo para cima, já que removi um pouco do espaçamento da última seção. Então, novamente, vamos medir 80 pixels, então eu preciso mover as informações de contato para cima, então eu vou entrar lá, encontrá-lo, e então eu vou apenas usar minhas teclas de seta para movê-lo para cima. Tudo bem, vamos em frente e pegar nosso passado também. Vamos avançar e mover isso para cima para preencher o espaço aqui em cima para o espaçamento entre esses dois elementos aqui. Vou pegar a quantidade de espaço que tenho aqui e adicioná-lo aqui mesmo. Então, isso só adiciona consistência ao design geral. Então vamos em frente e medir isso. Então eu estou no 69 Que pegar sua camada de forma e ir em frente e movê-lo para baixo. Catalisadores e um pouco de espaço. Agora entre o nosso botão enviar e vamos usar 25 pixels, que é a distância entre aqui e aqui, aqui e aqui. Então, novamente, nós só queremos adicionar consistência ao nosso projetado adicionando quantidades iguais de espaçamento entre diferentes elementos. E, finalmente, precisamos de 80 pixels de espaço abaixo do botão. Ok, eu quero mover o fundo para baixo. Agora. Eu sei que acabamos de movê-lo para cima, então vamos ter que voltar e preenchê-lo com branco com nossa ferramenta de seleção de retângulo . Então vamos em frente e fazer isso. Estava muito perto de acabar com ela. Precisamos ir em frente e aumentar o tamanho do rodapé para que ele corresponda ao nosso cabeçalho. Então vamos em frente e fazer uma medição do rodapé dela. Eu estou em 148 e então minha cabeça em si é 150 então eu não tenho que terminar muito. Eu vou ir em frente e ir para o tamanho da tela de imagem e aumentá-lo em dois pixels. Muito bem, agora que o nosso rodapé corresponde ao nosso cabeçalho, eu acho que ainda há mais uma coisa, e que é o temporizador de jogo no topo bem aqui que seria bom ter um temporizador de placa que tem uma barra colorida que atravessa o topo aqui. Isso combina com a nossa forma de forma. Então vamos em frente e criar isso. Vamos colocá-lo dentro de áudio e vídeo e também dentro de amostras de áudio. Então, vamos para dentro de lá. Vamos criar uma nova camada. Vamos escolher uma cor laranja que usamos anteriormente, e então vamos desenhá-la com nossa ferramenta de seleção de retângulos. Então eu vou falar sobre isso porque ele não tem que ser um tamanho exato. Eu só vou até lá e então eu vou em frente e preencher isso. Acho que é um pouco grande demais ou, pelo menos, um pouco alto demais. Alguém vá em frente e de select e, em seguida, com o meu deslocamento de ferramenta de escala mais s, eu posso ir em frente e fazer a altura dele menor. Mas nós precisamos cortar o conteúdo dele primeiro, então eu vou fazer cinco escala re e vamos em frente e dar uma olhada. Tudo bem, acho que isso só acrescenta um pouco. O design extra para essa seção em particular o torna um pouco mais atraente do que era antes. Vamos em frente e fechar todas essas camadas de grupos. Ok, eu acho que há uma coisa que eu quero fazer, e que é adicionar o nosso ícone de mão sobre este botão. Então vamos até o nosso cabeçalho e encontrar esse ícone de pairar, que é esta camada aqui e duplicá-la e vamos em frente e mover essa camada para essa seção. Eu vou ir em frente e clicar em escolher um líder ou guia, e então quando eu clicar neste botão, ele vai abrir automaticamente todas as camadas de grupo e me mostrar a camada em que eu cliquei, então esta é a área para o qual eu quero arrastá-lo. Então, já temos o nome da camada devidamente rotulado como um botão de passar o mouse, e só precisamos mover o ícone de passar o mouse para a posição. Agora. A última coisa que eu recomendaria fazer para tornar este um design melhor é preencher este espaço vazio. Neste momento está desequilibrado, e não é muito bom design. Então, o que eu recomendaria é criar uma segunda lista de reprodução e colocá-la aqui do lado direito , e isso só dará aos visitantes mais oportunidade de experimentar o tipo de trabalho que eles dilatam . Então, se entrarmos aqui e dermos uma olhada na nossa playlist, que está no conteúdo inferior, poderíamos pegar toda essa informação e duplicá-la, movê-la para a direita. Mas eu tenho um pressentimento que quando o fizermos, vai ser muito grande e o conteúdo vai estar muito perto do limite. Então vamos tentar isso bem rápido. Eu vou ir em frente e pegar meu fundo de amostra de áudio e retirá-lo da camada de grupo, e então eu vou duplicar esse conteúdo. Eu vou ir em frente e movê-lo para baixo e, em seguida, movê-lo para a direita e é muito grande e então nós temos conteúdo sobreposto aqui e é muito apertado por aqui. Então, o que eu faria então, neste caso, é que eu realmente usaria minha ferramenta de habilidade e reduzi-la. Vamos nos certificar de que está trancado juntos. Vamos tentar com 500 vamos fazer o mesmo para a outra coluna também. E eu acho que isso vai nos dar o espaço extra de que precisamos agora. Precisamos ir em frente e puxar ambos os grupos colunas para fora, bem como para que possamos alinhá-los ao centro do fundo. Então, para fazer isso, também precisamos colocá-los em um novo grupo de camadas temporário para tornar mais fácil alinhá-los. Vamos desligar todo o resto. Ok, agora com sua ferramenta Lima, vamos ver se podemos selecionar o fundo parece que não está indo para o dedo do pé, então vamos pegar essas duas camadas e movê-los para cima. Tudo bem, vamos tentar agora. OK, então isso está funcionando mantenha pressionada a tecla shift e clique nas colunas e, em seguida, altere-o para o primeiro item e, em seguida, um centro de linha de destino. Vamos em frente e pegar o fundo amostrado e movê-lo de volta para sua camada agrupada. E agora podemos levar nossa ferramenta de seleção de retângulos na linha de cima para baixo a partir daqui. Certo, vamos colocar esse de volta agora. Então só precisamos pegar esse conteúdo e removê-lo dessa camada agrupada temporária. Vamos deletar esse. Feche isso. Na verdade, uma última coisa. Precisamos voltar e re nomear esta coluna direita coluna esquerda, e também precisamos remover o estado de foco do primeiro botão. Então eu vou deletar isso, e eu também vou mudar a opacidade deste já que ele não está sendo jogado e nós precisamos mudá-lo para 80%. Perfeito. Tudo bem, vamos em frente e fechar tudo isso e dar outra olhada no design do nosso site. Quero voltar a ativar o comando ou o controle e zero para ampliar todo o caminho. Vamos nos certificar de que tudo está ligado aqui. Parece que estou vendo minha seção de vídeo. Lá vamos nós. Perfeito. Parabéns. Agora terminamos de melhorar nosso projeto de design de site. E como eu tinha mencionado antes, eu recomendo vivamente passar por este projeto e criar seu próprio design criativo para que você possa adicioná-lo ao seu portfólio. Assim que terminar com isso, você estará pronto para passar para o Web design. Projecto número quatro. Obrigado por ouvir e tenha um dia incrível. 56. Projeto 4: resumo de propriedade: Olá e bem-vindo ao nosso Projeto de Web Design número quatro. Então, para este projeto de design, vamos pegar outro site existente e redesenhá-lo para torná-lo amigável e ajudar o cliente a ganhar mais negócios. E assim que eu mostrar o design original, você vai notar muitas semelhanças com alguns dos projetos que já fizemos. Há um monte de sites ruins projetados lá fora que não são fáceis de usar. Mas não se desespere. Nós vamos aprender algumas coisas novas neste projeto. Vou mostrar-te como remover qualquer coisa de uma imagem. Então nós vamos realmente fazer alguns retoques na imagem principal. E eu também vou mostrar a vocês como criar ícones fora de formas. E, claro, vou compartilhar algumas dicas adicionais pro Web design ao longo do caminho. Então, sem mais delongas, deixe-me mostrar o design original do site que vamos refazer o rolo de tambor, por favor. Aqui está em toda a sua glória. É o site de aluguel de imóveis e é horrível. Temos um logótipo enorme e um número de telefone com a localização do escritório bem aqui. Eu não sei absolutamente nada sobre esta empresa quando eu visitei pela primeira vez porque eu nunca ouvi falar dela antes. E não estou pronto para ligar porque não sei por que estou ligando para você. Estou indo ao seu site porque eu preciso de um lugar para alugar ou eu quero listar uma casa ou um condomínio que eu quero alugar. Mas não tenho certeza se quero fazer negócios com você ainda, então por que vou ligar para você? Temos de dar às nossas perspectivas uma razão para nos ligarem. E colocando o número de telefone no centro. Este grande realmente não adiciona nenhum benefício para esse cliente potencial, a menos que ele esteja visitando o site por causa de uma indicação. E eles só precisam do número de telefone. Bem, bem, nesse caso, é fácil para eles encontrarem. No geral, eu só acho que a área do cabeçalho é muito grande, especialmente para o logotipo. Nós temos alguns botões que foram projetados a partir dos anos 19 noventa. Este estilo Grady int está desatualizado. Diferentes elementos da página Que não se aliem com outros elementos. Podemos ver o logotipo não se alinha com a navegação. A imagem aqui em baixo não se alinha com a navegação etcetera, então, no geral, o design é desleixado. Nós temos uma manchete aqui basicamente explicando o que esta empresa é e o que eles dilatam. Eles oferecem ofertas de aluguel de imóveis na área de Nova Inglaterra mais especificamente, a área de Lincoln New England. Então, ao rolar para baixo, você notará uma imagem aqui que é muito pixelizada. Eles usaram imagens de baixa qualidade, e então parece que eles as dimensionam no tamanho errado, que cria pixel ization e torna a imagem embaçada. Então, no geral, a qualidade da imagem é horrível. É um controle deslizante, assim você pode deslizar duas propriedades diferentes, mas eles são todos da mesma baixa qualidade. E eu acredito que imagens de maior qualidade, bem fotografadas são melhores do que imagens de baixa qualidade. E deixem-me dar-vos um pequeno exemplo. Por que a última vez que viu um comercial para, digamos, McDonald's, Burger King ou Wendy's? E eles fazem uma foto de perto de sua comida. Seja o que for que eles estão promovendo e você vê e que a comida está linda. Os pãezinhos são da consistência certa. Você pode ver a textura. É afiada. Você pode ver os condimentos, os tomates e a alface. É tudo fresco e crocante e o hambúrguer parece gordo e suculento, e você está tipo, oh meu Deus, eu estou ansiando por essa refeição agora. Eu tenho que tê-lo agora Vamos imaginar se eles usaram como a comida deles realmente se parece. Quando você vai para a unidade através de ordem alguma coisa e você abre e você fica tipo, OK, o pão é esmagado. A carne parece seca. A alface é um pouco marrom. O tomate não parece fresco, quase parece pasta de tomate. Isso é um tomate muito ruim, mas você entendeu a idéia. Se eles mostraram aquele hambúrguer de verdade que você passa através da unidade através de seus comerciais, você não vai ficar tão animado para ir comer aquela refeição naquele momento no tempo. Assim, imagens de qualidade são importantes, a fim de gerar interesse, manter seu interesse e fazer essa pessoa animado sobre essa propriedade específica. Se a imagem era nítida, foi filmada profissionalmente e talvez foi filmada mais tarde no dia para que houvesse como um pôr-do-sol no fundo, no fundo,vai parecer muito mais convidativo. Então esta imagem mal iluminada aqui, então imagens são muito, muito importantes. Você pode colocar as melhores imagens e seu Web design, mas no final, se o seu cliente está lhe dando imagens ruins como esta para colocar em seu site, talvez você esteja codificando o site também. Não há muito que você possa fazer ou você pode vender seus serviços e tirar fotos melhores do que o que eles estão dando e cobrá-lo por esse serviço. Talvez você não seja um fotógrafo. Você não tem o equipamento. Você não sabe como tirar imagens profissionais, terceirizá-las e depois cobrar uma taxa para coordenar esse serviço. Você não quer separá-lo em sua fatura. Você só vai pegar o que o fotógrafo vai cobrar e, em seguida, aumentar o preço em 10 ou 20% ou o que você quer cobrar por esse serviço adicional porque você está tomando tempo para contratar alguém e coordenar e gerenciar o projeto. Então você precisa de uma compensação em troca de fazer isso. Então esse é outro tipo de serviço que você pode vender para seus clientes. Tudo bem, vamos rolar para baixo e olhar um pouco mais para este site e então eu vou te mostrar o design que eu criei. Então temos este enorme bloco cinzento de nada. Isso com o logotipo deles e um parágrafo, então eles estão na área por quase quatro anos. Mas seu site não reflete isso porque é mal projetado, parece pouco profissional. Parece que eles são um começo, e eles não estão retratando qualquer que seja a sua marca. Então eu acho que eles estão fazendo um desserviço e enfraquecer definitivamente aumentar o seu negócio, que é o nosso objetivo final, porque seu objetivo é alugar mais imóveis para ganhar mais renda, porque eles são um para empresa de lucro, e podemos ajudá-los a fazer isso criando um site bem projetado que é amigável e profissional, e profissional, que por si só deve aumentar o seu negócio. Agora eles estão tentando adicionar alguma prova social, além de afirmar que eles estão na área por quase 40 anos, e isso é através desta caixa aqui, que é um código do Facebook que você pode adicionar às suas barras laterais que irá listar o seu que você postou, bem como o número de curtidas que você tem enquanto eles estão na área por mais de 40 anos. E sei que o Facebook só existe há 10 anos? Eles só têm 99 luzes. Isto não está a levar qualquer credibilidade para esta empresa em particular. Eu prefiro ver o que fizemos em projetos anteriores, e isso é adicionar logotipos de empresas com as quais eles já trabalharam antes. E isso vai adicionar mais credibilidade do que 99 luzes. Eu definitivamente tiraria isso, pelo menos na página inicial. Agora, se você tem um blawg, você pode colocar isso lá, e tudo bem. Ok, então agora temos um botão aqui em baixo que diz: “Ligue para R.E. Por que estou ligando para você? Não sei por que estou ligando para você. Preciso de uma propriedade. Mas eu ainda não vi nenhuma propriedade além destes mal iluminados sobre pixelados, imagens imobiliárias borradas. Portanto, precisamos tornar mais fácil para os clientes potenciais encontrar propriedades para alugar e tornar mais fácil para os proprietários que têm propriedade para alugar toe lista suas propriedades. Agora toda essa informação está aqui. Agora temos outra seção aqui para ser amigável com animais de estimação. Então isso é algo que podemos destacar como um benefício para ir com esta empresa de aluguel de imóveis versus outros porque nem todo mundo é amigável para animais de estimação. Mas voltando ao que eu estava dizendo Apenas um segundo, há maneiras de as pessoas navegarem para diferentes partes do site para obter as informações de que precisam. Mas eu acho que nós podemos realmente colocar algumas dessas informações na página inicial para substituir algumas das informações que eles já têm aqui e fazer um melhor design de site com um layout melhor para tornar mais fácil para os clientes potenciais encontrar o que eles precisam, bem como para tornar mais fácil para os proprietários para listar sua casa particular que eles querem alugar. Então deixe-me mostrar o design que eu criei, e a primeira coisa que você vai notar é que eu redesenhei o logotipo. O logotipo está um pouco desatualizado, e eu também reduzi o tamanho do logotipo, bem como as informações de contato, apenas para dar importância a elementos específicos. Ok, então eles querem ter certeza de que o logotipo está na frente e no centro. Eu ainda fiz isso sem tê-lo tão grande apenas criando um fundo azul que eu tirei das cores de seu logotipo existente. Então eu mantive suas cores de marca. Eu só mudei as fontes e o logotipo em si para torná-lo mais atualizado e um pouco mais profissional ou muito mais profissional do que isso. Então a primeira coisa que vamos ver é logo que os nossos olhos. Eles vão navegar para a navegação, e então se já sabemos o que queremos ou com quem queremos falar enfraquecer, veja que temos o número de telefone aqui, e também podemos nos inscrever agora. Então, se fomos encaminhados para esta empresa e sabemos o que queremos, podemos nos candidatar agora contra tentar encontrá-la em outro lugar. A outra coisa que você vai notar, é uma imagem de alta qualidade para a seção de heróis, que representa o que esta empresa faz imobiliário. Nós também queremos tornar mais fácil para os clientes potenciais encontrar lugares para alugar frente e centro. Na seção de heróis. Temos uma opção para filtrar o tipo de propriedade que eles querem e onde, para que possamos colocar em um orçamento com um drop down da cidade. Queremos procurar quartos e banheiros, e então podemos filtrar com base nessas seleções, e isso nos levará a uma página com todas as listagens baseadas neste filtro novamente, queremos torná-lo amigável. Queremos tornar mais fácil para os clientes potenciais encontrarem o que querem. Eles não estão prontos para filtrar, então eles vão rolar para baixo, e eles vão encontrar quatro benefícios de por que eles devem trabalhar neste lugar particular de aluguel de imóveis versus outros. Se eles criarem uma conta, eles receberão um e-mail. Quando novas propriedades são listadas, as pessoas estão ocupadas e podem não querer voltar continuamente todos os dias para procurar propriedades . Por isso, se conseguirmos tornar mais fácil para as pessoas encontrarem o que precisam e levá-las de volta aos nossos clientes, sites e não aos nossos concorrentes, porque elas podem não se lembrar do site que visitaram há 20 minutos e amanhã ou Na próxima semana, talvez não se lembrem daquela empresa em particular que visitaram primeiro, e acharão outra pessoa para alugar. Então vamos facilitar a criação de uma conta e fornecer e-mails de novas propriedades. E isso de novo, essas maneiras aéreas que você pode subir. Então, seus clientes de Web design me permitem ajudá-lo a gerar mais renda, e aqui está minha idéia de como eu posso fazê-lo. Então aqui você pode adicionar isso como uma venda acima. Quero ajudá-lo a gerar mais negócios, e é assim que vamos fazer. Aqui está outro serviço que eu recomendo para sua empresa para ajudá-lo a aumentar seu negócio. Criar afastado. Ou alguém na empresa pode ajudar os inquilinos a organizar as suas utilidades. Você vai ajudá-los a montar seus novos moradores com eletricidade, gás da Internet e muito mais. Então você pode ajudá-los a descobrir como fazer isso. E você vai cobrá-los por ajudá-los a fazer isso? Por que não ajudar clientes potenciais para os inquilinos? Encontre um colega de quarto. Você pode criar um fórum ou outro método do qual as pessoas podem se encontrar em seu site, Sr. Cliente, para encontrar um companheiro de quarto. E, claro, você já oferece um ambiente amigável para animais de estimação. E animais de estimação são bem-vindos em locais selecionados. Facilmente filtrar sua pesquisa que vamos e como outro benefício, vou mostrar-lhe como criar esses ícones específicos, bem como usando nossa ferramenta de forma. Ok, então talvez eles não sejam um inquilino. Talvez eles sejam um senhorio. Então, enquanto eles rolam para baixo, os proprietários vão ver isso porque é na frente e no centro. Está dividido entre tudo o resto com um fundo azul brilhante baseado nas cores da marca da empresa . Você é um senhorio posou sua lista para a lista livre. Agora caso temos uma ação chamada para os proprietários para listar suas propriedades agora e depois abaixo disso, podemos então começar a filtrar propriedades com base nos quatro ou cinco tipos de filtros que as pessoas usam. E então podemos colocar automaticamente novas ofertas nesta seção aqui. Se você quiser encontrar mais aluguéis de animais de estimação, você pode navegar até ele clicando neste link Seymour novamente, estamos tornando mais fácil para as pessoas para encontrar o que eles precisam, Então, temos diferentes tipos de categorias para as pessoas para encontrar o que Eles querem. Então outra coisa que eu recomendaria para esta empresa para garantir que as pessoas continuem a voltar ao seu site ou apenas para descobri-los através de motores de busca é criar um bloco para que você possa ajudá-los a criar um blawg e começar a criar conteúdo para que blawg e fornecer seus serviços profissionais a uma taxa adicional acima e além do design inicial . Então, outro tipo de serviço que você pode vender para seus clientes, então eu montei uma pequena seção para seu novo blawg e, em seguida, para a direita, nós podemos montar uma barra lateral de conteúdo adicional ou você pode fornecer-lhes com outro idéia para gerar mais renda. E isso é oferecer este espaço como espaço publicitário para que eles possam vender espaço publicitário aqui para empresas em sua área. Versus isto aqui não fornece informação, nenhum valor, nenhuma credibilidade aqui. Este é sempre aquele espaço. Eles estão melhor oferecendo um blawg com links para os artigos mais recentes, bem como vender espaço publicitário para gerar renda adicional para que eles se dobrem na área por quase 40 anos. Eu garanto que eles conhecem pessoas na área que ficariam felizes em nunca laços nesta parte de seu site. Então, estas são todas as sugestões que você pode dar ao seu cliente para ajudá-los a ganhar renda adicional e expandir seus negócios. E isso é o que queremos fazer como Web designers. Não queremos ser apenas mais um Web designer. Olá, Sr. Cliente. O que você quer? Que tipo de estilo de design você gosta? Blá, blá, blá. Certo, aqui está o desenho. Obrigado. Tchau. Não, vamos fazer algo diferente. Vamos ser melhores do que o seu Web designer comum. Vamos ajudar essas empresas a expandir seus negócios porque, no final, é por isso que eles estão contratando você para projetar seu site. Eles querem um site que eles possam vender seus produtos e serviços, e se você pode mostrar-lhes maneiras de aumentar seus negócios, então adivinhe. Eles vão encaminhá-lo para outras pessoas que precisam de sites feitos para gerar mais negócios. E uma vez que você recebe uma indicação, você vai ter outra e outra, e antes que você perceba, você vai ter mais trabalho. Então você pode lidar com, e então você pode começar a aumentar seu preço de acordo porque você está ajudando as pessoas a ganhar mais dinheiro e você deve ser compensado por fazer isso. E então, aumentando seus preços, você também controla a quantidade de volume ou a quantidade de trabalho que está fazendo. Você quer fazer 2025 projetos de sites por mês a US $200 por site que é US $5000 por mês, ou você prefere fazer cinco projetos de sites por mês a US $1000 por site? Prefiro fazer cinco contra 25 porque estou ganhando a mesma quantia de dinheiro por menos trabalho . Agora. Não estou dizendo que isso é o que eu cobro ou o que você deve cobrar. Eu só quero que você pense sobre como você pode ser diferente de todas as outras dezenas de milhares de web designers lá fora. Você tem que se separar deles mais do que apenas com base no seu estilo de design. Você tem que fornecer serviços que o separem da concorrência. Finalmente, temos também um rodapé simples, com alguns links para ícones de mídia social e, em seguida, alguns links para outras partes do site. Temos a nossa política de privacidade. Temos algumas informações legais. Temos um mapa do site que irá fornecer links para todas as diferentes páginas do site. Nós também temos uma maneira de as pessoas anunciarem com eles se você não tiver um link para uma página sobre publicidade, e então as pessoas não vão saber como anunciar com esta empresa. Então, se você pode vender seu cliente no serviço, você vai querer colocar um link em algum lugar para que as pessoas saibam que eles podem anunciar no site. Precisamos também de direitos de autor. Nós também precisamos de algumas informações de direitos autorais aqui em baixo é bem, eu não incluí isso neste design, mas isso não é relevante. Então o que nós vamos fazer é criar este design de site em particular começando com retocar esta imagem principal aqui porque a imagem originalmente tinha um carro ou dois, eu acho que nesta área. E eu senti que não estava ajudando com a imagem geral. E eu gosto mais da imagem sem o carro em vez do carro. Então eu vou mostrar a vocês como remover o carro desta imagem em particular, e então vamos trabalhar no logotipo e então vamos continuar construindo o local a partir daí. Mal posso esperar para compartilhar essa informação com você. Se você está pronto, vamos fazê-lo. 57. Retoque: Olá e bem-vindo de volta. Tudo bem, então eu amo esta foto para este projeto de Web design em particular porque eu acho que é uma imagem muito forte. Reflete o que nosso cliente faz, e isso é aluguel de imóveis. Dito isto, este local em particular provavelmente não funcionará para o cliente, porque eles provavelmente não têm essa listagem em seu site. E dois, por causa da localização agora baseada nas palmeiras. Podemos adivinhar que isto é provavelmente algures no Sul, e o nosso cliente está no Médio Oriente porque eles servem para a área de Lincoln New England. Mas eu ainda acho que é OK mostrar esta imagem no design inicial porque é uma imagem forte , e você quer retratar para seus clientes uma imagem forte para que eles possam ver a diferença entre uma grande imagem como esta e aquela primeira imagem que mostrei na lição anterior onde o céu é lavado para fora, sua pixelada. Ele tem lixo na frente da imagem, e ele realmente não reflete bem sobre o tipo de propriedades que eles podem querer alugar ou ele realmente não retrata esse local particular, bem como esta imagem Doze como eu tinha mencionado anteriormente para aquela imagem que tínhamos de seu site. Faria uma enorme diferença fotografar essa imagem mais tarde ou no início da noite . Então você tem um pôr-do-sol acontecendo no fundo com algumas nuvens e alguma cor no céu . Vai fazer essa propriedade parecer muito mais atraente, como esta imagem faz aqui com o pôr-do-sol e a iluminação e a composição e tudo mais sobre esta imagem é muito mais profissional do que a outra imagem. Isso não quer dizer que todas as suas propriedades vão ter imagens assim. Mas você quer ter uma imagem forte na seção de heróis para chamar a atenção das pessoas. Se você está mostrando uma imagem com lixo no gramado da frente e pode realmente vê-la porque está pixelada ou embaçada ou ambos, então ele realmente não se parece com o tipo de site que você pode querer alugar porque eles estão mostrando low end propriedades. Não há nada de errado com isso. Talvez eles tenham muitos desses tipos de listagens, mas você ainda pode retratar qualquer tipo de localização muito melhor prestando atenção aos detalhes na imagem para fazer essa imagem naquele local parecer muito mais atraente do que talvez realmente é. Agora. A única coisa que eu não gosto nesta imagem são estes dois carros. Então eu acho que removendo esses dois carros como eu fiz aqui, vai fazer essa imagem muito mais forte e muito mais atraente. Então vamos em frente e baixar esta imagem indo para escolher sabei dot com e, em seguida, apenas digite este número aqui. 690086 e para pesquisar e você será levado diretamente para esta página onde você pode baixar esta imagem. Então eu vou baixar a imagem 1920 por 10 82, e então eu vou pegar esse arquivo e trazê-lo para o meu modelo de grade. Então você quer ir em frente e abrir o modelo de grade de uma lição anterior para começar do zero neste projeto em particular, vá em frente e feche as grades, e então nós vamos redimensionar a imagem para que seja sangria total ou em outras palavras, borda do dedo do pé. Então agora a imagem tem 1900 pixels de largura, então vamos em frente e redimensioná-la com nossa ferramenta de escala shift plus s. E então vamos digitar o com, que é 1400. E então a altura deve ser 789 Uma vez que ele esqueleto coisa, basta movê-lo para a posição aqui, e então vamos em frente, retocar esta imagem e remover os dois carros. Agora, no início do curso, falamos sobre dois tipos de ferramentas que você pode usar para retocar, e que era a ferramenta de clonagem e a ferramenta de cura para este tipo de edição. Eu acho que a ferramenta clone seria a melhor opção para remover esses carros. Então vamos em frente e pegar essa ferramenta, que está localizada bem aqui. Ou se você atualizou seus atalhos de teclado como mencionado no início do curso. Eu tenho mentalidade para a letra s para o atalho de teclado. Agora, uma vez que clicamos nele, não podemos realmente fazer nada ainda. Se olharmos aqui em baixo, ele diz, defina uma imagem de origem primeiro. Então o que precisamos fazer é dizer ao gimp, onde queremos clonar a partir da imagem, a fim de retocar a área que precisa ser retocada. Então, com essa ferramenta, se eu manter pressionada minha tecla de comando ou controle e clicar nesta área aqui e depois que eu me mover, o contorno da ferramenta é aplicado a essa área, então sabemos que essa área será aplicada em qualquer lugar. Eu clico e arrasto meu mouse. Agora, enquanto eu passo para cima, você pode ver o contorno da ferramenta para a direita. Não está seguindo meu movimento de pincel, e ele vai continuar adicionando da direita para a esquerda. E é assim que falamos com essa ferramenta. Agora, a chave para usar esta ferramenta com imagens como esta que têm uma perspectiva específica. Você quer ter certeza de que essa perspectiva não está quebrada, porque se você clicar na área errada, o começo, então essa linha é que vai se encontrar aqui até o outro lado. Então, o que eu recomendo fazer para isso é começar desta maneira e depois arrastar para a direita Agora , você deve ter notado que o meio-fio mudou para outra coisa neste ponto, e isso é porque enquanto você arrasta para baixo, é vai continuar puxando os dados ou os pixels desta área e quando você vai longe o suficiente. Em seguida, tirará os pixels do carro. Aqui está bem, então vamos clicar e arrastar soltar e, em seguida, clicar e arrastar sobre quaisquer pixels que não queremos nessa área. Então eu vou começar bem nesta área aqui, e então eu vou apenas seguir essa linha para baixo para tentar e me encontrar com onde eu comecei com essa ferramenta. Então agora eu tenho esse carro sendo aplicado nesta área. Então eu vou apenas clicar aqui e começar de novo, e agora eu tenho um traço diferente sendo aplicado a essa área. Ok, nós também podemos redimensionar ou escovar com nossas chaves de suporte. Agora eu tenho meus seios, eu ajustado para cerca de 14. Portanto, você deseja aumentá-lo ou diminuí-lo com base na área em que você está trabalhando porque você não deseja adicionar pixels onde eles não são necessários se eles não precisam ser adicionados lá. Então, se eu apertar a tecla do suporte esquerdo, ele vai fazer o tamanho do peito menor. Então agora está mais perto de quatro. A chave de suporte direito vai torná-la maior, então agora está mais perto de 30, o que torna mais fácil e rápido do que vir aqui e ajustar o tamanho do pincel enquanto você está trabalhando. Assim, você pode literalmente redimensionar seu pincel enquanto está trabalhando. Então, bem nesta área aqui, eu tenho um pouco mais do meio-fio que eu não quero, então eu vou fazer meu nascimento menor com a chave do colchete esquerdo. Vou manter pressionada minha tecla de controle ou comando colocando se você estiver em um Mac ou PC e então eu vou redefinir onde eu quero clonar a partir daqui. E então cobrirá aquela área onde eu não quero que a curva seja nessa área. Então eu vou fazer os pneus e o fundo do carro aqui agora, então novamente, então novamente, controle ou comando para dizer a Gimp onde clonar e depois pintar sobre aquela área. A outra coisa que queremos fazer como Web designer é que não queremos retocar imagens de graça . Se os clientes pedirem para retocar uma imagem, diga sim, eu posso fazer isso. Eu posso fornecer esse serviço. Mas isso é quanto vai custar para fazer Então você tem que determinar quanto você vai cobrar para retocar suas imagens. E, claro, alguns são mais fáceis do que outros. Então você tem que ser capaz de saber quanto você quer cobrar por esse serviço específico. Se você vai fazer isso sozinho ou se você está indo para o pé, terceirizá-lo. Em seguida, você precisa criar um plano de preços para aumentar essa taxa específica da pessoa que está fazendo o retoque para que você possa ser compensado pela gestão desse projeto específico . Eu vou vir aqui e pegar a grama. Eu vou cobrir a sombra aqui porque essa sombra está vindo do carro. E então eu vou seguir em frente e continuar adicionando grama de volta a esta área aqui, talvez adicionar um pouco de calçada aqui e a outra coisa que eu vou fazer como um Web designer quando eu estou retocar uma imagem para o Web design inicial, eu Não estou preocupado em ser 100% perfeito. Os clientes provavelmente não vão notar pequenas coisas. E então uma vez que aprovam qualquer imagem retocada, você condena, volta e explica que a imagem original foi retocada. Isto é quanto vai custar para retocá-lo que você vai garantir que a imagem será Você quer ter certeza de que é uma imagem de alta qualidade, uma indo em um site ao vivo. Então você vai explicar que os preços com base neste serviço particular, esta qualidade e por que ele vai custar quantidade X. Então você pode simplesmente cobrar uma taxa fixa por fazer algo assim. Porque uma vez que você aprende a fazer você mesmo e você sabe como fazê-lo, não deve demorar tanto tempo para fazer 10 15 20 minutos, talvez meio Knauer, para fazer um retoque completo como este com total atenção aos detalhes. Então eu só vou entrar e clicar na minha chave de controle ou comando para preencher a área de defesa agora. Ótima. Então eu acho que o carro está pronto. Vamos ir em frente e diminuir o zoom, e poderíamos ver que há alguns restos da sombra do fundo, o carro bem nesta área, o carro bem nesta área, e isso é o que eu quero dizer com um retoque de qualidade superior. Eu passaria um pouco mais de tempo misturando isso com meu clone e minha ferramenta de calcanhar também para fazer isso parecer muito mais natural. e muito mais profissional. E porque este é o design inicial e as chances são de que este cliente em particular não vai usar esta imagem porque é do Sul e não é em sua área local onde eles alugam. Não há necessidade de entrar na perfeição com esta imagem em particular. Certo, então basicamente a mesma coisa. Nós vamos dizer ao Gimp onde queremos clonar para esta imagem em particular, e eu acho que eu realmente quero começar de novo aqui. Tudo bem, então esse meio-fio está pronto, vamos em frente e trabalhar na parte inferior aqui. Então, para esta parte particular da edição, eu comecei aqui como o ponto onde eu disse ao Gim para clonar, e não está realmente combinando com o resto da cena nesta área aqui. Então, nesse caso, seria melhor começar a clonagem daqui ou daqui. Vou tentar aqui, e provavelmente vou conseguir um resultado melhor. E isso é simplesmente devido à textura e à iluminação naquela área em comparação com onde eu estava anteriormente. Eu vou em frente, zoom para que eu possa ver um pouco melhor. E agora eu tenho um reflexo aqui na rua deste carro também. Então eu vou mover meu ponto de partida ou minha fonte de clone daqui. Então, se entrarmos com nossa ferramenta de cura e adicionarmos uma fonte de trabalho do dedo do pé, vou clicar aqui e pintar sobre a área que acabamos de trabalhar com o clone. Ele vai misturar todos esses pixels juntos muito melhor do que a ferramenta de clonagem faz por si só. Ok, eu vou voltar para a minha ferramenta de clone com as letras s e eu vou trabalhar nesta área gramada aqui. Então, em vez de fazer traços longos, eu só estou fazendo traços curtos clicando e arrastando porque eu quero ficar nesta área aqui. Caso contrário, vou subir nesta área e começar a adicionar um pouco da calçada. E eu não quero terminar uma calçada ainda, então eu vou apenas clicar em rajadas curtas muito curtas e continuar arrastando sobre outras partes do carro até eu ter a área coberta. Ok, vamos ver se há um pedaço de calçada aqui. Acho que podemos trabalhar com isso aqui. Então, novamente, basta clicar e arrastar rajadas curtas. E eu vou adicionar um pouco de grama aqui de novo porque eu estou perdendo a perspectiva daquela calçada agora porque eu estou fazendo a calçada grande. Eu também vou fazer o tamanho do peito apenas um pouco menor com minhas chaves de suporte. Ok, agora, nesta área, temos o carro cobrindo parte de nossas árvores. Então, para isso, eu vou adicionar minha fonte de clone bem aqui no meio da árvore porque nós temos uma longa parte aqui embaixo sendo encoberta. E eu só quero clicar e ser capaz de arrastar para cima e seguir essa curva ao longo desse caminho. Só preciso de um pouco de grama aqui. Agora podemos trabalhar na esgrima. Vou começar de novo aqui com a minha fonte de clone. Então, novamente, precisamos ter cuidado sobre onde estão a origem do clone. Esboço Lá à direita está em relação a onde estamos realmente jogando pixels aqui à esquerda. Porque agora tenho uma coluna à esquerda daquele pincel. E do outro lado, onde o clone origina essa coluna está muito mais longe. Então eu só vou pintar alguns desses arbustos para baixo, cabelo na frente, preencher a calçada um pouco, e então eu vou em frente e trabalhar deste lado da cerca e trabalhar do meu jeito assim agora , Então eu vou seguir em frente e apenas clicar na coluna aqui para minha fonte de clone, e então eu vou pintar sobre este caminho para a esquerda e depois para a direita, então eu preciso ir em frente e escolher outra parte da cerca no centro. Então eu vou voltar para este aqui e começar este pequeno post bem aqui no meio, e então adicionar meu primeiro peito bem aqui, o que corresponde ao meio desta cerca onde um pequeno poste deve estar também. Ok, eu vou e minha fonte próxima nesta coluna agora e trabalhar nesta coluna. Então, novamente, traços curtos e apenas arrastando para cima para preencher essa área. Eu só quero ver como essas postagens se parecem aqui em baixo. Ok. Vou em frente e pegar esse posto agora e estamos quase terminando. A outra coisa que estou fazendo é ter minha mão esquerda no lado esquerdo do teclado onde minha tecla de comando ou controle está localizada. Então eu posso rapidamente clicar e selecionar uma nova área para clonar do Cam. Só vou limpar a calçada aqui na frente. Então a calçada está um pouco desligada aqui. Então, se eu fosse retocar esta imagem para o produto acabado, provavelmente passaria um pouco mais de tempo na calçada. Mas eu acho que para este projeto em particular e o design inicial é bom porque eles realmente não vão ampliar em 769% e ser como, OK, essa calçada está desligada. Não parece bom. Eu acho que no design inicial, eles nem vão notar isso, especialmente quando temos algum conteúdo nesta área também. Eles vão se concentrar mais nisso e que percebem que a calçada não é 100% perfeita. Mas novamente, se eles estão pagando pelos meus serviços para retocar essa imagem, eu vou gastar mais tempo para torná-la perfeita nisso, versus apenas uma edição para o primeiro rascunho. Ok, então é isso para retocar esta imagem em particular no próximo tutorial, vamos começar no logotipo e na área de cabeçalho da página da Web, então se você estiver pronto para isso, vamos fazê-lo. 58. Cabeçalho: Olá e bem-vindo de volta. Tudo bem, então para esta lição, vamos trabalhar na seção de cabeçalho do nosso projeto de Web design. Vamos adicionar uma navegação primária e secundária. Vamos criar um novo logotipo, que vai ser muito simples de fazer. Vai ser limpo e mais profissional do que o logotipo que eles têm atualmente. E a outra coisa que eu quero mencionar rapidamente é, como você projetou cada vez mais sites, você pode encontrar-se usando o mesmo tipo de formas ou elementos repetidamente em novos projetos. Por exemplo, em nosso projeto anterior, criamos essa navegação primária com um ícone de hambúrguer para mostrar ou representar que a navegação será mostrada ou oculta. Quando você clica nesse ícone em particular. Agora eu gosto desta fonte. Eu gosto do tamanho Eu gosto do ícone de hambúrguer, então não há realmente nenhuma razão para eu refazer isso do zero quando eu já fiz isso anteriormente em um projeto diferente, então nós podemos realmente pegar essa navegação e adicioná-lo ao nosso projeto, que eu fiz no projeto inicial. Nós só precisamos mudar alguns dos comprimentos porque estes são proprietários ou pessoas querem alugar contra cinegrafistas ou um especialista em áudio. Então vamos entrar aqui e tirar o logotipo. Então vá em frente e abra este arquivo e, em seguida, remova o fundo do cabeçalho também. E, em seguida, podemos clicar e arrastar este grupo que camada para o nosso projeto atual e adicionado em. Então vamos em frente e mover isso para a posição aqui. Ainda não vai ser exacto. Nós só vamos levantá-lo e sair do caminho, e eu posso ir em frente e mudar o nome desta navegação primária. Vamos em frente e definir nosso espaço de cabeçalho. Então vamos puxar uma diretriz para baixo 2 20 pixels. Então isso vai dar-nos o nosso espaçamento no topo. E então nós vamos puxar para baixo mais 1 a 120 que será a linha de base para nossa navegação primária, a parte inferior do nosso texto aqui, ou o ícone de hambúrguer e nosso logotipo. Então podemos realmente graham nossa navegação primária agora e colocá-la em posição. Então, assim, estamos quase terminando com a seção de cabeçalho. Vamos em frente e fazer a navegação primária Eu vou usar a ferrovia para a fonte. Vou fazer 14 pelo tamanho. E depois, é claro, precisamos do White. Então eu vou apenas digitar um número de telefone e depois cinco espaços para encaminhar barras e depois cinco espaços novamente e depois aplicar agora. Então eu vou selecionar isso porque eu quero tornar este conteúdo em negrito. Então vá em frente e faça isso ousado. E isso só ajuda a se destacar um pouco mais contra o número de telefone, porque eu acho que aplicar agora é mais importante do que o número de telefone porque muitas vezes eu acho que as pessoas vão querer se inscrever para ter seu prédio listado no site. Ou talvez eles queiram alugar um condomínio específico ou uma licença ou uma casa ou qualquer que seja o caso contra ligar. Às vezes eles estão ocupados, e é mais fácil preencher um formulário para dizer que estou interessado neste imóvel ou que eu tenho este imóvel para alugar e aqui estão as minhas informações de contacto. Avise-me qual é o próximo passo. Então é por isso que eu gostaria de destacar aplicar agora versus o número de telefone e novamente que tudo volta para pesquisar e descobrir mais sobre as perspectivas específicas de seu cliente. Talvez seja o oposto para a parte deles do país. Talvez as pessoas prefiram ligar em vez de se candidatar online, e preferem candidatar-se através do telefone ou marcar uma consulta para entrar. E nesse caso, com base nas informações que recebo do meu cliente, eu deixaria o número de telefone em negrito e não se aplicaria. Agora eu quero dizer nem mesmo colocar aplicar agora. Se sua clientela estiver lá, potenciais não gostam de se candidatar online. Tudo bem, vamos em frente e colocar isso em posição. Vamos ligar os nossos guias, Commander Control e Semi Colon, e eu vou colocá-lo aqui mesmo no topo desta linha de orientação. Então isso vai estar em linha com o nosso logotipo porque o nosso logotipo vai cobrir a altura entre essas duas linhas. Então vamos em frente e começar com isso. Eu também preciso puxar isso para fora e chamar de navegação secundária. Ok, vamos criar uma nova camada chamada fundo do logotipo e, em seguida, com nossa ferramenta de seleção de retângulo, vamos fazer um retângulo. Digamos que 160m até eu acredito que são 100 para a altura. Antes de perguntarmos, preencha esta cor de fundo que precisamos encontrar a cor exata da marca. Antes de perguntarmos, Então deixe-me mostrar-lhe como você pode fazer isso. Se você está no site de um cliente e ele não sabe a cor exata para lhe dar, você pode realmente encontrar um seletor de cores plug in. E acho que conversamos sobre isso em uma lição anterior. E quando você tiver esse plugue instalado, eu tenho um aqui chamado Color Picker. Eu posso clicar nele e passar o mouse sobre uma cor que eu quero, e ele mostra você bem ali em baixo, o hexágono. Um número decimal. Agora, quando eu revisto o logotipo, ele muda porque eles estão usando um logotipo de baixa qualidade que é pixelado, e há diferentes blues lá dentro. Então eu só vou escolher esta cor azul aqui, e então eu vou copiá-la. Basta tomar nota desse número lá porque você pode digitar isso na caixa de notação HTML aqui mesmo. Uma vez que você digita isso, aperte o seu brega e, em seguida, você começa a cor exata que agora podemos ir em frente e preencher essa caixa em e d selecionar. Vá em frente e desligue meus guias. Eu não preciso disso, e então até a família dos fundos. Eu escolhi uma fonte que é um tipo de fonte mais moderno e atualizado comparado com o que eles têm agora. E é chamado de seta, que você possa ir para w fontes dot com barra de barra para frente seta barra para baixar esta fonte. Uma vez que você não tenha baixado e instalado, você terá que reiniciar o gimp para finalizar a instalação desse fundo. Então, uma vez que você tem que configurar, vá em frente e configure o fundo e as opções de ferramenta aqui e para o tamanho da fonte, vamos fazer 80 e a cor branca. Muito bem, vamos escrever o nosso E em todas as maiúsculas e, em seguida, movê-lo para a posição. Eu acho que eu quero ir um pouco menor sobre ele. Está um pouco perto demais da borda, então vou digitar 75. Experimente isso. Ok, eu estou gostando muito mais disso, e então nós vamos digitar o nome de negócios deles aqui em baixo. Vamos mudar a fonte para ferrovia, e não tenho certeza sobre o tamanho. Vou começar com 16 e talvez precisemos aumentar isso. Então, aluguel, imóveis. Vamos em frente e fazer 18. Isso parece muito bom. Acho que está um pouco desligado. Então o que podemos fazer é aumentar a quantidade de espaçamento entre H. Funt e a razão é porque eu queria combinar o com de R E. Então, em duas opções, vamos fazer 0.2. Na verdade, isso é demais. Vou descer um, por isso vai ser 10.1. Ei, vamos em frente e criar um novo logotipo frio do grupo de camadas. Nós só vamos colocar o nosso texto aqui porque eu quero pegar este logotipo no conteúdo e alinhá-lo com o fundo. Então vamos em frente e levar nosso fundo local e cortar para o conteúdo. E então, com nossa ferramenta de alinhamento, podemos ir em frente e selecionar ambos. Mantenha a tecla Shift pressionada, clique no logotipo e, em seguida, defina-o para o primeiro item e, em seguida, alinhe o centro e o meio do alvo . Agora o problema é que temos uma caixa de texto maior do que realmente precisamos, então precisamos voltar ao nosso texto aqui com sua ferramenta de texto e clicar nesta caixa de texto na parte superior e arrastá-la para baixo até chegar ao topo das letras. Agora, depois de fazer isso, ele empurra essas letras para baixo. Mas agora temos o tamanho certo que precisamos para alinhá-lo perfeitamente no meio. Então, vamos voltar para os nossos homens de linha. As ferramentas realinham-se e, em seguida, temos que voltar para a nossa caixa de texto novamente e mover isto de volta para onde estava antes. Então eu acho que foi um pouco mais alto do que isso. Ok, podemos ir em frente e colocar nosso fundo dentro agora. Então, a última coisa que precisamos fazer é atualizar nossa navegação principal com o conteúdo correto para ir em frente e clicar duas vezes com meu têxtil no áudio para selecioná-lo e, em seguida, digitar os proprietários de imóveis. E depois podemos apagar este último. A liderar esses cinco espaços extras também. Aperte sua tecla de escape, e acho que terminamos com o cabeçalho. Incrível! Tudo bem, agora que temos a cabeça ou terminada na próxima lição, vamos trabalhar na nossa seção de heróis. Então, se você está pronto para obter estrela sobre isso, bem, vamos fazê-lo 59. Herói: vamos terminar nossa seção de heróis agora para tornar mais fácil para os clientes potenciais encontrarem o que precisam . E neste caso, eles precisam de uma propriedade alugada para alugar. E o que vamos fazer é criar um filtro para que eles possam restringir sua pesquisa com base na localização, orçamento e em algumas outras opções de filtro também. E então eles podem filtrar e navegar até essa página com esses filtros para as propriedades imobiliárias que atendem aos seus requisitos. Então, em essência, esta é uma ação fria, e estamos facilitando essas perspectivas. Teoh facilmente encontrar o que eles precisam, fornecendo-o diretamente na seção de heróis. Isso é realmente simples de projetar é apenas baseado em formas e texto, então vamos em frente e fazer isso. Então vamos começar criando nossos antecedentes para a chamada à ação e isso. Vá em frente e crie uma nova camada e vamos mostrar nosso guia para que saibamos onde colocar tudo. Vou pegar meu retângulo selecionável com a letra M, e vou torná-lo 1230 pixels de largura e 200 pixels de altura. Vamos em frente e escolher uma cor suja. Vamos começar com preto por enquanto. Pegue seu balde, preencha a ferramenta e vá em frente e preencha isso em de select. A outra coisa que eu quero fazer é deixar cair a opacidade um pouco para que parte da imagem por trás dela passe. Então eu vou dar a volta. Vamos tentar 75 e nós também precisamos alinhar isso no meio, então eu acho que seria melhor alinhá-lo de cima para baixo esquerda e direita. E podemos fazer isso como você sabe, com nossa ferramenta de seleção de retângulos. Então vamos em frente e pegar isso e desenhar uma seleção para centralizá-lo dentro de. E, claro, também precisamos cortá-la para o conteúdo. E depois o quê? ferramenta de alinhamento deles. Podemos alinhá-lo ao centro de seleção e ao meio dos alvos. Perfeito. Em seguida, vamos criar nossas caixas de filtro. Eu vou ir em frente e criar uma nova linha anterior chamada Orçamento e vamos fazer com que três colunas de largura. E então, para a altura vamos fazer 65. Vamos escolher a nossa cor azul que usamos para a marca e, em seguida, preencha tudo bem, vá em frente e de Select Commander Control e a letra D. Tudo bem, vamos fazer o resto das caixas e então vamos alinhar tudo depois porque Precisamos de um texto no topo também. Este. Vamos fazer quatro colunas de largura e vamos fazer com que a mesma altura de 65 e as mesmas cores, e eu vou seguir em frente e completar o resto. Vamos fazer uma coluna, outra em uma coluna e, em seguida, as últimas 13 colunas, e todas elas serão 65 para a altura. Ok, vamos em frente, pegar todos eles e alinhá-los ao topo. Nós também precisamos ir até a camada e cortar o conteúdo de cada um dos diferentes Rose. Deus, você é Lyman Tool. Bem, Daniel, tecla Shift e selecione todas as linhas. Mude isso. O primeiro item e uma linha para o topo. Ok, estamos começando a ter um monte de camadas aqui, e isso está ficando organizado em um pouco caótico aqui. Então vamos em frente e organizar nossas camadas, e nós definitivamente precisamos colocar tudo em uma camada de grupo para o cabeçalho bem Então vamos em frente e fazer esse grupo nuclear chamado Header. - Tudo bem, vamos em frente e adicionar nossos rótulos no topo. Agora vamos usar a ferrovia 14 pontos e branco e você acha que eu quero fazer itálico em vez de apenas regular. Então a ferrovia, eu digo, veio para desligar todo o resto agora, incluindo o fundo, possamos alinhar esse texto ao topo. E também precisamos retirar esse texto dessa camada de grupo. Então, novamente, com a nossa ferramenta de alinhamento, vamos selecionar cada um deles com a tecla Shift e, em seguida, uma mentira para o topo. Ok, vamos adicionar nossos rótulos de formulário que vão por dentro aqui. Vamos mudar a fonte 224 para os sinais e a ferrovia regular. Ok, vamos em frente e pegar este e torná-lo realmente ousado. Então eu vou usar bem, tremido. Certo, então a última coisa que temos que fazer é alinhar tudo. Então, para os títulos do rótulo, vamos alinhá-los à borda de suas linhas e podemos simplesmente entrar e pegar cada camada. Eu também quero colocar estes em ordem, e então eu vou apenas usar minha ferramenta de movimento para movê-lo. Então faça isso para cada um. E então precisamos alinhar nossos rótulos dentro da Rosa diretamente no centro. E eu quero dar um pouco de espaço no lado esquerdo de cada linha também. Além disso, parece que a minha linha está desligada por um pixel. Então eu vou entrar e mover isso para cima, e nós também devemos organizar isso na ordem em que eles devem estar também. Eu só vou alinhá-lo com o topo e baixo novo. Então, o que? São retângulos eleitorais. Podemos fazer uma seleção, e então vamos tentar selecioná-la com nossa ferramenta de alinhamento. Está nos permitindo fazer isso, mudá-lo para seleção e, em seguida, uma linha no meio do alvo. Então eu vou seguir em frente e pegar cada uma dessas outras camadas e alinhá-la ao meio do alvo também. Ok, vamos em frente e mover tudo isso para cima. Mas primeiro precisamos fazer uma medição para descobrir a distância entre a borda esquerda e nosso texto para que possamos fazer tudo igual em todas as rosas diferentes. Agora, a única coisa que eu quero fazer é pegar esse conteúdo e movê-lo para a direita um pouco para darmais espaço aqui à esquerda. é pegar esse conteúdo e movê-lo para a direita um pouco para dar Então eu tenho 14 pixels. Na verdade, vou selecionar isso e torná-lo um bom até 15 pixels. E então só precisamos medir cada um desses também para colocá-los no lugar. Então vá em frente, faça suas medidas e mova tudo de acordo. Agora, para esses dois, nós vamos realmente enviá-la diretamente para o meio de suas caixas, já que eles são quadrados . Então vamos em frente e pegar o retângulo selecionável novamente para que possamos alinhar no centro para o centro e meio do alvo e, em seguida, a mesma coisa para este último aqui. Ok, vamos organizados são camadas um pouco. Vou criar um novo grupo de camadas para nossos títulos, outro grupo de camadas para nossos rótulos e, em seguida, mais um grupo de camadas para a seção de heróis. Vamos em frente e diminuir o zoom. Eu acho que nós só precisamos centro são chamados de ação. Na verdade, ainda não definimos a altura da nossa seção de heróis, então vamos fazer isso e vamos fazer 700 pixels de altura. Vamos em frente e fazer uma seleção em torno disso, e então nós vamos puxar nossa imagem de condomínio para que possamos alinhar tudo o resto na seção de heróis nessa área. E então a última coisa que precisamos fazer é cortar nossa imagem aqui para que ela não seja exibida abaixo da seção de heróis. Então vamos em frente e pegar essa imagem. Vamos fazer uma seleção apenas em torno desta parte que queremos nos livrar e uma máscara de camada e pressione branco, a letra D e depois a letra X e, em seguida, sua tecla delete ou backspace, e isso irá remover essa parte da imagem. E a nossa secção de heróis está terminada. Parabéns. Agora estamos prontos para passar para a próxima parte, que é criar os serviços do ou a seção de benefícios com essas quatro colunas. Mas primeiro vamos trabalhar na criação de nossos ícones para esses benefícios 60. Parte 1: Olá e bem-vindo de volta. Tudo bem, então agora vamos começar a trabalhar nesta parte do nosso corpo, que inclui quatro benefícios principais. E primeiro, vamos criar nossos ícones para cada um desses benefícios. Agora, quando se trata de ícones, você tem duas opções. Você pode encontrá-los gratuitamente on-line ou comprá-los on-line de outra pessoa, ou você pode criar o seu próprio para que não seja muito difícil encontrar ícones que estão relacionados a esses benefícios. Mas qual é a graça nisso? Então o que vamos fazer é criar esses 1° 2 ícones do zero, e então vamos fazer esses dois do zero na próxima lição. Então vamos em frente e começar criando um novo documento, Controle de Comandante e a carta em. Vamos Size em 75 por 80. E vamos preenchê-lo com Branco para que nosso ar ícones simplesmente vai ser feito de diferentes formas. Então vamos em frente e criar um novo mais cedo para a primeira forma. E para o tamanho, vamos fazer 70 por 75 e vamos apenas adicionar um traçado em torno da seleção para subir para editar e, em seguida, selecionar seleção de traçado. Vamos fazer dois pixels cor sólida e vamos fazer Black Que de Select Commander controle ea letra D. Eu só vou mover isso para a posição aqui. Também precisamos cortar os limites da camada. Nós vamos camada, cortar o conteúdo, e vamos também mostrar nossos limites. Então vamos em frente e fazer a nossa próxima forma. Também precisamos criar uma nova camada Ford também. Isto não é chamado este 101 E para o tamanho nós vamos fazer oito por oito, e então nós vamos terminar um derrame em torno dele novamente. Mesmo tamanho e D Select também foi cortar o conteúdo e vamos duplicá-lo três vezes. Em seguida, reorganize as camadas e, em seguida, vamos pegar cada uma destas e puxá-las para baixo. Então deve ser bom. Vamos pegar nossa ferramenta de alinhamento e selecioná-los todos com a tecla Shift pressionada. E então vamos mudá-lo para o primeiro item, e então vamos compensá-lo para zero para X e 25 para porque é um pouco demais. Vamos tentar 10. Não o suficiente. Vamos tentar 18. Vamos um pouco menos. Lá vamos nós. Isso vai funcionar. Vou colocar isto num novo grupo de camadas, está bem? Só precisamos fazer algumas linhas agora. Então, novamente, vamos usar nosso retângulo selecionável para criar uma linha. E eu vou fazer o meu 40 por dois. Vamos criar uma nova camada chamada mentira. Preencha com preto, selecione e recorte para o conteúdo. Vá em frente e mova isso para baixo. Então está na parte inferior desta caixa aqui, e eu vou duplicar três vezes e colocá-los em posição como humanos e apenas renomear estes 01 a 04 e colocá-los em sua própria camada de grupo. Tudo bem, vamos em frente e pegar os dois e colocá-los em outro grupo de camadas. Assim, podemos movê-los todos para baixo. Vamos em frente e fazer uma seleção aqui para que possamos colocá-la diretamente no centro do próprio esboço. Muito bem, vamos criar uma nova camada para o nosso círculo no topo. Vamos pegar nossa ferramenta de lábios e vamos desenhar um círculo. Vamos fazer 15 por 15. Na verdade, vamos torná-lo um pouco menor 13 por 13 e vamos adicionar um derrame. Vamos fazer um pixel desta vez a partir da linha com De Select. E então eu vou pegar minha ferramenta de texto para colocar na letra X. E eu vou fazer isso um pouco menor. Vamos fazer 12 dois grandes. Vamos tentar 10 e 8. Então eu vou fazer o meu às oito. Coloque isso bem no centro e, finalmente, um novo grupo de camadas para esse conteúdo. Certo, um último passo. Vamos criar um novo grupo de camadas chamado Conta, que é nosso primeiro benefício, e então vamos pegar isso e adicioná-lo ao nosso documento. Então, há o nosso primeiro ícone. Vamos em frente e trabalhar no nosso segundo ícone. Vou apagar isso, , então o 1º 1 foi bem fácil. O próximo que vamos fazer é ligar e vamos usar retângulos, retângulos arredondados e algumas linhas para criar o plugue. Então vamos em frente e criar nossa primeira parte do nosso plugue com uma nova camada, e vamos selecionar nosso retângulo selecionável. Queremos ter certeza de que temos cantos arredondados selecionados e um tamanho de 50 para o Raio. Agora, no que diz respeito ao tamanho da nossa parte inicial do nosso plugue, vamos fazer 80 por 35. Vamos subir para as edições e adicionar um traço a ele também. Dois pixels para a linha com Ir em frente e fazer isso de Select agora porque a seleção estava no lado de fora do meu documento aqui. Criou a borda da nossa forma bem aqui na borda do documento. Mas tudo bem, porque eu vou cortar isso para que eu possa ter algum espaço para as partes do baile de formatura da ficha . Então vamos em frente e pegar a ferramenta de seleção de retângulo novamente porque eu quero criar uma linha e eu vou colocá-la em uma nova camada caso eu precise de um movimento. Mais tarde, vou desligar os cantos arredondados e depois vou preenchê-lo com preto. Ok, eu vou voltar para a minha tomada para que eu possa cortar essa parte fora. Então eu vou apenas fazer uma seleção e, em seguida, ficar sob controle e a letra X para cortá-la . Acho que quero mover esta parte um pouco e depois cortá-la outra vez. Ok, eu gosto desse tamanho. Então eu vou ir em frente e ir para plug to layer, clique com o botão direito e selecione mesclar para baixo. E agora isso se torna um pedaço, e eu também vou ir em frente e cortar para o conteúdo também. Pode ser um pouco grande demais, mas vamos descobrir isso depois de fazermos um pouco mais do plugue em si. Vamos em frente e criar os pinos com o nosso retângulo selecionável nova camada e, em seguida, preenchê-lo com preto. Isso também é duplicar essa camada e movê-la para baixo. Vamos também cortar para o conteúdo para ambas as camadas, clique com o botão direito e selecione emergiu novamente e, em seguida, vamos colocá-lo diretamente no centro do próprio plugue. Ok, eu vou ir em frente e clicar com o botão direito e assassinar isso também. Eu vou duplicá-lo e desligá-lo e re tamanho. É menor para que eu possa trabalhar com uma cabeça de tomada menor por enquanto. E a razão pela qual eu duplicei isso é porque se eu decidir que eu preciso voltar para este tamanho, eu não tenho que refazer do zero e eu terei o original lá se necessário. Uma vez que eu termine. Se eu gostar deste tamanho mais do que eu vou apagar o que eu não preciso. Tudo bem. De volta ao retângulo cantos arredondados selecionáveis e vamos fazer 25 para o raio. E eu ia criar uma pequena forma aqui para começar a parte cordão da nossa forma. Quanto ao tamanho, vou fazer um pouco mais curto, vou fazer 12 por quatro. E vamos criar uma nova camada e preenchê-la com preto. E então eu vou mover isso para a direita, e então vamos cortar para o conteúdo também. Acho que isso é um pouco grande demais. Então eu vou ir em frente e pegar minha ferramenta de escala com Shift Plus s e torná-la menor. Então nove por três deve ser bom. Certo, precisamos criar o resto do milho. Agora, vamos criar uma nova camada chamada cabo para pegar seu retângulo selecionável Defina o raio para 25 . Então, para o tamanho, eu vou fazer 40 por 18 e nós vamos adicionar um golpe a ele novamente. Preto também. Perfeito. Ok, vamos de selecionar. Vamos em frente e cortar o fim disso fora. Certifique-se de ter cantos arredondados desligados e, em seguida, vá em frente e corte-o. Vamos avançar e mover isso para a posição e cortar para o conteúdo também. Então esta primeira parte do cordão eu quero fazer mais espessa. Então eu vou voltar para o turno mais s e aumentar a altura. Então, temos mais um pedaço daquele acorde sobrando. Então vamos criar uma nova camada chamada Cord três e vamos fazer cantos arredondados novamente. Com um raio de 25 Kayla e um derrame. Vamos cortar o conteúdo novamente e depois cortar o final com a nossa ferramenta de tenda para festas , Commander Control e X. E a nossa ficha está pronta. Só precisamos limpar nossas camadas um pouco. Vamos em frente e fundir algumas dessas camadas para baixo. Na verdade, não estou. Vá em frente e faça isso por todos eles. E vamos chamar os utilitários de camada e, em seguida, trazer isso para o seu documento. Ok, então este tipo é um pouco pequeno. No geral, eu vou ir em frente e trazer meus guias para baixo para o outro ícone, e então eu vou girá-lo com nossa ferramenta de rotação e apenas girá-lo para que ele está em um ângulo um pouco, e isso vai ajudar a preencher alguns dos esse espaço vazio. E agora o nosso segundo ícone está feito. A outra coisa que eu quero fazer é baixar a opacidade de nossos ícones porque eu acho que o preto é um pouco escuro demais. Então vamos baixar a opacidade para nada a fazer. 50 para ambos. E lá vamos nós. Temos dois ícones feitos, e vamos em frente e terminar os outros dois no próximo tutorial. 61. Corpo 2: Então temos mais dois ícones para projetar, e vamos usar nossas formas novamente, bem como outra ferramenta, que é esta ferramenta aqui, a ferramenta caminhos. Então vamos em frente e criar nosso ícone inicial primeiro. E vamos começar com uma nova ardósia. Vamos em frente e criar nossa primeira camada para a porta e pegar sua ferramenta de seleção de retângulo . Certifique-se de que os cantos arredondados estão desativados. E então para o tamanho, vamos fazer 18 por 30. Vamos adicionar um traço com preto indo para fazer para a linha com. E vamos nos certificar de que também cortamos o conteúdo. E eu também vou selecionar tudo com controle de Comandante e um e, em seguida, alinhar int para o centro. Certo, vamos criar outra camada. Vamos chamá-lo de casa, e vamos fazer isso de 1 54 por 54 outro traço de seleção e cortar o conteúdo e vamos movê-lo para a posição. Mesma coisa que vamos selecionar todos e usar nossa ferramenta de alinhamento para uma linha para o centro e , em seguida, de select. Ok, agora vamos criar o telhado para a casa e vamos selecionar esta ferramenta aqui, que é a ferramenta caminhos. Eu também vou arrastar um guia 2 37 pixels e, em seguida, ativar seu guia para que você possa vê-lo . Vamos começar o nosso caminho aqui no canto superior esquerdo da casa. Basta clicar ali, em seguida, vir para o lado esquerdo do documento, clicar novamente, e então você está indo para obter o pequeno caminho no meio. Esses dois pontos de ancoragem viriam ao nosso guia aqui no topo do documento e clicariam no guia ali e depois voltariam para o lado direito. E então vamos em frente e clicar aqui para terminar esse caminho. Agora, antes de adicionar o traçado ao caminho, vamos em frente e criar uma nova camada chamada Roof. Em seguida, vamos adicionar o traçado, subindo para editar e selecionando caminho do traçado. Ok, agora temos o telhado feito. Vamos voltar para a camada da casa para que possamos apagar esta parte da forma. Então descreva seus retângulos. Selecione ferramenta novamente e, em seguida, excluído com controle de Comandante e X. Ok, vamos em frente e criar uma chaminé foi colocado cantos arredondados e ajustá-lo para 10 para o raio. E, em seguida, para o tamanho, vamos fazer nove por 17 e, em seguida, adicionar um traço a ele. Tudo bem, eu quero apagar essa parte da chaminé, então eu vou pegar minha ferramenta de borracha com a letra E. Daqui, eu posso ir em frente e apagar essa parte da chaminé para que ela não apareça por dentro. Também quero tirar esta parte do telhado também. Então vamos pegar nossa camada de telhado e depois apagar dentro daqui. Vamos em frente e colocar tudo isso em um novo grupo de camadas. Foi pego colega de quarto. Tudo bem, vamos em frente e adicionar isso ao nosso projeto de Web design. Solte isso aí e vamos também baixar a opacidade para 50%. Muito bem, mais um ícone à esquerda. Vamos em frente, excluir esta camada e desligar as guias. Vamos pegar nossa ferramenta Elipse, e então, para o tamanho, vamos dimensioná-la 18 por 28. A Kate. Vamos adicionar uma nova camada e, em seguida, e seu traçado de select. Vamos nos certificar de não esquecer de cortar, o limite da camada e, em seguida, duplicado quatro vezes. Eu só vou ir em frente e colocar isso em posição, então algo assim. Tudo bem, vamos voltar para a ferramenta Elipse e eu quero fazer o meu e 42 por 29 Nova camada. E, em seguida, adicione o curso de seleção Commander Control e D. Eu vou voltar para a minha ferramenta de borracha porque eu quero apagar parte disso aqui mesmo. E então eu vou pegar minha ferramenta de pincel com a letra B e, em seguida, até o tamanho, eu vou ir quatro para o tamanho do pincel e então eu vou apenas pintar em um pequeno arco bem aqui. Então isso parece muito bom. Vou colocar isso no novo grupo de camadas. E a razão pela qual eu estou colocando tudo isso em um novo grupo de camadas versus mesclar todos eles é porque talvez mais tarde, eu vou querer redimensionar parte do ícone. E eu posso simplesmente fazer isso selecionando as camadas individuais que eu quero redimensionar versus ter que fazer tudo do zero. Ok. Certifique-se de baixar a opacidade para 50 também. Bem, ele vai limpar minhas camadas aqui, renomeá-las um pouco. Coloque-os em ordem, e estaremos prontos para ir para o próximo tutorial. Certo, terminamos com nossos ícones. No próximo tutorial. Vamos em frente e terminar esta seção adicionando algum conteúdo, centralizando tudo e organizando as camadas. Então, se você está pronto para isso, vamos fazê-lo. 62. Benefícios na parte 3: Olá e bem-vindo de volta. Tudo bem, então temos quatro benefícios, 12 colunas. Então vamos dividir cada duas colunas em três colunas. Vamos em frente e primeiro definir a altura da seção, que será de 430 pixels. Então eu vou ir em frente e tomar uma medida do fundo da minha seção de heróis e descer para 430 vamos e uma diretriz. E isso nos ajudará a centralizar tudo de cima para baixo assim que chegarmos a esse ponto. Ok, vamos em frente e digitar algum conteúdo para os títulos que eu vou fazer. Ferroviário semi negrito 24 para o tamanho e uma cor cinza escuro para a cor. Vá em frente e coloque esta camada aqui em cima. Vou datilografar tudo por enquanto. E então vamos organizar e centralizar tudo de acordo. Então, para um parágrafo, eu só vou voltar para a ferrovia regular para o conteúdo que eu vou fazer 16 e da mesma cor. Vou apenas clicar e arrastar uma caixa de texto. Já tenho algumas informações que vou colar. Você pode digitar a mesma informação ou você pode apenas usar algum texto fictício. Eu acho que ele realmente fazer esta caixa de texto a largura total de todas as três colunas também vai trazer isso para cima também. E então só precisamos criar um link de texto aqui na parte inferior. Vou torná-lo ousado, e vou escolher a cor azul da marca da empresa. Certo, vamos colocar isso em posição. Vou desligar minhas grades por enquanto. Agora, vamos trabalhar em algum espaçamento. Então, o espaçamento entre nosso ícone e nosso título, eu quero que ele seja 20 pixels. Então eu vou ir em frente e medir isso. Vamos em frente e alinhar esses dois. Vamos criar um novo grupo de camadas chamado Conta, e eu vou colocar meu título e meu ícone no interior. E então eu vou seguir em frente e pegar minha ferramenta de seleção de retângulo para que eu possa alinhá-la entre essas três colunas, retornar minhas notas e ter certeza que eu tenho todas as grades selecionadas. Certo, vamos desligar a rede e depois? O alinhamento irá em frente e agarrar esse conteúdo e uma linha para o centro ou parágrafo já deve estar centrada. Desde que aplicamos em três colunas. Só precisamos que Graham crie um link de perfil e alinhe isso ao centro. Ok, Next, precisamos de selecionar e continuar com o nosso espaçamento entre o título do parágrafo e o link aqui em baixo. Então vamos pegar nossa ferramenta de medição novamente e vamos fazer 30 pixels da parte inferior do título para o parágrafo e, em seguida, 20 pixels novamente para a parte inferior do parágrafo e nosso link. Ok, vamos colocar toda essa informação na camada de grupo chamada conta. Certo, só precisamos fazer isso mais três vezes. Vamos em frente e desligar minhas armas. E para tornar isso mais fácil, podemos apenas duplicar esse grupo dessa camada, movê-lo e, em seguida, ajustar o conteúdo e o ícone com o ícone apropriado. Em vez de apenas digitar tudo do zero, poderíamos usar o mesmo conteúdo. Podemos usar um novo texto fictício. Ou se você quiser ter um tempo para escrever algo novo, você pode fazer isso também. Então eu vou em frente e terminar isso. Você pode assistir, ou você pode ir em frente e pular esta parte e terminar você mesmo. E, em seguida, não se esqueça de alinhar todo esse conteúdo quando estiver em um novo grupo de camadas chamado Benefícios on-line na seção de heróis na parte inferior da seção superior a inferior. Então eu vou em frente, ligar minhas grades e começar a alinhar todo o meu novo conteúdo. - Certo , estamos quase terminando. Vou em frente e alinhar tudo. Agora eu preciso colocá-lo em uma nova camada de grupo, e é isso. Nossa seção de benefícios agora está concluída. 63. Landlord: já que nosso cliente tem duas pessoas principais que eles precisam segmentar, nós temos que criar uma seção para esse segundo grupo, então seu principal serviço é fornecer listagens para aluguel. Mas eles precisam que essas listagens reais venham de proprietários ou proprietários, então eles precisam ter certeza de que eles podem continuamente adicionar novas listagens, espero que em uma base diária. Portanto, queremos criar uma seção para os proprietários para listar facilmente sua propriedade. Então ele aparece neste site. Então a primeira coisa que vamos fazer é definir a altura desta seção, que vai ter 150 pixels de altura. Então vamos pegar nossa ferramenta de medição e medir 150 pixels. Mas um cara lá embaixo e vamos criar um fundo para pegar sua ferramenta de seleção de retângulo, fazer sua seleção. Vamos criar uma nova camada chamada fundo. Vamos em frente e escolher a cor azul que temos usado a partir de sua marca e seguida, ir em frente e preenchê-lo com sua ferramenta de seleção de preenchimento de balde. Vamos renomear o fundo do proprietário da propriedade. Em seguida, vamos em frente e pegar nosso têxtil. Vamos mudar de volta do dedo do pé branco. Vamos fazer a ferrovia ousada. Vamos fazer 24 para o tamanho e, em seguida, disco à frente e digitar uma linha de texto. Só vou colocá-lo bem ali. Ainda não sei onde o quero. Ok, vamos em frente e criar o nosso Mas agora, vá em frente e agarre a sua direita. Ferramenta Kingo Select. Queremos cantos arredondados em 25 para o Raio e, em seguida, para o tamanho, vamos fazer 75 100. Vamos criar uma nova camada chamada lista de botões agora e, em seguida, ir em frente e preenchê-lo com branco. Tudo bem, vamos pegar nossa ferramenta de texto e vamos usar a seta tamanho 50 e vamos usar a mesma cor azul Tapout lista agora. Então só precisamos centralizá-lo dentro do botão. Vamos pegar nossa lista de botões agora e cortar o limite da camada. Vá em frente e selecione-o com o seu coxo uma ferramenta e uma linha para o centro e meio. Ok, eu vou colocar isso em um novo grupo de camadas chamado Les Nail Button e vamos em frente e alinhá-lo de cima para baixo de seleção. Vamos em frente e mover nosso texto um pouco mais. Vou ir em frente e ampliar. Tudo bem, vamos em frente e adicionar 50 pixels de espaço entre a ferramenta, então pegue sua ferramenta de medição e meça 50 pixels. Ok? Eu também preciso alinhar isso no fundo de cima para baixo. Vamos em frente e colocar esses dois em um novo grupo de camadas. Vamos chamá-lo de donos de imóveis. Então o botão e o conteúdo vão para lá. O fundo. Vamos deixar de fora só por um segundo porque precisamos alinhar isto ao centro dos documentos. Então, selecione tudo com controle Commander e um, em seguida, selecione o conteúdo e alinhar centro de conteúdo de Select, em seguida, coloque a propriedade em seu plano de fundo dentro dessa camada de grupo. Nós realmente precisamos mover isso de volta para baixo. Feche isso. Eu também tenho minha imagem de condomínio ouvir da seção de heróis, não nas camadas de grupo. Então eu vou ir em frente e colocar isso no interior e movê-lo para baixo e pronto. Nossa seção de proprietário da propriedade agora está concluída. Essa foi fácil. Tudo bem. No próximo tutorial. Vamos começar a trabalhar nas quatro ou cinco categorias de propriedades principais , , então se você está pronto para isso, vamos fazê-lo. 64. Listagens: dependendo do estágio em que um cliente potencial está no ciclo de compra ou no ponto em que ele está pronto para alugar. Algo pode determinar o quanto e até onde eles navegam em um site específico. Então, por exemplo, eles ficam na página inicial, e eles têm a oportunidade imediatamente de filtrar propriedades com base em seu orçamento, o local e alguns outros fatores. Mas eles podem não estar prontos para procurar quatro propriedades desta empresa em particular neste momento. Eles podem querer descobrir um pouco mais sobre a empresa primeiro. Por que eu deveria fazer negócios com esta empresa? Então, nesse caso, eles podem começar a rolar para baixo ou navegar para uma das opções de navegação aparecem de modo que eles rolam droga, eles são apresentados com quatro benefícios para alugar propriedades através desta empresa particular . Então estamos vendendo os serviços desta empresa com esta seção de serviços. Eles podem ser atraídos a fornecer seu endereço de e-mail para que eles possam ser notificados quando uma nova listagem é fornecida. Eles gostam da idéia de que esta empresa vai ajudá-los a organizar seus utilitários porque eles estão muito ocupados, e eles realmente não têm tempo para fazer isso. Sim, eles provavelmente poderiam encontrar tempo, mas eles estão tão ocupados, que seria bom ter alguém fazendo isso por mim. Então, o que eu ganho com isso? Estas são as coisas que estão nele para aquele inquilino. Então agora eles estão começando a pensar, OK, esta empresa me protege. Estou pronto para começar a procurar para que eles possam voltar aqui e começar a filtrar. Ou se eles rolar para baixo longe o suficiente, eles vão então ver listagens de propriedades com base nas quatro ou cinco categorias mais populares, que é o que eu projetei aqui. Então o pensamento é que queremos colocar os pedidos mais populares no topo, seguido por cada um dos tipos menos populares de categorias. Então, talvez para esta empresa em particular, seu maior ponto de venda é que eles têm aluguéis de animais de estimação, e esse é o tipo de filtros mais populares que as pessoas estão solicitando. Então você quer colocar isso no topo, e cada vez que um novo anúncio é adicionado, ele é adicionado aqui à esquerda e, em seguida, o da direita é batido para que você tenha novas listagens sempre sendo listado na página inicial. Mas você vai sempre clicar em Seymour muito bem, Propriedades Seymour nesta categoria particular, Talvez isso não é uma categoria que você realmente se importa porque você não tem nenhum animal de estimação, enquanto talvez lofts são o tipo de propriedade que você quer e estes ar os próximos tipos mais populares fora pedidos de aluguer. E, novamente, nós apenas facilitamos que os clientes potenciais encontrem o que precisam, e eles podem rolar para baixo e encontrar uma listagem específica que funcione para eles. Então vamos em frente e projetar esta parte dos sites e juntá-la. É realmente super simples. Temos uma manchete. Temos duas formas, uma para um espaço reservado de imagem, uma para conteúdo. E então colocamos nosso conteúdo dentro de lá. E então tudo o que temos que fazer é uma vez que criarmos este 1º 1 é duplicado três vezes e o mar mais link. E então podemos duplicar todo esse conteúdo 34 vezes mais. Mude as manchetes e, claro, queremos entrar e adicionar imagens diferentes. Não é necessário fazer isso. Você poderia tecnicamente liderar a mesma imagem para cada anúncio porque isso é apenas para uma revisão para o seu cliente. E, claro, deixe o conteúdo o mesmo para cada anúncio. Mas eu gosto de ir mais longe e não apenas prestar atenção aos pequenos detalhes, mas eu quero dar ao meu cliente uma representação visual do que eles podem esperar que seu site seja uma vez que ele entra ao vivo. Sim, eles podem visualizar isso com esta casa em todas as categorias de alistamento. Mas eu acho que ajuda a dividi-lo e a visualizar melhor o que está acontecendo para seu novo site, quando eles podem realmente ver diferentes imagens e diferentes listagens em preços diferentes. Então é muito simples de fazer, e leva apenas 10 15 minutos para entrar e alterar algumas dessas informações e para alterar as imagens. Então, é apenas ir aquele pequeno milha extra para ajudar nossos clientes a ver visualmente como seu site vai ser quando eles aprovarem o design final. Então, a primeira coisa que você precisa fazer é baixar algumas imagens. Então eu só fui escolher Sabei Dot com e fiz uma busca por casas imobiliárias. Você pode baixar uma imagem, ou você pode baixar 16 imagens diferentes com base nas quatro categorias diferentes, e então uma vez que você tenha todas elas baixadas. Vá em frente e adicione-os ao seu projeto e coloque essas imagens nas categorias apropriadas . E eu tenho aluguel de loft amigável para animais de estimação, aluguéis com piscinas e casas isoladas e, em seguida, renomeado essas camadas grupos de acordo. E então você pode querer renomear cada uma dessas camadas também, com base na categoria, com base na categoria, que pudéssemos ter animais de estimação de um a quatro e, em seguida, fazer o mesmo para os outros também . Mas antes de fazermos isso, quero dar-te outra dica rápida. Agora, mesmo que eu goste de renomear minhas camadas de acordo com base no conteúdo dessa camada, eu quero compartilhar uma razão pela qual você pode não querer renomear essas camadas. Quando você baixar essas imagens de picaretas obedecem, elas têm um nome de arquivo específico anexado a elas. Então, se olharmos para este 1º 1 aqui e todos os outros, temos casa, depois um número de sete dígitos, e então ah, número de três dígitos. Se entrarmos e selecionarmos este número de três dígitos e depois copiarmos e colarmos em picaretas, obedecermos à pesquisa, isso nos levará à imagem exata que baixamos. E isso é 6 40 nos diz a resolução que baixamos então 6 46 40 Agora que torna mais fácil encontrar a imagem exata que você baixou porque digamos que você renomeou isso e então seu cliente diz que eu amo essa imagem. Vamos usá-lo no site ao vivo. Bem, essa resolução que você baixou talvez dois pequenos, especialmente se você vai fazer uma imagem grande como esta. Então agora você precisa voltar, e você precisa encontrar essa imagem específica para que você possa baixá-la e uma resolução mais alta. O problema é que você renomeou a Camada, e você não manteve o trato da URL para essa imagem. Portanto, esta é uma razão pela qual você pode não querer renomear a camada porque torna mais fácil encontrar essa imagem específica mais tarde, se necessário. Agora, para este projeto em particular, eu sei que este cliente não vai usar essas imagens porque eles não estão ouvindo essas casas reais em seu site. Então, neste caso, estou bem em renomear essas camadas amigáveis de um a quatro. E é claro que eu teria que fazer isso para as outras camadas também e eu vou fazer isso mais tarde . Agora, vou em frente e fazer estes quatro, está bem? Agora que temos as imagens no lugar, precisamos redimensioná-las. Precisamos criar um fundo para que possamos anti sombra para ele para a imagem e para o conteúdo também. Mas primeiro preciso aumentar o tamanho da tela porque estou ficando sem espaço. Então eu vou subir para a imagem e selecionar o tamanho da cama, ter certeza que está desbloqueado, e então, para a altura, eu vou apenas fazer 5000 e redimensioná-lo. Eu também preciso adicionar branco a essa camada de fundo também. Então eu vou selecionar uma camada de fundo e aumentar o tamanho do limite para o tamanho da imagem. E então com a minha ferramenta de enchimento de balde, posso preenchê-la com branco. Ok, agora podemos começar a trabalhar no nosso título e na sombra para as imagens e um espaço reservado para o conteúdo. Vamos em frente e fazer o nosso título primeiro, pegue sua ferramenta de texto com a letra T Vamos fazer Railway Bold 36 para o tamanho e, em seguida, cinza escuro para a cor. Certo, vamos selecionar. Além disso, podemos alinhar esse título diretamente no centro do documento. Eu também vou mover isso para cima, e eu também preciso desativar os outros grupos de camadas também. Ok, agora, com a minha ferramenta de alinhamento, eu posso selecioná-la e linha o centro do alvo. Ok, agora que isso está feito, podemos começar a trabalhar em nossas imagens. Então eu quero entrar na minha primeira camada de grupo aqui. Vou criar um novo plano de fundo chamado fundo. Certifique-se de selecionar também com Commander Control em D para se livrar dessa última seleção. Ok, agora podemos ir em frente e criar nosso plano de fundo para imagens e conteúdo, e vamos torná-lo com três colunas de largura, que tem 275 pixels de largura. E isso nos dará quatro imagens uniformemente espaçadas e dimensionadas entre essas três colunas. Então vamos digitar para 75 para o com. E então para a altura, vamos fazer 270. Vamos em frente e preenchê-lo com branco com a nossa ferramenta caçamba. E se eu pressionar a letra D e depois a letra X, eu fico branco no meu primeiro plano e então eu posso preencher isso em que de select com Commander Control e a letra D e ir em frente e movê-lo aqui para o canto superior esquerdo, e então nós pode ir em frente e adicionar nossa sombra. Então filtra luz e sombra e sombra. Agora, no projeto anterior, tínhamos muitas sombras em todo o projeto, e eu quero dar outra dica rápida para usar sua sombra, bem como outros filtros, porque nós tem algo dentro desses filtros que facilitará a lembrança das configurações exatas que usamos anteriormente. E você deve se lembrar que eu disse, eu não lembro as configurações exatas que eu usei, e eu fiz isso de propósito para que eu possa então mostrar a vocês neste projeto como lembrar facilmente as configurações exatas que você usa se fizermos ajustes e nós como esses ajustes, podemos realmente salvar essas configurações para uso futuro criando o que é conhecido como uma predefinição predefinida é uma ferramenta ou uma função que irá salvar todas as opções que você selecionar para que você possa usá-lo mais tarde, e podemos simplesmente fazer isso clicando neste ícone de adição. Dê-lhe uma dama. Só vou chamá-lo de Drop shadow Clique em OK, E, em seguida, se você entrar neste menu suspenso predefinido, role para baixo para baixo, você verá esse nome aqui. Também tenho outro aqui chamado Drop Shuttle. Então agora eu tenho 11.795 para o X e o Y. Mas se eu selecionar minha sombra favorita, essas configurações mudam com base no que eu salvei no momento, não só isso, mas também salva suas últimas sombras usadas. Então, no projeto anterior, eu poderia simplesmente ter ido e selecionado esta data em particular, e seria, e as configurações que eu selecionei naquele momento e tornando muito mais fácil aplicar a última gota usada Sombra. Portanto, não há necessidade de anotar essas configurações ou tentar lembrá-lo. Quando você pode criar uma predefinição, você também pode aplicar predefinições a alguns dos outros filtros também. Portanto, basta ter isso em mente quando você criar um filtro específico e você gostar desse filtro, certifique-se de criar uma predefinição para que você possa acessá-la facilmente novamente no futuro. Então eu vou para a minha sombra favorita. Na verdade, vou mudar as configurações e aumentar a opacidade. Vou em frente e salvá-lo. E como eu já usei esse nome antes, ele só vai adicionar um número depois dele. O que torna mais fácil manter o controle das diferentes sombras favoritas que eu crio agora que eu dou uma olhada nessa sombra. Acho que é muito intenso para esses projetos em particular. Na verdade, vou deixar isso de volta para 50. Eu não vou salvá-lo porque eu posso acessar a última sombra usada a partir daqui. E há também outro lugar onde podemos acessá-lo também. Então deixe-me mostrar-lhe que vou aplicar isso e vamos em frente e desfazer isso com o Controle do Comandante e a Letra Z para me livrar dele. E digamos que eu queira usar essa sombra exata novamente sem ter que entrar naquele painel de filtro. Bem, se formos até os filtros, podemos ver uma opção aqui. Diz Repetir a sombra e este é o atalho do teclado. Então comando ou controle, vai ser comando Se você estiver em um controle Mac mais F então eu poderia estar trabalhando neste projeto, eu poderia selecionar minha camada de fundo e então apenas aplicar esse atalho de teclado, Comandante Controle e F. E então ele se aplica diretamente a essa camada sem ter que ir até o menu para selecioná-la . Quão legal é isso? Então, isso torna muito mais fácil continuar usando essa mesma sombra em todo o seu projeto versus como fizemos isso no projeto anterior, onde entramos nesse menu de filtro repetidamente para configurar essas opções específicas. Tudo bem, vamos em frente e mover nossa camada de fundo atrás de nossa primeira imagem aqui, e vamos limitar esta imagem ao com deste fundo em particular. Eu só vou ampliar um pouco aqui e ter certeza de que minha imagem está perfeitamente alinhada com o fundo. Então, qual é a minha ferramenta de movimento e as minhas teclas de seta? Eu só vou colocá-lo em posição. Agora eu vou pegar minha ferramenta de seleção de retângulo e vamos criar uma seleção com 275 pixels de largura, que é as três grandes colunas de largura. E então para a altura, vamos fazer 100 e 80. Então podemos ir em frente e pegar essa seleção e movê-la diretamente no lugar onde precisamos dela, basta clicar no interior dessa seleção e, em seguida, movê-la com o mouse. Também podemos usar nossas setas para colocá-lo exatamente onde queremos agora. Porque ainda tenho a minha imagem selecionada. Posso entrar e adicionar uma máscara de camada. Certifique-se de que você tem seleção e clique em Adicionar. E então ela aplica essa máscara de lira à imagem e confina-a a essa forma. Ok, agora podemos ir em frente e pegar esta camada de fundo e duplicar três vezes para as outras imagens. E então eu vou em frente e reorganizar estes para que eles estejam na ordem correta. E então nós só precisamos mover cada um deles para a posição em que eles precisam estar também vai ligar nossas grades para que possamos ter certeza de que tudo está perfeitamente alinhado onde eles precisam estar. Certo, vou agrupar essas duas camadas aqui para poder movê-las. Chame de imagem um. Eu também vou ligar o meu guia para que possamos anti-guia para o topo para que eu possa alinhar todas as outras camadas para o topo dele. Então a última coisa que precisamos fazer é criar essas seleções de retângulos para que possamos limitar as imagens aos fundos. Vamos em frente e virar nossos guias e nossa grade fora e vamos em frente e mover nossas outras imagens em posição para que elas estejam acima de seus respectivos fundos. Esta imagem precisa ser redimensionada, então eu vou em frente e pegar isso. E minha ferramenta de habilidade era Shift Plus s. Vamos em frente e fazer para 75 para o com. Temos uma altura de 184, o que é bom, porque vamos usar nossa máscara de camada para confiná-la a 180 pixels de altura. Nós só precisamos movê-lo para a posição, e eu também vou mover minhas outras imagens para a posição também. Ok, eu posso ir em frente e criar minha seleção agora com minha ferramenta de seleção de retângulo. E nós vamos fazer 75 por 180 certificar-se de que você tem a camada correta selecionada. Eu preciso da minha segunda imagem, e então eu preciso adicionar minha máscara de camada. Então vá em frente e faça isso para as outras imagens também. Ok, tudo parece muito bom. Agora, vamos em frente e adicionar nosso conteúdo para nossas listagens. Então, o que? texto deles para outra vez? Vamos usar a ferrovia regular e vamos fazer 18 para o tamanho e são de cor cinza escuro novamente. E então digite o endereço da rua, a metragem quadrada e o preço da casa. Parece que tenho tudo centrado. Então eu vou selecionar tudo com controle de Comandante e um e, em seguida, em duas opções, eu vou mudar a justificativa para que ele seja alinhado à esquerda. Eu também quero pegar este preço e torná-lo ousado e torná-lo um pouco maior. Então eu vou fazer 20 por isso. E então eu só preciso pegar esse conteúdo e movê-lo para a posição. Agora, eu posso ir em frente e duplicar esta camada três vezes e mover cada uma para a posição. Ok. Eu vou ir em frente e puxar cada um destes para que eu possa alinhá-los todos no topo para ter certeza de que eles estão todos alinhados corretamente. Então o que o Lehman Tool e sua chave de turno seguraram? Vamos em frente e clicar em cada camada, alterá-lo para o primeiro item, e uma linha para o topo pode ir em frente e colocá-los em posição agora e, em seguida, organizá-los que eles estejam todos na posição correta de acordo com sua listagem. Eu também vou pegar cada uma dessas camadas e, em seguida, agrupá-las de acordo com base em sua posição. Então grupo nuclear Imagem 4 e então vamos colocar cada uma dessas camadas dentro. Então vamos em frente e organizar todas as nossas camadas da mesma maneira. - Ok , então estamos quase terminando com nossa primeira categoria. A lição que precisamos fazer é adicionar um link Seymour na parte inferior. Então, para o que eles estão mandando novamente? Vamos dimensioná-lo em 18 pixels. Vou fazer a ferrovia ousada e, em seguida, para a cor, vamos usar a nossa cor azul que usamos anteriormente. E depois vou bater no Seymour. Vamos em frente e puxar isso para fora. Selecione tudo para que possamos usar nossa ferramenta de alinhamento para alinhá-lo ao centro e também vamos mover isso para cima. Só vou usar minha tecla de seta para cima por enquanto. Só para colocar isso em posição deve ser bom. E então eu posso colocar isso no fundo deste jogador de grupo. Agora que nossa primeira categoria está pronta, as próximas três seções são realmente fáceis. Tudo o que temos que fazer é pegar esta camada de grupo e duplicá-la três vezes e, em seguida, substituir nossas imagens e alterar o conteúdo para tornar todo o conteúdo diferente. Eu vou em frente e mover este grupo inclinado para baixo, e então eu posso tirar as imagens deste jogador do grupo para colocá-las neste, e então eu posso entrar e mudar todas as imagens de acordo. Canadá, apague este jogador do grupo, já que eu não preciso mais desse. E então tudo que eu tenho que fazer é entrar e apagar essas imagens e depois substituí-las pelas novas. Então eu vou ir em frente e terminar esta categoria e o próximo, mas eu vou acelerar o resto do tutorial porque você já deve saber como aplicar essas imagens a esse tamanho específico. Então vá em frente e termine as próximas três seções e, em seguida, no próximo tutorial irá em frente e trabalhar na próxima seção do nosso projeto de design, que vai ser adicionando uma seção blawg, bem como posicionamentos para alguns anúncios. Então vá em frente, termine as próximas três seções e eu vou vê-lo no próximo tutorial. 65. Barra lateral de blog: após minha consulta inicial com meu cliente e depois de algum pensamento e pesquisa sobre seu projeto particular. Ao rever sua concorrência, eu posso decidir que eles poderiam se beneficiar de um blawg e talvez até de algum espaço publicitário naquele blawg, bem como em sua página inicial. Então eu não vou necessariamente contatá-los e perguntar-lhes sobre isso antes de eu projetá-lo, porque esta seção particular aqui não leva muito tempo para fazer 10 15 20 minutos apenas para colocá-lo juntos. E então, quando eu fornecer o conceito de design para o meu cliente revisar, falarei com eles sobre esta seção específica do site e como ele vai beneficiá-los e gerar mais tráfego para o site deles e ou adicionar receita adicional através do espaço publicitário para essa empresa em particular. E no final, se eles não fizerem o espaço publicitário, mas eles concordam em fazer um blawg do que o tráfego adicional eventualmente gerará mais renda porque eles estão dirigindo mais tráfego para seu site. Então, esses são serviços adicionais que você pode vender seus clientes, ajudando-os a criar um blawg e começar fazendo alguém escrever para eles, seja você ou talvez você terceirizá-lo. Ou talvez tenham alguém dentro da empresa que possa escrever para eles. Mas o que você pode fazer é educá-los sobre como escrever para motores de busca. Então, novamente, esse é um outro serviço que você pode fornecer é a otimização do mecanismo de busca se você não vai ser o escritor, ou talvez além de para que você possa ter certeza de que esses artigos estão indo para ser encontrado para sua palavras-chave específicas para secar o tráfego de volta ao seu site. Portanto, existem vários tipos de serviços que estamos projetando neste site em particular que vamos tentar e vender o nosso cliente depois que eles vêem são projetados conceito e não necessariamente tentar vendê-los nele antes. É sempre mais fácil mostrar visualmente seu conceito a alguém e explicar como e por que essa parte específica do site ajudará sua empresa a crescer. Dito isto, vamos em frente e montar esta parte do site, Então, para esta seção, você vai precisar encontrar cinco imagens diferentes e adicioná-las ao seu projeto. Estas duas imagens à direita. Eu só escolhi aleatoriamente a partir de uma pesquisa on-line rápida e, em seguida, para essas três imagens, eu baixei diretamente de picaretas. Obedeça. E se você quiser usar exatamente as mesmas imagens, basta anotar esses números de sete dígitos e, em seguida, fazer uma pesquisa e escolher uma isca para encontrar essas imagens exatas. Uma vez que você tenha baixado e adicionado ao seu projeto, vamos então criar esse divisor para separar essas duas seções. Então vamos em frente e ampliar, ligar suas guias e pegar sua ferramenta de medição e medir 40 pixels de espaço. Então é aqui que vamos colocar o nosso divisor. Mas antes de criarmos esse divisor, vamos em frente e criar outros 40 pixels de espaço entre o topo da próxima seção e o divisor. Ok, nós podemos criar nosso divisor com nosso retângulo selecionável com a letra M, e nós vamos fazer 1200 pixels de largura, que é o tamanho do nosso sistema de grade. Vá em frente e crie um novo divisor chamado anteriormente, depois pegue uma cor cinza escuro e preencha com seu filtro de balde. Todos eles selecionam com controle de comandante e a letra D, e eu acho que é um pouco grosso demais. Então eu vou ir em frente e cortar o limite da camada, e então eu posso pegar minha ferramenta de escala com Shift Plus s e eu vou fazer três para a altura. Certifique-se de que ele é escala de cliques desvinculados, e isso está parecendo melhor, mas é um pouco intenso demais, então eu vou baixar a opacidade para cerca de 20 e isso é definitivamente muito melhor agora. Tudo bem, vamos em frente e ligar nossos guias e vamos adicionar nosso primeiro título. Então eu vou pegar minha ferramenta de texto com a letra T. Eu vou fazer ferroviário ultra negrito e 24 para o tamanho e, em seguida, cinza escuro novamente para a cor do texto. Aperte a tecla de escape para sair dessa ferramenta. Em seguida, pegue sua ferramenta de movimento para movê-la para a posição. Então queremos mantê-lo no lado esquerdo desta coluna e não na borda externa aqui. Ok, agora podemos começar a redimensionar imagens artísticas colocando-as onde elas precisam ir, então vamos voltar à nossa ferramenta de medição para que possamos colocar 40 pixels de espaço entre o título e a primeira imagem, então podemos pegar nossa imagem e colocá-la em posição. Então, novamente, para este, eu vou ter certeza de que a imagem está no lado direito desta terceira coluna porque queremos torná-la com três colunas de largura. E se eu for muito longe para a direita, então parte do rosto dele vai ser cortada. Então, com meu retângulo selecionável, eu vou seguir em frente e fazer 275 pixels de largura e 180 pixels de altura. Certifique-se de ter sua camada de imagem selecionada e criar uma máscara de camada com uma seleção para cortá-la para esse tamanho K d Select com Commander Control e a letra D. Vamos avançar e fazer outros 40 pixels de espaço entre as imagens, e Então vamos em frente e repetir a mesma coisa para esta imagem. Então para 75 por 180 e, em seguida, criar uma máscara de camada que a mesma coisa que vamos medir fora, movê-lo e cortá-la. Certo, vá em frente e de selecione. Pegue sua ferramenta de medida e faremos isso mais uma vez para a próxima imagem. 40 pixels de Controle do Comandante Espacial e D para selecionar. E então vamos criar nosso conteúdo para cada um de nossos círculos. Vou pegar minha ferramenta de texto. Vou mudar o tamanho da fonte para 18 e apenas a ferrovia normal Bold. Eu também vou clicar e arrastar para fora uma caixa de texto que tem quatro colunas de largura. Vá em frente e digite seu título. Certifique-se de que está alinhado à esquerda. Vou fazer essa caixa de texto menor para que fique na parte inferior do texto. Pressione a ferramenta de texto da tecla de escape novamente. Clique e arraste para fora, e eu quero que a parte inferior do texto não seja mais do que a parte inferior desta imagem aqui. Então vou pegar um texto falso para colar aqui dentro. Vou selecionar tudo porque é muito grande. Vou fazer 14 anos e a ferrovia regular, sem ousadia. E, em seguida, aqui na parte inferior, eu vou digitar, ler mais, então você pode selecioná-lo e mudar a cor para representar um link. Eu acho que eu quero fazer isso ousado bem para ajudar a se destacar apenas um pouco mais Eu vou ir em frente e colocar este conteúdo em um novo grupo Lear chamado Artigo Um. Então eu vou duplicá-lo duas vezes, e então eu vou apenas movê-lo para baixo em posição. E agora que nossos artigos ar feito, estamos quase terminando. Então nossas imagens vão passar aqui à direita, e nós vamos fazer com que elas tenham quatro colunas de largura. Vamos avançar e mover a primeira imagem para o topo da primeira imagem e para o lado direito da coluna direita. Eu também vou mover isso. Então, Aiken, centralizá-lo um pouco melhor em quatro colunas. Então bem ali, e então eu vou pegar minha ferramenta de seleção de retângulos para que eu possa cortar essa imagem para esta posição. Eu também quero e uma diretriz aqui na parte inferior da primeira imagem. E então eu vou colocar minha imagem bem nesta área aqui, e eu vou agarrá-la mais uma vez e movê-la para cima um pouco para que eu possa centrá-la um pouco melhor. E então eu posso usar minha ferramenta de seleção de retângulo para fazer minha seleção e, em seguida, e uma máscara de camada . Ok, então esse é o primeiro anúncio. Nós vamos fazer a mesma coisa para o segundo anúncio, e para este, eu vou cortá-lo para o final do nosso último artigo, e então eu vou apenas recompor, então é um pouco centrado e podemos ver mais da informação. Ok, volta ao retângulo, selecionável novamente para fazer nossa seleção e, em seguida, adicione sua máscara de camada, selecione Controle de Comandante e o ok, vamos desligar a grade. Vamos desligar os ginásios agora. A seção está pronta, mas temos mais um passo à esquerda, e que é o dedo organizar nossas camadas. Então, temos muitas camadas aqui para nossa nova seção e nossa seção anterior, que era nossas listagens. Então vamos em frente e organizar nossas listagens primeiro, e então faremos a outra seção. Tudo bem, seção do nosso blog está pronta, e estamos prontos para terminar nosso design adicionando nosso rodapé, e faremos isso na próxima lição. 66. Rodapé: próximo ao rodapé que eu já tomei a liberdade de projetar porque não há muito que temos que fazer para este rodapé particular porque não há muitos links. Incluí alguns aqui. Adicionei ícones de mídia social e criei a altura do rodapé 1400 por 150 pixels altura. E neste caso eu usei um azul mais escuro para adicionar um pouco de contraste à seção geral aqui na parte inferior do site. E no geral ele ainda está em conformidade com o design geral do site, que é limpo, moderno, profissional e não há realmente muito mais enfraquecer fazer para este rodapé. E se fizéssemos, se fizéssemos algo mais criativo, talvez não fosse coeso com o resto do site. Então, neste caso e na maioria dos casos eu estou OK com um rodapé profissional moderno simples, chato porque eu prefiro ter o resto do conteúdo se destacar e não tanto o rodapé. Sim, o rodapé é solitário e recebe muito pouco amor na parte inferior da página, mas o propósito do rodapé é em Lee para permitir que os espectadores acessem facilmente outras partes do site, que temos aqui com a nossa mídia links e dois links para outras páginas que estão necessariamente disponíveis na navegação primária ou secundária, como ser capaz de anunciar com esta empresa em particular. Se você convencesse a empresa a vender espaço publicitário, você quer ter um link para essa página específica. Também precisamos de páginas legais e de privacidade, especialmente se a empresa planeja publicidade no Google ou Facebook ou em outros tipos de plataformas. Essas plataformas de mídia social exigem políticas legais e de privacidade e, por vezes, políticas de cookies disponíveis para leitura dos espectadores. Assim, eles sabem que tipo de informação está sendo coletada ao visualizar o site e para que ele está sendo usado. Esse é o seu rodapé típico. Poderíamos fazer algo um pouco mais criativo, mas novamente, provavelmente não vai combinar com o resto dos sites. Então, antes de passar para o tutorial final deste projeto, vá em frente e termine aqui. Rodapé. Torná-lo cheio com a cor azul escuro terminar seus ícones de mídia social e seus links extras aqui também. E então vamos em frente e fazer nossos ajustes finais no próximo tutorial 67. Tweaks: Olá e bem-vindo de volta agora, como já mencionei anteriormente em outros projetos. Uma vez que eu complete um projeto, ele não vai para o cliente imediatamente. Eu quero ajustar o design e ver se há algo que eu possa fazer para torná-lo melhor. Ou talvez eu possa encontrar alguns elementos que não estão devidamente alinhados que devem ser corrigidos antes de ir para o cliente. Mas outra coisa que faço além de ajustar o design é afastar-me do projeto e , se possível, tento afastar-me dele por até 24 horas. Agora, se eu tiver um prazo apertado e eu preciso levar isso para o cliente mais cedo ou mais tarde, eu gostaria de pelo menos me dar algumas horas de distância deste projeto em particular porque eu posso estar trabalhando neste projeto para um Uma hora, duas horas, três horas, qualquer que seja o caso. E então eu acho que se eu me afastar do projeto e voltar, ele me dá uma nova visão sobre o design, e é mais fácil ver coisas que eu perdi enquanto eu estava projetando, por exemplo, espaçamento e alinhamento diferentes elementos, ou talvez poderia ser algo simples, como esquecer o dedo do pé. Adicione um estado de foco como aqui embaixo nesta seção. Esqueci de adicionar um estado de foco para este link específico. Agora estão sendo ditas. A outra coisa que eu tenho que decidir é o que vai acontecer quando um usuário ou visitante clicar neste link. Vai para outra página e abrir outra página com toda essa informação? Ou algo mais vai acontecer quando eu clicar nesse link Agora, eu vou mostrar exatamente o que vai acontecer quando você clicar neste link em apenas um momento. Mas primeiro eu vou voltar para a seção de heróis por um minuto agora. No geral, estou feliz com o cabeçalho e a seção de heróis, mas acho que podemos tornar esta seção de filtro muito mais amigável agora. Acho que este botão de filtro é muito grande. Parece desequilibrado. Eu realmente não preciso de um botão tão grande para filtrar através dessas diferentes opções. Então, o que podemos fazer para melhorar? Bem, eu acho que se nós tornarmos este botão menor e em vez de usar três grades de coluna, nós podemos usar duas ou mesmo uma coluna para esse botão de filtro. E, em seguida, nas outras duas colunas, podemos adicionar opções de filtro adicionais para permitir que o visualizador restrinja suas seleções ainda mais com base nessas outras opções. Mas a outra coisa que está realmente faltando neste é um estado flutuante, porque o que vai acontecer quando eles pairarem sobre essas opções? Será que eles terão permissão para digitar manualmente seu orçamento em sua cidade e essas outras opções? Ou você quer fornecer-lhes opções pré-feitas? Disponível qualquer lista suspensa para que você possa ter quatro ou cinco opções de orçamento diferentes, e você também pode ter uma dúzia ou mais tipos diferentes de locais. O mesmo com as outras opções. Aqui, você pode ter três ou quatro opções diferentes para quartos e banheiros, e então você tem a opção de adicionar opções de filtro adicionais aqui também. Então deixe-me mostrar o design que criei para melhorar nosso chamado filtro de ação. Então este é o original, e este é o novo design. Então eu fiz o botão de filtro menor e adicionei mais duas opções. Mas mesmo que eu mantive o botão de filtro 22 colunas de grade. Tomei a cidade, e a tornei menor também. Antes era quatro colunas de largura, e eu fiz três colunas brancas em vez disso, então eu poderia adicionar essa opção de filtro adicional. Poderíamos fazer o mesmo com o orçamento. Podemos fazer que duas colunas de largura e, em seguida, adicionar outra opção. Tudo depende das perspectivas do seu cliente e do que você pode fazer para que seja mais fácil para eles encontrar o que eles querem. E então, é claro, eu tenho esse estado de pairar bem aqui mostrando que se você clicar sobre isso, algo vai acontecer. Então, o que vai acontecer? Ele vai lhe dar uma opção para pré-selecionar de outros locais? Ou você vai permitir que eles digitem automaticamente? Ou vai para outra página? O que exatamente vai acontecer? Bem, para facilitar as nossas perspectivas, quero mantê-las na mesma página, na mesma seção. Então, o que eu criei foi um menu suspenso para mostrar cidades adicionais das quais escolher. Então isso mostra ao nosso cliente e ao desenvolvedor da Web o que acontece quando você clica nessa área. E se houver mais de quatro ou cinco opções, você vai ter que mostrar essa parte do menu suspenso, ou descendo e cobrindo mais esta página aqui embaixo ou você vai criar um pergaminho no dedo do pé direito. Deixe o desenvolvedor saber que essa pessoa pode rolar dentro do fundo do menu em vez de ter que rolar para baixo no navegador, o que torna mais fácil para o cliente potencial. Agora a questão é, e essas outras opções? Bem, os quartos e o banheiro. Você provavelmente poderia deixar isso, como está e apenas permitiu que o visitante para digitar sua resposta para estes. Mas e quanto aos animais de estimação? Você quer que eles digitem isso, ou você quer dar-lhes uma opção? Sim ou não? Se você fizer isso dessa forma, então você tem que criar um menu suspenso para essa opção. A mesma coisa com piscina, sim ou não? E depois para o orçamento. Você provavelmente deseja criar um menu suspenso para esta parte do filtro também, porque você não quer que eles digitem um número específico. Talvez seu cliente tenha quatro ou cinco intervalos de orçamento que eles normalmente alugam. Então, nesse caso, você criaria outro estado de foco ou outro menu suspenso para esta parte do filtro também. E você tem que fazer tudo isso como parte de seu design antes de entregá-lo aos desenvolvedores da Web para que eles saibam como codificar corretamente cada uma dessas seções diferentes. Então, o que mais podemos fazer para tornar este Web design ainda melhor? Bem, se deslocarmos para baixo até a seção de listagem, você pode ver que o espaçamento entre os títulos para ver mais e os fundos da imagem são todos diferentes. Eu não tirei o tempo para espaçar corretamente todos os diferentes elementos um do outro, e eu apenas fiz isso aleatoriamente e por mim e parece profissional agora, mesmo que algumas pessoas podem não notar que você ainda quer notar antes de entregá-lo ao cliente e ao desenvolvedor da Web. Porque todos esses pequenos detalhes em que você trabalha vai tornar o seu site design melhor do que outros Web designers que não levam tempo para alinhar tudo pixel perfeito. E você poderia obter um desenvolvedor da Web que vai codificar isso exatamente com base nos pixels que você colocou em seu design porque eles pensam que é isso que você quer. Então você pode acabar com um site ao vivo que não parece profissional porque não há simetria entre o espaçamento de todos os diferentes elementos. Agora, outra coisa que podemos fazer para tornar esta seção de listagem melhor para o usuário é criar um estado de foco que, quando clicado, irá fornecer mais informações sobre o que eles estão tentando encontrar. Lembra-te, mencionei que devíamos ter um estado de pairar para as nossas ligações do Seymour. Então, se eu ligá-lo bem, agora temos o nosso estado flutuante. Mas novamente, o que vai acontecer é que o nosso visitante será levado para outra página para mostrar-lhes mais das listagens? Ou, melhor ainda, o que podemos fazer é mantê-los na página inicial e carregar essas listagens adicionais abaixo desta linha de conteúdo. Agora você pode estar pensando, Qual é a diferença entre ir para uma nova página com a informação versus ter essa informação aparecendo na página inicial? Bem, se eles estão vendo esta página em particular em um dispositivo móvel. As chances são de que a velocidade da Internet não seja tão rápida quanto, digamos, em um desktop ou um laptop. Então, quando você navega para outra página, muitas informações que já estão nesta página, como o cabeçalho e um rodapé e algumas outras coisas vão ter que recarregar nessa nova página. Além disso, todas as listagens adicionais também têm que carregar nessa nova página. Isso vai levar muito mais tempo para carregar em vez de tê-los aparecendo na página inicial. Porque você pode ter o site codificado para que essas imagens, mesmo que você não possa vê-las, elas serão pré-carregadas em segundo plano para que quando eles clicarem neste link, essas listagens apareçam instantaneamente versus esperar 5 10 20 segundos para que eles carreguem em uma nova página. Porque quanto maiores essas imagens e quanto mais listagem houver, mais tempo levará a carga. E quanto mais tempo levar a carga, maior a chance de essa pessoa sair desse site e tentar encontrar o que ela está procurando de outra pessoa. Por isso, no final, queremos tornar o mais fácil possível para as perspectivas encontrarem o que querem. E ao fazê-lo desta forma, ajuda a mantê-los nesta página, porque se eles têm que esperar 20 segundos ou 10 segundos ou o que quer que seja, as chances são eles vão sair do site e ir para outro site para encontrar o que eles Necessidade. Eles não têm paciência para esperar por essa informação, a carga. Então, fazendo isso dessa maneira, aumentamos a probabilidade de que eles vão ficar na página e fazer negócios com nosso cliente, que é parte de nosso objetivo como um Web designer é ajudar nossos clientes a ganhar mais negócios através de melhor design. Então, como é que isto pareceria? Como você configuraria isso como designer para mostrar aos seus clientes? E assim o desenvolvedor da Web sabe como codificá-lo. Bem, assim como fizemos na seção de heróis. Precisamos criar todo esse conteúdo e outra camada de grupo para mostrar a todos o que vai acontecer quando você clicar neste link, que irá adicionar mais duas linhas de listagens para essa categoria, e todas as outras categorias serão empurrado para baixo. Então este é o estado de foco, e isso é o que acontece quando você clica nesse link. Agora, a outra coisa que podemos fazer para tornar o site ainda melhor é melhorar a legibilidade do conteúdo da listagem. Então agora estamos usando uma fonte. Eles são todos do mesmo tamanho, e é meio cheio e ocupado, então torna um pouco mais difícil de ler. Então, o que podemos fazer para aumentar a legibilidade do nosso conteúdo? Bem, eu acho que podemos usar fontes diferentes, tamanhos diferentes, e talvez mudar o layout desse conteúdo também, para adicionar ênfase em certos elementos ou determinados textos versus outros, de modo que ele o torne mais fácil de ler. Então essa foi a primeira opção que criamos. Mas isso é o que eu criei como minha segunda opção para facilitar a leitura desse conteúdo . Então eu mudei a fonte da rua, e eu também mudei o tamanho de 22 16 e eu também fiz negrito, e eu usei a seta da fonte contra a ferrovia. A outra coisa que fiz foi pegar a metragem quadrada e fiz 14 para o tamanho versus 20 aqui. E então eu peguei o preço e eu o movi para o canto inferior direito, e eu também removi o estilo ousado, e eu reduzi a opacidade da camada de 100 para 75 para enfatizar o preço. Então, agora a rua é enfatizada mais do que qualquer outra coisa, com base no estilo e no funt. Então, este geral torna muito mais fácil ler isso do que ele faz isso porque ele é menos lotado e nossos olhos gravitam para o nome da rua primeiro versus aqui à direita. Nossos olhos não têm certeza do que olhar primeiro, mesmo que tenhamos negrito o texto pelo preço, ainda está muito mais ocupado do que este conteúdo aqui. Então, é sempre uma boa idéia afastar-se do seu design por um par de horas formulário ou, se possível, e então, quando você voltar, repensar Como posso tornar este design ainda mais amigável? E então todas essas pequenas coisas que você faz para melhorar o design vai torná-lo muito melhor . Então sua próxima tarefa consiste em duas coisas. Um passar por e fazer todos esses pequenos ajustes para o design para torná-lo melhor certificar-se de que tudo está alinhado corretamente e certifique-se de que você tem uma quantidade apropriada de espaçamento entre todos os elementos e certifique-se de que você não deixou nada de fora. Nós também precisamos cortar são lonas para se livrar de todo esse conteúdo aqui em baixo. E a outra coisa que você precisa fazer é passar por todos os diferentes estados que abordamos nesta palestra e criá-los por conta própria. Neste ponto do curso, você deve saber como criar todas as formas diferentes, redimensionar e todos os outros elementos, agrupá-los e como cortar sua tela. Por isso, encorajo-vos a dedicarem um tempo para fazerem esta tarefa, e isso ajudará a reforçar o que aprenderam anteriormente fazendo isso sozinhos. Se você ficar preso, basta voltar para as palestras anteriores para obter uma atualização sobre como fazer certas coisas. E fazendo isso por conta própria, você aprenderá exatamente como fazê-lo para seus próprios projetos no futuro. Na verdade, você realmente tem 1/3 atribuição, e isso é refazer este site com sua própria visão criativa para que você possa usá-lo para o seu portfólio. Obrigado por ouvir e tenha um dia incrível 68. Projeto 5: Watkins Glen Briefing: Olá e bem-vindo ao Projeto de Web Design número cinco para este site. Vamos redesenhar esta página do estado de Nova Iorque, e esta em particular, e esta em particular, é para o Parque Estadual Watkins Glen. Como muitos dos outros sites que redesenhamos, este também está desatualizado. E embora tenha muita informação, é difícil navegar e tentar encontrar exatamente o que queremos. Sim, nós temos alguns botões aqui para nos dar a informação, mas eu acho que o layout geral é mal projetado. É difícil de ler porque as seleções de fontes e o estilo poderiam ser feitos muito melhor do que é atualmente. A outra coisa que eu acho sobre este site, pelo menos para este site em particular, é mesmo que eles estão descrevendo exatamente as coisas que você pode ver neste parque. Há um monte de texto descrevendo essa informação, e eu acho que seria melhor mostrar uma imagem de todas as coisas diferentes que você pode fazer em Watkins Glen versus Reading O que você pode fazer. Há um velho ditado que uma imagem vale 1000 palavras, e eu acho que uma imagem seria melhor descrever o que você vai ver porque, bem, você realmente vai ver uma parte do que você pode fazer no parque ou em Watkins Glen geral, a cidade ou a cidade de Watkins Glen. Sim, eles têm algumas imagens, mas esta imagem aqui não é representativa deste parque. É uma má imagem. Parece distorcido. Parece que foi esmagado de cima para baixo. A iluminação não é muito boa, e no geral, eu só não acho essa imagem muito convidativa. Prefiro ver uma fotografia profissional e não algo que pareça ter sido tirada por um turista. Esta imagem aqui é melhor, mas é tão minúscula. É muito difícil entender o que é. E se você estiver em um dispositivo móvel, isso será ainda menor, a menos que seja codificado para ser maior. Mas parece que seu design geral da Web é mais baseado em texto versus imagem. Então deixe-me mostrar a vocês o que eu inventei para o design do Parque Estadual Watkins Glen, e é basicamente um design mais intensivo de fotos versus texto baseado. Então eu começo a seção de heróis com uma grande imagem do próprio parque estadual. Quando você entra no parque, esta é uma das primeiras coisas que você encontra. Temos uma pequena cachoeira, uma ponte de pedra, e parece muito convidativo. Temos um grande botão chamado de ação aqui no topo para descobrir Watkins Glen, que irá navegar para outra parte do site para mostrar as coisas que você conduz você neste parque. Eu também consolidei todos os itens de menu dentro de um menu oculto para ajudar a consolidar todas essas informações e limpar o site. Ao rolar para baixo, você recebe imagens profissionais que mostram todas as coisas que você pode fazer no Watkins Glen. Então, em vez de descrever cada um desses itens, podemos realmente ver as coisas que podemos fazer. E podemos estar motivados a visitar o parque com base nessas imagens vs leitura. Sim, eu coloquei essa informação aqui também para dar uma descrição de cada um desses tipos de coisas que você pode fazer. Mas cada uma dessas imagens também será vinculada a outra página da Web que vai entrar em mais detalhes sobre o que você pode fazer, além de uma galeria de fotos de cada uma delas. Então isso seria parte da minha conversa que eu tenho com o cliente no momento de revelar o conceito de design inicial. Eu não vou entrar e projetar cada uma dessas páginas separadamente se o cliente não está aprovando esse tipo particular de conceito de design toe, tê-los todos em páginas diferentes, mesmo que eles já têm todas essas páginas. Eu ainda quero obter a sua confirmação de que eles gostam deste conceito de design, porque eu vou combinar cada uma dessas páginas individuais para coincidir com esta página principal também , que é dedo tem grandes imagens que Philip o navegador da borda à borda. Então, à medida que você rola para baixo, há uma lista de muitas informações que você pode precisar saber sobre a peça. Por exemplo, horas de operação. Eu tenho um estado de foco aqui para que quando você clicar no botão, uma pequena janela aparecerá com essa informação dentro dele, e eu também incluí duas opções para fechar essa janela. Fácil acesso a todas as informações que você precisa aqui. Na verdade, falta um. Parece que aqui vamos nós. E então também temos uma maneira fácil de reservar um acampamento. Há lugares onde você pode acampar dentro do parque, e você pode reservar de forma rápida e fácil um parque de campismo através desta opção aqui. Se você não estiver familiarizado com o parque, você pode clicar neste link para obter um mapa do parque de campismo, e ele irá navegar para outra página para fornecer mais informações. Mas, novamente, queremos tornar o mais fácil possível para os campistas reservarem sua estadia, especialmente se você já acampou aqui antes e sabe o que está fazendo. Você pode fazer isso aqui a partir desta parte da página da Web sem ter que navegar para outras partes do site. E, em seguida, abaixo disso, temos um rodapé limpo e atualizado com todo o seu conteúdo vinculado a todas as páginas diferentes. Tudo está uniformemente espaçado agora, embora lá rodapé agora não é tão ruim? Acabei de atualizá-lo um pouco com novas fontes e cores diferentes para ajudar a torná-lo mais fácil de ler. Então este vai ser um web design bastante fácil de criar. Mas como antes. Vou compartilhar algumas dicas profissionais adicionais ao longo do caminho enquanto projetamos este site, então se você está pronto para começar este projeto, vamos fazê-lo. 69. Encabeçamento + herde: Olá e bem-vindo de volta estão neste EUA, e nós vamos projetar tanto o cabeçalho ea seção herói. Então vá em frente, pegue seu modelo de grade para que você possa começar do zero. E também precisamos adicionar arquivos de imagem ao nosso documento, ambos anexados a esta lição. Então, o 1º 1 é o logotipo do estado de Nova York. Então vá em frente, pegue isso e traga-o para o documento e, em seguida, basta mover o logotipo para cima para o canto superior esquerdo e , em seguida, pegue a imagem do herói e traga isso também. Então esta imagem é um arquivo de baixa resolução, e precisamos ampliá-lo para torná-lo completo com da esquerda para a direita ou sangramento total. E quando o fizermos, ele vai ficar pixelado ou embaçado. O que é bom, porque isso é só para praticar e não para o nosso portfólio. Vamos em frente e re escala esta imagem com Shift Plus s e permite digitar 1400 para o com , e então a altura torna-se 9 38 uma música. Será que ele está trancado? Vá em frente e dimensione e, em seguida, basta movê-lo para o lado esquerdo e direito do documento . Vamos cortar compor essa imagem em um minuto assim que chegarmos à seção de heróis, mas vamos terminar a seção de cabeçalho primeiro. Ok, vamos em frente e criar uma nova camada chamada botão de fundo do cabeçalho. OK. E, em seguida, para a largura, eu queria ser sangria total bem esquerda, direita, Então vamos em frente e criar uma seleção com nossa ferramenta de seleção de retângulo. Tudo bem se ele passar por isso porque vai limitar essa seleção aos limites do seu documento. Então o com eu não estou preocupado com um apertado. Eu quero ser 100 e, em seguida, para a cor, eu quero usar esta cor creme, que é este número decimal Hexi aqui. Então vá em frente e digite isso, e então vá em frente e pegue seu filtro de balde com a letra G e preencha. E não se esqueça de selecionar com Controle de Comandante e a letra D. Tudo bem, vamos em frente e cortar o limite da camada. Agora vá para a camada, corte o conteúdo e, em seguida, basta movê-lo para cima na posição. Ok, eu vou ir em frente e mover isso para baixo para baixo de ambas as imagens Vamos em frente e alinhar o nosso logotipo. Vamos avançar e medir 30 pixels de espaço entre a borda esquerda e o lado esquerdo do logotipo. Ok, vamos em frente e reposicionar nosso logotipo. Tudo bem. próximo é alinhá-lo à parte superior e inferior do nosso plano de fundo. Então, com a minha ferramenta de alinhamento, vá em frente e clique no fundo do meu cabeçalho primeiro e, em seguida, a tecla Shift. Clique no logotipo e, em seguida, um meio deitado do alvo. Agora vamos trabalhar na navegação. Vou adicionar um ícone de hambúrguer representando a navegação. Primeiro, precisamos criar um novo fundo para ele chamado de fundo hambúrguer. E vamos fazer uma seleção 100 por 100. E então para a cor, eu vou usar essas cores verdes escuras para ir em frente e digitar esse número. E então vamos preenchê-lo, ter certeza de que você de selecionar ficar sob controle e D e então eu vou apenas movê-lo aqui para cima, certo? Vou pegar meu ícone de hambúrguer que criamos no último projeto, então preciso do ícone de pairar e do hambúrguer, então vou pegar esses dois e trazê-los para este documento. Vou pegar meu ícone de hambúrguer que criamos no último projeto, então preciso do ícone de pairar e do hambúrguer, Ok, vamos colocar isso para cima e para cima agora. O ícone de hambúrguer é um pouco pequeno, então eu só quero fazer isso maior e não o pairar eu próprio. Então eu só vou pegar meu ícone de hambúrguer do que Shift Plus s e eu vou ampliá-lo. Então, bem aqui, 50 para o com 53 para a altura. E então eu vou apenas ir em frente e movê-lo para a posição aqui. Na verdade, vamos em frente e aliando o ícone diretamente no centro do fundo do hambúrguer. Certifique-se de que você tenha camadas de fundo de hambúrguer selecionadas e corte para o conteúdo para o limite da camada . Eu vou ir em frente e puxar o ícone de hambúrguer para fora também para que eu possa ir em frente e pegar ambos com minha ferramenta de alinhamento e então eu posso alinhar meio e centro do alvo. Vamos colocar o ícone de hambúrguer de volta. Eu só vou mover o ícone de pairar para baixo para a direita um pouco. Então, bem ali. Vamos em frente e diminuir o zoom. Vamos desligar nossos guias e nossa grade para que possamos dar uma olhada na seção de cabeçalho, que a seção de cabeçalho seja feita. Eu só vou ir em frente e limpar minhas camadas aqui e criar uma nova camada de grupo chamada Cabeçalho. Tudo bem, vamos em frente e pegar nossa imagem de herói e movê-la para a parte inferior da seção de cabeçalho. Só vou ampliar e ter certeza que é perfeito para pixel. Parece que eu só preciso movê-lo para cima mais alguns pixels para ficar bem ali. Então nós temos algumas coisas restantes, e isso é dirigir nosso título e chamar o botão de ação para a seção de heróis. Então, quando se trata das famílias de fontes que eu escolho para um projeto de Web design, eu geralmente faço isso antes de projetar. E eu vou escolher minhas fontes com base em uma das duas coisas ou fontes populares no momento em que eu estou projetando o site. Então, por exemplo, temos usado muito a ferrovia ao longo desses projetos e seu popular neste momento no futuro. Pode não ser tão popular, então provavelmente não usarei tanta guerra. Dependendo da empresa, usarei uma família de fontes de sua marca. Se escrevermos Watkins Glen e mudarmos isto para ferrovia. Eles usam ultra ousado. É um bom fundo, mas não combina com a marca da empresa deles. Então, em vez disso, eu usaria uma fonte como seta que melhor corresponde à sua marca. E podemos ver isso na letra W aqui. É muito parecido com o W em seu logotipo. Então eu vou usar exatamente a mesma frente que eles usaram em seu logotipo ou qualquer outro tipo de marca, ou eu vou usar uma fonte. Semelhante. Agora as letras minúsculas realmente não correspondem. Mas se fizéssemos isso em todas as capitais, é melhor combinarem com sua marca. Então é por isso que eu escolheria uma fonte como seta para este design particular. Então eu vou em frente e colocar isso no centro e selecionar tudo. E então, com a minha ferramenta de alinhamento, eu posso ir em frente e alinhá-la a essa seleção. Então vá em frente e faça isso. A seleção vem em nosso controle e a letra D, e vamos em frente e criar o nosso Mas agora vamos chamá-lo de botão C T A e C T.A T.A é abreviação de chamada Ação. Vamos pegar nossa ferramenta de seleção de retângulo, e vamos adicionar alguns cantos arredondados. Vamos fazer 15 para o Raio e, em seguida, até o tamanho que vamos fazer para 35 por 75 então nós vamos preenchê-lo com esta mesma cor verde escuro que usamos aqui em cima. Vá em frente e preencha seu botão e de select, e então eu quero alinhar o botão para a borda direita do nosso título. Então vamos em frente e cortar o limite da camada, bem como, em seguida, apenas movê-lo para a posição. Ok, vamos em frente e pegar nosso têxtil. Vou mudar para Ferrovia, mas quero escolher um estilo itálico. Vamos em frente e mudá-lo de volta para branco e, em seguida, basta digitar descobrir e, em seguida, para o tamanho. Vamos em frente e reduzir isso para 48. Tudo bem, vamos em frente e a linha dentro do nosso mas novo Ok, estamos quase terminando. A última coisa que eu quero fazer é recompor a imagem um pouco movendo-a para cima. Então, para que se mudar? Vou pegar a imagem e movê-la para cima. Eu não quero ir para o alto porque eu não quero descobrir Button para estar aqui em baixo nesta área. Quero que fique onde está escuro nessa parte da imagem. Então eu vou até lá, e você também vai notar que a velha linha de ladrão para a seção de heróis é entre 700 e 800. Mas a imagem real está indo abaixo dessa linha de dobra, e isso é bom para este site em particular, porque quando eles clicam no botão Descobrir, ele vai rolar automaticamente para a próxima seção. Então eu não estou preocupado com a imagem sangrando sobre ou passado aquela seção de heróis. Ok, vamos em frente e pegar nossas camadas novas e agrupá-las em novos grupos anteriores. Vamos em frente e fazer nosso botão primeiro para fazer C T um botão e depois um novo grupo de camadas para a seção de heróis, e pronto. Nossa seção de cabeçalho e herói são pregos 70. Coisas em corpo parte 1: quando um visitante deste site clica em nossa ação chamada, que é o nosso botão de descoberta, o site navegará automaticamente até a próxima seção, que é o que fazer. Então isso é algo que temos que explicar ao nosso cliente. Quando apresentamos o conceito de design real, isso não vai navegar para outra página. Em vez disso, ele vai rolar automaticamente para baixo para a próxima seção. E uma vez aprovado, também temos que deixar o desenvolvedor saber isso também para que eles não estejam pensando que isso vai para outra página ou que há um pop-up. Em vez disso, eles precisam codificá-lo para rolar para baixo, e então quando o visitante clicar nele e ele rolar para baixo até esta parte, eles serão apresentados com todas as coisas que você pode fazer em Watkins Glen. Eles podem ler uma breve introdução de cada item, ou eles podem clicar em cada uma dessas imagens ou títulos de texto para navegar túmulo ou informações. Então, antes de começarmos a projetar o site, eu só quero falar um pouco sobre imagens porque precisamos encontrar imagens para cada uma dessas coisas para fazer seus sete e totalizar um dos meus lugares favoritos para ir para imagens grátis sem se preocupar sobre a compra de uma licença e ser capaz de usá-las para projetos comerciais. E coisas assim são picaretas obedecer. Já falámos sobre isso antes, por isso, se entrarmos aqui e começarmos a procurar o Watkins Glen, podemos ver que não há tantas imagens. Há apenas seis imagens no total, então agora precisamos começar a fazer buscas mais profundas. Watkins Glen Caça Watkins Glen a passear de barco. Mas há ainda menos imagens para essas categorias também. Então agora precisamos fazer buscas gerais para, digamos, cachoeiras porque há apenas uma cachoeira e não queremos uma imagem vertical. Precisamos de uma imagem horizontal para cada um desses links, então essa imagem não funcionará. Sim, você pode cortá-lo e torná-lo horizontal, mas eu não acho que vai ser uma imagem muito boa cortada horizontalmente porque você está cagando muito da imagem. Então queremos encontrar imagens horizontais. O único problema é que nenhuma dessas imagens, ou mesmo esta imagem, é uma cachoeira localizada em Watkins Glen Park. Esta cachoeira é, na verdade, cerca de três horas de distância qualquer benefício completamente diferente. Então, quando você está desenvolvendo um site com muitas imagens ou apenas algumas imagens em geral, qualquer que seja o caso, você quer ter certeza de que essas imagens são representativas do local para essa empresa , ou que Park, ou qualquer que seja o caso, porque se você colocar esta imagem no Watkins Glen Park, enquanto as pessoas vão ficar desapontadas, se quiserem ver esta cachoeira e não conseguirem encontrá-la, e então finalmente descobrir que é, na verdade, três horas de distância. Portanto, a moral da história é escolher suas imagens de acordo. Então, se não podemos usar picaretas, obedecer, temos que encontrar um site diferente para usar. E há agências de fotos stock com mais imagens de Watkins Glen que você pode realmente usar contra as imagens de picaretas, obedecer ou até mesmo imagens do Google. Esta imagem aqui eu encontrei em imagens do Google, mas não está prontamente disponível para uso comercial. O cliente terá de pagar uma licença para o utilizar. Não há problema em usar em seu design, mas você não pode usá-los em um site ativo até que uma licença seja comprada para uso comercial. Então, antes de começarmos este projeto, você precisa encontrar sete imagens. Se isso é através de picaretas, obedecer ou talvez uma empresa como estoque obturador ou imagens do Google. De qualquer forma, encontre sete imagens para cada categoria. Baixe-os e vamos em frente e montar esta seção do site na próxima lição. 71. Coisas para o corpo parte 2: Olá e bem-vindo de volta. Tudo bem, agora que você tem suas imagens baixadas, vá em frente e adicione-as ao seu documento. Se você ainda não renomeou as camadas de acordo e, em seguida, vá em frente e posicione-as em uma ordem semelhante a esta. E você também pode precisar aumentar o tamanho da tela, que eu já fiz indo até a imagem selecionando o tamanho da tela e ajustando a altura de acordo. Então vá em frente, faça isso. E então podemos ir em frente e começar a dimensionar nossas imagens para colocá-las exatamente onde elas precisam estar. Agora, que diz respeito ao tamanho, vamos fazer 400 em 67 pixels de largura por, 310 pixels de altura. Para as primeiras 6 imagens, a última imagem será 1400 pixels brancos. O que preenche o dedo esquerdo do lado direito do documento. E então eu vou dimensionar o meu e 450 pixels de altura. Agora, a imagem que você baixou pode ser diferente desta. Então, nesse caso, você pode precisar torná-lo mais alto ou mais curto, com base na composição dessa imagem. Então você vai dimensionar sua imagem na parte inferior aqui. De acordo com o que você baixou. Tudo bem, vamos voltar aqui para cima e vamos em frente e redimensionar nossa primeira imagem aqui. Agora, bem rápido. Você pode estar se perguntando por que eu escolhi 467 pixels de largura. Bem, como eu mencionei, com base no estilo de design que escolhi para este projeto de Web design, eu quero que as imagens preencham o documento da extrema esquerda para a extrema direita. Então temos três imagens, e os sinais do nosso documento tem 1400 pixels de largura. Então, quando dividimos isso, temos 4 66,6 e eu apenas arredondado para cima para ter certeza de que tudo se encaixa na página. E a outra coisa que você vai notar é que nós não estamos realmente confiando no sistema de grade ou nas colunas para alinhar. Nossas imagens são texto e outros elementos por causa do estilo de design que escolhi. E quando vamos para e estamos conteúdo nesta seção, nós não estamos usando as colunas em tudo. Vamos apenas fazer uma seleção para alinhar esse texto diretamente no centro versus usar as colunas da grade. Tudo bem, vamos começar a cortar nossas imagens para o tamanho que queremos. Então, se necessário, você pode precisar de re escala. Sua imagem é de acordo com o tamanho que vamos usar para cada imagem. Então eu recomendo dimensionar suas imagens para baixo o mais próximo possível da altura ou do com para essa imagem em particular. Então agora, eu tenho 311 para a altura, e nós vamos fazer 310 para a altura, então eu realmente não posso escalar isso mais. Então eu vou ir em frente e pegar essa camada em particular, que é essa imagem de trilhas, e eu vou fazer uma seleção. E então eu vou adicionar uma máscara de camada para cortá-la para esse tamanho particular, que novamente é para 67 por 3 10 E então, se eu quiser, eu posso realmente pegar minha ferramenta de movimento com a letra V. E então eu posso usar minhas teclas de seta depois de clicar em essa camada e mover essa imagem para a posição para recompor a imagem de acordo com a forma como eu quero compor. Então, uma vez que eu fizer isso, eu posso então ir e adicionar minha máscara de camada, certifique-se de que você tem seleção selecionada e clique em adicionar e a imagem é cortada. Então esta imagem aqui é muito maior do que a última. Nós também precisamos de selecionar com controle Commander e D. Então eu vou selecionar esta camada em particular, e então eu vou usar minha ferramenta de escala para reduzi-lo. Eu também preciso ter certeza de que eu tenho tudo trancado aqui para que ele fique e proporcione. E eu vou prestar atenção a esses números aqui em cima porque eu não quero que nenhum desses números seja inferior a 4 67 ou 3 10 Eu acho que está tudo bem aqui. Então eu vou ir em frente e redimensioná-lo, e então eu vou usar minha ferramenta de retângulo para fazer outra seleção. Mas o que eu preciso fazer é ter certeza de que estou alinhando essa imagem específica ao lado direito dessa imagem para que possamos ligar nossos guias e adicionar alguns guias ao longo dessas imagens para nos ajudar a fazer uma seleção melhor antes de fazer essa seleção. Caso contrário, se cortarmos e estiver fora do lugar e tivermos que refazê-la , , vou em frente e pegar minha ferramenta de movimentação novamente para que eu possa mover essa imagem um pouco para cima e recompor porque eu realmente não quero cortar esta parte da imagem novamente. Estes ar, os pequenos detalhes que você precisa trabalhar em ao projetar seus sites para fazer seus projetos melhores do que o designer gráfico médio. Tudo bem, vamos em frente e uma máscara de camada de novo. E então só precisamos repetir isso para todas as outras imagens. Então eu vou em frente e fazer isso bem rápido, e provavelmente vou acelerar essa parte do tutorial para que você não tenha que me ver fazer isso e câmera lenta. - Tudo bem, vamos em frente e adicionar nosso conteúdo corporal nesta seção. Novo. Vamos em frente e criar um fundo de cor para ele primeiro. E vamos em frente e criar uma nova camada de fundo chamada fundo de texto. Vamos em frente e criar uma seleção aqui, e então nós vamos preenchê-la com aquela cor creme que usamos em nossa seção de cabeçalho aqui em cima. Vou pegar minha ferramenta conta-gotas e selecioná-la, e então eu posso ir em frente e preencher isso. Tudo bem, vamos em frente e e nosso conteúdo prego. Pegue sua ferramenta de texto. Vamos mudar a fonte para a ferrovia Ultra Bold. Vamos fazer 72 para o tamanho e, em seguida, nossa cor verde escuro. E vamos datilografar coisas para fazer. Posso mover isso para cima e para fora do caminho agora, antes de nós e nosso conteúdo corporal, eu quero que o tamanho desse conteúdo seja um tamanho específico. Então, se eu pegar minha ferramenta de texto e clicar em uma caixa de texto, eu realmente não posso definir o tamanho dessa caixa de texto. Então, uma maneira de contornar isso é criando uma nova camada. Vai ser temporário mais tarde porque só vamos usá-lo para criar uma forma para o tamanho que queremos e então vamos apagá-lo quando terminarmos. Então vamos em frente e fazer a forma. Vamos fazer 600 vinhos por 450 de altura, e então vamos pegar uma cor cinza clara e preenchê-lo com isso, e esse é o tamanho da caixa de texto que eu quero usar. Vá em frente e de selecionar e pegar sua ferramenta de texto, e antes de fazer isso, vamos ter certeza que temos o Funt correto agora, quando se trata da família de fontes para o conteúdo do corpo, eu gosto de usar uma fonte como Georgia, que é muito mais fácil de ler em um tamanho menor de 14 ou 16 ou 12 versus uma fonte como esta, que é muito mais fácil de ler em um tamanho muito maior. Vamos fazer Georgia aos 16 para o tamanho, e então para a cor vamos fazer uma cor cinza escuro. Agora podemos pegar essa ferramenta de texto e clicar e arrastar uma forma em torno dela. Mas primeiro, vamos em frente e o corte, o conteúdo desse limite de Lear para tornar mais fácil ver onde colocar essa caixa de texto. Então agora nossa caixa de texto é o tamanho exato que eu quero. Então agora eu vou pegar um texto fictício, o que já foi selecionado de um monitor diferente, e eu vou em frente e colar isso dentro Ok, então eu tenho algum texto adicional aqui em baixo que está sendo cortado. Então, eu só vou fazer essa caixa de texto um pouco mais curta e, em seguida, apertar a tecla de escape para sair dela. Agora eu quero fazer o próximo conjunto de parágrafos um tamanho específico, bem como, pelo menos, ser confinado a um tamanho específico. Então vamos pegar nossa camada de fundo aqui, e vamos redimensioná-la com nossa ferramenta de escala. E desta vez vai ser 150 para a altura e é 600 para o com. Certifique-se de desbloqueá-lo primeiro, redimensioná-lo frigideira, e então podemos pegar esta caixa e mover-se aqui para que possamos criar uma nova caixa de texto com base neste novo tamanho. Eu preciso voltar para o meu texto e um pouco, porque eu ainda posso ver um pequeno texto lá. OK, agora que eu fiz isso, o que eu quero fazer é dar uma olhada rápida e o design antigo. Eles têm uma seção aqui que tem uma atualização que está dando informações sobre o status do parque, e agora está fechada com base no estado. Então esta é uma informação importante que devemos incluir sobre as coisas a fazer, porque se alguém está olhando para as coisas a fazer, seria bom saber se o parque está aberto ou não. Então vamos em frente e essa informação aqui em baixo. Então eu tenho essa informação de um documento anterior e outro monitor aqui à esquerda que você não pode ver. Então, basta pegar algum texto fictício e, em seguida, basta pegar sua ferramenta de texto e criar uma nova caixa de texto com base no novo tamanho de nossa forma. Vá em frente e cole isso em aperte sua tecla de escape. E agora podemos excluir esse fundo do texto porque não precisamos mais dele. E então eu acho que devemos adicionar um título para esta seção também. Vou chamá-lo de atualizações do parque, e também quero mudar a fonte de volta para a ferrovia negrito. Vamos também aumentar o tamanho da fonte. Vamos fazer 20 e depois escolher uma cor vermelha escura. Muito bem, vou ligar os meus guias agora para poder alinhar tudo à esquerda. Quanto ao espaçamento aqui, vamos em frente e medir 25 pixels de espaço. Vamos fazer 50 pixels de espaço entre este parágrafo e o próximo título, e não há realmente nenhuma razão para eu estar usando esses números exatos. Eu só acho que esses números funcionam bem para este projeto. Então, quando você está projetando, você vai ter que decidir e escolher a quantidade de espaçamento com base no que você acha que parece melhor. Ok, eu posso ir em frente e colocar este em posição, e então nós temos que fazer 25 pixels de espaço para o próximo parágrafo. Muito bem, vamos começar a organizar as nossas camadas aqui. Então agora precisamos pegar esse conteúdo e alinhá-lo perfeitamente no centro desta área aqui . Então eu vou ir em frente e criar mais um novo grupo de camadas para todo esse conteúdo chamado conteúdo corporal . E isso tornará mais fácil alinhar tudo diretamente no centro. Vou em frente e fazer uma seleção para esta área aqui. Podíamos ter feito isso com o fundo do texto, mas acredito que o fundo do texto é maior do que esta área aqui. Podíamos ter feito isso com o fundo do texto, E é por isso que estou usando uma seleção em vez de me alinhar ao plano de fundo. Então, alinhe o centro e o meio do alvo, de selecionar Comandante Controle e D, e isso está feito. Ainda temos mais uma coisa para fazer e esse é o anúncio. São títulos para cada imagem. Eu vou ir em frente e rolar de volta aqui para cima porque eu quero clicar em minhas trilhas Imagem para o primeiro título e eu vou te dizer por que eu estou fazendo isso assim em apenas um momento. Vamos em frente e pegar nosso têxtil com a letra T. Vamos mudar a fonte, Teoh Arrow Para o tamanho, vamos fazer 60 e vamos mudar o dedo do pé branco. Ok, eu vou clicar na imagem aqui, e eu vou digitar o primeiro título em todas as maiúsculas. E é por isso que selecionei minha camada de imagem antes de adicionar o título. Quando você fizer isso, ele irá adicionar essa camada de texto diretamente acima da camada selecionada. Então, se eu vir para acampar imagem e digitar camping, essa camada de acampamento está agora acima da imagem de acampamento. Então isso torna mais fácil versus fazer tudo aqui em baixo ou em outro lugar e depois ter que voltar e mover todos esses títulos para a posição. Então, apenas mais uma dica rápida para ajudá-lo a se organizar mais rapidamente, selecionando a camada primeiro antes de adicionar seu título. Agora que temos nosso texto branco em nossas imagens, temos um pequeno problema Algumas das imagens têm cores claras e aguardam no fundo, e está dificultando a leitura desses títulos. Queremos tornar mais fácil para as pessoas lerem o conteúdo, por isso precisamos fazer algo com o nosso texto aqui. Para facilitar a leitura, enfraquecer ou diminuir a opacidade das imagens ou tornar a imagem mais escura. Ou podemos criar uma caixa de texto atrás do conteúdo e usar uma cor escura por trás dele. Ou podemos adicionar uma sombra ao texto para facilitar a leitura, pois ajudará a separar o texto da imagem. E neste caso, para este design em particular, eu gosto da idéia da sombra em comparação com as outras opções porque eu não quero e nada mais para as imagens, porque as imagens devem se destacar por conta própria. E se eu adicionar um fundo para o texto em si, ele meio que tira a imagem. Então, como este é um estilo de design intensivo de imagem, eu quero que essas imagens se destacem o máximo possível. Então vamos em frente e selecionar nosso primeiro título aqui. Vamos até os filtros de luz e sombra. Então vamos em frente e brincar com nossas configurações aqui para encontrar uma opção que funcione melhor para nossos títulos e imagens. Vou em frente e largar o X e o Y. Eu também vou soltar o raio do Borrão, que aguça a sombra, e ajuda a separar da imagem por trás dela muito mais quando você abaixar esse raio acordo, com base em seu próprio pessoal preferência. Então eu estou gostando dessas configurações aqui, e eu posso criar uma nova predefinição com base nisso e, em seguida, voltar para esta caixa de diálogo de sombra de filtro toda vez que eu quiser adicionar essa sombra para todos os outros títulos. Realmente não é necessário a menos que eu queira usar essa sombra de trabalho em um projeto diferente . Eu não planejo usar essas configurações específicas para outro projeto, então estou bem em clicar em OK, porque se você se lembrar, se você selecionar outra camada de texto e usar o atalho de teclado, que é comando ou e F, ele irá automaticamente aplicar essa configuração de filtro diretamente para a camada. Quão legal é isso? Então, isso torna muito mais fácil e rápido usar esses teclados para cortar em vez de voltar para o menu para fazê-lo manualmente. Então vá em frente e aplique sua sombra em todos os seus títulos. Agora que temos nossas sombras somadas a todos os nossos títulos, precisamos então pegar todos os nossos títulos e a linha, então perfeitamente no centro de nossas imagens. Então vamos em frente e começar com a nossa primeira imagem aqui. Vou pegar a ferramenta de seleção de retângulo para que eu possa fazer uma seleção em torno da imagem e, em seguida eu posso usar minha ferramenta de alinhamento para alinhá-lo a essa seleção. Então eu vou fazer isso para cada um dos títulos e imagens. Ok, estamos quase terminando. A última coisa que precisamos fazer é organizar todas as nossas camadas e eu vou pegar todos os títulos e imagens e colocá-los em grupos de camadas individuais chamados Imagem 1 a Imagem 7 e é isso que são coisas a fazer. Seção agora é feito em. O próximo tutorial irá em frente e começar a trabalhar na seção de informações do nosso corpo. Então, se você está pronto para fazer isso, vamos fazê-lo. Está bem? 72. Info do corpo: Olá e bem-vindo de volta. Certo, então temos outra seção para nossa página da Web que vai fornecer informações adicionais para quem quiser visitar o parque. Vamos conteúdo bonito na parte superior e alguns botões na parte inferior que irá fornecer informações adicionais quando clicado. E então nós também vamos adicionar uma pequena seção aqui para aqueles que querem reservar um acampamento no parque. A primeira coisa que precisamos fazer é adicionar uma imagem grande para o fundo da seção. Qualquer imagem serve. Então vá em frente e escolha Sabei, encontre uma imagem e então vá em frente e escale-a. Portanto, tem um mínimo de 1950 pixels de altura, e cobre o total com do documento não precisa ter exatamente o mesmo tamanho. Certifica-te que enche pelo menos isso. Tudo bem, vamos em frente e pegar nosso têxtil com a carta. A família divertida vai ser flecha. O tamanho vai ser muito grande em 95 e nós vamos usar branco e isso vai ser para o nosso título. Tudo bem, vou em frente e desligar essas outras camadas. Desta forma, posso selecionar as camadas que preciso com a minha ferramenta de alinhamento porque vamos alinhar o nosso título. Então Primeiro Comandante de Controle e um para selecionar tudo. Então você é coxo, ferramenta e, em seguida, um centro de linha do alvo. Eu também quero adicionar uma sombra para este título porque é meio difícil de ler agora . Então, com o Commander Control e F, podemos adicionar essa sombra que usamos em partes anteriores do projeto. Então isso definitivamente torna muito mais fácil de ler versus não ter a sombra. Tudo bem. Em seguida, quero criar duas caixas de texto para conter o conteúdo da parte superior. Então vamos criar um novo plano de fundo de camada chamado caixa de texto um. Então a próxima coisa que eu quero fazer é adicionar duas caixas de texto para conter nossas informações. Então vamos criar uma nova camada chamada caixa de texto um. Ok, para o tamanho, nós vamos fazer 700 por 350 Então nós vamos preencher isso com branco, ir em frente e de selecionar com Commander Control e D Vamos subir para camada e cortar o conteúdo. Basta movê-lo para cima, selecione tudo e, em seguida, uma linha para o centro do documento novamente de select. E vamos criar outra caixa de texto desta vez chamada Caixa de Texto, também. Para este, vamos para o tamanho 700 por 700 e vamos preenchê-lo com branco novamente. Só vou ampliar aqui para que eu possa pegar essa camada e movê-la para a posição. Nós também precisamos cortar o limite da camada, então não vamos esquecer de fazer isso. E eu acho que eu também quero baixar a opacidade para 30 e isso vai permitir que parte da imagem abaixo dela para passar. Tudo bem, vá em frente e pegue uma mensagem falsa. Em seguida, pegue sua ferramenta de texto e mude sua família de fontes para Georgia. Vamos deixá-lo para baixo para 16 para o tamanho e uma cor cinza escuro. Só vou desenhar uma caixa de texto aleatória. Qualquer tamanho é bom. Vá em frente e cole o texto fictício e, se necessário, camada de filme acima da caixa de texto. Está bem. Vou em frente e adicionar outro parágrafo aqui para preencher o espaço um pouco mais, e então eu vou ajustar minha caixa de texto de acordo se o Texas está sendo cortado. Então eu vou ir em frente e pegar minha ferramenta de alinhamento agora com a letra a agarrar essa mudança de fundo caixa de texto e clique no parágrafo e, em seguida, uma linha para o primeiro item. Tudo bem, então isso parece muito bom. Vamos em frente e adicionar nossos botões. Agora vamos em frente e criar uma nova camada chamada Button. Vamos adicionar cantos arredondados com o raio de 15 e, em seguida, para os sinais estavam indo para fazer 3 75 por 75. Pegue seu balde, preencha a ferramenta e, em seguida, certifique-se de pegar sua cor verde escuro e preenchê-lo. Vá em frente e de select e vamos subir para corte de camada para conteúdo e movê-lo para a posição. E, em seguida, só precisamos alinhá-los botão no centro do documento novamente. Então, selecione tudo. Pegue sua ferramenta de alinhamento clique sobre ela e uma linha para a seleção. Ok, vamos selecionar Controle de Comandante e a letra D. Ei, vamos voltar ao nosso têxtil novamente, e desta vez vamos mudar a fonte para Ferrovia Bold. Vamos fazer 34 para o tamanho e vamos fazer branco para a cor. E aposto que sabes o que temos de fazer a seguir. Isso é certo. Temos de alinhar o nosso conteúdo no meio do nosso botão, está bem? E vamos em frente e organizar algumas dessas camadas. Agora vamos pegar nosso botão e duplicá-lo cinco vezes, cinco vezes, certo ? certo E vamos usar nossa ferramenta de alinhamento e selecionar todos os botões estão segurando em sua tecla shift e clique em todos eles e, em seguida, uma linha à esquerda. Em seguida, quero distribuir a quantidade de espaço uniformemente entre todos os botões. Então vamos menina para baixo para distribuir e, em seguida, para compensar. Por quê? Quero mudar isto para 100. Em seguida, clique neste ícone aqui para distribuir centros verticais. Ok, eu quero renomear todas essas camadas agora botão um ao botão seis e então eu vou colocá-las todas em seu próprio grupo de camadas. Ok, vamos em frente e uma linha para a caixa de texto e, em seguida, um novo grupo anterior para esta seção. Ok, então a primeira seção está praticamente pronta. Acho que só precisamos levar este título aqui na linha daqui até aqui. Então faça sua seleção e vá em frente e alinhe-a Então a parte final desta seção vai ser uma ação chamada, que vai ser um lugar onde os visitantes podem reservar um acampamento. Então vamos construir um tipo de filtro como fizemos no projeto anterior, e vamos começar com uma caixa de conteúdo primeiro. E quero que a caixa esteja cheia da página. Então vamos em frente e criar uma nova camada primeiro. Tudo bem, vamos em frente e fazer nossa seleção. E vamos fazer essa seleção com 525 pixels de altura. Agora. O único problema é que minha seleção está indo abaixo da imagem. Eu quero que ele contido dentro da imagem nesta área aqui para que eu possa apenas clicar e arrastá-lo para a posição. Uma vez que terminamos de fazer, esta seção irá em frente e alinhá-lo no centro da parte inferior desta parte na parte inferior da nossa imagem. Por enquanto, vamos em frente e preenchê-lo com White. Vamos de selecionar e diminuir a opacidade para 75%. Tudo bem, vamos adicionar o título para esta seção. Pegue seu texto com a letra T. Vamos usar a seta da fonte 95 do tamanho novamente, e então são de cor cinza escuro. Vamos em frente e alinhá-lo. Então eu vou criar outro fundo para o próprio filtro. Desta vez eu quero torná-lo o completo com base em nosso sistema de grade. Então eu tenho uma diretriz extra bem aqui. Vou em frente e mover isso para que o meu lado esquerdo fique aqui para aqui. Então vamos em frente e desenhar uma seleção até o final, e então vamos mudar a altura. 2175. Vamos usar essa cor verde escura de novo. Nós também precisamos criar uma nova camada primeiro vai chamá-lo de fundo de filtro, e então podemos ir em frente e preenchê-lo em de select. E eu vou baixar a opacidade desta camada de fundo para 10. Acho que é um pouco demais. Vamos tentar 20 e eu vou com isso. E agora podemos criar nossos formulários para esse filtro. Vamos começar com os títulos de cada coluna que vamos criar. Então vamos mudar nossa mensagem de volta para Georgia. Mas eu quero escolher itálico para o estilo. O tamanho será 14 e, em seguida, cinza escuro novamente, e a primeira coluna será a data de chegada. Então teremos tempo de permanência e, em seguida, menos coluna será flexível novamente. Poderíamos fazer muitas mais colunas com base em como esse visitante pode restringir sua seleção. Mas vamos ficar com três colunas por enquanto. Muito bem, vamos trabalhar no Rose agora. Só vou chamá-lo de Row One. E então, para o tamanho, vai ser semelhante aos nossos botões aqui em cima. Talvez um pouco menor. Vamos fazer 300 por 75 e preenchê-lo com o verde escuro. Certo, vamos duplicar isso duas vezes. Tudo bem, vamos em frente e cortar o limite da camada para cada camada. Vamos alinhá-los todos ao topo, e então vamos definir offset. Por quê? De volta ao zero e todos Set X 23 50. Em seguida, clique neste ícone para distribuir centros horizontais. Vamos em frente e pegar nossos títulos, pregar e colocá-los em posição. Ok, volta para a ferramenta de alinhamento para que possamos selecionar todos estes e alinhá-los ao topo. Kate, vamos organizar nossas camadas. Tudo bem, vamos em frente e uma linha é conteúdo para o fundo do filtro. Vá para a camada de fundo do filtro primeiro e recorte para o conteúdo e, em seguida, use a ferramenta de alinhamento para selecionar ambos para alinhar. Ok, eu só quero adicionar algumas informações nessas linhas para que os visitantes saibam quais informações precisam ser inseridas em cada linha para a família divertida. Vamos voltar para a ferrovia, selecionar Bold 24 e White. Agora, como fizemos anteriormente no último projeto, talvez queiramos criar alguns estados de foco para algumas caixas suspensas. Então eu vou deixar isso para você se você quiser adicionar aqueles quando você faz seu próprio design para o seu portfólio, a última coisa que eu quero fazer é adicionar outro link aqui, e este link em particular será usado se eles não estão familiarizados com o diferentes opções ou o próprio parque e não familiarizado com os diferentes parques de campismo. Se eles clicarem neste link, ele irá levá-los para outra página que pode fornecer-lhes informações adicionais sobre os diferentes tipos de parques de campismo. Então a última coisa que temos que fazer é organizar nossas camadas. - Parabéns . Agora terminamos com nossa seção de informações do design de nossa página da Web. Então, na próxima lição, vamos trabalhar no rodapé desta página da Web. Então, se você está pronto para começar com isso, bem, ele faz isso? 73. Rodapé: Olá e bem-vindo de volta. Certo, então vamos terminar nosso projeto de Web design com nosso rodapé. Agora ele não parece muito diferente do rodapé original, e eles atualmente têm um total de cinco colunas com seus ícones de mídia social aqui em baixo e uma linha separada. E eu pensei que seria bom ter tudo em colunas versus espalhá-lo para fora. Também temos cinco colunas aqui em cima. Além disso, isso faria uma coluna de seis, o que é bom, porque então nós podemos colocar uma coluna através de colunas de grade cada um e que irá uniformemente espaçado tudo para fora. E então eu meio que mudei as cores um pouco para torná-lo um pouco mais fácil de ler. Então vamos em frente e começar criando nosso plano de fundo para a primeira seção do rodapé. Vamos em frente e criar uma nova camada chamada Pé ou uma para a altura. Vamos ajustá-lo para 425. Eu também preciso mover isso para cima. Parece que estou ficando sem espaço na minha tela, então vamos ter que aumentar isso vai fazer isso em apenas um segundo. Vamos em frente e escolher nossa cor cinza escuro. Vá em frente e preencha isso e, em seguida, corte o conteúdo e mova-o para baixo. Ok, vamos em frente e aumentar o tamanho da tela. Vou adicionar 800 pixels à altura, e depois reajustamos quando terminarmos. Tudo bem, vamos criar um novo plano de fundo chamado Rodapé desta vez. Vamos dimensioná-lo menor, então vamos fazer 1 25 e, em seguida, selecionar sua cor verde escuro para preenchê-lo com De Select e cortar o conteúdo. Ok, agora que sabemos a altura de ambos os rodapés, podemos ir em frente e cortar ou lona. Estou no 51 81 de novo. Você pode ser diferente com base nas imagens selecionadas, então vá em frente, descubra a altura da tela e, em seguida, vá em frente e recorte-a para o primeiro título. Vamos definir para a ferrovia Bold 24 e vamos torná-la branca. Então vá em frente. Basta digitar algum texto fictício para o seu título e vamos alinhar com a primeira coluna do lado esquerdo. Vou em frente e criar o meu título secundário, e depois para o nosso próximo título. Vamos usar a ferrovia regular, e vamos dimensioná-la para 18. Então temos mais algum texto para colocar abaixo dele. Vou criar uma caixa de texto que vai através de duas colunas e, em seguida, basta colar algumas informações para preenchê-lo. Vamos redimensioná-lo para 14 e eu também quero aumentar o espaçamento entre cada linha para facilitar a leitura. Então vamos descer e aumentar o espaçamento. E eu acho que 15 para esse espaçamento de linha vai funcionar muito bem. Tudo bem, vamos sair daí. E a outra coisa que eu quero fazer é criar uma linha com duas colunas de largura, então eu vou em frente e criar uma nova linha chamada anterior. Vamos desenhar uma seleção através de duas colunas e vamos em frente e preenchê-lo com branco . Eu também quero tornar esta linha um pouco mais fina. Vamos subir para a camada, cortar o conteúdo e pegar sua balança. Ferramenta foi Shift plus s e vamos fazer a altura, também. Vá em frente e mova esta linha um pouco para baixo. Vamos em frente e organizar algumas de nossas camadas aqui Ok , agora que temos tudo isso inputted e alinhado, vamos em frente e duplicar esta camada algumas vezes para que possamos preencher o resto do colunas. Tudo bem, vamos em frente e encontrar nossa camada de grade aqui. Certifique-se de que está ligado e vamos em frente e escalá-lo para que possamos realmente vê-lo na parte inferior do nosso campus aqui. Então isso vai tornar mais fácil para nós colocar nossas colunas onde elas precisam estar, podem. Vamos trabalhar na segunda parte do rodapé. Vamos manter a ferrovia, mas vou fazer 14 pelo tamanho. Vamos em frente e adicionar o nosso logótipo aqui em baixo. Eu vou ir em frente e pegá-lo da seção de cabeçalho e duplicado e trazê-lo todo o caminho para baixo. Agora precisamos pegá-lo daqui de cima também. Os organizados da Kayla são camadas um pouco. A única coisa que eu quero fazer é pegar este logotipo e torná-lo todo branco, então vamos em frente e criar uma nova camada chamada overlay. Vamos preenchê-lo com branco, e vamos em frente e colocar essas duas camadas e um grupo nuclear chamado Logo Overlay. E então precisamos mudar o modo de mesclagem para sobreposição e vamos selecionar Edição Perfeita. Então, a única coisa a fazer é adicionar os ícones das redes sociais, e vou deixar você fazer isso sozinho. É muito simples. Basta criar seu título e, em seguida, adicionar seus ícones de mídia social como eu fiz aqui. A outra coisa que eu faria é atualizar o rodapé para representar títulos diferentes e links diferentes. Eu não acho que você quer sentar aqui e me ver digitando toda essa informação. Se você quiser praticar fazendo isso sozinho, você pode ir em frente e fazer isso. E isso é definitivamente algo que eu faria antes de dar ao meu cliente para revisão. Eu também mudaria. Os links aqui em baixo é bem para ser diferente versus ter tudo exatamente o mesmo. Tudo bem, então é isso para o nosso rodapé. E como você sabe, nós temos que passar por toda a página web antes de dar aos nossos clientes para atualizá-lo e torná-lo melhor se possível, e para ajustar qualquer outra coisa que nós esquecemos de fazer. como espaçamento e alinhamentos. Então, vamos em frente e dar uma olhada no geral qual página no próximo tutorial. E há outra coisa que precisamos fazer que ainda não fizemos. E isso é adicionar nossos estados de foco à nossa seção de informações para esses botões bem aqui. Vamos mudar os nomes destes e criar uma pequena janela pop-up para o estado flutuante . E o que acontece depois de clicar nesse link em particular? Então vamos abordar isso no próximo tutorial, então se você está pronto para isso, vamos fazê-lo. 74. Tweaks: Olá e bem-vindos aos ajustes finais para o Projeto número cinco. No geral, acho que fizemos um bom trabalho. Não há muito para mudar ou consertar. Eu acho que nós praticamente alinhamos tudo corretamente centrado tudo corretamente. Gosto dos fundos que usamos. A única coisa que não fizemos foi um estado de pairar para este botão em particular aqui. E nós não mudamos os nomes dos títulos de cada um desses botões. Então essas são duas coisas que definitivamente temos que fazer antes de enviar o conceito de design para nossos clientes. Então eu vou em frente e atualizar esses botões bem rápido. A outra coisa que eu quero mencionar é que há definitivamente mais informações em seu site geral do que esses cinco botões. Então minha recomendação seria expandir esta seção para incluir botões para todas as informações. Não vamos fazer isso porque é apenas repetitivo das coisas que já fizemos. Você já sabe como criar um botão e centro de texto , etcetera. Mas isso é algo que eu teria em mente antes de enviar um projeto para revisão ou aprovação é certificar-se de que você tem todas as informações incluídas em seu projeto. Você não quer economizar e deixar nada de fora porque o cliente pode estar confuso e rejeitar o design não necessariamente baseado em seu design, mas porque há informações faltando. Então, certifique-se de ter todas as informações incluídas. Vamos em frente e projetou o estado de foco, que será uma janela pop-up quando você clicar em um dos botões. Na verdade, antes de fazermos isso, vamos em frente e uma mentira está contente dentro dos botões. Agora, como você sabe, de lições anteriores, não podemos selecionar essas camadas de texto individuais porque elas estão enterradas dentro de camadas de grupo , pelo menos na versão atual do Gamper, que é 2.10 apontar para Talvez, esperançosamente, em uma atualização futura do gimp, eles nos permitirão selecionar essas camadas com sua ferramenta de alinhamento, mesmo que elas estejam aninhadas em camadas agrupadas, e a única opção é desligar as camadas ou o camadas de grupo acima dela. Mas mesmo neste caso, eu ainda não consigo selecionar meu texto, e então podemos selecionar essa camada específica com nossa ferramenta de alinhamento, selecionar tudo e uma linha para essa seleção. Então temos que pegar essa camada e movê-la todo o caminho de volta dentro das camadas de grupo. Não é muito produtivo. Então é por isso que você pode querer atualizar coisas como esta no momento em que você está criando-as e não durante o processo de ajuste, porque isso vai adicionar muito tempo à produção de seus projetos Web. Vou terminar o resto destes títulos e alinhá-los com os botões . Tudo bem, vamos em frente e pegar nosso ícone de estado HOVER do nosso cabeçalho e duplicado e adicioná-lo ao primeiro botão. Tudo bem, agora estamos prontos para criar nosso pop-up de estado de foco, que é o estado depois de clicar em um botão. Então vamos em frente e criar uma nova camada acima do botão chamado Hover Pop up. Nós vamos criar um plano de fundo que cobre todos os nossos botões atuais agora que vai exibir todas essas informações. Então, para o tamanho, vamos fazer 5 25 por 600. Só vou movê-lo aqui para a esquerda e meio que centralizá-lo só um pouco e então eu vou em frente e preenchê-lo com branco. Eu também quero adicionar um acidente vascular cerebral. Então vamos para editar seleção de traçado, Eu vou mudar minha cor de primeiro plano para o verde escuro, uma linha com de três e clique que de select com Commander Control e a letra D. Vamos em frente e pegar nossas ferramentas de texto. Podemos colocar aqui um título de horas de operação. Vou mudar a cor e o tamanho e, em seguida, ir em frente e pegar um texto fictício, clicar e criar uma caixa de texto e colar em algum conteúdo. Definitivamente muito grande. Então eu vou fazer 14 pelo tamanho. Vamos mudá-lo para Georgia e são de cor cinza escuro novamente. Eu tenho muito conteúdo, então eu vou ir em frente e tornar este conteúdo um pouco menor. Vamos fazer um tamanho 12 e isso deve funcionar. Vamos em frente e movê-lo um pouco para cima. E agora precisamos criar uma opção para fechar essa janela. Vou entrar na minha caixa de texto bem rápido e redimensionar a caixa de texto para uma linha para a parte inferior aqui. Tudo bem, vamos em frente e puxar essas camadas para fora do grupo de botões e vamos criar um novo grupo de camadas frias pop-up. Eu acho que eu vou realmente puxar este fora do grupo botões já que é um estado de pairar e não realmente um botão. Ok, vamos passar o mouse, pop-up e cortar o conteúdo e, em seguida, vamos fazer uma seleção do plano de fundo e, em seguida selecionar a camada pop-up agrupada novamente. Não vai me deixar selecionar que é a casa e ir em frente e puxar isso todo o caminho para fora, e nós vamos apenas selecioná-lo para que possamos alinhá-lo ao centro do documento. Ok, vamos colocar isso de volta dentro de Select. E nós vamos em frente e adicionar um link aqui que vai permitir que nossos visitantes fechem essa janela pop-up quando terminarem de lê-la. E então vamos escolher nossa cor azul agradável para a cor. E eu vou selecionar subjacente para adicionar um subjacente abaixo dele, e eu vou defini-lo para 16 para o tamanho e estrada de ferro. Negrito é bom. Certo, vou colocar isso aqui de novo. Vou puxar isso para que eu possa alinhá-lo ao centro dentro e fazer uma seleção da parte inferior do texto e fazer a seleção em torno do resto da parte inferior dessa seção para possamos alinhá-lo diretamente no centro dessa seleção. Então, quando eu entregar isso ao meu cliente, eu vou desligá-lo, e então eu posso mostrar a eles o que vai acontecer. Uma vez que eles clicam em uma dessas opções de botões para obter mais informações, eles vão ver que o Estado Hover vai aparecer com uma nova janela com as informações baseadas no botão que é clicado. E, claro, nosso desenvolvedor da Web vai notar isso também. Então a única coisa que temos que fazer é consertar seu rodapé e organizar todas as camadas que precisam ser organizadas corretamente. E depois acabará com o Projecto número cinco. Então vá em frente e termine este projeto de Web design e, como sempre, vá em frente e redesenhe esta página com sua própria visão criativa para que você possa editar o portfólio e, em seguida, você estará pronto para passar para o projeto número seis. Na verdade, este próximo projeto é o meu design favorito de todo este curso. É o meu favorito. Mal posso esperar para compartilhar com vocês como fizemos. O próximo design tem um pouco de uma sensação de comércio para ele com um tipo retro de estilo para ele. Então é muito divertido, e nós vamos aprender algumas coisas novas nesses projetos de design. Então, quando estiver pronto, te vejo naquele projeto. Até lá, obrigado por ouvir e tenha um dia incrível. 75. Projeto 6: Retro: Olá e bem-vindo ao nosso Projeto de Web Design Número seis. Estou tão animada que finalmente chegou a este projeto em particular. Este é o meu Web design favorito. O projeto. Neste curso, vamos em frente e dar uma olhada rápida no seu site existente. Não há muita coisa acontecendo aqui além de muitas escolhas ruins de design. Seu logotipo é pixelizado, e é um logotipo de qualidade muito baixa, não o design em si. Mas o arquivo real que foi usado é de baixa qualidade, e não parece muito profissional. Temos um fundo escuro com texto escuro para o menu, que não é fácil de ler, então vamos corrigi-lo para que o menu seja muito mais fácil de ler. E se você está se perguntando o que esta empresa faz bem, o que eles fazem é vender posters de filmes antigos, e um desses cartazes está sendo exibido aqui na seção de corpo de herói do site deles . E então nós temos algumas informações de contato aqui em baixo, então se você chegar até esta parte do site deles, você vai notar que eles vendem pessoalmente ou em vários shows de arte e antiguidades , para que você possa entre em contato com eles para descobrir onde eles vão estar para comprar seus cartazes. Mas meu pensamento é, não seria melhor eram mais fácil ou ambos para oferecer os cartazes para venda diretamente em seu site. Eles já têm uma seção de login para clientes, mas eles não estão vendendo diretamente on-line, então eu não tenho certeza porque eles têm um login. Eles têm um livro de visitas, não sei qual é o benefício disso. E então eles têm algumas informações sobre sua empresa e o que eles dilatam e, em seguida, uma página de contato, que é basicamente esta informação aqui. Então, no geral, este site e este cliente podem facilmente expandir seus negócios, exibindo seus cartazes on-line e vendendo-os diretamente on-line versus limitando-se a vendas presenciais. Então deixe-me mostrar a vocês a home page e commerce que eu criei para o osso da galeria retro. Tem um estilo de design retro. Atualizamos o logotipo. O menu é mais fácil de ler. O login agora tem um sentido de propósito. Clientes ou clientes podem revisar seus pedidos em seu histórico por meio de uma conta. Há um Kurt de compras para levá-los diretamente à sua corrente para conferir a seção The Hero apresenta seus cartazes de filmes mais populares que os clientes podem navegar até cinco cartazes de filmes diferentes apenas na seção de heróis. Podemos sempre adicionar mais se necessário, mas pensei em começar com cinco. Temos uma descrição do cartaz do filme. Se eles quiserem saber mais, eles podem clicar neste link Mawr, e um pop-up mostrará mais informações sobre esse cartaz em particular. E se eles estão prontos para comprar agora mesmo, então, se eles quiserem explorar mais opções, eles podem rolar para baixo. E nós temos um tipo de comércio configurado que os clientes podem filtrar por preço ano qualidade gênero . Teoh facilmente encontrar os tipos de cartazes que eles gostam de coletar, E, claro, eles podem comprar agora ou obter mais informações primeiro. Então, é claro, terminamos a página inicial com um rodapé. Então, no geral, estamos tomando este conceito de Web design de seu logotipo existente e o que eles estão vendendo. E é por isso que escolhi um estilo de design retro para esta empresa em particular. E eu amo o estilo de design que eu criei, então eu vou mostrar a vocês como atualizar este logotipo. Mas você pode estar pensando bem já sabe como fazer isso? Só preciso escolher a fonte e refazê-la. Se fosse assim tão simples, sim, é tudo o que tem que fazer. Mas e se a pessoa que desenhou este logotipo não disse ao seu cliente que tipo de letra eles usaram ? Tudo o que eles têm é um arquivo J peg achatado, e eles não têm idéia do nome dessa fonte. Você vai ter que percorrer milhares de fontes para tentar encontrar isso. Ou você está tão animado para compartilhar com você como é fácil descobrir que tipo de letra é entre milhares. E você pode fazê-lo literalmente em um minuto ou dois no máximo. Então eu vou compartilhar esse segredo com você na próxima lição. Então vamos criar este controle deslizante retro. Eu vou te dar uma dica e o recurso que eu uso para fundos e texturas. Então nós temos uma textura de linho para o fundo, e eu posso adicionar isso em um clique e eu vou mostrar a vocês como eu faço isso. E então, é claro, vamos em frente e criar a seção de comércio e eu vou te dar algumas dicas sobre como eu criei alguns dos efeitos para essas listagens Nós já falamos sobre sombras antes, mas também temos uma gota sombra no interior do botão desta vez em vez do exterior . Então eu vou te mostrar como eu fiz isso. E, claro, vou fornecer dicas adicionais ao longo do caminho. Então, se você está animado como eu estou com este projeto, vamos fazê-lo. Vamos começar a descobrir a fonte usada neste logotipo. 76. logotipo: antes que possamos realmente refazer nosso logotipo para este cliente. Temos que descobrir qual fonte foi usada para o logotipo. O problema é o cliente não sabe qual fonte foi usada ou o nome dessa fonte. Tudo o que eles têm é um arquivo J peg achatado. E, como você pode ver, isso é muito pixelizado. Incluiu esse logotipo como parte desta lição, então você pode baixá-lo e usá-lo você mesmo para descobrir quais fundos. Então deixe-me mostrar-lhe como fazer isso. Vá em frente e faça o download. Então precisamos ir a este site. Minhas fontes dot com forward slash w t f, e o que este site vai fazer é tirar o arquivo desse logotipo, e depois que você carregá-lo através deste navegador, ele vai escanear esse arquivo, e ele vai comparar a ele é milhares e milhares. Na verdade, há 130.000 fontes e contando. Ele vai comparar esse arquivo com todas as fontes em seu banco de dados para refinar qual fonte foi usada nesse logotipo. É tão simples, é a mente soprar. Como é fácil dizer isso. Então eu vou pegar meu arquivo aqui, e eu vou arrastá-lo e soltá-lo nesta área. Então precisamos clicar neste pequeno botão azul aqui para identificar o Funt e Boom selecionado . Lá vamos nós. Ali está o mais longe, Plaza. Há outras versões desse fundo também, esta aqui. Há outros estilos dessa fonte, então você pode identificar a fonte usada para esse logotipo sem precisar peneirar 130.000 fundos. Quão legal é isso? Agora você está olhando para isso, e você pode ver aqui para a direita. Temos que comprar esses fundos. Ou temos? Na verdade, há versões gratuitas deste funt que você pode usar em seu Web design, e então você pode decidir se você quer que seu cliente use essa fonte livre. Ou talvez eles estariam melhor com uma versão de alta qualidade da fonte original. E o preço da fonte não é muito. Isto é realmente em dólares canadenses, por isso é provavelmente mais perto de como 25 a US $30 U. S. Então, se fizermos uma pesquisa do Google para o fundo Plaza Free, nossa primeira opção aqui a partir de fontes geek dot com Você pode baixar o tamanho de graça. Então, o que ele tinha o maldito espertinho local Vá em frente e instale-o no acampamento Gimp Restart para finalizar a instalação e, em seguida, voltar para o gimp e vamos recriar o logotipo para que possamos adicioná-lo ao nosso projeto. Então vamos em frente e começar. Vamos criar um novo documento com comando ou controle e o fim da letra. Este é o tamanho que queremos 80 por 68, então vamos selecionar a cor do primeiro plano, e vamos escolher esta cor cinza escuro. Então vá em frente e digite o número da dívida e, em seguida, clique em. Certo, então vamos em frente e criar um par de fundos antes de inserir texto. Então vamos em frente e criar uma nova camada chamada fundo retro preenchido com transparência e, em seguida, com sua ferramenta de seleção de retângulos, criará o tamanho dessas caixas, e o 1º 1 será de 1 35 por 58 e em seguida, basta ir em frente e movê-lo para cima e para o documento e, em seguida, pegar o seu branco e preenchê-lo com o seu balde, ferramenta de preenchimento e, em seguida, de select. Vamos continuar e duplicar esse fundo e chamá-lo de fundo da galeria. Eu também quero cortar a camada bhandari para ambas as camadas e, em seguida, para o fundo da galeria . Nós realmente vamos preenchê-lo com preto, então aperte a letra D e, em seguida, pegue sua ferramenta de preenchimento de balde com a letra G e vá em frente e preenchê-lo. Também queremos adicionar um guia que esteja na metade do logotipo, então estamos em 80. Então vamos arrastar uma diretriz para fora em 140 e então vamos mover o fundo da galeria para a direita. Ótimo ao longo desse guia e, em seguida, certifique-se de que seu fundo branco está alinhado com essa diretriz também. Ok, podemos ir em frente e esconder o guia agora, e vamos em frente e pegar nossa ferramenta de texto. Vamos escolher a fonte que baixamos e instalamos Plaza de Wreg e, em seguida, para o tamanho, vamos fazer 60 e vamos fazer preto para retro. Então vá em frente e digite retro em todas as maiúsculas e, em seguida, basta movê-lo para a posição agora porque o limite da camada está no lado de fora do texto retro acima e explodi-lo. Ou temos que entrar e ajustar o tamanho da caixa de texto até cobrir tudo para que possamos , em seguida, uma linha que diretamente na caixa de texto eu vou em frente e fazer isso. Mantenha pressionada a tecla shift, clique no logotipo e, em seguida, uma linha para o primeiro item. Ok, precisamos voltar para a caixa de texto agora e redimensionar a caixa de texto de acordo. Vamos em frente e adicionar galeria no lado, mas vamos mudá-lo dedo branco para que eu possa ir em frente e a linha este conteúdo com o logotipo retro agora com sem usar a ferramenta de alinhamento simplesmente adicionando uma diretriz aqui e certificando-se que se alinha na parte superior. Eu posso ver visualmente que é igual em ambos os lados também. Então eu vou em frente e deixar o texto da galeria bem ali, e é isso. O nosso logótipo já está pronto. Vamos em frente e colocar isso em um novo grupo de camadas chamado Logo. Agora podemos adicionar isso ao nosso projeto, e eu preciso ir em frente e abrir meu modelo mestre de grade e eu realmente não estou vendo isso aqui agora. Então o que eu posso fazer é vir aqui para documentar a história, e isso vai me mostrar muito mais arquivos que eu abri no passado. E eu posso navegar por isso para encontrar o modelo mestre de grade e depois abri-lo diretamente a partir daqui contra tentar procurá-lo no meu disco rígido. Então eu vejo bem aqui. Na verdade, esse é o meu arquivo PST. Então aqui está, grade dot Exe CF. Então, se eu clicar duas vezes sobre isso, ele vai abrir esse modelo. E agora eu posso pegar meu logotipo daqui e ele para os documentos. Vou arrastá-lo até lá e movê-lo até o topo. Tudo bem? Agora que terminamos com nosso logotipo, vamos continuar e trabalhar na seção de cabeçalho no próximo tutorial. Então, se você está pronto para fazer isso, vamos fazê-lo 77. Cabeçalho: Olá e bem-vindo de volta. Tudo bem, vamos em frente e trabalhar na nossa seção de cabeçalho. Agora vamos adicionar nossa navegação primária, bem como uma navegação secundária. Então eu vou dar algumas dicas novas ao longo do caminho, bem como criar um novo atalho de teclado para um recurso específico que temos usado em todos os projetos. E temos andado a usá-lo uma e outra vez e outra vez. Então vamos em frente e criar um novo atalho de teclado para isso. Mas primeiro, vamos em frente e criar nosso fundo de cabeçalho. Então crie uma nova camada com o fundo do cabeçalho do nome. Vamos em frente e fazer nossa seleção. Queremos que esteja cheio. E então para a altura, vamos fazer 150 Vá em frente e agarre, são de cor cinza escuro e preenchê-lo. Ok, vamos em frente no de select antes de colocarmos isso em posição. Vamos em frente e criar um atalho de teclado para essa turnê esse recurso que temos usado repetidamente. E essa é a camada para cortar para a feição de conteúdo. Então temos usado isso em todos os projetos sem parar. Então, se subirmos para editar e selecionar atalhos de teclado. Podemos atribuir um atalho de teclado para esse recurso específico. Então, em busca, vamos cortar para o conteúdo. Então, estes para o que queremos atribuir o atalho de teclado para é a opção de camadas. Então precisamos clicar aqui para ser capaz de atribuir um pressionamento de tecla a essa ferramenta ou recurso específico . Então originalmente eu pensei que talvez a letra C, mas que está sendo usado para a ferramenta de corte. Então, em vez disso, o que podemos fazer é usar a tecla Shift em conjunto com a letra C. Então segurando sua tecla Shift e, em seguida, pressione a letra C. E agora esse é o atalho de teclado para essa ferramenta em particular. Certifique-se de que você salvou atalhos de teclado ao sair e pressione Fechar. Agora podemos simplesmente usar Shift mais C para cortar o limite da camada para o conteúdo. Tudo bem, vamos em frente e colocar isso em posição. Vá em frente e desligue minhas grades por enquanto, e vamos adicionar nossa navegação primária. Agora, quanto ao fundo, vamos tentar a Plaza de Wreg que usamos para o logotipo. Mas vamos dimensioná-lo 24 e vamos usar Branco para a cor. Então vamos digitar para casa e, em seguida, lutar espaços loja e vamos dar uma olhada nisso. Então agora é meio difícil de ler, então talvez precisemos aumentar o tamanho da fonte. Então vamos tentar 30 e ver se isso ajuda algum agora, embora isso ajude um pouco, ainda é meio difícil de ler, e o texto está competindo com nosso logotipo, já que já estamos usando isso fundo particular no logotipo. Então eu quero usar um tipo de fonte retro para a navegação, e neste caso, eu não acho que usar a família de fundo de logotipo funciona para a navegação ou até mesmo para os títulos da página da Web. Agora, no projeto anterior, nós usamos uma fonte semelhante à sua marca, mas ele não competiu tanto com ele, já que o logotipo estava fora para a esquerda e muito menor do que os títulos reais. Mas neste caso, eles estão muito próximos, e mesmo com um tamanho grande, ainda é difícil de ler. Portanto, queremos ter certeza de que tornamos a navegação e os títulos fáceis de ler, bem como o corpo do texto. Então nós vamos entrar e mudar isso para Oswald e vamos mudar para 24 porque eu acho que 30 é muito grande. Então isso é muito mais fácil de ler versus o que tínhamos anteriormente. Agora vamos em frente e adicionar nossos outros itens de menu de navegação aqui à direita. Mas antes de fazer isso, vamos apenas descer aqui e digitar Oswald para que ele seja padrão para esta fonte à medida que adicionamos mais texto. Então vamos em frente e digite cerca de cinco espaços e em contato. Então agora a questão é, como alinhar toda essa informação? Queremos alinhá-lo às colunas da grade, ou precisamos fazer outra coisa? Então vamos em frente e uma linha para a terceira coluna e a terceira da última coluna aqui. E vamos dar uma olhada no que acontece quando fazemos isso. Eu vou em frente e colocar aquele ali, e então este precisa ir para a direita este um pouco. Vou selecionar ambos com a minha ferramenta de alinhamento para que eu possa alinhá-los à parte inferior. Agora eu preciso selecionar tudo. Pegue meu dedo do pé de alinhamento novamente para que eu possa on-line meu logotipo para o centro dessa seleção. Tudo bem, vamos voltar para a nossa ferramenta Lima e clicar em um dos itens de navegação. Turno. Clique no logotipo para alinhá-lo à parte inferior dos itens do menu. Tudo bem, agora que temos tudo devidamente alinhado, não tenho certeza se você pode notar, mas o layout está desequilibrado agora. Se fizermos zoom aqui e olharmos mais de perto, posso ver que há mais espaço deste lado contra o lado. Mesmo que tenhamos alinhado tudo ao centro e através das colunas apropriadas. Ainda há espaço extra aqui, e se pegarmos nossa ferramenta de medida aqui e medirmos, eu tenho 125 pixels lá e então deste lado eu tenho 97 então há mais 28 pixels de espaço no site. Então, como consertamos isso? Bem, o problema é que nossos itens de menu de navegação têm uma quantidade diferente de caracteres neles e caracteres diferentes em geral que são de tamanhos diferentes, então isso está criando o desequilíbrio. Então a questão é, nós movemos a navegação primária para aqui à direita, mais para o dedo direito, adicionar mais espaço nela, ou removemos esta ou para a direita? Se fizermos isso, então tudo não será devidamente centrado no próprio navegador. Então vai ser desequilibrado de novo. E eu acho que isso vai ser muito mais perceptível do que o dilema de espaçamento atual que temos agora. Então, isto é o que eu faria. Eu pegaria nosso logotipo e centralizaria diretamente entre os dois lados de nossa navegação primária , e isso vai equilibrá-lo. Mas quando você diminui o zoom geral, você vai tipo de ver que o logotipo não está centrado no navegador, mas porque o espaçamento é muito mais distante aqui à esquerda e à direita, ele não vai ser tão perceptível quanto é agora, então é o mal menor das três opções. Então, vou fazer uma seleção entre minha navegação e depois? A ferramenta de alinhamento. Posso selecioná-lo e alinhá-lo ao centro da nossa seleção, de modo que isso o torna muito mais equilibrado aqui. E mesmo que não seja equilibrado no navegador, não é tão perceptível como era antes. Pelo menos essa é a minha opinião. Então essas coisas de ar que você vai ter que decidir com base no que você vê e sua visão criativa. A outra solução é colocar toda a nossa navegação principal em uma linha e, em seguida, com abaixo , sobre a esquerda ou direita para que você tenha essa opção também. Tudo bem, vamos em frente e criar nossa navegação secundária. Vamos fazer login. Vamos fazer três espaços para encaminhar barras três espaços. Vou mudar isso para cinco espaços em ambos os lados e depois apertar a tecla de escape . E vamos avançar agora porque esta é a nossa segunda navegação de laticínios. Não deve ser tão grande quanto nossa navegação primária, então precisamos voltar e tornar isso menor. Neste caso, eu vou fazer 14 para o tamanho se nós diminuirmos o zoom e dar uma olhada nele, o problema é, é difícil de ler, Então este tipo de letra Oswald não é uma boa fonte para usar em tamanhos menores é muito mais fácil em um tamanho maior. Então o que vamos fazer é entrar, clicar duas vezes no login, e então aqui embaixo, e então aqui embaixo, podemos mudá-lo para ferrovia, e agora você pode ver que é muito mais fácil de ler do que era antes. Agora precisamos de um Kurt de compras até o fim disso. E eu vou pegar um dos que usamos qualquer projeto anterior, que é o primeiro projeto. E eu vou em frente e pegar o Kurt de compras e trazê-lo para que você possa fazer o mesmo . Ou você pode apenas encontrar um novo através de imagens do Google. Agora, bem rápido. Antes de colocarmos isto aqui e alinhá-lo. Tenho outra dica rápida para você agora. Tenho a minha ferramenta de movimentação selecionada e escolhei-a mais cedo ou guia selecionada. Às vezes, quando o conteúdo dessa camada Israel pequeno ou talvez haja uma lacuna entre elementos diferentes. Às vezes é difícil escolher o conteúdo dessa camada e movê-la, e em vez disso você vai acabar movendo outra coisa, porque quando você escolhe uma camada ou guia, ele vai escolher a camada em que você clica. Então, por exemplo, se viermos aqui e eu tentei selecionar essa parte de nossa navegação e eu clicar no meio, é Ashley selecionando a camada de fundo e movendo isso em vez disso. Então, se eu descer aqui e tentar clicar nisso, eu vou mover o fundo. Por isso, às vezes é difícil usar esta ferramenta de movimentação com esta opção para fazer uma seleção em alguns casos. Mas aqui está como você pode contornar isso. Se eu pegar esta camada de fundo e vir aqui e clicar nesta opção de bloqueio, ele vai bloquear a camada na posição para que eu não possa movê-la mais. Então eu poderia fazer a mesma coisa com o fundo do meu cabeçalho também, e como isso em posição. E então eu não posso selecioná-lo. Mas eu posso selecionar outra coisa que eu clique agora. Outra coisa que você pode fazer é que você ainda pode pegar sua camada de fundo aqui e uma cor para ela, mesmo que seja muito. Mas se você quiser proteger sua camada ainda mais, você pode selecionar esta opção aqui, que irá bloquear os pixels dessa camada. Então agora eu posso adicionar qualquer cor a essa camada. E até diz aqui que as camadas ativas pixels estão bloqueadas. Então, quando eu tentar movê-lo, você vai receber outra mensagem. A posição das camadas ativas é bloqueada, então essa é uma ótima maneira de garantir que você não mova acidentalmente uma camada ou camadas específicas ou adicione pixels adicionais a elas acidentalmente. Porque como você está trabalhando com um monte de camadas como nós temos em projetos anteriores, às vezes você tenta mover algo, e talvez você tenha a opção errada selecionada e você acaba movendo uma camada que você não quer mover, e você realmente não descobrir sobre isso até chegar ao estágio final, onde você está ajustando o design final e então você tem que voltar e corrigi-lo. Então eu só queria compartilhar isso com você para que você saiba como proteger suas camadas e minimizar o trabalho extra que você pode ter que fazer no final do seu projeto. Muito bem, vamos voltar ao nosso ícone do Kurt de compras e movê-lo para a posição. Vamos em frente e uma linha com nossos guias e sua coluna para que tudo esteja perfeito. Eu também preciso pegar minha navegação secundária aqui e ter certeza de que ela está devidamente espaçada entre as barras e o início do ícone dela. Já que não é, preciso ir em frente e movê-lo. E é por isso que adicionamos os cinco espaços no final para que possamos ver que o limite da camada está aqui e não aqui. Muito bem, vamos começar a organizar as nossas camadas. Também precisamos levar o nosso carrinho de compras aqui e mudá-lo com o dedo do pé branco, então você pode se lembrar de como fazer isso. O que vamos fazer é criar um novo fundo de sobreposição. Vamos então preenchê-lo com um clique branco. OK, vamos criar um novo grupo de camadas chamado Overlay e, em seguida, pegar esse fundo excessivamente e alterar o modo de mesclagem para adição. Ok, agora temos o nosso carrinho de compras branco. Vamos dar uma olhada no nosso cabeçalho até agora. Parece que ainda temos uma coisa a fazer, e que é separar nossa navegação secundária e primária um pouco mais porque ela ainda está competindo uns com os outros, e é um pouco desequilibrada porque temos mais conteúdo aqui à direita, então este lado do design é mais pesado. É meio que inclinado para a direita porque há mais elementos ou mais conteúdo aqui. Então, uma maneira de corrigir isso é criar outro plano de fundo para a navegação secundária para ajudar a conter esse conteúdo dentro dele, e isso deve ajudar a equilibrá-lo um pouco mais. Então vamos criar uma nova camada chamada fundo secundário e mudá-la de volta para transparência . Clique em OK, e vamos em frente e preenchê-lo com a mesma cor escura. Vamos em frente e fazer a altura dela 40 e vamos usar essa cor cinza escuro. Tudo bem. Agora podemos usar nossos novos atalhos de teclado, então mude mais C vá em frente e mova isso para cima. Precisamos mover isso abaixo dessa camada de grupo. Vamos avançar e ampliar aqui para alinhar nossa navegação secundária entre a parte superior e a parte inferior. Aqui, pegue sua ferramenta de alinhamento e vá em frente e clique na navegação secundária. O único problema é porque criamos essa nova sobreposição. Precisamos cortar o conteúdo de volta para se aliar com o próprio conteúdo. Então pegue sua camada agrupada de navegação secundária. Use sua nova mudança de atalho de teclado mais C. Agora podemos selecioná-lo, e o meio da linha do alvo pode ir em frente e de selecionar. Agora o que precisamos fazer é uma sombra para ajudar a criar essa separação. O único problema era, nós ficamos um pouco à frente de nós mesmos, cortando o conteúdo para esse conteúdo. Então eu estava muito empolgado em usar o novo atalho de teclado. Então vamos em frente e desfazer isso com o tamanho da imagem da camada dois. Vamos subir para os nossos filtros são sombra e adicionar uma sombra. Então isso é um pouco grande demais para mim. Eu vou em frente e soltar o acesso X e Y para baixo, e isso está parecendo muito bem ali. É uma espécie de zoom aqui e ver como está afetando o resto do design, então tudo parece muito bom. Então eu vou deixar tudo o resto no padrão e clicar em OK agora, se você quiser, você pode ir em frente e usar o atalho de teclado para cortar o conteúdo. Mas como você sabe, ele está cortando o fundo para a borda ou o fundo da sombra, então isso definitivamente ajudou a equilibrar um pouco. Ainda está um pouco desequilibrado. Ainda está um pouco pesado aqui, mas não tanto quanto antes. E há definitivamente separação agora entre a navegação secundária e primária. A única coisa que eu realmente não estou gostando é o espaçamento do logotipo porque nós temos mais espaço baixo do que aqui em cima. Então vamos em frente e a linha do logotipo para o centro da parte superior e inferior aqui. Tudo bem, então isso parece muito melhor agora, e eu acho que nós terminamos. Tudo o que temos que fazer é organizar nossas camadas aqui e colocá-las em um novo grupo de camadas chamado Header. Parabéns. Agora terminamos com a parte de cabeçalho deste projeto de design. No próximo projeto, vamos começar a trabalhar no controle deslizante da seção de heróis, e isso vai levar muito tempo para fazê-lo. Provavelmente vamos dividir isso em dois, talvez três tutoriais diferentes. Então, se você está pronto para começar a fazer isso, vamos fazê-lo 78. Hero parte 1: Olá e bem-vindo de volta. Certo, então vamos começar a trabalhar na seção de heróis, que inclui nosso controle deslizante de produtos diferentes. Mas antes de realmente começar no controle deslizante, eu primeiro quero falar sobre o fundo porque eu tenho um fundo texturizado na parte de trás, e eu quero mostrar-lhe como e estes diferentes tipos de texturas ou padrões dentro do gimp instalando padrões pré-fabricados no gimp que você pode usar com sua ferramenta de preenchimento de balde . Você pode até usá-lo com suas ferramentas de pincel, seu caminho, ferramenta e muito mais. Então eu vou mostrar a vocês o recurso que eu gostaria de usar para obter esses tipos de padrões de graça . Então vamos em frente e verificar isso. E aqui está o site. Top cauda ponto com para a frente designers barra barra padrões sutis. Agora eu fiz uma busca por linho, que reduziu o número de padrões para esse tipo de textura ou esse padrão, e no total. Neste momento, o site tem 491 padrões, e eles continuam adicionando mais e mais padrões em uma base regular. Apenas alguns meses atrás, havia apenas cerca de 470 padrões. Portanto, é um ótimo recurso para encontrar padrões livres que você pode usar para seus projetos de Web design , especialmente para padrões de tipo de fundo, porque eles vão fornecer um arquivo para você que vai ser bastante pequeno em tamanho, aproximadamente 50 pixels por 50 pixels ou 100 pixels por 100 pixels. Mas a maneira como esse padrão é projetado ou que o arquivo foi projetado, ele se torna perfeito quando você o amplia de 100 pixels para 1400 pixels, e é feito automaticamente para você com base na maneira como esse arquivo é criado. Então vamos em frente e baixar um desses padrões. Vou mostrar-lhe como instalá-lo e gim, e então vamos começar a trabalhar na cor desse padrão particular porque, como você pode ver, eles são principalmente cinza escuro, preto e branco e realmente não têm nenhuma cor para ele. Mas vou mostrar-te como adicionar cor a esse padrão. Então vamos em frente e baixar linho de baixo contraste. Então, ou faça uma busca por isso aqui ou apenas Lenin ou apenas linho e general. Vá em frente e baixe-o, e então temos que descompactar o arquivo. Então dentro daqui você vai encontrar três arquivos, ler texto para mim e depois dois arquivos para esse padrão. Então este arquivo aqui para X o padrão real é duas vezes maior. Esse não é o que queremos. O que queremos é este aqui. Então, vou arrastar isto para o meu documento para ver o tamanho. E parece que tem cerca de 250 por 250 pixels de altura. E agora, não vai ser fácil fazer isso cheio com e preencher toda a seção de heróis com este arquivo. E é por isso que queremos entrar em nossos padrões e aplicá-lo dessa maneira. Então, se você acessar sua ferramenta preenchida por balde, você verá diferentes opções aqui para preencher com o primeiro plano, o plano de fundo e, em seguida, um preenchimento padrão. Então eu já tenho este instalado. Então deixe-me mostrar-lhe como instalar isso para que você possa aplicá-lo com sua ferramenta de preenchimento de balde . Então temos uma pasta específica na qual precisamos colocar nossos padrões, e este é o diretório que você precisa seguir para instalar o padrão no gimp. Então, você quer ir para seus usuários de disco locais? Seu nome de usuário? Gimp de roaming de dados AP 2.10 e, em seguida, padrões. Então você vai pegar este arquivo que você baixou, você vai para a direita, clique e copie e, em seguida, ir para este suporte de padrões e colá-lo dentro Então é assim que você instala para usuários de PC. Agora, se você estiver em um Mac, você vai para os usuários. Nome de usuário, aplicativos de biblioteca, suporte gimp 2.10 e, em seguida, padrões. E então você pode colar esse arquivo diretamente nesta pasta. E então, uma vez que você tem isso na pasta correta, você precisa voltar para o gimp e ir para o seu painel padrão, que pode ser acessado por diálogos do Windows Doc Kable e, em seguida, selecionar padrões. Você vai ter uma janela como esta, e então você quer clicar neste botão de padrões de atualização, que irá atualizar quaisquer padrões que você adicionou a essa pasta, e então você só precisa localizar esse padrão específico por aqui apenas para se certificar que o tem na pasta correcta. Então o meu está aparecendo aqui, e eu posso ver o nome desse arquivo bem aqui. Então, foi instalado com sucesso. Ok, então agora que você fez isso, tudo que você tem que fazer é criar uma nova camada. Vou chamar-lhe fundo de herói, preenchê-lo com transparência, depois agarrar o seu balde. Ferramenta de preenchimento. Vá para as opções de ferramentas. Selecione o padrão Phil. Clique neste ícone. Localize o padrão, selecione-o e então você pode preencher esse plano de fundo com esse padrão. Então esse é o primeiro passo para colocar seu padrão em seu projeto de design. Agora precisamos colorir esse padrão para que não seja a cor cinza chata, e é mais dessa cor laranja aqui, e vamos fazer isso com uma série de sobreposições diferentes. Então vamos em frente e criar uma nova camada chamada overlay one. Nós vamos preencher com este tipo de cor laranja brilhante neste número HTML aqui, e então vá em frente e preenchê-lo com essa cor de primeiro plano. Você deseja voltar para as opções da ferramenta e certificar-se de que o preenchimento de cor do primeiro plano está selecionado. Agora precisamos mudar o modo de mistura desta camada muito suave, leve e Nós também queremos mudar a opacidade da camada de fundo para que possamos torná-lo muito mais leve. Não quero que fique tão escuro. Então, neste caso, eu vou fazer 90 e eu vou criar outra sobreposição chamada sobreposição para eu vou preenchê-lo com a mesma cor. E isso vai me permitir fazer esta cor laranja muito mais brilhante do que é agora . Então vamos fazer o mesmo modo de mistura, uma luz suave, e desta vez vamos baixar a opacidade para 30. Então, apenas adicionando a segunda sobreposição, podemos tornar essa cor muito mais brilhante do que era com uma única sobreposição. Assim, quando você estiver misturando suas cores com seus padrões, você pode experimentar e experimentar diferentes configurações de capacidade, bem como diferentes modos de mesclagem para criar diferentes esquemas de cores e efeitos diferentes escolhendo diferentes modos de mistura e diferentes capacidades. Então isso é algo que você vai ter que experimentar sozinho, para ver como você pode criar diferentes tipos de cores e intensidades dessas cores. Mas este é o esquema de cores que vamos usar para o nosso fundo de herói por enquanto. Então, uma vez que você tenha feito isso, vamos em frente e começar a criar o controle deslizante no próximo tutorial. Se você está pronto para isso, vamos fazê-lo. 79. Hero parte 2: Olá e bem-vindo de volta. Muito bem, então este é o momento que esperou toda a sua vida. Bem, talvez não muito tempo, mas agora vamos finalmente começar a trabalhar na criação do nosso controle deslizante retro. Então vamos em frente e começar. Nós provavelmente vamos dividir isso em duas partes porque vai levar um bom tempo para criar todos os diferentes elementos que precisamos para o controle deslizante. Então vamos em frente e começar criando nosso plano de fundo para o controle deslizante. Então vamos criar um novo SE anterior. Vou pegar essas camadas e agrupá-las para tirá-las do caminho. Vamos chamá-lo de fundo de herói. Agora você deve ter notado uma vez que colocamos essas três camadas, qualquer camada de grupo, a cor ea capacidade do fundo geral mudou. E isso porque os modos de mesclagem não estão necessariamente funcionando como antes, porque não temos essa camada de fundo lá também. Então, uma vez que colocamos isso lá, então obtemos o resultado que queremos. Mas não queremos necessariamente colocar a camada de fundo neste grupo a camada porque haverá outras seções abaixo disso, e elas serão ocultas. Então, vamos desfazer isso com Commander Control e a letra Z. Então, a solução para isso é pegar o retardo do grupo de fundo do herói indo para o modo de mesclagem e, em seguida, selecionar passado através. Então isso vai passar todos os elementos dentro deste grupo. Camada através dele de modo que a camada de fundo será aplicada da maneira que queremos com as outras camadas. Vamos também definir a altura de nossa seção de heróis arrastando uma diretriz para 700 e também precisamos conter nosso fundo aqui para essa altura. Então vamos pegar nossa ferramenta de seleção de retângulo e criar uma seleção nessa área. E então nós vamos adicionar uma máscara de camada para a camada agrupada de fundo herói. Certifique-se de que você tem a seleção selecionada em Adicionar Que de Select com Commander Control Andy e desligar seus guias. Ok, agora podemos ir em frente e começar no controle deslizante, então a primeira coisa que eu quero fazer é criar um novo fundo chamado menor fundo. E vamos fazer o tamanho desse fundo oito colunas de largura. Então, na verdade, vamos apenas ir em frente e digitar as dimensões, que são 775 por 475 Ele vai mover isso aqui para cima, então ele está no lado da seção de heróis, e então nós vamos pegar uma cor creme claro aqui. Este é o hexadecimal, um número decimal que eu selecionei. Então vá em frente, digite isso e, em seguida, vá em frente e preencha. Tudo bem, agora precisamos cortar o limite da camada para que possamos fazer isso com Shift Plus C. Vamos fazer uma seleção em torno de nossa seção de heróis e vamos eleger nossa camada de fundo com nossa ferramenta lame it, e então podemos alinhar a o centro e o meio do alvo. Em seguida, quero criar um espaço reservado de imagem que atuará como nosso guia para dimensionar as imagens de nossos produtos para que possamos criar uma nova camada chamada Espaço reservado de imagem. E então, para este, vamos dimensionar 7 20 por 3 60 e vamos em frente e preenchê-lo com preto, e não vamos esquecer de cortar o conteúdo também. Shift mais C. Então vamos em frente e medir uma quantidade específica de espaçamento para o topo, e então vamos alinhá-lo ao centro. Então eu vou fazer 20 pixels para o espaçamento no topo. E depois o quê? ferramenta de alinhamento deles. Vamos em frente e selecionar nosso plano de fundo, em seguida, clique no marcador de posição da imagem, alterá-lo para o primeiro item e, em seguida, um centro de linha de destino. Vamos adicionar nossa imagem nisso em um minuto. Eu só quero adicionar alguns outros elementos primeiro. Ok, agora vamos criar o nosso botão de compra. Vamos pegar nossa ferramenta de elipse, fazer uma seleção. Vamos dimensionar 1 25 por 25 Vamos também criar uma nova camada para ela, e então vamos preenchê-la com uma cor cinza escuro. Então eu vou usar esta cor aqui. Vá em frente e preencha agora, antes de selecionarmos. O que eu quero fazer é adicionar um traço em torno dele, que vai ser da mesma cor que seu fundo, e isso vai nos dar um efeito onde ele vai parecer que está cortando parte da imagem. Então vamos subir para editar selecionar seleção de traçado. Vamos tentar quatro, e também precisamos ter certeza de que temos essa cor selecionada. Então use sua ferramenta conta-gotas para clicar no fundo para obter essa cor e, em seguida, vá em frente e clique em Stroke de Select com Commander Control e a letra D. Então, há o nosso por bolo que parece muito legal. E como eu disse, parece que está cortando essa parte da imagem, então isso é muito legal. Certo, vamos em frente e aperte Shift mais C para cortar o limite de Lear. Vamos adicionar algum texto aqui no lado esquerdo, e isso representará a condição do cartaz. Então eu vou usar uma fonte grande, e nós vamos usar Oswald negrito e vamos configurá-lo para 60 para o tamanho e, em seguida, são cor cinza escuro . Então, em todas as maiúsculas, eu vou fazer significados, e então nós podemos apenas ir em frente e mover isso para cima, e eu quero ter certeza de que ele está alinhado ao lado esquerdo do nosso espaço reservado de imagem. Então o limite da camada é uma linha para ele, mas eu quero que a letra real seja alinhada a ela, então eu vou colocá-la bem ali. Eu também vou alinhá-lo em cima do fundo também. Agora, novamente, temos mais espaço aparecendo no limite da camada versus aqui embaixo. Mas se apertarmos Shift mais C, isso irá cortar o limite da camada para o texto. Então essa é uma maneira mais eficiente e rápida, contra a maneira que eu ensinei antes. Embora funcione, é menos eficiente. Portanto, sempre tente usar o recorte para o conteúdo para cortar o limite da camada para os pixels dessa camada. Então agora podemos usar nossa ferramenta de seleção de retângulos, fazer nossa seleção e, em seguida, selecionar menta com sua ferramenta Lima. Precisamos voltar para a seleção e uma linha no meio dos alvos. Ok, vamos selecionar e vamos em frente e diminuir o zoom novamente. Eu vou continuar e salvar isso com o Commander Control e a letra S. Vamos em frente e ligar nossas grades porque o que eu quero fazer é criar um parágrafo aqui que vai ser a descrição deste produto em particular. Então eu quero torná-lo um tamanho específico de quatro colunas de largura por 56 pixels de altura. Então vamos criar uma nova forma para definir o tamanho da caixa de texto. Vou ligar para uma caixa de descrição, e depois vamos digitar 56. Para a altura, vou em frente e preenchê-lo com Dark Grey. Não importa, porque vamos apagar isso mais tarde. Então vá em frente e de Select Commander Control e a letra D. E vamos em frente e uma linha este topo na parte inferior do nosso controle deslizante. Então, aqui mesmo. E certifique-se de cortar o limite da camada também com shift mais C, e então você pode selecionar essa camada e alinhá-la no meio do alvo. Certo, Comandante de Controle e de seleção. Vamos adicionar a informação ou a descrição em apenas um segundo, e faremos isso depois de obtermos a nossa imagem. Eu só quero primeiro trabalhar em alguns outros elementos primeiro. Então vamos adicionar o nosso texto para a nossa compra agora, botão. Então, para este, eu vou usar uma fonte chamada placa de cobre, e é um tipo retro de lutou, e você pode baixar isso de graça apenas fazendo uma pesquisa no Google para fontes de chapa de cobre, fontes livres. E se você não tiver isso instalado você pode ir em frente e encontrar isso, baixá-lo, instalá-lo, reiniciar o acampamento e depois voltar e vamos em frente e adicionar o nosso texto agora para o tamanho que eu vou fazer 30 e o peso da cor. Assim, a primeira letra é maiúscula e, em seguida, minúscula para os próximos dois. O mesmo agora. Mesmo que pareça que são todas maiúsculas, ainda há um pouco menor contra as primeiras letras que são definidas como uma letra maiúscula . Ok, eu vou ir em frente e fazer isso ousado, então eu vou selecionar todos eles e clicar em Negrito bem aqui. Vamos também ir em frente e uma linha para o centro, e eu acho que eu quero aumentar a quantidade de espaçamento entre linhas. Então eu vou tentar 0.5. Clique no techie. Isso não é o suficiente. Então 1.5 2.5 Vamos tentar quatro. E eu acho que isso é bom aqui. Quatro para o espaçamento entre linhas. Vamos em frente e colocar isso diretamente no centro do nosso botão, então eu vou mover essa posição para que fique acima do botão comprar agora e então selecione seu círculo com a ferramenta de alinhamento e , em seguida, o texto e um dedo do pé de linha. Primeiro item. Vamos em frente e criar um novo grupo anterior para a nossa compra. Agora, botão. Tudo bem, vamos em frente e criar nossos botões de navegação em cada lado do seu menor. Ok, eu vou ir em frente e rolar para baixo aqui e selecionar a camada agrupada de fundo herói porque eu quero que essas camadas para estar atrás do nosso controle deslizante. Então eu vou chamar isso de navegação esquerda, e então vamos usar nossa ferramenta de elipse para criar um botão que é 65 por 65. Nós também vamos preenchê-lo com uma cor creme, mas eu quero que ele seja mais escuro do que o controle deslizante está agora. Então ele se destaca um pouco mais Então para a cor. Eu vou fazer o seguinte f seis e d. nove. Vá em frente e pegue isso, e então vá em frente e preencha essa cor, e então podemos de selecionar, então é muito semelhante. Mas se fizermos zoom aqui, você pode ver que está um pouco mais escuro. Nós também vamos adicionar uma sombra no segundo dedo do pé, ajudá-lo a se destacar um pouco mais Então vamos em frente e colocar isso para que metade do círculo fique escondido atrás do controle deslizante. Então a maneira mais fácil de descobrir isso é ligar nossos guias e fazer uma medição de metade desse círculo. Então fizemos 65 para 32 pixels devem ser aproximadamente metade. Então parece que eu quero um pouco longe demais. Vou pôr este guia aqui. Eu também vou cortar o limite da camada com Shift mais C e então vamos movê-lo para aquela área que acabamos de medir. Certo, deixe Haider guiar. E agora precisamos criar uma seta apontando para a esquerda. Então, para fazer isso, vamos usar nosso retângulo selecionável. Vamos criar um retângulo que é 19 por 19. Vou selecionar a cor laranja que usamos anteriormente para o fundo. Vamos criar uma nova camada chamada esquerda Errol e, em seguida, vá em frente e preenchê-lo. Vá em frente e de Select Commander Control e D e vamos cortar. O limite posterior foi enviado mais C. Eu não posso ver a cor agora, e isso é porque a camada está atrás do controle deslizante. Então eu preciso ir em frente e mover isso para cá de qualquer maneira, então eu vou pegar isso com meu movimento e camada ativa selecionada, e agora podemos ver a laranja. Tudo bem, vamos em frente e duplicar esta camada. Vamos ir em frente e ampliar muito perto. Tudo bem, agora vamos fazer uma medida novamente porque eu quero mover esta camada atual para baixo para os três pixels à direita. Então vamos pegar nossa ferramenta de medição e medir três pixels. Vamos adicionar um guia aqui e, em seguida, para baixo três pixels e outro guia. E agora com nossa ferramenta de movimentação, queremos movê-la diretamente para essa área. Vamos em frente e criar um novo grupo de camadas. Vamos chamar-lhe Arqueiro Esquerdo. Vamos colocar os dois lá dentro. Vou chamar essa seta para a esquerda, corta para fora, e então precisamos mudar o modo de mistura para cortar aquele quadrado. Então vamos para o modo de mesclagem e selecionar cor ou raça. Certo, agora podemos pegar essa seta para a esquerda e girá-la 45 graus, então aponta para a esquerda. Então vamos pegar nossa ferramenta de rotação, que está bem aqui e meu atalho de teclado para isso é Commander Control e a letra T e, em seguida, para o ângulo que precisamos digitar 45. Infelizmente, isso vai fazer isso apontar para cima. Então vamos tentar menos 45 Click Tab. E lá vamos nós, nossas flechas apontando para a direção certa. Vá em frente e clique, Girar e, em seguida, eu só vou mover manualmente isso para a posição para que eu possa colocá-lo direito sobre o centro. Vamos ver se podemos usar nossas ferramentas de alinhamento para fazer isso alinhar de cima para baixo. Eu vou pegar minha ferramenta de iluminação e eu vou clicar na mudança de botão, clicar na seta e, em seguida, um dedo do pé deitado primeiro item, que seria meio do alvo. Então, isso o alinha. Vou em frente e pegar minha ferramenta de movimento agora e vou passar para a esquerda uns cliques e acho que fica bem ali. Vá em frente e diminua o zoom para que eu possa dar uma olhada rápida no que temos até agora. Então isso parece muito bom. Talvez eu queira fazer essa flecha um pouco maior. Então o que eu posso fazer é, eu posso fazer zoom de volta. E agora com a sua ferramenta de movimento. Basta clicar nessa camada e usar a tecla de seta para a direita para movê-la sobre um pixel de cada vez até que você esteja feliz com a espessura dessa seta. Então eu vou para pixels mais para a direita. Vamos ir em frente, diminuir o zoom e dar uma olhada nele, e eu acho que parece muito melhor. Então eu vou em frente e deixar o meu assim. Você pode fazer o que achar melhor. Agora precisamos pegar essa navegação e colocá-lo em um novo grupo de camadas chamado Errol esquerdo. Vamos duplicar e renomeá-lo. E isso é certo. Vamos mudar o nome da seta para a direita. Vamos em frente e um guia para o topo deste botão aqui para que possamos alinhá-lo aqui no lado direito também. Ok, eu só vou pegar o meu. Mover, ferramenta, certifique-se de ter camadas ativas selecionadas, e eu vou movê-lo aqui para o lado direito. Está bem. Tudo bem. Vamos ir em frente e medir 36 pixels para ter certeza de que temos o suficiente do botão mostrando não parece que eu tenho. Vou em frente e colocar um guia bem ali e depois movê-lo para a posição. O único problema é que não conseguimos ver a flecha. Então, para corrigir isso, só precisamos virar a camada horizontalmente. Então vá para a camada, selecione, transforme e escolha virar horizontalmente. O ódio dela. Agora que nossa navegação está feita, vamos em frente e colocar esses dois botões e um novo grupo de camadas chamado Navegação deslizante. Vamos continuar e salvá-lo novamente, Commander Control e a letra s Então temos a maioria dos elementos para o nosso controle deslizante. Nós só temos alguns elementos gráficos para adicionar aqui. Um parágrafo, nossa imagem e então será feito. Então vamos em frente e terminar o resto do controle deslizante no próximo tutorial. 80. Hero parte 3: Olá e bem-vindo de volta. Tudo bem, vamos em frente e terminar nosso controle deslizante e vamos em frente e adicionar nossa imagem de produto . Nós vamos fazer uma pesquisa de imagem no Google para o último A soando ela monstro, e nós vamos selecionar este aqui mesmo. São 740 por 560 Vamos em frente, copiar essa imagem e colá-la. Certifique-se de pegar esta camada e colocá-la para nova mais cedo e, em seguida, role para cima até o topo com essa camada. Então está acima de tudo o resto, e então nós vamos apenas usar nossa ferramenta de movimento para colocá-la em posição, mas também soltar a opacidade para que possamos ver o marcador de posição da imagem por trás dela, que nos permitirá cortar a imagem ou compor o imagem exatamente do jeito que queremos. Eu só vou mover isso para baixo e para a direita um pouco, talvez para baixo um pouco mais bem ali e então vamos voltar para 100% sobre a opacidade e então eu vou pegar minha imagem Placeholder. Vamos em frente e colocar isso sob a camada de imagem e eu vou mostrar a vocês uma maneira um pouco diferente de cortar sua imagem para um tamanho específico. Então, como já criamos um espaço reservado de imagem com o tamanho exato que queremos, agora precisamos fazer uma seleção com ele. Então podemos clicar com o botão direito sobre esta camada e selecionar Alfa para seleção, e isso vai aplicar automaticamente uma seleção em torno dessa forma. Agora podemos ir para a nossa camada de imagem e adicionar uma máscara de camada com base na seleção, e ele irá cortar a imagem dessa forma. Então essa é apenas outra maneira de fazer isso versus como fizemos no passado. Eu vou ir em frente e criar um novo grupo de camadas para essas duas camadas chamado Imagem, e vamos em frente e movê-lo para baixo para que seja abaixo são por botão aqui. Certo, vamos pegar nossa descrição para nossa caixa de texto. Vamos voltar às imagens do Google e clicar na visita, então vamos apenas ver se há uma descrição aqui que possamos usar com base neste cartaz em particular. Agora podemos usar qualquer coisa ou usar impostos falsos, mas eu só quero entrar aqui e ver se eu posso encontrar uma descrição deste cartaz então isso vai funcionar Eu só vou pegar este texto aqui neste primeiro parágrafo. Copie isso. Vamos para o nosso documento aqui, e eu vou ampliar, pegar sua ferramenta de texto, e vamos também ligar nossas grades só para nos guiar um pouco. Ok, vamos em frente e criar nossa caixa de texto Nail. Mas primeiro, com o nosso têxtil selecionado, certifique-se de digitar a família de fontes, que é a ferrovia. O tamanho é 14 e, em seguida, a cor é cinza escuro. Agora podemos ir em frente e criar nossa caixa de texto e torná-la do tamanho dessa forma e, em seguida, ir em frente e colar as informações que você copiou anteriormente. Ok, vamos em frente e desligar nossa caixa de texto aqui para que possamos realmente ver nosso texto. E acho que preciso alinhar isto à esquerda. Então eu vou ir em frente e selecionar todos alinhá-lo. E acho que ainda temos o espaçamento de linha ligado. Eu faço. Tenho quatro e acho que é demais. Na verdade, vou reduzir isto a um e depois apertar a tua tecla de escape para sair dela . E agora temos o nosso parágrafo ou a nossa descrição. Vamos entrar aqui e modificar ou parágrafo um pouco. Vou em frente e adicionar três pontos porque o que eu quero fazer é criar mira ou link aqui . Então, em todas as maiúsculas, eu só vou digitar Mawr, e então nós podemos clicar duas vezes sobre essa palavra, e nós podemos realmente entrar e mudar a cor de apenas essa palavra. Eu vou escolher esta cor laranja, e eu também quero adicionar um subjacente a ele para representar um link. Eu também quero adicionar alguns gráficos aqui apenas para tipo de dar-lhe uma sensação de tipo mais retro, adicionando três linhas. Então vamos em frente e começar a organizar algumas dessas camadas aqui, e eu vou ir em frente e pegar minha caixa de descrição e excluí-la porque eu não preciso de mais nada . E então eu vou criar uma nova camada de grupo para o meu conteúdo. Ok. Acho que todo o resto está muito bom. Vai colocá-los todos em uma nova camada de grupo chamada Herói no final. Então vamos em frente e adicionar nossos elementos gráficos aqui. Agora vou criar uma nova camada de linha fria e, em seguida, para o tamanho que vamos fazer para o com e 50 para a altura. Vamos pegar nossa cor azul e vamos em frente e preenchê-lo em que de select. Vamos avançar e mover este um pouco mais e cortar o conteúdo com shift mais c. Ok, vamos criar mais duas linhas, mas um pouco menor de cada lado. Então o próximo a vai ser o mesmo com isso também. E então a altura vai ser 35. Então vá em frente e crie mais duas linhas. Na verdade, poderíamos apenas duplicar este, e então só precisamos alinhar tudo. Eu só vou mover este para cima um pouco, e eu vou ir em frente e arrastar para fora uma diretriz para que eu possa alinhar estes para o topo. Vamos fazer uma seleção re aqui, e eu quero selecionar a camada intermediária com a minha ferramenta de alinhamento para que eu possa alinhá-la ao centro dessa seleção. Eu também preciso fazer o mesmo para a nossa linha do meio aqui. Parece que está desligado por um pixel. Então eu vou apenas movê-lo para cima com a minha tecla de seta esquerda e, em seguida, eu vou clicar com o botão direito na camada superior aqui e mesclar para baixo para combinar todos estes e 21 camada. Já não preciso deles individualmente. Vamos em frente e ligar tudo de novo, e então só precisamos alinhá-lo dentro deste espaço aqui. Então vamos em frente e fazer nossa seleção. Então eu quero centralizá-lo diretamente no centro, mas talvez eu precise desligar essas outras camadas novamente. Vamos pegar nossa ferramenta de limite. Clique no gráfico com sua ferramenta de alinhamento. Certifique-se de que você tenha a seleção selecionada e, em seguida, alinhe o centro e o meio do alvo. Vá em frente e diesel I e então vamos em frente e voltar a ligar as outras camadas. Vamos em frente e diminuir o zoom. Então a última coisa que eu quero fazer é e um pouco de profundidade para o controle deslizante geral, e nós vamos fazer isso adicionando uma sombra. Eu quero adicionar uma sombra para os botões de navegação separadamente do controle deslizante de fundo em si, porque eu quero soltar sombra passando por cima desses botões também. Vamos em frente e começar com nossos botões de navegação, e se nós selecioná-los e ir para filtros, luz e sombras. Podemos adicionar uma sombra a ele. E a razão é porque podemos adicionar uma sombra para camadas agrupadas. Então precisamos ir para dentro e encontrar os próprios botões e depois aplicar uma sombra para eles. E, é claro, precisamos alterar o limite da camada para caber ao tamanho da imagem para que possamos adicionar essa sombra . Agora eu posso ir até filtros, luz e sombra, soltar sombra e criar minha sombra. Então vamos em frente e brincar com algumas configurações aqui até encontrarmos uma sombra com a qual estamos felizes. Estou gostando disso aí. Então eu vou ir em frente e clicar, OK, e então vamos pegar este botão aqui. Mesma camada camada camada dois tamanho de imagem e, em seguida, comando ou controle mais F para re aplicar essa sombra novamente. Tudo bem, agora só precisamos ir em frente e encontrar a camada de fundo do nosso controle deslizante e aplicar a sombra para ele também. Mas primeiro precisamos ir para a camada e camada selecionada para o tamanho da imagem e, em seguida, comando ou controle e f para aplicar a sombra. Tudo bem, vamos em frente e colocar tudo em um novo grupo de camadas frio. Isso mesmo, herói. Então temos nossa cor de fundo mudando novamente porque colocamos essa camada de grupo dentro de um novo jogador de grupo. Então nós estamos indo apenas para selecionar nosso grupo de heróis Camada e Select passou através para o modo de mesclagem, e isso irá corrigir o fundo para nós e parabéns. Agora temos nosso controle deslizante retro concluído. Agora precisamos trabalhar na seção de comércio e do nosso site, e vamos em frente e começar isso no próximo tutorial. 81. Parte 1: Olá e bem-vindo de volta. Tudo bem, agora vamos trabalhar em nossa seção de comércio e para esta página web, e vamos criar nosso fundo e alguns de nossos botões de filtro, e então vamos terminá-lo no próximo tutorial. Então vamos em frente e trabalhar em nosso passado primeiro. Mas, na verdade, precisamos aumentar o tamanho do campus. Vamos até a imagem dos olhos do campus e aumentá-la para 3000. Vamos também pegar nossa camada de fundo aqui e ir para camada e selecionar camada para tamanho de imagem. Agora, agora, não consigo selecioná-lo. E isso porque minha camada de fundo é muito. Então, se o seu também estiver bloqueado, vá em frente e desbloqueie e, em seguida, aumente o tamanho do limite. Pegue sua cor branca para preencher o resto do plano de fundo. Tudo bem, agora precisamos entrar e adicionar nosso padrão, bem como nossas novas cores. Então eu vou ir em frente e apenas ir para a nossa camada de grupo de fundo herói e selecionar esta camada para duplicá-la. E então vamos em frente e puxar essa câmera para fora. Vá em frente e mova o meu aqui, então a primeira coisa que precisamos fazer é excluir essa máscara de camada, e podemos fazer isso clicando com o botão direito do mouse e selecionando Excluir máscara de camada. Ok, você pode ir em frente e mover isso para a posição agora, e também precisamos aumentar o tamanho do limite da camada para cada camada. Então vamos fazer isso para cada uma das sobreposições e para o padrão também. Portanto, camada de tamanho de imagem em camadas. Vamos pegar nossa ferramenta de preenchimento de balde. Vamos selecionar nosso padrão e ir em frente e preenchê-lo. E agora precisamos selecionar as sobreposições de cores para que possamos adicionar uma nova cor a cada camada, e vamos usar essa cor azul aqui. Então vá em frente e pegue isso e então vá em frente e preencha isso com a nova cor. Agora que nosso plano de fundo está pronto, podemos ir em frente e trabalhar em nossos botões de filtro. Vamos começar com nossa ferramenta de texto. Vamos definir a fonte para Oswald e 24 depois branco para a cor. Ok, vamos digitar o filtro agora, vamos em frente e criar quatro novos botões. O primeiro 1 vai ser o botão um, e então para o tamanho vamos fazer 95 por 45. Mas vamos primeiro adicionar um canto arredondado de 10 e, em seguida, o tamanho novamente é 95 por 45. E então nós vamos preencher isso com nossa cor cinza escuro. Vá em frente e de select e vamos em frente e duplicar três vezes. Agora vamos em frente e corte estão contentes com deslocamento mais C para cada camada. Vamos em frente e um leão e distribuir as camadas. Então ferramenta de alinhamento. Vamos desligar nossa seção de heróis aqui e depois mudar. Clique nos outros botões. Vamos alinhar ao primeiro item para o topo, e então precisamos distribuir o espaço entre eles. Então agora eu tenho 350, o que é demais. Vou tentar 150, quero fazer menos do que isso. Vamos tentar 100. Não é o suficiente fazer 140 e 125 Parece ser a melhor opção. Agora só precisamos adicionar alguns títulos para nossos botões. Então, de volta à ferramenta de texto, mesma fonte, mesmo tamanho, só precisa alterá-la de volta. Caso branco da última coisa que precisamos fazer é alinhar tudo aos botões e, em seguida, só precisamos organizar nossas camadas. Então, para o conteúdo, eu vou cortar o conteúdo com shift mais C para cada camada. Agora você deve ter notado que quando você faz isso, ele muda o texto de uma camada de texto para uma camada de pixel. Então, se eu quiser ir lá e mudar a ortografia ou a fonte ou o tamanho e eu clicar nele, então eu preciso confirmar que eu quero mudar de volta para edição de texto, e eu posso fazer isso em uma nova camada ou diretamente sobre essa camada. Portanto, ainda é uma boa idéia cortar seu conteúdo para o texto dessa maneira, porque você sempre pode voltar para essa camada de texto para atualizar, se necessário. Só torna mais fácil cortar o conteúdo dessa maneira para que você possa alinhá-lo facilmente conforme necessário. Então, de volta à ferramenta de alinhamento e alinhado ao primeiro item. Também precisamos medir a quantidade de espaço entre aqui e o cabelo para que possamos adicioná-lo aqui também . Então vá em frente e meça. Tenho 40 pixels. Agora que nossos botões são feitos, só precisamos adicionar nossos produtos para esta parte do design da nossa página, e vamos em frente e baixar essas imagens na próxima lição e colocá-los configurados para que fique mais parecido com isso . 82. Corpo 2: Olá e bem-vindo de volta. Certo, vamos terminar a seção de comércio e precisamos de oito imagens para preencher esta seção. Então vá em frente e faça uma pesquisa de imagens no Google para posters de filmes antigos. Vertical é preferido. Adicione-os ao documento e, em seguida, você pode ir em frente e redimensioná-los em um minuto. Depois de adicionarmos o espaço reservado de imagem, você saberá qual tamanho reduzi-los também. Então vamos em frente e trabalhar em nosso 1º 1 e vamos começar criando um plano de fundo para a listagem de produtos. Então vamos criar uma nova camada chamada Produto um. E então para o tamanho que vamos fazer para 76 por 450 e então vamos preenchê-lo com nossa cor creme claro. Vá em frente e clique, OK e preencha. Ok, vamos de selecionar e vamos também ligar nossa grade por enquanto. E se avançarmos, vocês notarão que tem exatamente três colunas de largura, o que nos permitirá adicionar quatro produtos diferentes. Tudo bem, vamos em frente e cortar a mudança de conteúdo, mais C. Agora vamos em frente e criar um espaço reservado de imagem como fizemos para o controle deslizante anteriormente. E então para o tamanho, vamos fazer 30 por 320 e vamos preencher isso com preto. Então eu apertei D e, em seguida, pegar sua ferramenta de enchimento balde com G Phil Iden e de Select Que Shift mais C para cortar o conteúdo e, em seguida, movê-lo para a posição. Ele vai mover o meu um pouco para cima, e eu vou fazer uma medição aqui. Então eu estou em 18 pixels, então vá em frente e mova o seu. Então você tem um espaço de 18 a partir do topo, e então vamos usar nosso dedo da ferramenta de alinhamento, alinhá-lo ao centro, à esquerda e à direita da nossa imagem de fundo. Então vá em frente e faça isso. Ok, vamos em frente e fazer o nosso por botão de prego. Pegue sua ferramenta de seleção, e então , para o tamanho, vamos fazer 95 por 95 e também precisamos criar uma nova camada para ela. Vamos pegar nossa cor cinza escuro e ir em frente e preenchê-lo. Agora, antes de selecionar, precisamos subir e adicionar um traço. Então, na seleção de traçados, vamos fazer quatro pixels, e eu também preciso escolher minha cor. Então pegue sua ferramenta de seleção de olhos aqui, certifique-se de selecionar a cor de fundo clique em OK e seu traçado, e então podemos ir em frente e mover isso para a direita de seleção e, em seguida, mudar. Mais C. Vamos adicionar o nosso texto para a compra. Agora botão. Vamos usar a placa de cobre 26 para o tamanho e branco. Vamos também centralizar o texto e, em seguida, usar a ferramenta de alinhamento para alinhar esse texto. Vamos em frente e colocá-lo no novo grupo de camadas. Vamos criar nosso título para este cartaz em particular, e eu quero mudar a fonte para Oswald, e então nós vamos fazer 18 para o tamanho e nós vamos voltar para a nossa cor cinza escuro. Então, para o título, vou escrever um título que corresponda ao cartaz do filme para este produto em particular. Então o seu pode ser diferente, dependendo do cartaz que você baixou, então basta ir em frente e digitar um título para ele. Ok, vamos fazer Railway Bold e 12 pelo tamanho e agora eu vou apenas digitar as dimensões do cartaz do filme, bem como um preço. Acho que vou mudar essa fonte. Eu quero torná-lo muito mais escuro, então eu vou escolher Ultra Bold. E depois vou voltar ao título e ver se consigo encontrar uma fonte diferente ou uma fonte mais leve . Vamos tentar Oswald Light. Ok, eu gosto muito mais disso porque isso adiciona importância às dimensões no preço mais do que o próprio título. Então lembre-se, queremos ter certeza de que elementos específicos do texto são estilo corretamente, modo que um título ou subtítulo fosse mais importante do que o outro. Dessa forma, fica mais fácil de ler. Isso pode ir em frente e salvar com o Controle de Comandante e a letra s? Agora vamos criar um botão aqui embaixo também. Isso vai dar-lhes a oportunidade de aprender mais sobre aquele pôster específico do filme. Então vamos digitar mais informações e vamos fazer chapa de cobre novamente para a fonte e 18 para o tamanho. Tudo bem, vamos em frente e criar uma nova camada para o botão de mais informações, e então vamos adicionar cantos arredondados. Vamos fazer 10 para o raio e, em seguida, na medida em que os sinais estavam indo para fazer 15 por 30 e nós vamos preencher isso com uma cor cinza claro, então eu vou usar F um F um F um F um clique OK, e então vá em frente e preencha isso em De Select Commander Control e a letra D. Vamos realmente tornar este texto um pouco menor, porque o que eu quero fazer é criar uma sombra interna. Então eu já te mostrei antes. Como o dedo do pé adicionar uma sombra de gota. Mas criar uma sombra interna não é uma opção através das ferramentas em si, então temos que ser um pouco criativos sobre como fazemos isso. Então eu só quero ter certeza de que a sombra interna não está passando por cima do nosso texto em si. Então eu quero fazer 14 do tamanho, e eu vou ir em frente e alinhá-lo também. Então vamos voltar para a nossa mudança de botão mais informações mais C para dimensionar o limite da camada, e então usaremos nossa ferramenta de alinhamento para alinhar o texto. Ok, vamos em frente e criar nossa sombra interior agora. Então, basicamente, tudo o que vamos fazer é criar outro botão do mesmo tamanho e uma cor mais escura , e então vamos cortá-lo e, em seguida, borrar as bordas. Então vamos em frente e criar uma nova camada era Chamá-lo em sua sombra e então vamos usar o mesmo tamanho e o mesmo raio de 15 por 30. E então vamos bater D. Pegue sua ferramenta balde com G e preencha com preto e de seleção. Vamos em frente e mover isso para trás do outro botão. Então esse é o tamanho que eu quero para a minha sombra interior. Então agora o que precisamos fazer é fazer uma seleção. Então vamos para o nosso botão mais informações, clique com o botão direito e selecione Alfa para seleção. Volte e selecione sua sombra interna, e então você está indo para fazer um corte de comando ou controle e X, ou você pode subir para editar e selecionar Cortar a partir daqui, que de select Commander Control e D. Agora vamos mover o nosso sombra interna de volta acima de mais informações deslocamento mais C para cortá-la e, em seguida, agarre a ferramenta de movimento e coloque-a sobre o outro botão. Ok, agora vamos subir para filtros, borrar e selecionar ghazi em Borrão. Então, a partir daqui, você pode ajustar as configurações de qualquer maneira, você gosta. E eu vou apenas usar essas configurações aqui, que eu acho que são o padrão. 1.5 e 1.5 clique. Ok, agora, isso é um pouco escuro demais para mim. Então eu vou pegar minha opacidade e soltar isso. Então agora, parece que preciso mover um pixel para cima. Então eu vou pegar minha ferramenta de movimentação, selecionar a camada e, em seguida, movê-la para cima um pixel. E agora eu só preciso limpar as bordas um pouco para que ele tenha um canto mais arredondado aqui e aqui também. Então eu só vou ampliar aqui, pegar a captura de sombra interna, pode apagar ferramenta com a letra e. E então eu vou apenas apagar alguns desses pixels. Isso pode ter sido demais. Vou desfazer isso com o Controle do Comandante e as letras e depois refazer. Eu também preciso fazer este site também, e eu acho que eu quero deixar cair a opacidade um pouco mais. Então, bem ali. Vamos em frente e pegar nossa ferramenta de zoom. Mantenha pressionada a tecla de comando ou controle para que você possa diminuir o zoom e, em seguida, basta ir em frente e selecionar qualquer outra camada e seu ego. Agora você tem um castelo interior. Então a última coisa que precisamos fazer é adicionar nossa imagem ao espaço reservado. Então encontre sua imagem. Coloque-o acima do marcador de posição da imagem. Mova-o para a posição. Selecione o espaço reservado da imagem. Certo. Clique nele. Selecione Alfa para a seleção de volta para a camada de imagem. E então precisamos recompor o cartaz, se necessário, pegando nossa ferramenta de movimento com a letra V e clicando nele. E então podemos usar nossas setas para movê-lo para a posição. Então aí parece bom para mim. Vou em frente e adicionar uma máscara de camada e bum! Agora eu tenho a imagem cortada exatamente do jeito que eu quero. Tudo bem, vamos em frente e limpar essas camadas aqui. - Então a última coisa que quero fazer é adicionar uma sombra na parte de trás da nossa imagem aqui. Então vamos entrar e encontrar o espaço reservado de imagem, e vamos em frente e adicionar uma sombra. Mas primeiro, é claro, precisamos aumentar o tamanho do limite posterior, e então podemos ir até filtros, luz e sombra e adicionar uma sombra. Muito bem, nosso primeiro pôster de filme está pronto, e a única coisa que resta é repetir isso mais sete vezes. Então, em vez de me ver fazer isso uma e outra vez, eu gostaria que você aproveitasse o tempo para praticar o que você aprendeu adicionando os outros sete cartazes. E, de fato, você pode realmente trapacear um pouco pegando seu primeiro pôster, duplicando-o e, em seguida, movê-lo para as colunas apropriadas e, em seguida, atualizar o conteúdo. Então vá em frente e complete isso como parte da sua missão. E quando você terminar, você estará pronto para terminar este projeto de Web design, que será completar o rodapé e fazer qualquer tipo de ajustes que possamos encontrar 83. Rodapé: Olá e bem-vindo de volta. Tudo bem. Agora que você tem todas as suas listagens de produtos no lugar, vamos agora fazer nossos ajustes finais, bem como terminar o nosso rodapé soas faras espaçamento vai. Eu peguei o espaçamento entre as duas colunas aqui e adicionei isso para o fundo dos cartazes também. Eu também peguei o espaçamento daqui e apliquei aqui. Então, espero que sua seção de comércio e se pareça com isso. Você provavelmente tem cartazes diferentes, e tudo bem. Eu também peguei todos os meus cartazes e os coloquei em uma nova camada de grupo chamada cartazes. E agora eu preciso criar uma nova camada de grupo para a seção. Então vamos em frente e fazer isso se você ainda não fez isso. Agora vamos ter a mesma situação com nosso plano de fundo que fizemos na seção anterior , e isto é, uma vez que você colocá-lo no grupo de camadas, a cor dele vai mudar. Então eu vou selecionar a camada de grupo de comércio e selecionar passado através. Vamos terminar o rodapé e depois vamos fazer alguns ajustes finais. Então, para os ícones sociais, muito simples, eu só usei alguns ícones sociais pretos e brancos simples, e você provavelmente poderia pegar aqueles de um projeto anterior e então apenas trazê-los para dentro Vamos em frente e criar o pé ou fundo, e, em seguida, para o tamanho, não vamos fazer cantos arredondados cheios com e 210 para a altura . Em seguida, vamos preencher isso com a nossa cor cinza escuro de seleção e deslocamento mais C para cortar o conteúdo. E então vamos em frente e mover isso para cima e vamos adicionar 40 pixels de espaço aqui em baixo. Agora podemos ir em frente e cortar nossa tela geral, então eu vou ir para o tamanho da tela de imagem e re ajustar a altura de acordo. Então eu vou apenas adicionar algumas informações aqui que tem um aviso de direitos autorais, bem como alguns links. E eu vou definir para Oswald, 20 e White. Então vá em frente e digite algo para essa parte da página, e então vá em frente e mova-o para a posição. Vamos em frente e pegar nossa ferramenta de seleção de retângulo para que possamos alinhar isso ao fundo. Ok, eu só preciso encontrar meus ícones de mídia social agora e alinhá-los também. Ok, rodapé está pronto agora, e nós vamos passar por aqui rapidinho e fazer alguns pequenos ajustes. Eu não estou gostando de como nossa navegação está sentada para as palavras do fundo. Não é exatamente o fundo, porque no início nós alinhamos o logotipo de cima para baixo. Então vamos colocar nossa navegação no centro também para ajudar a equilibrá-la. A outra coisa que precisamos fazer para esta página é adicionar alguns botões de rádio em nosso controle deslizante. Esquecemos de fazer isso. Então eu vou voltar para este projeto de vídeo à beira-mar e pegar os botões de rádio que criamos anteriormente. Então, se você selecionar sua ferramenta de movimentação com a letra V, clique em Escolher uma guia Camada. Uma vez que você clicar nele, ele vai navegar para todos aqueles círculos de lista de reprodução ou botões de rádio, e que nós podemos simplesmente arrastar isso para o nosso projeto atual. Vou voltar para mover a camada ativa. Ele nos tirou daquele jogador do grupo e movê-lo para baixo. Na verdade, colocou-o dentro da seção de heróis, que é onde pertence, então eu quero fazer algumas modificações. Eu quero tornar o círculo menor e reduzir a quantidade de espaço entre eles. Então vamos escalá-los primeiro com Shift Plus s qualquer coisa para fazer 75 por 16 e eu quero mudar este círculo azul. Dois são de cor azul mais claro, mas primeiro precisamos pegar Ari Lips ferramenta para criar um novo tamanho. E vamos fazer 16 por 16. Vamos criar uma nova camada, e então nós vamos selecionar essa cor azul claro e preenchê-la em Commander Control Indy para de Select Shift Plus C, em seguida, de volta para a nossa ferramenta de movimento, e então nós podemos movê-la para a posição aqui. Agora vamos pegar nossa ferramenta Lehman, e nós realmente precisamos tirar tudo isso para que possamos selecioná-los e, em seguida, com seu coxo uma ferramenta, selecione o primeiro 1 e então nós vamos mudar o espaço de distribuição entre eles. Vamos definir o primeiro item e para o deslocamento. Vamos tentar 125 demais. Vamos baixar isso para 50 demais para 25 e eu só quero fazer um pouco mais. Eu vou fazer 35. E lá vamos nós. Vamos colocar isso de volta na lista de jogos. Vamos em frente e selecionar tudo com controle Commander e um e vamos em frente e alinhá-lo ao centro de seleção e, em seguida, vá em frente e use sua ferramenta de movimento para movê-lo um pouco para baixo . Ok, vamos em frente e diminuir o zoom. Na verdade, quero descê-los um pouco mais. Então deve ser bom. Vamos criar um novo grupo de camadas para o rodapé e vamos ver se precisamos fazer outros ajustes. E eu não sou como no filtro. Por estar aqui no topo, eu quero realmente colocá-lo no centro do botão real, então vamos em frente e Graham R Selection Tool. Vamos fazer uma seleção. Vamos puxar o filtro para fora, realmente filtrar por, selecioná-lo e, em seguida, uma linha do meio do alvo. Podemos colocar isso de volta? Vamos ver se há mais alguma coisa que precisamos para diligir. Acho que tudo o resto está bem alinhado. Vou ligar minhas grades só para ter certeza de que tudo está alinhado exatamente onde deveria estar. A única coisa que eu não estou gostando é que o rodapé está agora assumindo esse padrão também, então eu não quero isso. Eu quero uma cor sólida lá embaixo, então, neste caso, é OK colocar o rodapé acima da outra camada de grupo. Sabe, a única coisa que posso querer fazer é atenuar esta cor laranja do fundo. Então vamos para a seção de heróis e ir para as sobreposições, e eu vou apenas ajustar a opacidade de um excessivamente para cerca de 75 apenas para diminuir um pouco. E eu definitivamente gosto muito mais disso. Parabéns. Agora terminamos com o Projeto número seis. Como sempre, termine todos os ajustes e atualizações que você precisa fazer para este projeto específico e, em seguida, vá em frente e redesenhe com sua própria visão criativa para que você possa adicioná-lo ao seu portfólio . Assim que acabarem com isso, vemo-nos no próximo projecto, que é o projecto número sete. Obrigado por ouvir e tenha um dia incrível 84. Projeto 7: guia o resumo: Olá e bem-vindo ao nosso projeto final de Web design. Mas não fique triste . Nós vamos aprender um monte de coisas legais neste projeto. Então vamos primeiro rever o site original e depois vou mostrar-lhe o meu Web design. Agora. A única coisa que você vai notar sobre este site versus muitos dos outros que fizemos é que , no geral, este site não é tão ruim. Então vamos dar uma olhada nisso. É profissional, está limpo. Tem imagens muito melhores do que alguns dos outros projetos em que trabalhamos. Eles têm algum estilo, mas eu acho que poderia ser melhorado um pouco e torná-lo mais fácil de ler em geral. Então eu vou compartilhar com vocês o que eu acho que podemos fazer para melhorar esta parte novamente. As imagens não são tão ruins. Nós temos algum espaço vazio aqui. É um pouco desequilibrado, não é grande coisa. Podemos simplesmente deslizar essas coisas para aqui. Isso não é nada importante de novo. Tudo é estilo agradável, limpo e limpo. Eles escolheram bons fundos, então, no geral, é muito fácil de ler. Mas podemos torná-lo um pouco mais fácil de ler. Eles têm alguma prova social aqui para adicionar um pouco de credibilidade à empresa. Prefiro ver isto perto do topo. Mas, novamente, se eles já têm uma marca forte e há uma grande empresa, eles realmente não precisam de um monte de provas sociais como empresas menos conhecidas mãe e pop coisas assim. Então, de qualquer forma, a prova social pode estar aqui em baixo, ou pode estar em cima, então vamos dar uma olhada nisso. E então eles estão no rodapé. Nada importante. Eles têm alguns links para outras partes de seu site. navegação principal deles está em baixo. Aqui está bem, eles têm alguns ícones sociais. Direitos autorais provam a política de privacidade, suas coisas típicas no rodapé. Então nada importante no rodapé de novo. Então, no geral, este site realmente não é tão ruim. Sim, podemos fazer pequenas coisas para melhorar. Mas a principal coisa que eu encontrei quando eu estava pesquisando este site em sua competição foi sua competição praticamente parece exatamente o mesmo. Eles têm cabeçalho, eles têm um logotipo. Eles têm navegação, eles têm conteúdo. Eles têm imagens bonitas. Então é o layout básico. O layout limpo estilo corporativo. Sabe, todo mundo está parecendo exatamente o mesmo. Então, em um esforço para se destacar e ser diferente e ter uma imagem diferente, uma marca diferente, um estilo diferente. Eu queria inventar algo que ninguém mais estava fazendo para este nicho em particular. Então eu pensei sobre os diferentes estilos de design que abordamos na seção anterior, os sete tipos populares de estilos de design. E eu estava olhando através deles, e eu estava tentando descobrir qual seria melhor versus corporação limpa e moderna. E eu queria fazer algo que ninguém mais estava fazendo neste nicho, e eu decidi fazer algo mais artístico quando andar de bicicleta de montanha. É mais do que pedalar por uma grande colina ou uma grande montanha. Você tem que ir com o refluxo e o fluxo dessa trilha, e você tem que estar ciente das rochas e dos solavancos porque você não quer bater uma pedra ou um galo e voar para fora do penhasco. Então há um fluxo e refluxo para descer uma trilha em uma montanha, então é como uma forma de arte, então eu queria incorporar algum tipo de arte versus apenas imagens comuns e chatas. Sim, a imagem não é assim tão má, mas também não é assim tão boa. Então, como podemos criar o fluxo e o fluxo do mountain bike e da arte? Então eu tive a idéia de pegar sua imagem principal e transformá-la em uma obra de arte, e eu escolhi a cor da água como meu meio. E agora você provavelmente está pensando, Ok, como eu vou criar uma aquarela que eu nunca pintei antes? Bem, adivinha o que eu nunca pintei antes, e é por isso que temos o poder do Photoshop na ponta dos dedos. Então deixe-me mostrar a vocês qual foi o design final que eu criei, e vamos explicar um pouco mais sobre o estilo de design, e aqui está. Então nós temos essa mesma imagem e parece uma pintura em aquarela, e isso pode ser feito diretamente. E Photoshop. Você não precisa comprar uma tela ou pincéis ou tinta de cor de água. Podemos obter esse efeito diretamente e loja de fotos, e eu vou te mostrar como fazer isso na próxima lição. Então, temos nossa navegação primária. Nada extravagante, mas não colocou. É o próprio fundo. Está em cima da cor da água, bem como seu logotipo e, em seguida, uma ação chamada para se registrar para reserva. Um momento para ir com um guia para esta trilha de mountain bike ou outras trilhas de sua escolha. Então, quando uma pessoa chega a este site, queremos que ela faça alguma coisa. Queremos que eles se registrem. Quatro. O produto ou serviço é que a empresa está vendendo neste caso visitas guiadas para motociclistas de montanha. Talvez eles não estejam prontos para se registrar. Isso é bom. É por isso que temos conteúdo adicional abaixo da seção de heróis para ajudar a vendê-los sobre por que eles devem escolher nossas trilhas ou a sujeira. acampamentos de mountain bike da Siri. E depois vamos dar-lhes outra oportunidade de se registarem uma vez que tenham lido alguma informação. Eu incluí alguns logotipos de seu site que eles já usaram para adicionar credibilidade no topo para que qualquer um que não esteja familiarizado com esta empresa ou este acampamento veja isso. E isso vai adicionar alguma credibilidade para eles à medida que rolamos para baixo, foram apresentados ao conteúdo que vai nos ajudar a decidir se queremos ou não nos registrar para este acampamento. Incluí algumas imagens também e peguei o conceito de aquarela e apliquei-o nas bordas das imagens para não apenas adicionar consistência com a nossa imagem de cor de água, mas para dividi-lo e torná-lo diferente. Todo mundo está fazendo imagens com quatro lados retos. Ninguém está fazendo isso e ele também continua o estilo de design do conceito aquarela em todo o resto da página inicial. Temos então a nossa opção de registo aqui. Se eles estão prontos para reservar agora e, em seguida, temos o nosso rodapé abaixo disso. Então, novamente, eu peguei uma imagem principal como parte do fundo e apliquei uma borda de aquarela na parte inferior e a parte superior não pode vê-la no topo porque as nuvens e o céu foram lavados. Então eu vou mostrar a vocês como adicionar esse efeito às imagens, como criar esse fundo aqui para a opção de registro, e então na próxima lição, eu vou mostrar a vocês como criar esse efeito aquarela. Então, se você está pronto para começar, vamos fazê-lo 85. Parte em aquarela 1: Olá e bem-vindo de volta. Tudo bem. Antes de começar a transformar nossa imagem comum em uma pintura em aquarela, primeiro precisamos baixar algum recurso é e instalá-los também. Então é isso que vamos fazer nesta lição. E, em seguida, na próxima lição, vamos passo a passo na criação da nossa arte em aquarela. Então precisamos baixar uma imagem que precisamos baixar e instalar pincéis de aquarela. Precisamos baixar e instalar este plug in, e também precisamos baixar um papel texturizado em aquarela também. Então eu montei um arquivo de texto com a URL para cada um deles. O recurso é. Então vá em frente, navegue até esse arquivo, baixe-o e navegue até cada uma dessas URLs para baixar esse recurso específico para a imagem. Eu fiz Whistler Trek Dirt, Siri Mountain como a pesquisa em imagens do Google, e eu encontrei esta imagem aqui para que você possa apenas clicar com o botão direito, copiar a imagem e, em seguida, abrir seu modelo mestre grade e colado dentro de lá. Em seguida, precisamos de algumas escovas de aquarela. Assim que você navegar para o URL fornecido no arquivo de texto, você vai então clicar neste botão aqui para baixar esses pincéis e eu vou mostrar-lhe como instalá-los em apenas um momento. E, em seguida, para o G m I C Plug in, você precisará ir para o URL fornecido. E então você pode baixar para Windows ou para Mac e Windows. Os usuários querem o arquivo ZIP, e os usuários do Mac devem fazer o download do arquivo T GZ. Certo, então vá em frente e baixe isso. E então quando você vai para este Earl específico, você pode apenas clicar com o botão direito e copiar a imagem como você fez com a outra imagem. Tudo bem, vamos dar uma olhada. Tia são pincéis aqui e vamos descompactá-los. Então você vai encontrar alguns arquivos dentro. E o que queremos é este arquivo aqui. Ele tem uma extensão de ponto a b R. Então você vai clicar com o botão direito e copiar isso e, em seguida, dentro do gimp, precisamos encontrar a pasta exata para colocá-lo em. Vai ser diferente para usuários de PC versus usuários de Mac, e eu vou mostrar como fazer qualquer um deles, e vamos passar pelo Windows primeiro. Então, se você subir para editar e selecionar preferências e, em seguida, clique em pastas Abaixo aqui. Você vai encontrar todas essas pastas diferentes onde você pode instalar diferentes tipos de recurso é, neste caso, precisamos encontrar a pasta Pincéis, e isso mostra a localização exata de onde você deve instalá-lo. Você quer este de cima aqui, não o de baixo. Então, uma vez que navegamos para esse local específico, que novamente é aplicativo de nome de usuário usuários, dados roaming gimp 2.10 dentro da pasta pincéis, você quer direita? Clique e cole o arquivo que você copiou. Uma vez que você fizer isso, você vai encontrá-lo bem aqui. Agora, para usuários de Mac, você quer ir para usuários? Nome de usuário, suporte a aplicativos de biblioteca gimp 2.10 pincéis. E então dentro de lá, você vai colar esse arquivo. Então aqui está, bem aqui. E então uma vez que você faz isso, você precisa voltar para dar de novo. Selecione o painel de pincéis e clique em Atualizar pincéis. Depois de fazer isso, você encontrará os pincéis dentro deste painel. E todos os pincéis estão listados em ordem alfabética. Então, quando instalei meus pincéis de aquarela pela primeira vez, adicionei a letra z à frente do nome do arquivo para que fossem adicionados ao fundo todos os meus outros pincéis. Então o seu, se você não fez isso, provavelmente estará em algum lugar no meio para que você possa voltar e re nomear esse arquivo específico com a letra Z. Se você quiser adicioná-lo ao final ou um se você quiser adicioná-lo à frente e, em seguida, apenas facilita a localização de pincéis específicos se você quiser renomeá-los em um trimestre específico . Se você renomear esse arquivo, precisará voltar e atualizar as opções de pincéis para que eles sejam atualizados no painel. Então é assim que você instala os pincéis de aquarela, e vamos usá-los para pintar nossa imagem de cor de água. Agora. A outra coisa que precisamos instalar é este plugue aqui. Então este plugue em particular tem mais de 400 tipos diferentes de filtros, que melhora o gimp No geral, mesmo que o gimp tenha muitos filtros embutidos, este plug em particular já o tem instalado irá fornecer-lhe muito mais opções versus o que recebemos diretamente do gimp Então deixe-me mostrar-lhe como instalar esses plugins específicos . Um para Windows e outro para Mac. Então vamos dar uma olhada no Windows primeiro. Então aqui estão as janelas arquivadas com Zip, e aqui está, descompactado. Dentro você vai encontrar um monte de arquivos. Mas o que precisamos fazer para o Windows é certo. Clique e copie esta pasta e, em seguida, precisamos ir para uma pasta específica novamente para descobrir exatamente onde instalá-la. Então, neste caso, precisamos voltar para 2.10 e rolar para baixo até encontrar plugins, certo? Clique em e selecione Colar. Em seguida, você verá essa pasta exatamente como esta dentro de lá. E então você precisa reiniciar o gimp para que a instalação seja concluída, e então você verá essa opção plug in aqui na parte inferior do menu de filtros . Agora, para usuários de Mac, você só tem que voltar um passo novamente, encontrar plugins, e então você precisa ir para dentro da pasta que você descompactou e copiar o Fuller e este arquivo aqui. Então copie os dois e cole-os dentro daqui e de novo. Você tem que reiniciar. Em seguida, você encontrará o plugue no mesmo local. Tão rápido, estamos quase terminando. Eu só vou te mostrar algo mais rapidinho. Quando você começou, isso é o que vai olhar para o dedo do pé. Mas o que eu quero fazer é me livrar desses quatro logotipos aqui porque eu realmente não preciso deles. Dá lá apenas os patrocinadores para este plug em particular. E eles também querem mudar o tema para um tema mais escuro que corresponda melhor ao tema que eu tenho dentro do gimp. Então, para fazer isso, vamos para as configurações. Vamos desmarcar esta opção aqui, e podemos alterar o tema aqui do padrão para o escuro. Há outras opções também, mas vou deixar tudo o resto por enquanto. Clique em OK e, em seguida, clique em. Cancelar, porque precisamos reiniciar o plug in para que o tema entre em vigor. Tudo bem, então vá em frente e termine de instalar seus pincéis, a tomada em obter os outros dois arquivos de recursos, e então vamos em frente e terminar nossa arte em aquarela no próximo tutorial. 86. Aquarela parte 2: Olá e bem-vindo de volta. Tudo bem, agora que você tem todos os seus arquivos e tudo instalado, vamos em frente e criar nossa arte em aquarela. Então, a primeira coisa que você precisa fazer é redimensionar sua imagem para que ela tenha 1400 pixels de largura. E então, para a altura, ela dependerá da imagem selecionada se você selecionou exatamente essa mesma imagem do que deveria ter 931 pixels de altura. Se você escolheu uma foto diferente, não se preocupe com a altura. Contanto que seja por volta dos 900, isso deve ser bom. E então podemos ir até os filtros e selecionar nosso novo plug in para começar o aspecto aquarela da imagem. Então, a primeira coisa que vamos fazer é ir para a nossa opção de pesquisa aqui e digitar suave para que possamos suavizar a imagem geral e vamos selecionar bilateral estes ar , as configurações padrão, e isso é o que nós vamos usar. Vá em frente e clique, aplique em seguida. Vamos fazer uma pesquisa para Contour e queremos segmentação novamente padrão, mas queremos ter certeza de que o modo de saída está definido para novas camadas. Clique em Aplicar e, em seguida, essa vontade e uma nova camada com esses filtros aplicados a ele. Vamos em frente, desligue esta camada agora estão conectando. Menu desapareceu, mas se você descer para a barra de tarefas, você deve ser capaz de encontrá-lo. Então vá em frente e clique nele e nós estamos indo para o pé. Adicione o mesmo filtro de segmentação de contorno novamente, mas desta vez vamos ajustar as configurações para suavidade. Quanto mais longe for a direita, mais suave a imagem, mais para a esquerda, mais detalhes você verá na imagem. Quero trazer de volta detalhes nesta camada aqui em algumas áreas. Então vamos deixar isso suave para algo assim. E então também podemos aumentar o limite de borda para trazer de volta detalhes adicionais na imagem. Então, estes ar as configurações que eu vou usar, e então eu vou aplicar a uma nova camada novamente. Vou renomear este passo um, este passo, mais dois detalhes. Vamos em frente e ligar a etapa uma camada, e agora podemos ver que temos mais detalhes nesta camada. Agora, a fim de trazer mais detalhes de volta para esta camada, eu vou mover esta camada abaixo dela. E então para esta camada, vamos adicionar uma máscara de camada, como você sabe, branco e preto remove. Então eu vou em frente e adicionar uma máscara de camada branca. Agora posso pegar minha ferramenta de pincel e um pincel. Vou selecionar este aqui, que é dureza 50. E então ajuste o tamanho do pincel de acordo. E então você pode clicar e pintar de volta alguns desses detalhes. Então eu posso querer vir para as árvores aqui e adicionar um pouco de detalhe e essas árvores porque o ponto de foco da nossa câmera é sobre os motoqueiros aqui. Então nós queremos e detalhes de volta com quaisquer elementos que estão em linha com as pessoas na moto. Então eu vou desfazer essa parte aqui apertando minha ex chave na pintura com branco para remover um pouco disso e depois pintar com preto novamente nas árvores aqui para trazer de volta alguns detalhes. Agora, se você quiser, você pode realmente, e detalhes de volta onde quiser. Vou concentrar-me nesta área por enquanto. Quando você terminar de adicionar de volta seus detalhes, vamos em frente e pegar essas duas camadas e colocá-las em um novo grupo de camadas. Vamos chamar de passo detalhado. Então, tecnicamente, podemos pegar essas duas camadas e mesclá-las, selecionando mescladas para baixo. No entanto, eu gosto de trabalhar de forma não destrutiva, e em um momento mais tarde eu posso querer voltar em um detalhe adicional para a minha obra de arte. Então, se eu achatar essas camadas, eu não seria capaz de fazer isso. Então é por isso que eu gosto de juntá-los em um novo grupo anterior. E, em seguida, podemos clicar com o botão direito e selecionar Novo do Visível. Ele irá então combinar ambas as camadas e colocá-lo em uma nova camada para que eu possa voltar mais tarde e começar de novo a partir daqui versus recomeçar do zero. Agora é e uma nova camada que vamos preenchê-lo com branco foi chamado de fundo, e vamos colocá-lo abaixo da camada visível. Agora vamos acabar com uma máscara de camada para a camada visível em branco clique e agora a diversão começa porque podemos pegar nossa ferramenta de pincel com a letra B, e então podemos usar nossos novos pincéis de aquarela para dar um efeito mais pintor para que você possa selecionar qualquer um desses pincéis de aquarela que você deseja usar. Vou em frente e selecionar 006 para começar. Assim que você selecionar esse pincel, você pode ver que ele parece bem diferente do pincel anterior. Também queremos entrar em nossas opções de ferramentas e fazer algumas seleções que o tamanho do peito é muito grande. Eu vou descer para cerca de 150 e eu também quero ativar o sombreador de lápis dinâmico. Então, se você clicar neste ícone aqui, você pode selecionar diferentes tipos de dinâmica ou a maneira como o pincel está sendo aplicado ao seu campus por padrão. Você provavelmente tem dinâmica básica, e isso só vai aplicar um traço simples que é consistente com o tamanho e a forma do seu pincel. Quando você seleciona outras dinâmicas, a maneira como seu pincel interage com a camada em que você está trabalhando será diferente uma da outra, então você terá que passar por todas elas e brincar com elas para ver como seu pincel está sendo aplicado com essas diferentes opções. Então, quando você seleciona o sombreador de lápis, na verdade vai levar talvez um minuto ou dois. Esqueça realmente ativar esse pincel porque ele é um tipo muito extenso ou intensivo de pincel que vai aplicar o pincel de forma diferente à medida que você pinta em torno de sua imagem. Então não vai ser um golpe suave e consistente. Vai ser mais aleatório, e vai adicionar traços mais realistas à sua tela versus um traçado simples e consistente. Então agora o Gimp ainda está tentando ativar esse pincel, e eu não posso aplicá-lo em nenhum lugar ainda até que o Gimp alcança e carregue realmente esse pincel. Então agora que eu tenho isso, certifique-se que você tem sua máscara de camada selecionada. Você quer pintar de preto, e a outra coisa que você quer fazer é você quer fazer duas coisas. Você quer ajustar a opacidade enquanto está pintando, e você quer mudar seu pincel de aquarela, e isso irá dividi-lo para que seja menos consistente e mais realista. Então eu vou mostrar a vocês bem rápido o que acontece enquanto você está pintando para que você possa ver a quantidade de uma passagem em torno da borda do pincel é diferente em diferentes partes da área que eu estou aplicando o pincel. Então eu estou apenas indo ao redor das bordas aqui, e ele está aplicando esse traçado aleatoriamente porque você pode ver o pincel real em si mudar tamanho e ele gira. E está adicionando diferentes traços aleatórios. Quando você tem essas ferramentas, as opções são configuradas como nós fazemos. Então o que eu quero fazer agora é largar minha opacidade e escolher um pincel diferente novamente. Qualquer pincel é bom porque todos eles vão lhe dar diferentes tipos de traços, resultados diferentes e vai fazer sua pintura em aquarela parecer mais realista. Então eu vou descer um pouco mais para este pincel em particular, e eu vou apenas fazer a mesma coisa. Vou pintar aleatoriamente ao longo das bordas da imagem, e você pode ver que os traços são diferentes do que eram antes. Vou em frente e desligar minha camada original aqui, e meus passos de detalhes mais tarde porque nós realmente não precisamos deles ligados agora, então eu vou continuar andando até que a borda reta da nossa foto desapareça porque eu não quero uma borda reta para esta pintura em aquarela em particular. Ok, vou em frente, largar a opacidade, vou escolher um pincel diferente, e vou fazer este um pouco menor. Vamos fazer isso também. E então eu vou apenas clicar aleatoriamente no fundo aqui só para separá-lo um pouco mais. Agora, a capacidade, eu acho, é um pouco alta demais. Então eu vou desfazer isso com o Commander Control e as letras E. E eu vou diminuir isso só um pouco porque eu só quero alguns traços aleatórios no fundo aqui para fazer parecer que alguns traços de tinta foram aplicados no imagem em si. E isso ajuda a separá-lo e faz com que pareça mais realista e mais como uma pintura em aquarela , em vez de deixá-la em branco como era antes. Tudo bem, vamos em frente e adicionar o nosso papel de textura de cor de água. Queremos ter certeza de que temos uma camada sem uma máscara de camada selecionada. Se você vai colá-lo em seu documento, caso contrário, não vai funcionar. Eu só vou clicar em, Criar uma nova camada aqui, e então colar esse conteúdo específico que eu copiei em uma nova camada. Vamos chamá-lo de papel aquarela. Eu vou ir em frente e dimensioná-lo para que ele tenha 1400 pixels de largura, e então nós só precisamos movê-lo para a posição. Também precisamos adicionar um modo de mesclagem para que possamos realmente ver o resto da nossa arte. Então vamos para modos de mesclagem e selecione multiplicar. Então isso adiciona alguma textura ao nosso trabalho artístico. E agora eu quero me livrar disso deitado aqui, e eu também tenho um texto nesse arquivo. Então eu vou subir para camada e selecionar camada para tamanho de imagem. Vou adicionar uma máscara de camada branca e, em seguida, com os meus pincéis de aquarela, eu vou em frente e pintar com branco para me livrar de um pouco desse papel de aquarela aqui em baixo. Eu preciso aumentar minha opacidade primeiro, embora não gosto muito neste pincel. Então eu vou em frente e escolher um diferente. Ok? Esse parece estar funcionando um pouco melhor. Não quero me livrar de toda a textura do papel. Vou deixar um pouco aqui em baixo está bem, pelo menos por enquanto até decidir o contrário. Então vá em frente e limpe suas bordas aqui embaixo. E eu acho que eu quero voltar para esta máscara camada com um novo pincel novamente. Tentou este, e eu vou pintar em alguns dos cantos aqui um pouco mais, um pouco mais aqui em cima um pouco aqui. Eu não gosto disso. Então eu vou mudar para preto para que eu possa me livrar de um pouco disso aqui, aumentar a opacidade e isso é apenas uma questão de gosto. Então anos definitivamente vai parecer diferente do meu porque você configurações de rapacity seus pincéis que você está selecionando, eles são todos diferentes. Então vá em frente e faça exatamente o que quiser com base na sua visão criativa, e é isso. Nossa imagem de cor de água está pronta. A última coisa que eu recomendaria fazer é criar uma nova camada uma vez que você terminar de aplicar todas as suas configurações em seus pincéis e suas texturas e tudo mais, Então vamos em frente e fazer isso se você está pronto. Se não, vá em frente e continue trabalhando em sua pintura em aquarela e depois coloque-os todos dentro desta nova camada de grupo, e pronto. Uma vez que você está pronto, eu vou vê-lo no próximo tutorial porque nós precisamos trabalhar em nosso cabeçalho para a nossa página da Web. Então, se você está pronto para começar com isso, bem tem que fazê-lo. 87. Encabeçamento + herde: Olá e bem-vindo de volta. Tudo bem, vamos em frente e trabalhar no cabeçalho e na seção de heróis neste tutorial porque o cabeçalho vai ser muito simples e super fácil de fazer. Eu fui em frente e digitei minha navegação principal. Adicionei cinco espaços entre cada um dos itens do menu. Eu usei a ferrovia negrito e 24 para o tamanho e branco, é claro. Agora, a única coisa que preciso fazer é tornar este conteúdo mais fácil de ler. Mas primeiro, eu só quero mostrar onde eu coloquei minha navegação principal, que estava no lado esquerdo da primeira coluna, e eu usei 30 pixels de espaço no topo do navegador na parte superior da navegação primária . Também adicionei uma diretriz a 700 pixels abaixo para representar a linha completa da seção de heróis . Então vá em frente e retire essas diretrizes e termine sua navegação principal e coloque-a no lugar. Uma vez que você tem isso, então precisamos adicionar uma sombra para o conteúdo. Mas primeiro precisamos ir para a camada e selecionar a camada para emitir tamanho para aumentar o tamanho do limite da camada e, em seguida, vamos para filtros, luz e sombra gota sombra para adicionar nossas sombras. Eu vou dar uma volta para a opacidade e então apenas ir em frente e fazer qualquer outro ajuste. Você quer que seu texto torne mais fácil de ler. Então eu vou usar essas configurações aqui. Depois de terminar, vá em frente e clique em. OK, Uma vez que você tenha sua navegação primária feito, vamos em frente e colocá-lo em um novo grupo de camadas chamado Cabeçalho. E mesmo que haja apenas uma camada, eu ainda gosto de organizar todas as minhas camadas e agrupá-las com base nessa seção. Agora precisamos baixar quatro logotipos toe adicionar à nossa seção de heróis. Então o 1º 1 vai ser este aqui, e você vai fazer uma busca por isso. Você quer encontrar o arquivo PNG, que vai ser preto e branco. Mas uma vez que você clicar nele, você verá o arquivo transparente. Então vá em frente, copie isso e cole isso dentro, e então nós só precisamos redimensionar a camada. Então pegue sua ferramenta de escala e, em seguida, para o com, vamos fazer para 20 e vamos em frente e colocá-lo para alinhar com nossa navegação primária , e eu quero ter certeza de que todo o texto está dentro da montanha. A Kate. Vamos aumentar o tamanho do limite da camada e usar Commander Control e F para colar são sombreada . Podemos ter mais três logotipos para baixar? O 2º 1 é o logo da Trek, logotipo da Fox Shocks, e o último é este ouvir? Então vá em frente e encontre arquivos PNG para cada copiá-los, colá-los e, em seguida, vamos em frente e redimensioná-los. Então, no que diz respeito ao dimensionamento, vamos fazer 50 pixels de altura para cada uma das camadas. Agora que já fizemos isso, podemos ir em frente e colocá-los em posição. Mas a questão é, queremos colocar nossos logotipos acima da dobra ou abaixo da dobra? Eu acho que neste caso para esta empresa em particular, é uma empresa bem conhecida, e eu não acho que adicionar a prova social acima da dobra é tão importante quanto temos feito com outras empresas que não são tão conhecidas como esta empresa. Então isso é apenas outra coisa que você tem que considerar quando você está adicionando sua prova social na seção de heróis ou logo abaixo da dobra. Acho que para este caso, está bem abaixo da dobra. Então, para este primeiro logotipo, eu estou indo para uma linha para o lado esquerdo da segunda coluna, O último logotipo que eu vou alinhar para o lado direito do segundo dedo do pé. Última coluna. Vamos em frente e pegar nossa ferramenta de alinhamento para que possamos pegar cada uma dessas camadas, então estou tendo problemas para selecionar meu logotipo. Então, se eu for até o meu outro local, apareça o topo. Se eu cortar o limite da camada, eu deveria ser capaz de selecionar meu local agora. Ok, vamos em frente e selecionar os outros dois mantendo pressionada a tecla Shift e clicando em cada logotipo, selecione o primeiro item e uma linha para cima. Eles também precisam centralizar meu segundo logotipo diretamente no meio desses dois logotipos, então vamos pegar nossa ferramenta de seleção, fazer uma seleção, e então precisamos alinhá-lo ao centro da seleção. Tudo bem, vá em frente e de select, e a última coisa que precisamos fazer para nossos logotipos é aplicar uma sobreposição de cor branca a esses dois logotipos, então vamos em frente e criar uma nova camada chamada sobreposição. Vamos preenchê-lo com branco. E vamos colocar todos os logotipos em um novo grupo de camadas chamado Logotipos. Queremos ter certeza de que não selecionamos o primeiro logotipo na seção de heróis. Então pegue os outros três, coloque-os dentro e, em seguida, pegue sua camada de sobreposição e altere seu modo de mistura para adição Agora precisamos pegar essa camada de grupo de logotipos e duplicado porque precisamos e a sombra suspensa . , e não podemos adicionar sombras para camadas agrupadas. Então, o que vamos fazer com esta nova camada é que vamos clicar com o botão direito e selecionar Mesclar grupo de camadas. E desta forma, se nosso cliente tiver uma mudança em uma vez que os logotipos, qualquer ordem diferente, podemos voltar para a camada de grupo original aqui e reorganizá-los versus mesclá-los, não tendo essa opção. E então nós temos que começar tudo de novo do zero baixando e criando uma sobreposição para que você possa realmente desligar esta camada porque nós não precisamos dela agora e depois. Uma vez que seu cliente finalmente aprove o design, você pode ir em frente e excluir essa camada de grupo completamente antes de entregá-la ao desenvolvedor da Web . Ok, então agora podemos ir em frente e usar o atalho de teclado, Commander Control e F para adicionar a sombra. Então, a última coisa a fazer é decretado são chamados Botão Ação. Vamos em frente e Graham são ferramentas de texto. Vamos mudar os sinais de fonte para 36 branco para a cor. Vamos criar uma nova camada chamada botão. Certifique-se de preenchê-lo com transparência. Agora, antes de criar o botão, precisamos ir para nossas opções de ferramentas e certificar-se de que as configurações dinâmicas são definidas de volta para a dinâmica básica. Em seguida, vá em frente e escolha uma cor de sua escolha. E, em seguida, fazer o botão. Nós estamos indo apenas para clicar várias vezes, a fim de criar o botão do tamanho que queremos. E quanto mais adicionamos, escuro fica o botão. Então eu vou para lá, e eu vou movê-lo para baixo do texto. Vamos em frente e Graham são camada de texto também. Vamos aumentar o tamanho do limite em. Vamos adicionar um comando drop shadow ou controle e a letra F pode Vamos em frente e agrupar essas duas camadas. Vamos em frente e também criar um novo grupo anterior para a seção de heróis. A última coisa que quero fazer é agarrar este botão aqui e movê-lo um pouco mais porque está um pouco desequilibrado agora. Então eu vou voltar e pegar meu botão de ação chamado. Vamos em frente e cortar o limite também com Shift Plus C. E eu vou colocá-lo bem abaixo do nosso logotipo aqui. O ódio dela. Então é isso. Nosso cabeçalho e seção de Heróis agora são feitos na próxima lição. Vamos começar com a primeira parte do corpo dela. 88. Conteúdo em corpo: Olá e bem-vindo de volta. Muito bem, vamos começar a trabalhar na secção do corpo da nossa página Web. Precisamos de três imagens, e você vai para pixel bay dot com ou Google images e encontra três imagens de ciclistas até o tamanho que vamos fazer as primeiras 2 imagens do lado esquerdo, cinco colunas de largura, e esta imagem aqui terá sete colunas de largura. Então vá em frente, redimensione suas imagens de acordo. Renomeado as camadas e certifique-se de ir até a camada e aumentar o limite da camada de cada imagem. Porque mais tarde, vamos pegar um pincel de aquarela e ajustar as bordas das imagens para criar esse efeito de aquarela. Tudo bem, então uma vez que você tenha feito isso, então precisamos entrar e aumentar os olhos do campus. Vou fazer 3500 por enquanto. E assim que eu ligar minha seção de heróis aqui, todas as minhas imagens não são visíveis. E isso porque dentro da seção de heróis dentro do grupo aquarela, temos essa camada aqui chamada ativa. Isso é muito alto. Então está escondendo minhas imagens. Então eu vou pegar minha ferramenta de seleção de retângulo, e eu vou redimensionar o limite da camada para que o resto da página possa ser visto. Ok, agora que minhas imagens estão visíveis, eu também preciso ir para a minha camada de fundo. Uma vez que eu fechar isso e eu preciso aumentar o tamanho limite posterior e, em seguida, precisamos preenchê-lo com peso. Tudo bem, agora estamos prontos para começar a trabalhar em nossas imagens e nosso conteúdo antes de trabalhar nas imagens . Vamos em frente e adicionar o nosso título. Então vamos usar Oswald Bold. Vamos fazer 76 e Dark Ray. Eu só vou mover isso para cima e para fora do caminho por enquanto. Está bem? Vamos em frente e um pouco de conteúdo adicional e vamos torná-lo sete colunas largura, e vamos ajustar a altura dele mais tarde uma vez que tenhamos todas as nossas imagens no lugar. Então vamos usar Georgia 16. Pegue um texto fictício e colado. Muito bem, vou desligar estas duas camadas por um momento para podermos trabalhar nas nossas imagens . Vamos pegar um dos nossos pincéis de aquarela arredondados. Eu vou escolher o número 006 Certifique-se nas opções de ferramenta que você tem conjunto dinâmico para atirador de lápis e, em seguida, ajustar sua opacidade de acordo. Vou começar com isso 100% e depois precisamos adicionar uma máscara de camada branca. E então com preto, podemos pintar ao longo das bordas para remover essa borda dura. Então eu vou em frente e fazer isso para todas as três imagens, e então vamos em frente e movê-los para a posição. Então vá em frente e trabalhe em suas imagens também. Tente remover o máximo possível da borda reta. Ajuste o seu A passá-lo E e o tamanho do pincel à medida que você está trabalhando para criar traçados mais aleatórios podem. Assim que terminarem suas imagens, vamos voltar a ligar a grade para alinhá-las exatamente onde precisam estar. Eu também vou cortar o conteúdo para cada camada, bem como com shift plus C e isso vai tornar mais fácil para alinhar tudo. E eu vou colocar este vinho de 16 colunas, e para movê-lo, queremos ter certeza de que selecionamos a miniatura da imagem e não a máscara de camada. Caso contrário, estamos movendo a máscara de camada e não a imagem. Então eu quero alinhar esses dois na parte inferior. Ok, então isso parece muito bom. Vamos em frente e alinhar nosso título. Então o conteúdo é um pouco alto demais. Então eu vou seguir em frente e alinhá-lo para que o texto se alinhe com o topo de seu título, e é um pouco longo aqui em baixo, então eu vou ir em frente e remover parte desse conteúdo também. Ok, então isso está parecendo muito bom. Nunca um rápido. Quero dar-te outra dica sobre o conteúdo. Vou em frente e desligar o nosso título à nossa imagem aqui. E eu vou duplicar esta camada só para mostrar esta dica. Assim, quando se trata de conteúdo, quanto maior for o conteúdo, mais difícil é ler. E estudos mostraram que isso é verdade. Seus olhos tendem a ficar cansados quanto mais tempo a linha é de texto. Então até a tia sete colunas de largura. Ainda é um pouco difícil de ler porque as linhas ainda são bastante longas. Agora é muito mais fácil do que 12 colunas. Mas mesmo assim eu não iria mais do que sete colunas de largura. A menos, é claro, que você torne o texto muito maior. O mesmo é verdade se você ir longe demais para o outro lado e tornar as linhas muito estreitas agora torna-se difícil de ler novamente porque você está recebendo apenas 2 a 3 palavras por linha, e isso torna muito mais difícil de ler. Então eu gostaria de ir a qualquer lugar de 3 a 5 colunas de largura em média, e eu vou ajustar isso com base no tamanho do texto. Vá em frente e desfaça tudo isso. Vamos colocar isso em um novo grupo de camadas chamado conteúdo. Então temos nossas imagens. Por último, mas não menos importante, temos o nosso grupo corporal e adivinhe o que o conteúdo do corpo dela está feito. Então de agora em diante, eu realmente não tenho nenhuma dica adicional para você no próximo tutorial que vamos cobrir são chamados de seção de ação para o nosso corpo, que vai consistir em um formulário de registro que pode ser preenchido no dedo do pé livro datas específicas . Isso não vai ser muito diferente do que fizemos em projetos anteriores, mas eu vou passar por isso com você só para que possamos concluir este projeto e depois vamos fazer o rodapé depois disso. Então, se você está pronto para começar no registro, parte deste projeto irá em frente e começar isso na próxima lição. 89. Registado no corpo: Olá e bem-vindo de volta. Tudo bem, vamos em frente e criar uma seção de registro dentro do conteúdo do corpo, e vamos usar uma grande imagem de sangria total como fundo. Então vá em frente e encontre um baixado, redimensione-o com 1400 pixels de largura e, em seguida, aplique seus pincéis de aquarela ao longo das bordas superior e inferior da imagem para que possamos manter a consistência do estilo de design ao longo desta página também. E lembre-se, você precisa adicionar uma máscara de camada branca para fazer isso e também aumentar o tamanho do limite da camada. E assim que terminar, você pode ir em frente e cortar o tamanho do limite da camada novamente com Shift mais C. Vou subir para a minha seção de heróis aqui. Vou pegar o meu Ct um botão e duplicado e depois com a minha ferramenta de movimento. Vou apenas clicar e continuar arrastando até chegar ao fundo. Eu também vou re cortar o limite da camada manualmente com a minha ferramenta de seleção de retângulo para que eu possa alinhá-lo ao centro do nosso documento e, em seguida, selecionar tudo. Também precisa trazer essa camada para fora e para baixo. Selecionado com sua ferramenta Lehman e, em seguida, um centro de linha do alvo. Com base nessa seleção de seleção, vá em frente e feche este jogador do grupo e então nós vamos trapacear pegando nosso formulário de filtro de um projeto anterior. Então eu vou ir em frente e apenas clicar e arrastar isso para cima. Agora, muitas vezes você vai usar elementos que você criou antes em novos projetos. Agora, é claro, você sempre pode voltar e refazer isso do zero. Se você quiser usar um design ligeiramente diferente, talvez você queira cantos arredondados em vez de canto perfeitamente quadrado. Então, nesse caso, eu refaria. Caso contrário, então não há nenhuma razão para que você não possa pegar o conteúdo existente, reutilizá-lo para outro projeto e, em seguida, apenas atualizado de acordo para esse projeto. Então eu vou pegar minha ferramenta de movimento aqui enemas, e vamos selecionar Escolher um cara camada porque eu quero clicar nesta data aqui. Eu quero descobrir onde ele está, e então eu posso atualizá-lo de acordo. Eu não preciso dele para este design, então eu vou ir em frente e excluí-lo quando eu excluir essa camada e eu vou pegar este conteúdo e excluir também. Podemos ampliar aqui para que eu possa pegar minha ferramenta de texto e atualizar esse conteúdo para a data de início? Vamos selecionar tudo Vamos mudar a cor para Branco e eu também vou fazer Oswald negrito. Vamos fazer a mesma coisa para o conteúdo aqui. Ainda é difícil ler este conteúdo aqui. Então eu vou para a minha camada de fundo aqui e mudar a opacidade aumentando a partir de 22 . Digamos que por volta dos 80. Ok, então isso é mais fácil de ler agora. Só vou mover o texto um pouco para cima, que não fique muito perto dos formulários de filtro. Vamos em frente e um guia para que possamos alinhar a próxima camada também. Eu também quero mudar a cor da rosa também, então eu vou selecionar cada linha e preenchê-lo com branco. Ok, eu vou mover este conteúdo para baixo e vamos mudar isso para livro. Agora vamos torná-lo maior. Vamos fazer 48 e Oswald ousado de novo. Vou cortar o conteúdo com o Shift Plus E, e também preciso tirar essa linha para poder selecioná-la com minha ferramenta de alinhamento. O mesmo com o conteúdo dela. E então vá em frente e alinhe para o primeiro centro de itens e meio do alvo. Ok. Preciso colocar isso de volta. Só vou reorganizar algumas dessas camadas aqui. Eu também quero mover este filtro para cima logo abaixo do conteúdo do registro aqui. Então, estão juntos. Tudo bem, então é isso para a seção de registro. Na próxima lição, vamos terminar nosso design fazendo o rodapé e quaisquer ajustes finais. 90. Rodapé: Olá e bem-vindo de volta. Tudo bem, então para o pé ou seção, eu fui em frente e fiz isso. E não é nada extravagante, muito chato. Profissional. Não poderia fazer muito mais com a seção de rodapé. Ele está lá apenas para fornecer links adicionais para informações que um visitante pode estar procurando . Eu tenho um estado de pairar bem aqui para um dos ícones para que possamos ver como ele vai ficar quando passarmos o mouse sobre um desses ícones de mídia social. Vai ser um pouco mais escuro. Eu usei as cores de branding da própria empresa, e eu também usei essas cores nos links também novamente. Você provavelmente não quer me ver fazer isso do zero. É muito simples de fazer. Por agora. Você deve saber como fazer isso. Então vá em frente e pratique o que você aprendeu sobre a criação de diferentes conteúdos para o rodapé e seus ícones de mídia social. Addy pairar estados em todos os comprimentos diferentes informações de direitos autorais, um link de privacidade e qualquer outra coisa que você deseja adicionar. Então, como antes, precisamos passar e ter certeza de que o design não precisa de ajustes. A única coisa que eu vejo que precisamos fazer é o nosso espaçamento entre cada uma das seções. Então entre, certifique-se de que as seções têm a mesma quantidade de espaçamento entre elas. E então a última coisa que eu acho que precisamos fazer para melhorar a seção de herói é tornar nossa imagem de cor de água mais escura. É muito brilhante , muito branco. É meio difícil. Leia todo o conteúdo. Então o que eu fiz foi entrar com uma nova camada texturizada que eu baixei de picaretas. Obedeça e coloquei sobre minha arte e fiz alguns ajustes no papel. Deixo cair a opacidade. Mudei o modo de mistura para multiplicar. E então eu adicionei uma máscara de camada para remover a borda dura ao longo da parte inferior dela. E eu acho que ele fica muito melhor com a cor mais escura sobre ele versus o branco brilhante , porque eu acho que novamente torna muito difícil de ler. Isso definitivamente melhora. A única outra coisa que eu posso fazer é vir aqui e remover um pouco da cor da água aqui em baixo e meio que diminuir um pouco. Tirando isso, acho que terminamos. Então, parabéns por completar todos os sete projetos de design. Pratique o que aprendeu. Crie um novo design para esta empresa específica para o seu portfólio. E então, se você quiser, pegue qualquer um dos designs que você criou para seu portfólio e publique-os na seção Q e A para mostrar suas novas habilidades de design. Ou talvez você queira apenas feedback sobre os designs que você criou, e eu ficaria feliz em dar uma olhada nesses projetos e fornecer qualquer feedback, se necessário. Você pode acabar fazendo um trabalho melhor do que eu fiz projetando essas páginas. Se sim, vou parabenizá-lo e então você saberá que está no seu caminho para o sucesso. Como Web designer, obrigado por ouvir e ter um dia incrível.