Web design no Affinity Designer para iniciantes e além

1. Design na Affinity Designer: Se você está pensando em começar como um freelancer Web designer, você provavelmente tentou aproveitar a loja de fotos em algum momento no passado, e eu sei a dor que eu tenho jantar. Lembro-me de passar dias após dias, mesmo semanas após semanas, tentando apenas lembrar certas ferramentas e efeitos. Mas felizmente vivemos em tempos em que se você quiser começar como um freelancer Web designer. Mas você pode colocar a loja de fotos de lado. Oi, meu nome é David Tyminski, e neste curso você vai aprender a usar uma barbatana em designer para projetar sites de a Z. Este curso é repleto de informações valiosas. Qualquer estreante do Web designer deve saber, como escolher as melhores cores e fundos para seus sites. O que torna um site projetado profissionalmente? Quais são as tendências modernas de Web design que você deve conhecer? E isso é apenas a introdução, porque o verdadeiro pão e manteiga do discurso está dentro de suas partes práticas. Vamos sujar as mãos e explorar todas as ferramentas e técnicas de armas profissionais e recusar-se a projetar um site dentro designer afinidade Isso inclui arame de construção e grãos, que são os blocos de construção de cada usando ativos para tornar o processo de design ultrarrápido, criando estilos de texto que permitem alterar fundos em um piscar de olhos. E, claro, projetando um site, você aprenderá a projetá-lo desde a abertura do arquivo através do local e imagens, adicionando texto e fundos até exportar no design que você acabaria distribuindo a um cliente. Temos um monte de coisas boas para cobrir neste curso, e eu realmente acredito que ele vai ajudá-lo tremendamente na concepção de sites incríveis dentro um encaixe para designer, então eu adoraria vê-lo dentro. 2. 1Introdução no curso: este curso é tudo sobre o uso de um ajuste em designer para Web design. Se você não estiver muito familiarizado com o software primeiro, você aprenderá rapidamente sobre o que se trata e como configurá-lo para Web design. Antes de começar a projetar qualquer coisa no Afinitor, Designer vai dar uma olhada em conceitos de Web design e boas práticas. Você aprenderá a escolher cores para o seu design e onde encontrar cores, inspiração e temas de cores prontos. Você também aprenderá armas básicas e topografia, que é extremamente importante não apenas para um bom Web design, mas para um bom design em geral para aprender tudo sobre títulos tributados pelo corpo e como os dedos emparelhá-los para uma grande experiência do usuário. Então vamos dar uma olhada em uma estrutura típica de sites. Design sábio, é claro. Vamos falar sobre logotipos, navegações laterais guerras e todos os outros blocos de construção de sites. Depois disso, falaremos sobre o que está dentro e o que não está nas armas do mundo agora. Nós também vamos procurar alguma inspiração Web design em torno da Web. Com todo esse conhecimento e habilidades passarão para a parte de design do curso quando os projetos feitos darão uma olhada em finalizar seu trabalho, você aprenderá como salvar e exportado corretamente para vários formatos de arquivo. Há um monte de coisas boas para cobrir, e eu realmente acredito que uma vez que você tenha concluído o curso e praticado por conta própria, você vai começar a criar designs de sites incríveis em um ajuste em designer em nenhum momento. Então vamos direto para o curso e começar com os fundamentos. 3. 2.O que é o Affinity Designer e como configurar para design na web: Se você é completamente novo em ofender o designer, aqui estão alguns fatos sobre isso. Em primeiro lugar, ofender o designer é, em primeiro lugar, um aplicativo de design gráfico fator. Mas isso não significa que ele não é adequado para Scream e dispositivos design. Na verdade, é uma ótima combinação de ferramentas e habilidades destinadas ao trabalho dentro e fora da tela. No início, ele estava apenas disponível para Mac OS, mas desde o final de 2016 você também pode instalá-lo apenas Windows Machine. Neste curso, usarei uma versão para PC fora do software. No entanto, se você tiver um designer instalado em um Mac, você não deve ter problemas em seguir sozinho. Basta lembrar que sempre que eu vou estar usando o modificador de controle manter, você teria que usar a tecla modificador de comando. E sempre que eu vou estar usando o modificador Olt manter, você teria que usar a tecla modificador opção no seu teclado. A tecla shift é a mesma para ambos os sistemas operacionais. O que é ótimo sobre designer em termos de interoperabilidade é que ele permite trabalhar e exportar para vários formatos de arquivo que vão desde vetor padrão, uma vez como V G e E. P s para arquivos raster padrão como J. P, G, P e G e Gift. Ele permite que você abra arquivos padrão PSD e A. I, e ele faz o trabalho muito bem. Ele também pode exportar sua arte para formatos de arquivo que podem ser lidos por outras peças fora de software de design , como Dobie Photo Shop e Adobe Illustrator. Então, se você precisa salvar seu trabalho como um tiff PDF ou mesmo PSD, você pode fazer isso no Affinity Designer. Então, se eventualmente você estiver enviando seu projetado para um desenvolvedor, você pode fazê-lo usando um arquivo PSD padrão e você não precisa se preocupar que o desenvolvedor não poderá abrir o arquivo. Você produziu suporte de designer de afinidade, camadas , símbolos, loja de fotos como efeitos, guias e grão, e praticamente qualquer coisa que você precisaria para projetar sites com ele. Tenho que te dizer que tudo isso é só uma ponta do iceberg. Quero dizer, o software pode fazer tantas coisas, e há alguns aspectos dele que o tornam mais massa do que ilustrador ou photoshop. Para certos tipos de trabalhos de design, é realmente um balcão único para as necessidades de design. Você pode projetar logotipos com cartões de visita de sites, praticamente qualquer coisa que seu cliente possa querer ser projetado. Mas este curso não é sobre aprender. Tudo o que há para saber sobre desmaiar um designer. Se você precisa disso, dê uma olhada no meu como começar rapidamente com o curso de designer de afinidade onde você pode aprender tudo o que é para saber sobre. O software neste curso vai se concentrar em usar o programa em um cenário de Web design, então eu acho que podemos dar uma olhada nas habilidades de Web design off designer agora. 4. As habilidades de design de web do designer 2.2Affinity: designer Afinitor está preparado para o grande Você. Eu projeto experiência logo fora da caixa. Não há realmente muito que você tem que fazer para tirar proveito de todas as suas habilidades de Web design , que vai dar uma olhada agora. Primeiro de tudo, ofender. O designer suporta camadas, o que é bastante importante se você quiser tornar seu design ordenadamente organizado. É sempre uma boa idéia colocar seus elementos separados construindo partes separadas de um design de site em camadas distintas. Elementos que compõem o cabeçalho devem ir em uma camada separada. Elementos que compõem a barra lateral devem ir em uma camada separada e assim por diante. É uma boa técnica de produção nomear as camadas corretamente. Em vez de deixar seus nomes genéricos, como camada uma camada para etcetera, você deve renomeá-los e dar-lhes nomes logicamente descritivos que se relacionam com o conteúdo das camadas. Por exemplo, artigo da barra lateral do Hatter Food ER, etc. Eu iria até mesmo ir um passo além e creed sub-camadas vale nomes logicamente descritivos, por exemplo, que cria sub-camadas para apenas a navegação ou blocos Brandon sentados dentro da camada de chapeleiro . há realmente nada mais indicativo de um design desleixado e designer que mantém todo seu conteúdo em apenas uma única camada genérica. Se você é um fã de sombras, Grady INTs e desfoques, você ficará feliz em saber que o designer oferece uma variedade de efeitos que você pode acabar com seu trabalho artístico. Eles não são destrutivos, o que significa que eles não modificam a arte permanentemente, mas estão sendo adicionados dinamicamente à sua e podem ser alterados a qualquer momento que você quiser. Seria muito mais difícil criar projetos de sites sem nossos quadros. Eles são a melhor maneira não só de projetar versões móveis do site, mas também de mostrar seu trabalho. A coisa mais importante que ele precisa ter em mente ao criar sites o suficiente no designer é que, por padrão, quando você cria um novo arquivo, você não criará um quadro de arte. O sul permite que você escolha se deseja criar um trabalho artístico ou simplesmente sair da página padrão. Portanto, lembre-se de que quando você quiser criar em nosso relatório, quando estiver criando seu arquivo, marque a opção criar arte a bordo. Claro, se você simplesmente esquecer ou mudar de idéia, você sempre pode usar a arte a bordo. Ainda para criar um site de placa de arte Designs precisa de perfeição pixel, e você pode usar designers, toda a família de ferramentas e opções. Só por isso. O que é ótimo sobre esse recurso é que você pode simplesmente escolher uma predefinição de encaixe você I e ter certeza de que as opções de encaixe perfeitas para fins de Web design estão ativadas . Ele também irá ativar o alinhamento de pixel de força e mover as opções de pixels de espera apenas para garantir que todos os objetos estão encaixando e se movendo corretamente. Quando tiveres o estalo. design ativado mostrará quando os objetos estão alinhados, mas também indicará a distância em pixels entre objetos específicos. A predefinição de encaixe U I também fará com que seu trabalho artístico encaixe duas guias e encaixe na grade. Então, se houver usá-los em seu fluxo de trabalho, predefinição de ajuste que eu projetei permitirá que você alinhe o trabalho artístico perfeitamente com eles. E se você nunca usou a grade antes porque ela era muito confusa, você ficará feliz em saber que o Designer oferece uma grade automática, que encontra as melhores configurações por conta própria. Você não precisa contar tudo sozinho. A grade mudará dependendo do valor de Zoomer definido. Claro, se você quiser, você pode mudar a grade para manual e inserir seus próprios valores. Você também pode usar o gerenciador de guias para colocar seus guias exatamente onde você deseja que eles vão . Afinitor designer é principalmente um programa de design de fator, mas permite que você imite o ambiente de pixel que seus projetos de site acabarão por viver . Para fins de Web design, você pode usar a visualização de pixels padrão e uma exibição retina de alta densidade de pixels. Isso permitirá que você visualize ou projete como se fosse feito inteiramente de pixels. Um site não pode viver sem texto. É tão importante que muitos designers torná-lo o ponto central de seus projetos, removendo como elementos gráficos Manny quanto possível. E é muito fácil trabalhar com designer de impostos. Além das opções padrão de caracteres e parágrafos, você pode criar estilos de texto que aceleram o processo de troca de fundos. Dentro do seu projeto. Você pode ter dezenas e dezenas de estilos de texto diferentes, e você pode alterar praticamente todos os aspectos deles. Designer conta com a capacidade de criar suas próprias bibliotecas a partir de ativos que você pode usar ao projetar sites. Ele vem com muito encontrar Iowa 10 ativos que você pode apenas arrastar para os ativos pasta placa eram tipo de símbolos. Sobre a diferença entre ativos e símbolos é que você pode criar bibliotecas de ativos que podem ser exportados ou incorporados em um documento específico. E você não pode fazer isso com símbolos suficientes no designer. Então digamos que você está construindo uma armação de arame para o seu site. Você iria querer apenas os elementos esquemáticos para isso, certo? Basta criar suas próprias representações de um sistema de navegação de logotipo. Bloco ostenta etcetera, então selecionado, e no menu do painel, escolha e da seleção. O elemento irá direto para a biblioteca de ativos e estará esperando por você. Se quiser usá-lo de novo. Offend o designer vem com esses espaços de trabalho separados destinados apenas à exportação de elementos do seu design. É chamado para a persona de exportação, e é uma ótima maneira de exportar partes cortadas do seu design. Você pode apenas conceder a ferramenta de fatia, criar uma fatia de um determinado elemento de design e exportado como uma defesa de arquivo separada. Há um monte de ferramentas e opções que permitem que você crie projetos de site lindos em um ajuste em ferramentas de designer e painelistas como as camadas são para encaixar. Gerente etcetera irá ajudá-lo na criação de seus próprios sites. Mas confie em mim que acabamos de desviar a superfície aqui. Há muito mais em projetar sites usando ofensivo para designer e você descobrirá tudo à medida que o curso progride. Eu acho que neste momento nós poderíamos saltar direto para a criação de nosso primeiro design, mas eu quero que este curso seja algo mais do que apenas uma vitrine de técnicas e processos de design . Eu queria adquirir conhecimento Thora sobre Web design contemporâneo. Então, em seguida, vamos dar uma olhada nos princípios do bom Web design, seguido de informações práticas sobre cores, tipografia e elementos usados para montar um site juntos. 5. 3.1Top 10: Se você é um Web designer inicial, a abundância de informações que você tem que descobrir e aprender pode fazer suas mãos girá-lo. É por isso que eu coloquei uma lista de 10 princípios essenciais de bom Web design que irá ajudá-lo a começar. Olhe para cada um desses princípios é uma espécie de diretriz, mas não uma regra absoluta que você não pode unir. No entanto, segui-los, especialmente se você está apenas começando, permitirá que você evite muitos erros de novato. Portanto, o bom Web design sempre se preocupa com o usuário final. Afinal, como Steve Jobs disse, o design não é como ele parece, mas como ele funciona. E ele deve funcionar perfeitamente em termos de servir o visitante da melhor maneira possível, você deve projetar o site com seu propósito em mente. Você deve pensar, como o usuário pensaria quando ele ou ela estaria visitando o site, pense o que os visitantes estarão esperando encontrar no site informações, entretenimento, talvez produtos. O que isso seduz em termos de design e, em seguida, projetou o site em conformidade? Este é extremamente importante, e eu tenho que admitir que eu tenho uma espécie de viés pessoal em relação ao texto mal executado do lado. Não estou falando de topografia específica, mas de composição tributada. O usuário quer encontrar e consumir as informações de forma rápida e sem esforço. É por isso que é tão importante construir seus parágrafos corretamente. Texto bem composto tem cabeçalhos, parágrafos curtos e marcadores para fácil leitura. Eu acho que até o comprimento fora parágrafos é crucial para projetos orientados para a informação. Nos últimos anos, direitos autorais móveis têm se espalhado pela Internet, tornando os parágrafos inteiros tão curtos quanto uma frase. Um bom número de frases nos parágrafos é geralmente 2 a 3. É geralmente acordado que os tipos de letra serif sentido, ou seja, aqueles sem terminações decorativas em letras, são mais fáceis de ler em telas digitais. Eu não olharia para isso como um dogma, mas eu aconselharia fortemente a não usar mais de dois tipos diferentes dentro do seu projeto . Se você vai para Sand Saref ou Serif Typefaces é subsidiária para manter sua escolha de fundos em todo esse design. Se você decidiu ir para a Sarah cabeçalhos e algum corpo serif, apenas fique com eles. O layout do seu site deve ajudar os visitantes a encontrar as informações em vez fazê-los procurar por elas em frustração. É por isso que é importante construir o design que permite que o olho humano navegue facilmente o conteúdo de cima para baixo e da esquerda para a direita de mais importante para menos importante. Em breve você aprenderá mais sobre a teoria das cores e como usá-la no Web design. Mas, por enquanto, lembre-se de que as cores que você escolher podem fazer ou quebrar sua composição. É essencial criar esquemas de cores que ajudem os usuários a entender a mensagem do site e encontrar as informações que eles estão procurando enquanto torna o design esteticamente agradável. 6. 3.2Top 10: imagens podem ajudá-lo em nós, apenas tornando o site mais agradável de olhar, mas também para contar uma história. Eles podem envolver os usuários em um nível mais profundo se escolhido corretamente e emparelhado com o esquema de cores Sites, eles irão ajudá-lo tremendamente na criação de um design bonito e útil. Recentemente, está ficando muito mais comum usar a fotografia do cliente em vez de apenas fotos brega presas baixadas da web. Basta lembrar de otimizar as imagens ao entregar o design a um desenvolvedor e otimizar os meios de comprimir as imagens para que elas fiquem menores. Tamanho ajuda o site a carregar mais rapidamente. A maioria dos sites contemporâneos são baseados em grades, e o que é usado com mais freqüência é a grade de 12 colunas. Pense nisso como as linhas invisíveis da Siri que o ajudam a estruturar o design do seu site e a torná-lo simétrico e fácil de codificar. Essas linhas são uma grande ajuda ao colocar os elementos sobre o design. São só os contentores principais. Aleck off alinhamento é muito perceptível e cria uma impressão desleixada. Você aprende mais sobre grãos e como criar o seu próprio mais tarde nas pontuações. Escusado será dizer que seu design deve ficar bem em dispositivos móveis. Na verdade, você pode até criar seus designs principalmente para dispositivos móveis, especialmente smartphones, e, em seguida, criar projetos de desktop sobre eles. Ele é chamado de Mobile First Approach e é um design em resposta ao fato de que os usuários ficam online muito mais frequentemente usando seus smartphones, não computadores desktop. Em qualquer caso, seu design deve estar pronto para ser exibido em qualquer tela. Não há nada mais destrutivo para um projeto e depois um barulho. Mantenha seu layout simples para que eles sejam fáceis de digerir. Isso significa escolher a quantidade certa de cores, que normalmente não é mais do que cinco. Significa ser consistente com a escolha encontrada. Mas isso também significa tornar a interação entre os elementos de sites fácil de entender o espaço certo e é importante por uma razão importante. Torna o consumo de conteúdo fácil e agradável. Existem diferentes tipos de espaço, e você pode usar e deve estar ciente em seu design. Espaços entre linhas. texto desligado deve ser não muito pequeno, modo que as linhas de texto não se sobrepõem, mas também não muito grandes. Para que o olho humano não se perca. Eu também posso brincar com espaços entre personagens. Mas eu deixaria para grandes títulos se você quiser ir para mais de uma abordagem artística em Web design e desenvolvimento mundo, existem também tipos especiais de espaços chamados estofamento e margem padrão é o espaço entre pedaços de conteúdo dentro de um contêiner, e as margens são espaços entre contêineres. regra geral é esta. Peças fora do conteúdo nunca devem tocar uns aos outros, e você deve sempre ter algum espaço entre eles. O bom Web design moderno não pode viver sem uma quantidade decente de espaço em branco. Espaço em branco significa espaço vazio entre objetos e é necessário para um visual limpo e moderno. O espaço em branco pode direcionar um design específico de uma determinada maneira. Use-o ricamente se você estiver indo para uma espécie de luxo de um visual sofisticado do seu design . Portanto, estes são os 10 princípios essenciais do bom Web design. Há, é claro, outros princípios a considerar, como a navegação clara, usando a relação dourada ou o tempo de carga. Mas a ideia geral é sempre esta. Você deve projetar para o usuário e, tendo seus clientes objetivos em mente, usou esses princípios como diretrizes para a criação de projetos estéticos e bem-sucedidos 7. 4.1O fator mais importante a considerar antes de escolher as cores: apenas na pele de cor certa para o seu próximo site. O design é junto com a tipografia. A maior importância fazer com que as cores que você escolher será a primeira coisa que vai chamar a atenção do visitante e, se escolhido corretamente, não vai fazer seus olhos doer e dedos rapidamente olhar para o botão de fechar. A razão por trás de sua escolha de cor pode ser apenas o fato de que você gosta. É uma parte de toda a estratégia que ajuda a enviar a mensagem que seu cliente deseja enviar. Isso pode parecer estranho, mas lembre-se que você não está projetando o site para si mesmo. Você nem está projetando para o seu cliente. Você está projetando para seus clientes. E isso significa que os carros fora do site deve ajudar os visitantes a entender o que o site é sobre. Navegue no site sem a sensação de confusão e encontre o conteúdo que eles estão procurando . Então, como escolher as melhores cores para um trabalho específico de Web design? Há muito poucas coisas que você deve levar em consideração. Isso ajudará você a entender a mensagem que o site deve estar enviando e entender o que os visitantes estão esperando para experimentar. Primeiro de tudo, você deve saber, o que é que seu cliente faz, se é uma empresa de rua alta, uma loja de mãe e pop, uma organização de caridade, você deve entender esse negócio. Você não iria para o mesmo esquema de cores para uma empresa financeira como você faria para uma loja de brinquedos , certo? Vamos falar sobre psicologia das cores um pouco mais tarde, por enquanto. Basta anotar, também, que as cores transmitem e acendem emoções, e é extremamente importante acender as certas. Às vezes, as empresas, de certa forma, forçam o uso de certas cores. Por exemplo, se você está criando um site para uma loja de canto de alimentos orgânicos, provavelmente você iria para tons de terra, e se você fosse criar um site de jardim de infância, você iria para um pouco mais colorido e encontrado cor paletas. Em segundo lugar, se a empresa já possui um logotipo ou está redesenhando, você deve levar suas cores em consideração. Isso não significa que todas as cores dentro do site têm que ser exatamente as mesmas usadas no logotipo, mas eles definitivamente têm que se complementar. Em terceiro lugar, ouça o seu cliente, mas não sucumba a idéias claramente ruins. Há uma razão pela qual o cliente contratou você em vez de fazer isso sozinho ou pedirao sobrinho para projetar seu site. Há uma razão pela qual o cliente contratou você em vez de fazer isso sozinho ou pedir Mas é claro, você não precisa ser excessivamente esquemático se seu cliente quiser se destacar de alguma forma. E se você der uma olhada em sua presença na Web concorrentes, você pode experimentar um pouco com esquemas de cores. Se, por exemplo, você está projetando um site para um ambiente moderno uma empresa, você não precisa ir para azul escuro e cinza, mas polvilhe as coisas com o marrom claro ou verde. Olhe para o site do cliente Earth Dot Org. Este pode não ser o melhor design do mundo, mas mostra claramente que a mensagem e emoções braço ou importante do que a correção colar ao decidir sobre um esquema de carro que você deseja usar no projeto. Lembre-se sobre o tipo de negócio que seu cliente é e sobre os usuários que visitarão no site. Em seguida, falaremos sobre aspectos mais práticos na escolha de cores para seus designs. Vamos dar uma olhada na preparação das cores para a melhor experiência do usuário 8. 4.2Como misturar cores para a melhor experiência do usuário: Há muitos designers que deixam seus olhos julgar uma determinada cor ou paleta de cores será bom para um trabalho específico de Web design. Mas o problema com essa abordagem é o fato de que tantas cores podem parecer lindas. Assim, paletas de cores maney podem parecer apropriadas para esse design específico. Então, como dizer se sua escolha de colar é boa? Existe alguma maneira de julgar as combinações de cores que você escolheu? Bem, provavelmente do Leary. Mas temos que dar uma olhada em algum aspecto fora da teoria das cores, mas prometo que será o mais prático possível. Basicamente, podemos falar sobre quatro tipos fora esquemas de cores, monocromático, complementar e os logotipos e para tentar sótão. Então vamos falar sobre isso para um segundo modelo. O esquema de cores cromático usa uma cor de base e vários tons de tons e situações fora dele. É a melhor escolha se você precisa de um design coeso, mas você pode cair em uma armadilha usando um esquema de cores chato. Aqui, esquemas de cores compostos, às vezes chamados de cortesia de divisão, são baseados em duas cores de tamanho oposto fora da roda de cores. Quando você quiser criar seu próprio esquema de cores complementar, dê uma olhada na roda de cores e imagine que você está desenhando uma ampulheta sobre ela. Essencialmente, você está tirando duas cores de extremidades opostas do espectro de cores, que dá ao seu design mais liberdade do que os esquemas cromáticos motores. Se é consistência que você está procurando em seu design, vá para e logotipo esquema de cores. Dê uma olhada na roda de cores novamente e escolha três cores vizinhas. Esses temas podem criar um campo unificado sem nascer como a cor monocromática torta. Para criar um esquema de cores do sótão tente, desenhe um triângulo cujos lados tenham o mesmo comprimento e escolha as cores nos triângulos. Pontos finais. Isso cria um esquema de cores diversificado, mas equilibrado, com cores igualmente vibrantes. Além desses principais tipos de esquemas de cores, há mais alguns fatores que você deve levar em consideração ao escolher cores para o seu design. Refiro-me à complementação, ao contraste e à vibração. As cores que se complementam se sentam nos pontos de extremidade opostos fora do espectro de cores porque são visualmente significativamente diferentes. É mais fácil para o olho humano distingui-los. É por isso que as pessoas tendem a gostar de massa que desenhos que são fáceis de olhar, que significa que eles fornecem um certo equilíbrio e não forçar o olho a procurar pequenas diferenças entre as cores. Em um esquema monocromático, a complementação é usada nos esquemas de cores Triássico e composto. Uma boa experiência do usuário não pode viver sem o uso adequado do contraste. A escolha mais importante quando se trata de contraste é, claro, a cor grande do chão e do texto. Se você não tiver certeza de quais cores usar, a prática recomendada geralmente é escolher uma cor muito clara para o plano de fundo e uma muito escura para o texto em si, ou vice-versa. vibração é o lado emocional do esquema de cores. mais brilhantes Cores mais brilhantese vivas provocam sentimentos energéticos, enquanto que mais escuras, calmas, calmas, todas as cores relaxaram os visitantes, que os ajuda a se concentrar em outras coisas. Estas são as principais ferramentas teóricas que devem ajudá-lo a fazer mais, bem quarta escolhas para seus esquemas de cores. Claro, há muito mais ferramentas e idéias para usar e escolher em termos de escolha de cores . Mas se você se familiarizar com os que cobrimos, você estará no caminho certo para o manuseio profissional de cores em design gráfico. Como mencionamos emoções provocadas pelas cores, acho que é um bom momento para falar sobre psicologia das cores, que é extremamente importante, não apenas no Web design, mas no design em geral. 9. 4.3Como escolher as cores “psicologas: as cores que você escolher para o seu design, criar um humor específico. Você precisa entender a psicologia por trás de cores específicas. A psicologia das cores pode soar excessivamente científica, mas simplesmente descreve os sentimentos e significados que as pessoas costumam associar a cores específicas . Selecionando-os cuidadosamente, você pode reforçar a mensagem geral de um site. Vamos dar uma olhada em algumas das cores base que você provavelmente usará ao projetar seus sites. Vermelho é a cor mais vibrante e agressiva. É o 1º 1 para atrair os olhos dos homens, dependendo de quais cores que o faz com ele pode transmitir poder e coragem, mas também amor e paixão. Uma vez que é usado em muitos sinais de trânsito, ele é freqüentemente usado em sites para alarmar o usuário para informar sobre o perigo. Portanto, é um erro usá-lo para o seu chamado às ações. Tal espartanos ou links laranja é uma das cores mais agradáveis para se olhar. É difícil perder, e pode evocar diversão e atmosfera enérgica. Amarelo é a cor fora, o algum calor e tempo de verão. É também a cor mais visível do espectro, por isso não exagere. Muitas pessoas acharão muito amarelo irritante. É especialmente atraente quando combinado com branco ou preto como ele emite em equipamentos de segurança , ônibus escolares e táxis. Se você perguntar às pessoas sobre sua cor favorita, eles são mais propensos a dizer azul. É agradável olhar para o seu discreto e faz você se sentir confortável. Talvez seja porque é a cor do céu. É também a cor da água, para que as pessoas se conectem azul com refresco e azul de limpeza, especialmente azul escuro, é o mais profissional. A cor, afinal, é a cor do terno presidencial. Então use esta cor quando é profissionalismo que você quer transmitir. Com o seu design, verde é a cor da natureza. Se seus olhos doem ao olhar para uma tela de computador mais longa, olhe para o verde. É uma escolha perfeita e óbvia para produtos orgânicos, ecológicos e saudáveis, apesar de ser uma cor do dólar americano. americano Se você estiver criando um site para uma empresa financeira, não vá ao mar com verde. Em vez disso, fique com o azul escuro, cinza escuro, branco e preto para transmitir confiança e profissionalismo. O roxo é historicamente associado à realeza, que o torna perfeito para marcas de luxo. Além disso, quando combinado com outras cores , perderá parte de sua herança real. Com vermelho, pode se sentir íntimo e romântico. Com brancos e rosa, torna-se brincalhão e infantil. Por que significa pureza e inocência. Mas também é usado para criar minimalismo e sofisticação que é mais provável que você assente em sites. Concentre-se em casamentos, cuidados de saúde e sinais, bem como no preto moderno e mínimo do blog é, sem dúvida, a cor mais elegante. Nunca sai de moda. Isso implica força, luxo, mal, morte e evite. Lembre-se que você pode decidir quais emoções os visitantes sentirão ao olhar para o site que você projetou, que você tenha um papel importante a desempenhar como o designer. Além disso, os significados de cores podem variar drasticamente entre culturas e regiões, por isso é melhor verificar se a cor de Joe é apropriada em uma determinada cultura. Agora você sabe um pouco sobre a teoria das cores, e eu admito que pode parecer esmagador. Felizmente, existem ferramentas que podem ajudá-lo muito na escolha do esquema de cores certo. Então, em seguida, vai dar uma olhada em sete ferramentas fáceis para escolher esquemas de cores à prova de erro 10. 4.4-7 ferramentas fáceis para escolher de esquemas de cores à de erro: escolher cores para o seu próximo design pode ser um processo longo e até mesmo assustador. Para mim, sempre leva muito tempo para encontrar a combinação certa, mas provavelmente todo o seu processo pode ser acelerado com alguns geradores de esquema de cores on-line. Vamos dar uma olhada em sete ferramentas fáceis para escolher nossos esquemas de cores de prova. Vamos começar com Kohler hex um ponto com. Este sinal é ótimo se você é um fanático por cores. Tudo o que você tem a fazer aqui é digitar qualquer cor, valor ou nome de cor para obter uma enorme quantidade de informações possuídas por essa cor mais, claro, esquemas de cores diferentes. Você também obterá exemplos de diferentes usos dessa cor específica, juntamente com alternativas para ela. E se você preferir qualquer fora das alternativas, você pode apenas clicar sobre ele para ver todas as informações necessárias e esquemas de cores. A segunda ferramenta, chamada de ponto de cor, é muito divertida e fácil de usar. Esta ferramenta permite que você crie rapidamente um esquema de cores usando o mouse arrastar para a esquerda e para a direita para alterar a tonalidade, arraste para cima ou para baixo para alterar a luminosidade e role para cima ou para baixo para alterar sua saturação . Se você estiver satisfeito com a cor, clique para salvá-la e repita o processo com outra cor. A ferramenta só mostrará cores que funcionam bem com a que você escolheu antes que você possa repetir o processo quantas vezes quiser. Os próximos dois, chamados Palatable, é particularmente divertido de usar. Você pode escolher sua própria cor ou clicar no botão de antipatia para que o programa escolha as cores para você. Se você gostar, clique em Like e Seve, a próxima cor que deve corresponder à anterior corresponde ao seu gosto. Você também pode remover uma cor específica para encolher toda a paleta na cor. Mente. Você pode escolher suas próprias amostras de cores, e se você gostar delas, você pode olhá-las e bater. Gere para que o programa encontre, imagine cores para as que você escolheu. O que é especial sobre este banquinho em termos de Web design é que você pode escolher a opção de cores do site e a paleta de água que está sendo aplicada a uma página web fictícia. paleta de materiais foi criada principalmente para a finalidade de fundir cores de design de material em seus projetos. Então, o que é design de material? Bem, é o design conceito do Google que é orientado para a experiência do usuário. Ele foi projetado especificamente para funcionar melhor em dispositivos móveis e paleta de materiais está aqui para ajudá-lo na escolha de cores. Se você deseja projetar seguindo os princípios de design de materiais, tudo que você tem a fazer aqui é escolher duas cores e deixar o programa fazer o trabalho pesado para você. Não só criará um esquema de cores para você, mas também mais grandioso. Uma pré-visualização fora do esquema aplicado a uma interface de usuário móvel que você provavelmente já ouviu falar de Can Va ? Mas você já ouviu falar de sua paleta de cores para você? Pode usá-lo para criar esquemas de cores fora de imagens importadas. Dragão imagem na interface e deixar o programa pegar as cores dessa imagem. E por último, mas não menos importante, é o meu gerador de esquema de cores favorito. Isso é totalmente diferente na forma como ele pensa sobre a criação de paletes. Em vez de digitar os nomes das cores, carregar imagens ou arrastar o mouse para criar amostras de cores, digite o evento de tema ou qualquer palavra que descreva seu design. Após alguns segundos, você receberá esquemas de cores relacionados a essa palavra-chave. Muito doce, não é? Todas essas ferramentas geradoras de cores são uma representação humilde de uma área de ferramentas que você pode encontrar online. A maioria deles funcionará praticamente da mesma maneira. Então, se você apenas encontrar seu um ou dois favoritos, isso é realmente tudo que você vai precisar. Em seguida, você aprenderá os fundamentos da topografia em Web design, então não vá embora. 11. 5.1Uma história super curta da tipografia na web: quando comparado com os mais de 25 anos de existência da Internet. True Web tipografia parece um jardim de infância. Tem apenas alguns anos de idade. Claro, mesmo os primeiros sites continham texto. Na verdade, o primeiro site não era nada sobre texto, mas a escolha do telefone era limitada, para dizer o mínimo. Antes do nascimento. verdadeiros designers de topografia Web podiam escolher entre cinco tipos diferentes, mas apenas dois deles, verdana e Georgia, foram criados especificamente para uso na Web. Os outros fundos, nomeadamente Aerial, Helvetica e Times New Roman, foram retirados do sistema operacional do computador e carregados em um site. Claro, isso não significa que designers e desenvolvedores tenham concordado educadamente com esse conceito muito limitado de ter apenas cinco tipos disponíveis. A alternativa mais simples era usar imagem como desejos de texto poderia usar os fundos instalados em seus computadores sem dada muita preocupação, licença muito formada em. Mas houve duas grandes desvantagens desse método. Primeiro de tudo, a fim de transformar o design cheio de imagens em um site, você teve que cortá-lo em um número ridículo de imagens em um pedaço de software como Photo Shop. Também não se esqueça que este era o tempo livre. Não é tão rápida ligação à Internet. Assim, o tempo necessário para carregar um lado cheio de imagens foi significativamente maior. Tudo mudou no 2010, quando o Google criou sua própria biblioteca fora dos fundos da Web. Eles são gratuitos, principalmente bem feitos e definitivamente fáceis de usar tanto para designers quanto para desenvolvedores. Isso mudou o mundo da tipografia da Web. Hoje em dia, você encontrará fundos específicos da Web em todas as principais fundições de tipografia, e é difícil imaginar projetar sites. Sem eles. O surgimento do Web design responsivo fez sua tipografia passar por um novo tipo de transformação. O fato de que seu trabalho será visualizado em diferentes dispositivos torna impossível prever como um fundo específico será exibido em um dispositivo específico. No entanto, existem algumas regras básicas para escolher os fundos certos para os tipos certos de empregos, e falaremos sobre eles em seguida 12. 5.2Como misturar cores para a melhor experiência do usuário: devidamente escolhidos. Tipografia para o projeto significa que ele ajuda a enviar a mensagem para fora do site. Também é importante lembrar que os tipos de letra, assim como as cores, podem provocar certos tipos de emoções. É por isso que é importante escolher seus amigos com cuidado e com o leitor em mente. As pessoas que visualizam o site passarão a maior parte do tempo lendo o corpo do texto. É por isso que é uma boa ideia escolher primeiro o fundo para o corpo do texto. O tipo de letra que você escolher precisa ser discreto borda um ble e legível. Existem algumas maneiras de escolher fundos com essas características, mas eu prometi mantê-lo o mais regular designer amigável possível. Quero dizer, nem todo designer é super animado com topografia. Então, quais são os recursos de fundos discretos e legíveis para seus projetos de site? Um encontrado legível tem muito fora da altura X, que é a medida vertical de um X minúsculo. Quanto menor a altura X, menor será a última, o que pode fazer com que o tipo se torne ilegível. Por outro lado, demasiada altura X pode tornar as letras M e H difíceis de distinguir. Dê uma olhada na mesma palavra escrita em Lotto e filhos abertos para comparar suas ex-alturas. A segunda coisa a tirar uma nota é como as aberturas estão abertas. Mas o que nossas aberturas aberturas são as lacunas em letras como um C ou s. Quanto mais abertas elas são, mais legíveis as letras se tornam. Você também deve prestar atenção ao A. Remetentes e D centros de passageiros deste último são os traços que se estendem acima da linha média e os centros D são os traços que se estendem abaixo da linha de base. Quanto mais distinguíveis forem, mais legível se torna o texto. A maioria dos tipos de letra Saref são muitas vezes opções ideais para ler passagens de texto mais longas. Devido aos traços visíveis em seus remetentes A e em D remetentes. Sua escolha de tipo de imposto corporal deve conter pelo menos quatro estilos diferentes. Itálico regular. Negrito e negrito itálico. Se o tipo de letra não contiver uma fonte em itálico, os navegadores serão inclinados à força. E se não contiver uma versão em negrito, os navegadores dobrarão a versão normal da frente, tornando o texto difícil nos olhos. A última coisa a tirar uma nota ao escolher tipos de letra para o corpo do texto é o contraste entre linhas finas e grossas dentro das letras. Quando você dá uma olhada em tipos de letra como Play for display, você notará um enorme contraste entre linhas grossas e finas dentro de bandejas separadas. letra como esse podem ficar ótimos em projetos de cabeçalho para blog de moda, mas eles não vão funcionar bem como corpo tributado. Agora você sabe o que os cinco traços cruciais fora de tipos de letra que vai funcionar bem como corpo de texto. Esses tipos de letra terão altura X generosa, aberturas abertas, entradas de bunda distinguíveis e remetentes D, pelo menos quatro estilos e pesos e pequeno contraste entre linhas dentro de escadas. Não, está tudo bem sobre a questão principal ainda permanece sem resposta. E essa pergunta é: Quão grande deve ser o corpo do texto? Bem, a resposta curta é 16 pontos. É o tamanho do texto que os navegadores exibem por padrão. É o tamanho do texto que os navegadores foram destinados a exibir. Geralmente, esse tamanho funciona bem para laptops, desktops e telefones. E quanto à altura da linha, que é claro, significa a distância vertical entre linhas de texto. Uma boa regra de ouro é adicionar seis pontos ao tamanho do telefone de texto do corpo, então, se você estiver usando 16 importância como o tamanho do telefone de texto do corpo, vá com 22 pontos como a altura da linha . Claro, você pode experimentar outros valores de altura de linha. Na verdade, muitos projetos de sangue modernos usam alturas de linha mais generosas, então temos o corpo. fonte de texto é muito bem coberta. Se você seguir todas essas regras, você fará aos usuários um grande favor, tornando a leitura do seu site uma experiência agradável. Você sempre economizará muito tempo e evitará os tipos de letra. Eles não valem a pena terminar no seu projeto. Em seguida, vamos dar uma olhada na criação de captadores de atenção. Falaremos sobre as rubricas. 13. 5.3Como escolher as fontes certas para as posições: boas rubricas e sub-rubricas são os elementos de um site de design que atraem os utilizadores e incentivam a leitura posterior. É por isso que é essencial aprender a criá-los corretamente. Se você não tem certeza com tipo de letra para usar em perigo com o fundo do corpo, basta ir para a mesma família de telefone. Por exemplo, se você escolheu areias abertas para ser o fundo corporal, vá para uma versão ousada e ampliada duas ou até três vezes para seus títulos. Isso tornará o design Luke harmonioso e reduzirá o tempo necessário para carregar o site. Essa é a maneira rápida e fácil, mas as chances são de que mais cedo ou mais tarde seu designer assim vai prevalecer e vai pedir-lhe para misturar diferentes tipos de letra. Você vai querer usar um fundo para etiquetas corporais e outros quatro títulos se você quer o melhor de ambos os mundos. Quero dizer, se você quiser ficar no lado seguro e ainda enfeitou a topografia do seu site um pouco acima, você pode ficar dentro de uma super família. Por exemplo, você pode escolher filhos dróides para os títulos e dróide serif. Para o corpo do texto. Você encontrará algumas boas super famílias entre os telefones do Google, por exemplo, Roboto e Roboto Slab Merryweather e Merryweather Sands ou Noto Santas e Noto Saref. A próxima grande questão é, quão grande devem ser os títulos? Primeiro de tudo, lembre-se de que seu lado vai usar um número máximo de seis títulos. Nem todos eles precisam necessariamente ser incluídos no design. Quero dizer, projetos típicos não vão abaixo do título para, mas é uma boa prática desenvolver um conjunto de tamanhos para todos os títulos para colocá-los. Os títulos simples são títulos fora dos componentes dos sites, o título um é normalmente reservado para a marca de pontos turísticos, então, tecnicamente, não precisa ser texto. Ele pode abranger o logotipo da empresa, os títulos que a maioria de seus projetos vai confiar em nossos dois títulos. Esses caras são seus títulos de bloco, títulos de seção principal, etc. Eu recomendaria torná-los com pelo menos 32 pontos grandes, que é o dobro do tamanho de um corpo de texto típico. A linha alta troll de adicionar seis pontos ao tamanho da fonte também se aplica aqui. Todos os outros tamanhos de cabeçalho variam dependendo do trabalho que eles estão fazendo dentro do design. Por exemplo, título três é geralmente usado como título fora elementos cibernéticos. Então seu tamanho deve funcionar bem com todo o conceito de design, em vez de ser apenas uma porcentagem ou algum tipo de derivado fora dos outros títulos. No entanto, se o seu design vai fundo como cabeça em seis, eu não recomendaria torná-lo menor do que o tamanho do corpo do texto em si. Digo, indo menor do que o próprio corpo ataca. Isso é hilariante, não é? Agora você sabe como escolher tipos de letra tanto para o corpo quanto para os títulos. Então agora é hora de olhar para misturá-los juntos. Vamos fazer isso a seguir. 14. 5.4Como misturar fontes para fonts e texto de corpo: Sorte para nós. Há uma tonelada de recursos e em lentilhas para mais fácil para os pais. Vamos dar uma olhada em alguns deles agora. O 1º 1 é uma ferramenta incorporada diretamente nos fundos do Google. Quando você escolhe um tipo de letra, vamos dizer areias abertas e clique em Ver espécime. Você verá um colapso na frente. No canto inferior esquerdo, você notará uma lista de emparelhamentos frontais populares. Tudo o que você precisa fazer é escolher um par frontal. E o que deve ser aplicado ao pedaço de texto à direita? Você também pode verificar com a frente vai parecer como título e como corpo de texto. Mas há uma grande desvantagem dessa ferramenta. Você só obtém uma prévia modesta dos fundos em ação. É difícil imaginar apenas olhando para esses pedaços de texto como eles vão se parecer em diferentes cenários. Por exemplo, em uma chamada para cartões Sliders de Action etcetera para ver mais alguns pares frontais. Junto com exemplos estendidos, vá para o telefone iniciar grande simples ponto io. Aqui você vai encontrar alguns Google incomum de Paris que você pode considerar ao projetar o seu próximo site um fora do maior e mais visitado fundo pai, ALS, é par de frente dot co. Aqui você encontrará uma extensa biblioteca fora dos pares frontais divididos em categorias específicas. Transmitir qualquer combinação fora Saref, San Serif e fundos cursivos, e se você gosta de qualquer um dos pares frontais, você pode simplesmente baixá-lo com um único clique. Você receberá um arquivo ZIP que você precisa para descompactar e instalar telefones escondidos dentro. Mas, claro, o maior repositório de pares do Google Front é o próprio Google. Quero dizer, se você apenas Google pares de telefone no Google, você vai encontrar Tom e Thomas fora artigos sobre o pronto feito de peras para você escolher e usar. Então, se você é sempre debatido com você mesmo, quais fundos usar, é uma boa idéia olhar para as sugestões de outros designers que passaram com sucesso por esse processo meticuloso. Uma palavra de cautela aqui Se você notar uma exibição de palavra em um nome de fontes, isso significa que ele é destinado a títulos, não corpo tributado. Então, se um par de fundos sugere um tipo de exibição de fundo para o corpo de texto, isso é apenas mau conselho e ignorância. Portanto, tenha cuidado de que estas são as formas e ferramentas mais comuns para encontrar ótimos pares de telefones do Google . Eles podem ser uma ótima maneira de projetar um site único, apenas muito mente que você não está apenas após o efeito artístico, mas também após a legibilidade. Em seguida, resumiremos brevemente esta seção e nos concentraremos nos três aspectos mais importantes dos fundos bem escolhidos para os projetos do seu site. 15. 5.5A fonte perfeita para design do interface de usuário: Vamos saber que algo está acontecendo e dar uma olhada em três aspectos principais de qualquer fundo que será grato seus projetos Web. Eu acho que agora você entende bem o suficiente para que seus projetos devem servir o público de seus clientes . Se um usuário visitar os sites que você projetou e deixá-lo depois de alguns segundos porque ele ou ela não pode ler nada, isso é um sinal de um design ruim. Os melhores indicadores fora da legibilidade são distinções claras entre letras que podem parecer semelhantes. Por exemplo, tipografia maiúscula I e minúscula L bem escolhida fica fora dos usuários. Espere, por assim dizer. Quero dizer, torna o processo de leitura mais fácil. Mas a leitura não é apenas para a visualização de mensagens em bloco. É também para ler descrições de produtos, ler chamadas Ações nos botões sobre mim seções de sites. Portanto, tipografia é um meio de obter o usuário do ponto A ao ponto B o mais rápido e genuíno possível . Então, dependente do objetivo sites, se é vender, subscrever ou informar fácil de absorver topografia pode ajudar muito ou impedir região desses objetivos, e por último, bom você eu digitar funciona bem em diferentes tamanhos de tela, não importa qual dispositivo ou site está aparecendo na massa tipográfica permanecem legíveis. Algumas pessoas afirmam que os fundos Sarah são mais difíceis de ler em telas de smartphones, em seguida, sem telefones serif. E, de fato, pessoas com distúrbios de leitura ou deficiência visual podem achar menor imposto serif mais difícil ler. Mas se um tipo serif web é bem composto, deve ser fácil de ler, mesmo em parafusos menores, mesmo para pessoas com distúrbios de leitura que já encontraram para escolher. Lembre-se que o propósito de qualquer texto em seu site usado para ajudar seus usuários a alcançar seus objetivos. Considere todo o contexto, vez de apenas confiar em um conjunto de regras quando você faz suas escolhas de design. Até agora, aprendemos bastante sobre cores e tipografia em Web design. Agora é hora de dar uma olhada nos blocos de construção de um site típico. 16. 6.1de cabeçalho, branding, navegação e seções de heróis: Ao projetar sites, você deve se lembrar de certos blocos construindo-o. Alguns deles estarão sempre presentes no design, mas alguns deles são opcionais. Vamos dar uma olhada em como um site típico é construído. Vamos dissecar um site começando de cima e movendo-se para baixo. O primeiro bloco de construção de um site seria come Chapeleiro. É um recipiente que geralmente contém as informações Brandon como o logotipo e slogan, algum tipo de sistema de navegação e, por vezes, informações de contato, incluindo asas de mídia social. Um monte de projetos de site, incluindo caixa de pesquisa no cabeçalho também. Normalmente, o Brandon fica à esquerda e a navegação à direita. As informações de contato opcionais e o sistema de busca também podem ir à direita, acima ou abaixo da navegação. Mas esta é apenas uma forma de apresentar o Chapeleiro. Em alguns projetos, especialmente os modernos desenhos de sangue, o conteúdo Heller geralmente fica centralizado, então o logotipo está no centro e a navegação vai abaixo dele, e ele também está centrado. Eu acho que torna o design ainda melhor organizado e mais fácil de entender. O que vai por baixo da urze é opcional. Quero dizer, você pode incluir algo que é chamado de seção de heróis. Então, o que é isso? Basicamente, é um componente que mostra o conteúdo principal do seu lado. Seu objetivo principal é chamar rapidamente a atenção do usuário e explicar o que o site é sobre. Muitas vezes, você pode vê-lo nos insights do mercado onde você é solicitado a inserir seu endereço de e-mail para obter um livro gratuito. Ooh, um relatório ou algo assim. Normalmente, seção Herói contém uma imagem de fundo completa ou um vídeo com sobreposição de conteúdo que topografia é grande e negrito, e na maioria das vezes você vai encontrar algum tipo de uma chamada à ação aqui também. Às vezes, a imagem de fundo completa é compartilhada entre as seções de cabeçalho e herói em resposta a versões do design, especialmente em telefones celulares, uma seção de herói pode se transformar em algo completamente diferente. A imagem de fundo pode ser substituída ou até mesmo completamente removida, tornando o design mais leve. Outra idéia para a seção herói é usar o controle deslizante, que é uma vitrine de imagens ou uma combinação de imagens e texto. Essas imagens são interativas e mudam automaticamente ou na interação do usuário. No entanto, hoje em dia os controles deslizantes estão começando a se tornar redundantes. Primeiro de tudo, eles não são muito s yo amigável. Em segundo lugar, eles são muito pesados e um pouco inúteis nas telas de smartphones pequenas. Mas toda a seção de heróis é realmente opcional. Em alguns casos, ele pode estar realmente obstruindo todo o propósito do site, e eu estou falando de projetos de blocos. Uma loira é principalmente sobre os artigos, então o usuário que visita um site deve ser apresentado com o que ele ou ela está esperando encontrar aqui, que são os artigos exatamente. Claro, os artigos podem ser apresentados de uma maneira mais interessante do que apenas barulho fora do texto, mas vamos falar sobre e sobre outras seções que vão abaixo do herói no próximo vídeo . 17. 6.2As seções centrais e de baixo do design do seu site: Agora vamos passar o cabeçalho e as seções de herói e parar os artigos e barras laterais . Essas seções parecerão diferentes não só por causa da sua escolha de design, mas principalmente por causa da natureza do site. Eles vão olhar diferente para um blawg diferente site corporativo gratuito ou pessoal. Variações anuais C dentro desses conceitos para tornar as coisas simples. Se não for um blawg, a seção abaixo da imagem do herói parecerá caixas horizontais, separadas por conteúdo e cores que podem conter mixagens de ícones, imagens de texto e links. A principal razão por trás da criação dessas seções de uma maneira específica é torná-las facilmente legíveis em dispositivos móveis. A chave aqui é criar o design do desktop no topo do design móvel. Tudo o que ficará bem em um smartphone também deve ficar bem em um computador desktop em caso de projetos de blocos. Essas seções provavelmente abrangerão os artigos, e eles podem ser apresentados de várias maneiras. Mas um denominador comum é que eles sempre terão os títulos dos artigos que também podem apresentar imagens em destaque, bloquear trechos de postagem, links e outras informações. Às vezes, se é um site de comércio e, artigos podem conter fotos de produtos, descrições preços em outro bloco de construção do site que pode sentar-se ao lado das seções ou artigos é uma barra lateral. Uma barra lateral típica contém informações que, de certa forma, são complementares à mensagem principal fora do site. Pode ser a informação do autor do blog. Feed de mídias sociais mais recentes postagens, tags chamadas para ações , produtos relacionados, etc. A coisa interessante sobre barras laterais é que eles podem sentar-se no lado direito da página no lado esquerdo ou em ambos os lados ao mesmo tempo. Do último bloco de construção central de um site é seus rodapés de rodapé têm realmente crescido ao longo dos anos a partir de simples seções de uma linha contendo principalmente os direitos autorais em folk. Eles evoluíram para caixas sofisticadas com muitos dados adicionais. Rodapés e cabeçalhos são os mesmos em todos os sites e contêm informações que não mudam. Não importa qual página o usuário está visualizando atualmente, eles são um balcão único para todas as informações essenciais que o usuário pode precisar. É por isso que, nas seções de rodapé você verá bios rápidos ou sobre mim links para páginas mais importantes ou gabaritos recentes. Um recente asas de mídia social Commons ou subseções inteiras com feeds de mídia social, como fotos do Instagram. Os rodapés são geralmente facilmente distinguíveis graças ao uso de contraste nas cores em relação a todo o site. Se eles são feitos corretamente, eles fazem todo o site parecer profissional e cuidadosamente projetado. Para resumir, um site típico conterá um cabeçalho. Uma seção herói seções com artigos, às vezes barras laterais e sempre f rodapé. Agora que você sabe como estruturar um site, é hora de olhar para grades. Eles podem parecer assustadores no início, mas eles ajudam na criação de sites simétricos e mais fáceis de codificar, então vamos dar uma olhada rápida neles a seguir. 18. 6.3O que são grinds e como usá-las: Então, o que é uma grade? Pense nisso como um sério fora linhas invisíveis que ajudam você a estruturar o design do seu site e torná-lo simétrico e mais fácil de codificar. Essas linhas são uma grande ajuda ao colocar os elementos do seu design, não apenas os recipientes principais. A falta de alinhamento é muito perceptível e cria uma impressão de queda. Uma grade típica é construída de unidades, calhas e colunas. Vamos dar uma olhada rápida naqueles que usam uma grade de 12 colunas como um exemplo. As unidades são os blocos básicos de cada grade. Eles se parecem com colunas longas, um pouco estreitas com um pouco de espaço em cada lado deles. As calhas são espaços sentados no lado esquerdo e direito de cada unidade. Não importa se é um centro para unidade direita ou extrema esquerda. Há sempre a mesma quantidade de Ghadir em ambos os lados deles. As colunas têm o nome mais confuso de todos os blocos de construção de grãos. Basicamente, eles são clusters de conteúdo semelhante, espalhados em uma quantidade específica de unidades e tem o dela. A grade mais comum e versátil é uma grade de 12 colunas. É um grande terreno comum. Para designers e desenvolvedores, a maior vantagem é que ele pode ser facilmente dividido em diferentes clusters de unidades. Por exemplo, você pode ter quatro colunas criadas a partir de três clusters de unidade, seis colunas criadas a partir de dois blasters de unidade e assim por diante. A beleza deste sistema é que você pode misturar colunas juntas. Por exemplo, à esquerda, você pode ter um gesso de oito unidades e à direita, um conjunto de quatro unidades e assim por diante. O truque aqui é dividir a grade em colunas cujas algumas serão sempre 12. Você também pode fazer colunas horizontalmente, por assim dizer. Uma seção pode ser dividida em duas colunas, outra em quatro, outra em três e assim por diante. Aconselho a usar a grade o tempo todo. No começo, pode ser um pouco estranho, mas depois de um tempo você ama as grades. Eles irão ajudá-lo tremendamente na criação de projetos coesos e esteticamente agradáveis. Se for mais fácil para você, basta baixar uma versão PSD de uma grade de 12 colunas e usá-la facilmente dentro. Designer de afinidade. Você pode apenas google 12 coluna grão e você vai encontrar muitos e muitos exemplos, mas eu acho que por uma questão de compreendê-lo um pouco melhor, que iria projetar o nosso próprio vamos fazer isso no próximo vídeo. 19. 6.4Como criar sua própria grade: Vamos abrir designer e criar um novo documento que vai usar o perfil da Web para a predefinição de página. Eu vou com Full HD e eu vou verificar a opção Creat Art a bordo. Deixarei todas as outras opções intactas. Antes de começar a criar qualquer coisa, certificar-me-ei de que a predefinição de ajuste de design U I esteja ativada. Isso vai me ajudar na criação de uma grade de fatos grande chinelo. Vamos começar com a criação de um ângulo rachado básico que vai ter 1200 pixels de largura. Isso é importante porque vamos criar designs baseados em uma grade de 1200 pixels com e 1200 pixels é o mais típico com sites contemporâneos. Vamos nos certificar de que o retângulo está exatamente no meio da arte a bordo, e agora podemos passar para trazer os primeiros guias. Oprimido o controle, são combinação de teclas no meu teclado e trazer para fora duas guias que irá encaixar em ambos os lados fora do retângulo. Nossa grade vai seguir as diretrizes de bootstrap. Se você não sabe o que é bootstrap, deixe-me apenas dizer-lhe rapidamente que é um framework de desenvolvimento Web que é amplamente adaptado no mundo W W W. Ele usa um sistema de grade de 12 colunas onde todas as colunas têm 15 pixels de tapinhas em ambos os lados . É por isso que agora eu vou divino o retângulo por 12 usando esse painel de transformação, e eu vou me certificar de que para o ponto de partida da transformação está sentado à esquerda. Depois disso, vou subtrair 30 pixels do resultado em retângulo, porque 15 pixels mais 15 deslizamentos grandes de cada lado equivale a 30 pixels. A última coisa a fazer é mover a coluna em 15 pixels para a direita, e a unidade base está pronta. Agora vamos clonar na primeira coluna à direita pressionando e mantendo pressionada a tecla control até que a coluna clonada se encaixe com o original. Depois disso, tudo o que precisamos fazer é mover aquele cara por 30 pixels para a direita. Agora, se nós apenas clonar na segunda coluna à direita, designer irá mostrar-nos a distância entre as colunas e encaixá-los no lugar quando as distâncias são iguais. Tudo o que resta a fazer é pressionar Control mais J no teclado. Para duplicar a última transformação, que era clonagem e movimentação. Precisamos fazer mais nove vezes até termos todas as 12 colunas. Agora você tem sua própria grade de 12 colunas personalizadas para um design de site. Se você quiser, você pode alterar a cor das colunas, alterar sua transparência e, claro, seu tamanho. Uma vez que o design cresce em altura, quando passamos para a parte de design real do curso, você verá essa mesma grade em ação. Mas antes de fazermos isso, vamos dar uma olhada no que está agora em termos de Web design. Vamos descobrir as mais recentes inspirações de Web design. 20. 7.1-7 tendências de design que governam o mundo do design de web: Nos próximos dois vídeos, vamos dar uma olhada nas tendências modernas de Web design. Isso irá ajudá-lo a entender o design de padrões que os designers estão seguindo nos dias de hoje. Vamos começar com menus que estão escondidos no primeiro Glenn. Eles geralmente se escondem atrás de três barras de chouriço NITEL chamado manual de hambúrguer. Basta clicar sobre eles para ver um sistema de navegação com flash completo. Se você acha que esta é uma maneira de imitar os menus de APP móvel, você está absolutamente certo. Uma vez que cada vez mais pessoas estão navegando na Web usando seus smartphones, faz com que o Papai Noel transfira parte dessa experiência para o site desktop. Os designs, um dos benefícios da navegação oculta, é que ele cria mais espaço na página principal. Ele permite que os conteúdos principais sejam mais destacados. Outro benefício do menu de nome dele é o fato de que você pode combiná-lo com um menu tradicional se esse design precisar dele. Se você tem muitos lugares para levar o usuário, você pode ocultar alguns deles em um menu e mostrar outros no menu visível. Design sábio menus móveis muitas vezes usado cores de fundo contrastam com o esquema de cores geral do site, tornando-o para se destacar do resto. O texto vincula o contraste de cores com o plano de fundo para facilitar a navegação. Parece que os usuários cresceram acostumados a ver os sistemas de navegação como simples três linhas que precisam ser coletadas para ver o que está escondido por baixo. É por isso que você pode experimentar livremente com hambúrguer. Manu está em seus projetos. A experiência do usuário contemporânea está mudando lentamente de visuais duas palavras. É por isso que a tipografia está desempenhando um papel maior do que nunca. Mas o que significa tipografia grande e ousada? Bem, isso certamente não significa que você absolutamente deve usar apenas versões em negrito do tipo e configurá-lo para o tamanho mais alto possível. Isso significa que muitos projetos têm uma quantidade decente de espaço para texto limpo e conciso bem no meio de uma determinada seção. O exemplo mais óbvio disso são, claro, as ações do herói. Com grande tipografia sobre imagens de fundo da pista, o UX moderno muda para slogans que são limpos do tamanho e úteis, o que significa que no futuro, tipografia é papel no design será maior do que nunca. A revolução do smartphone, sem dúvida, mudou. A forma como as pessoas interagem com o mundo da Internet. Mas há um aspecto dessa revolução que muitas vezes é omitido, e que é realmente importante para os designers norte-americanos. Até recentemente, o sistema operacional principal costumava ficar online com o Microsoft Windows. Mas agora é o Android do Google, e o Google surgiu com seu sistema de design, chamado design de material e luz de design de material. É por isso que os designers que querem criar um perfeito você eu experiência para os usuários mão para usar visuais de design de material. Ideias nos Web designs. Design de material não está longe em um design plano Hanson. Ele também se concentra na simplicidade, mas adiciona um toque de três dimensionalidade. Se você quiser usá-lo em seus designs, você ficará feliz em ouvir que ele vem com todo um espectro fora de suas ferramentas, cores, topografia, interações, etc. Você pode verificá-los permitidos sobre o material que eu devo. Sítio Web. Não há como negar o fato de que o crescimento e o desenvolvimento mais rápidos estão no mundo dos dispositivos móveis . Tem repercussões significativas para Web projetado para, com ênfase na palavra design. mudança de comunicação visual iniciada pelo design da APP móvel está fazendo seu caminho para o Web design , bem como, e tudo começou com a mudança de logotipo do Instagram. O design contemporâneo geralmente usa cores mais e mais brilhantes. Juntos, ele tem Grady INTs estão de volta, mas eles são consignos e um pouco sutil. Muitas vezes, eles são orados com ícones simples de design plano e tipografia proeminente. O que é interessante? Radiance estão fazendo seu ícone do dedo do pé caminho e design de logotipo também. Mas como sempre, no caso de Grady INTs, você tem que ter muito cuidado para não ir ao mar com eles. Felizmente, existem ferramentas on-line que podem ajudá-lo a criar ingredientes de boa aparência para seus projetos Web . O melhor exemplo é uma ferramenta chamada U I Grady ints dot com. Aqui você encontrará uma fantástica coleção de lindos Grady INTs, juntamente com os códigos de cores para Easy Implementation, um dos elementos de crescimento mais rápido no design do site. Leste. O uso fora de vídeo de imagens em movimento em tela cheia muitas vezes usado como fundos em vez de imagens para pop-ups e vídeo incorporado de vídeo de mídia social é um deve ter quando se trata de conteúdo. O uso mais difundido de vídeo é que ele está sendo exibido como o fundo nas seções de heróis dos sites. A melhor maneira de usar o vídeo neste formato é torná-lo complementar à mensagem e um apelo à ação que estão sendo colocados sobre o vídeo. Mas às vezes, especialmente em sites pessoais, os vídeos são desobstruídos por qualquer visual. Eles são meio fora apresentação fora do proprietário do site. Há também vídeos que, de certa forma, imitam imagens estáticas. O movimento do site é limitado. Imagine vento soprando nas árvores, tornando-os perfeitos como vídeos de fundo, mas acrescentou que algo especial extra para o design sem ser distraído. Internet diz que o vídeo é o rei nos dias de hoje. É bem possível que em algum momento do seu design, carreira seja solicitada a projetar um site que esteja usando vídeo em algum formato. É por isso que é uma boa ideia dar uma olhada mais de perto nessa tendência. Cada vez mais designers aceitam o fato de que eles realmente precisam pensar sobre seus projetos como sendo vistos com mais freqüência em telas de smartphones em vez de laptops. Isso implica uma mudança total no desenvolvimento de seus projetos. A versão desktop do site torna-se Onley, uma derivada de seu original móvel. Esse designer deve perguntar a ele ou a si mesma. Uma questão fundamental vai ficar bem apenas smartphone. Mas a questão pode eventualmente mudar no futuro com o desenvolvimento fora wearables. Talvez seja hora de começar a nos perguntar, Será que ficará bem em um smartwatch? O que nos leva ao último aluguel da nossa lista, que são cartões que eu desenho. A idéia por trás dos cartões é encher o conteúdo em pequenos contêineres para torná-lo dispositivo cruzado . De smartwatches a desktops grandes. Cada contêiner é um conjunto de informações sobre uma idéia específica. A interface é simplificada e facilmente compreensível. Esta abordagem também é usada em muitos blogs modernos, onde um artigo na página de destino tem seu próprio módulo. Estas são as sete tendências mais importantes em Web design hoje. É uma boa idéia estar ciente deles, pois eles não são apenas sobre visuais, mas eles são conceitos bastante completos fora da entrega de conteúdo eficaz para os usuários. Em seguida, você vai dar uma olhada em alguns lugares ao redor da Web onde você pode encontrar alguma grande inspiração Web design 21. 7.2Onde encontrar a inspiração to para seu próximo design: Neste vídeo, vamos dar uma olhada em alguns lugares ao redor da Web onde você vai encontrar grande inspiração seu próximo projeto de Web design. O primeiro site que eu recomendaria é chamado de palavras ponto com soletrado com um duplo triplo você para www. Aqui, você encontrará muitos exemplos de design diferentes coletados em categorias como ilustração, blogs corporativos, etc. Se você gosta de um design específico, você pode visitar o site de origem e dar uma olhada em como eles são construídos. O que, se houver, tendências lá seguindo e simplesmente aprender com o melhor segundo site que eu recomendaria é um mercado tema WordPress chamado tema floresta dot net. Aqui você vai encontrar não apenas temas WordPress, mas também projetos laterais codificados HTML. É um enorme repositório de desenhos diferentes para sua inspiração. Você pode escolher entre muitas categorias diferentes, e você também pode visualizar como um determinado design funciona no mundo real. Você também pode visitar Web design inspiração dot com aqui, mesmo também apenas tags e categorias específicas que você deseja classificar seus projetos por. É um grande recurso de vários projetos. Eu acho que é a variedade que é o aspecto mais importante deste repositório Web design vilified lotes e lotes fora Web design inspiração repositórios em torno da Web. Se esses três não são suficientes para você, embora eu ache que, para começar, eles vão fazer muito bem, você pode apenas Google Web design, inspiração e imenso no mundo do Web design. Eu acho que agora você tem apenas nenhuma lista suficiente para começar a criar seus próprios projetos. Você conhece os princípios que conhece, as tendências e onde procurar inspiração. A próxima parte é começar a usar o designer de afinidade para fazer suas idéias ganharem vida. 22. 8.1Todo design de site de site de de , precisa de 8.1Every: a partir de um típico ponto de vista de designers ansiosos. Criar um quadro de arame para um design de site é tão chato quanto redundante. Bem, isso não é verdade. Na verdade, um quadro de arame pode ajudar tremendamente a acelerar seu fluxo de trabalho, e isso pode economizar muito tempo. Muitas idéias que parecem ótimas em sua cabeça quando você está imaginando eles tendem a parecer mal quando colocado em uma tela de computador. E confie em mim, eu sei disso por experiência própria, mas o que é uma armação de arame, e por que estou fazendo um grande negócio sobre isso? Quadros de fio são versões esquemáticas de sites que ajudam na visualização dos blocos de construção dos sites. Há uma tonelada off plugins, ferramentas on-line e recurso é pago e gratuito que para ajudá-lo na criação de arames. Mas em apenas um segundo, vamos projetar nossa própria biblioteca de arame, ou pelo menos os elementos essenciais de um quadro de arame, e então vamos importá-los para nossa biblioteca de ativos. Mas primeiro, vamos dissecar a idéia de enquadramento de arame e sua aplicação prática. Para começar, você pode querer criar caixas simples que correspondam aos elementos dos sites. É uma boa idéia colocá-lo contra um bem que você já está familiarizado com esta fase preliminar é a maneira mais básica de sair. Construindo um andaime site Pense nisso é um simples rabisco que é suposto para mostrar-lhe se o que está em sua cabeça vai ficar bem no papel ou na tela. As caixas mais típicas seriam representando uma seção de heróis de navegação Brandon Element, imagem , banners , rodapé, etc. O próximo passo seria construir para a hierarquia de informações com o tipo. Nesta fase, sua escolha de fonte não é tão importante quanto o uso de diferentes tamanhos de fundos para mostrar as diferenças de importância dos elementos dos sites. Normalmente, os elementos mais importantes serão apresentados para usar em um tamanho de fonte maior, e os elementos menos importantes serão apresentados usando um tamanho de fonte menor. próximo passo para enfatizar a importância dos elementos dos sites é usando diferentes tons de cinza. A regra geral diz que cores mais escuras significam mawr. Elementos importantes e cores mais claras significam elementos menos importantes. Então é assim que um quadro de arame típico se parece. Eu acho que é uma boa idéia ter sua própria biblioteca de arame para que você possa usá-lo sempre que você estiver projetando um site. O Affinity Designer permite que você crie seus próprios elementos de enquadramento de fio e os coloque em grupos separados de ativos. Vamos dar uma olhada no processo de construção desses elementos em afinidade. Designer. 23. 8.2Como criar seu próprio wireframe no designer: ao construir seu próprio sistema de arame, eu acho que você deve começar com os elementos que você é mais provável de estar usando em um cenário típico de Web design. Quero dizer, se você quiser você pode um credo, todos os elementos que você pode imaginar. Mas eu acho que se você criar os elementos essenciais primeiro, teremos uma ótima base para construir e expandir armações de arame. Mas quais são esses elementos essenciais? Eu acho que vamos começar com uma marca no bloco de navegação, junto com um menu de hambúrguer, um bloco de seção herói gabar-se, um texto horizontal e divisor de fundo. Icahn Sidebar e um rodapé. Hoje em dia, pode ser uma boa idéia criar um fio de vídeo de elementos para por motivos com os quais você já está familiarizado. Então, vamos construir nossa biblioteca de arame essencial. Quero que considere isso como um ponto de partida para construir sua própria biblioteca. Quero que aprendas o processo e a lógica por trás disso. Isso permitirá que você crie seus próprios quadros de arame extensos. Eu tenho um documento Full HD simples já criado, mas honestamente, quaisquer documentos, sinais que me permitissem criar sua obra de arte confortavelmente ficará bem. Note, no entanto, que eu não decidi criar um quadro de arte para este tipo de trabalho de desenho. Não acho que um quadro de arte seja necessário. Eu também vou me certificar de que o U I Snap em Leste predefinido ligado. Vou começar com a criação de um bloco de imagem. Este será usado em muitos elementos, então eu acho que é bastante lógico começar com ele. Vou pegar a ferramenta de retângulo e criar um retângulo no painel de transformação. Vou inserir 16 para com e 94 altura, e eu estou fazendo isso porque 16 por nove proporção é a taxa de aspecto da tela mais típica. E as imagens em um site geralmente são exibidas dessa maneira, assim como os vídeos. Claro, é muito pequeno tubo utilizável, então eu vou olhar suas proporções no painel de transformação e aumentar o tamanho fora do retângulo. Mas o fato de que começamos com o 16 por nove pixels fará com que o novo inimigo retângulo que 16 por nove proporção. Eu não quero que nós tenhamos nenhum traço, mas eu quero ter um cinza bem mais escuro, Phil uma vez que é criado, eu vou desenhar duas linhas que vão indicar que para isso, na verdade, é um elemento de imagem. Então eu vou pegar a caneta tal e colocá-lo no modo de desenho de linha. Eu vou alegria, linha simples que vai ter um golpe branco de um ponto. E sem Phil, claro, vou baixar a opacidade para cerca de 25 a 30%. Por último, vamos copiar a linha e baseá-la de volta. Então vamos virar horizontalmente, usando o painel de contexto. Tudo o que resta a fazer é trazê-lo para nossa biblioteca de ativos. E, a propósito, se você não tiver a biblioteca de ativos ativada, basta ir para Exibir e, em seguida, Studio e escolher ativos no painel de ativos. Vou criar uma nova categoria, que vou renomear como quadro de arame. Agora eu posso apenas selecionar a imagem e no menu do painel escolher e da seleção para começar a construir sua biblioteca. E assim, criamos o primeiro elemento, e já começamos a construir a biblioteca. Vamos continuar, entanto, no próximo vídeo 24. 8.3Vamos continuar a criar a biblioteca: Vou começar criando um elemento de anel de esposa de vídeo. E para isso eu vou clonar o elemento de imagem e me livrar das linhas internas. Agora vamos criar um símbolo de botão de reprodução para isso. Vamos pegar sua ferramenta triângulo e criado triângulo que teremos que girar e re tamanho um pouco. Quando isso acabar, vai dar um Phil branco. Solte a opacidade para 25% e alinhe-a com o retângulo. Vamos agrupar esses caras para que agora possamos adicioná-los à nossa biblioteca de quadros de arame, assim como adicionamos ao elemento de imagem. Agora vamos criar uma imagem e texto elemento combinado. Mais uma vez, vou reutilizar a imagem que já tenho, mas vou adicionar um título e elementos de trecho a ela. Para isso, vou pegar a ferramenta de texto do quadro e desenhar uma caixa de texto que será tão Zweig quanto a imagem. Eu não vou corrigir nenhum texto em, mas eu vou usar a opção inserir texto de preenchimento em vez disso. Claro, é uma boa idéia fazer o título parecer um título real, então eu vou mudar a fonte junto com seu tamanho e estilo. Vou cloná-lo agora e mudar a família da frente, estilo do Sonny e a liderança também. Assim, com esta parte pode parecer mais um trecho de post Blawg. O benefício de criar este elemento dessa maneira específica é que depois de transformá-lo em um grupo e, em seguida, em um ativo e, em seguida, arrastá-lo para a página, eu não posso redimensioná-lo e deixar o software preencher os quadros de texto com texto. E ainda assim, se eu quiser, posso redimensionar os quadros de texto, encolher ou expandir o título e o trecho de texto, e isso é muito útil. Próximo elemento irá criar é que eles vão logotipo novamente. Vou usar o elemento de imagem, mas desta vez vou transformá-lo em um quadrado. Eu também vou adicionar uma palavra no lado direito dela. Agora vou agrupar esses caras e os transformei em um recurso. Em seguida, criará um sistema de navegação. Bem, isso é mais fácil em um pedaço de editor de texto, em seguida, duplicá-lo. Eles são divertidos de usar para o Manual Inc não deve ser muito grande nem ousado. Vamos também criar um menu de hambúrguer. E essas são as três linhas horizontais que cobrem o homem principal. Você se lembra? Ok, ótimo. Vamos agarrar a caneta tal e, em seguida, certifique-se de que está no modo de linha criou uma linha simples que vai ter um dois pontos alguém para acidente vascular cerebral escuro e nenhum Phil. Quando isso terminar, vamos duplicar a linha duas vezes e transformar nosso manual de hambúrguer em um recurso. Nossa próxima ordem de negócios é criar uma seção de heróis, e isso nos dará a oportunidade de aproveitar uma grande flexibilidade quando se trata de criar ativos dentro de um designer. Eu estava preso em emprestar o ativo de imagem e em grande, e isso um pouco. Em seguida, vamos criar um cabeçalho grande e negrito escrito em contraste, em cores claras, seguido por algum corpo de texto menor. O último sotaque aqui seria adicionar uma chamada à ação. Então vamos criar um botão usando a ferramenta de retângulo e a ferramenta de texto, é claro, claro, que irá agrupar os elementos do botão e, em seguida, agrupar peças antigas exceto para o fundo, mas uma linha tudo bem para o meio da imagem de fundo. Se nós sabemos grupo todos esses elementos enfraquecer, transformá-los em um elemento de arame herói, mas se nós mantê-los separados, podemos inseri-los para os ativos separadamente, que nos permite ter um ativo herói e separar elementos como um título inferior qualquer peça fora do corpo tributado. Bem, isso é muito útil, não acha? Com todos esses elementos, agora podemos criar um item de recurso. Você pode arrastar o ativo de imagem para o painel de colagem e, em seguida, o título e seu corpo tributados. Agora é apenas uma questão de transformar o elemento de imagem em um quadrado e mudar na frente do título e corpo tributado para fazer isso enquanto o elemento de quadro funciona. - Não , temos praticamente todos os elementos que precisamos para montar um site de arame. Ocasionalmente, teremos que usar a ferramenta de retângulo para criar um plano por concessão, e se você quiser, você pode criar elementos de arame retangular. Mas vou ficar com os blocos essenciais e criar fundos à medida que vou. Então, vamos realmente fazer isso. Vamos dar uma olhada na adição de fio de elementos para criar uma visão esquemática do nosso site 25. 8.4Como usar os ativos para criar um wireframe: Uma vez que todos os seus ativos são criados, eles estão prontos e esperando que você os use para construir sua estrutura de arame. Neste vídeo, vamos dar uma olhada em como praticamente usar seus ativos para criar um quadro de arame. O processo é super fácil e agradável. Eu recomendaria usar uma grade como base para sua armação de arame. É uma boa ideia simular um cenário de Web design real ao criar um quadro de arame. No entanto, se for um quadro de arame muito, muito preliminar, se você quiser apenas tirar a sensação do projeto, você não precisa absolutamente usar a grade. Vamos começar com a criação da seção de cabeçalho. Vou trazer o Brandon e os blocos de navegação e posicioná-los corretamente, deixando uma quantidade decente de espaço em branco em cima e em baixo. Não, ele é rapidamente criar um fundo claro para o nosso chapeleiro primeiro todos os elementos de cabeçalho e inicializou a opção de inserção atrás de seleção na barra de ferramentas. Agora, quando eu começar a criar ângulo ereto esticando toda a página, você pode ver que ele é inserido atrás dos elementos mais pesados. A última coisa a fazer seria alinhar tudo bem ao grupo central todos os elementos e renomeá-los como Cabeçalho No. Vamos entrar na seção de heróis do site. provavelmente este ativo vai precisar de algum ajuste fino. Por exemplo, você pode querer expandir ou contratar. Você pode querer mudar a posição dos elementos e talvez o tamanho do telefone, também. A beleza fora para trabalhar com ativos em effin em designer é que você pode facilmente selecionar elementos dentro de grupos clicando duas vezes sobre eles e alterá-los como você mudaria objetos regulares. Vou começar a próxima seção adicionando outro título e um subtítulo. Esses caras também podem precisar de alguns tweets, dependendo de como você os criou antes. Eles podem precisar de sua cor de fundo para ser alterada. Tamanho ajustado. Talvez nós vamos querer mudar o alinhamento da esquerda para o centro lá realmente flexível e em efeito. Se você decidir que pode precisar deles na biblioteca de ativos de quadro esposa, basta agrupá-los e adicioná-los ao painel de ativos. Sim, você pode criar ativos diferentes fora de ativos já existentes. Ninguém liberando alguns itens em destaque. Vou criar duas linhas com quatro itens em cada um deles Eu vou trazer em um dos itens em destaque e ajustá-lo até que pareça exatamente do jeito que eu queria. E como eu quero ter quatro deles em uma fileira, um item não pode exceder três colunas do nosso grande. Uma vez criado, vou apenas duplicar ele tenta para a direita e, em seguida, todos eles uma vez para o fundo. Por fim, vou selecionar todas as peças, agrupá-las e desenhar um fundo abaixo delas, usando a mesma técnica que com o fundo para o cabeçalho. Agora posso renomear esta seção e chamá-la de algo como destaque. Mas você pode nomeá-lo qualquer coisa que tornaria esta seção facilmente reconhecível. A próxima seção que podemos criar poderia ser um de nosso tipo blawg de uma seção. Então vamos trazer o cabeçalho da seção e ajustado dele para os gabinetes de bloco, podemos usar os itens em destaque, elementos ou artigos blawg. Esta é apenas mais uma prova de quão flexível este programa é. Quero dizer, você pode pegar o item em destaque, fazer a imagem ir à esquerda e o texto à direita enquanto preserva int como um ativo. Eu quero ter apenas para bloquear gabaritos em cada linha, modo que um post não pode exceder seis colunas. Eu também quero ter que levantar orgulho, que possamos apenas clonar o canto superior. - Claro , como antes, podemos saber agrupar todas essas peças e criar um fundo um pouco mais escuro para a ação blocos . Você poderia até experimentar colocar elementos claros em um fundo escuro, mas por enquanto, eu vou mantê-lo simples. - A última parte vai criar é a seção rodapé. Os rodapés geralmente têm um fundo distinto e são feriados bastante grandes. Eles podem manter o logotipo e o slogan da empresa. Alguns links, incluindo Social Media, Ling Instagram, feeds, extractos, etc. Desta vez vou começar com a criação de um fundo mais escuro no qual vou colocar os elementos do rodapé no lado esquerdo. Vou adicionar o bloco de imagem que representaria o logotipo. Ele pode precisar de alguns ajustes de cor, por isso é facilmente visível contra o fundo mais escuro abaixo dele. Vou adicionar alguns tributados que poderia ser o extrato sobre EUA para algumas informações adicionais. Quero dizer, é apenas uma armação de arame, então estamos apenas testando a colocação de certos elementos, não tentando criar o design final. Eu vou criar uma variação de no instagram feed extrato no passeio, e eu vou construí-lo, usando o ativo de imagem que eu posso redimensionar ligeiramente se eu precisar, e eu vou criar duas linhas de imagens aqui Sob ele, eu irá adicionar outro pedaço de texto e alguns pequenos elementos de imagem representando as mídias sociais. Do Aiken. - A última etapa seria agrupar todos os elementos de rodapé e nomear o grupo recém-criado corretamente. E lá vamos nós. Criamos o nosso próprio quadro de arame. Queria mostrar-lhe o processo de construir uma estrutura de arame com ativos que você mesmo pode criar. Imagine o quão intrincados seus quadros de esposa podem ser se você gastasse algum tempo projetando ativos bonitos. À medida que você ficar bom na criação de quadros de arame, você adicionará mais e mais elementos à sua biblioteca. E em breve você terá todos os elementos necessários para criar quadros y, com zero a pouco ajustes necessários. Mas se você não sentir vontade de criar suas próprias bibliotecas de um quadro de fio, você sempre pode procurar algumas ferramentas e recursos estão on-line. Eles têm suas limitações, mas é uma boa idéia saber como eles funcionam e verificar. Se você quiser usá-los em seu próprio fluxo de trabalho de Web design, e nós os exploraremos em seguida 26. 8.5Wireframe online: Há um monte de ferramentas, e recurso é on-line que você pode usar para construir seus próprios quadros esposa e protótipos. O problema com eles é que a maioria dos que você provavelmente encontrará são pagos . Eles têm algumas capacidades livres limitadas. Mas para descobrir seu verdadeiro potencial, você tem que pagar na maioria dos casos, uma taxa recorrente. Há um. Até que você pode querer dar uma olhada no que é chamado wire frame dot cc, e ele permite que você crie rapidamente protótipos fora de sites. Se você quiser usá-lo, eu recomendo começar com a alteração de algumas configurações. Em primeiro lugar, você pode optar por exibir um grão 12 Colin, que sempre é uma boa idéia, e em segundo lugar, eu recomendo alterar a largura e a altura do quadro de arame na parte inferior da guia de configurações. A única coisa que você tem que fazer para começar a construir uma esposa a partir daqui é começar a desenhar. A ferramenta mostrará uma caixa de opções para escolher. Você pode transformar o seu desenhado em uma caixa dext imagem lista parágrafo, etc. Você pode agrupar os elementos que você criou e até mesmo organizá-los corretamente, se necessário. Uma grande desvantagem das fezes que só parece ser completamente livre é que, a fim de compartilhar ou para baixo com o quadro da sua esposa, você teria que se inscrever para o seu serviço. E se você quiser fazer isso serão meus convidados. Mas há outras maneiras de acelerar a armação do fio em processo. Se você google modelos de quadro de fio livre, você vai encontrar um monte fora quadro de fio livre. O recurso é baixar e utilizar em suas próprias bibliotecas de arame. Quero dizer, se você não sente vontade de construir o seu próprio, vamos realmente dar uma olhada em criar uma biblioteca de arame a partir desses elementos prontos antes de começarmos. Eu acho que vale a pena gerenciar que, se o arquivo que você baixou for um arquivo PSD, você ficará feliz em descobrir que abrir é um pedaço de bolo para o designer. Mesmo que seja um arquivo ilustrativo. Ofendido, o designer abrirá sem um segundo de hesitação. A maioria destes pronto fez um wire frame repositórios irá conter elementos que você pode usar para construir suas próprias bibliotecas. Você pode grandes aqueles que você gosta e fazê-los juntos para atordoadores. Agarrou o painel de ativos e criar uma nova categoria. Renomeie ao seu gosto. Mas graça nome um pouco descritivo. Não. Você pode apenas um arrastar e soltar os elementos que você precisa e gosta para a biblioteca para que você possa usá-los mais tarde. Claro que todo este processo é opcional. Quero dizer, se você quiser, você pode apenas deixar o arquivo como está e copiar e colar os elementos que você precisa sobre o seu arquivo de arame. Eatherly funciona, e será sua tarefa decidir qual deles se adapta ao seu fluxo de trabalho específico. Eu, no entanto, recomendo usar o painel de ativos, pois você sempre pode mantê-los à mão em seu espaço de trabalho, e você não precisa procurar aqueles enquanto de arquivos de quadro de fio. Então eu acho que nós temos o arame e a matéria muito bem cobertos. Podemos passar para outro aspecto importante em nos prepararmos para começar a projetar, que é escolher e otimizar imagens, e eu vem 27. 8.6Vamos falar sobre imagens e ícones: é difícil imaginar um site sem imagens e outros elementos gráficos. É verdade existem alguns projetos que usam a tipografia Onley, mas eles são projetos muito, muito neech. As chances são de que em sua carreira como Web designer, você estará usando imagens em seus projetos e você estará usando-as muito. É essencial saber como lidar com eles em seus projetos. Então vamos explorar o assunto agora. A maneira mais fácil de adicionar uma imagem em afinidade. O designer é dito para usar o lugar. Ferramenta de imagem. Depois de clicar nele, você será solicitado a selecionar uma imagem que deseja colocar. É um, a propósito, o mesmo que escolher o comando place no menu de arquivo. Se você estava usando uma versão mais antiga fora do ilustrador antes dado designers tiro, você provavelmente tem sido frustrado silencioso muito sempre que você quer que ele para cortar uma imagem porque , bem, não havia onde você poderia fazê-lo sem usar uma máscara de recorte. Um designer de móveis vem com uma colheita fatorial. Vai que pode cortar imagens de forma fácil e rápida. Tudo o que você precisa fazer é pegar a caixa delimitadora por qualquer uma de suas bordas e simplesmente arrastar. Mas isso não é tudo que você pode reposicionar livremente a imagem dentro da nova caixa delimitadora, e uma vez que você está satisfeito com a operação, você pode apenas rapidamente proteger apenas esta imagem usando a função de exportação no Aqui. Você pode escolher quais formatos de arquivo você deseja ir com, mas eu recomendaria manter os arquivos. Ex-nativo. Quero dizer, se for uma picareta J, basta escolher J. Pick e talvez baixar a qualidade para cerca de 75%. Este será um bom limite entre um tamanho de arquivo razoável e uma boa qualidade de imagem. Basta lembrar de escolher a seleção sem fundo como a área que você deseja exportar quando as imagens mais antigas estiverem prontas, aconselhar você a compactá-las ainda mais. É extremamente importante para a velocidade geral da página, que afeta a pesquisa e otimização em palavras simples que o Google gosta. Quando as imagens na página são bem otimizadas, há muitas ferramentas on-line que podem ajudá-lo a otimizar suas imagens. Sobre o que eu tendem a usar mais é chamado minúsculo J p g dot com para tirar proveito de suas capacidades de compressão. Simplesmente dragão imagem na janela e letra que ferramenta fazer a sua magia. Agora vamos falar brevemente sobre lugares na Web onde você pode encontrar imagens de boa qualidade gratuitamente . É uma situação perfeita quando seu cliente quer pagar por imagens de ações. Mas, felizmente, existem repositórios online com boas imagens gratuitas que você pode sugerir como uma alternativa. Meu lugar favorito para fotos stock grátis é o sinal chamado pixels dot com. É uma grande fonte de fotos extraídas de outros repositórios de fotos, então você não precisa navegar em todos os serviços de fotos STUCK para encontrar imagens que você está procurando. Basta digitar a palavra-chave que você precisa e escolher entre dezenas de imagens de alta qualidade. Quanto a Aikens, Onley tendem a usar ícone plano ponto com o mais. É um ótimo site gratuitamente para usar ícones de alta qualidade para o seu projeto de Web design. Quando você encontrou uma Nikon, você gosta. Você pode colocá-lo em uma coleção ou visualizá-lo, e se você quiser, você pode baixá-lo neste local com conselhos. Choosen s v. G. Quanto ao tipo de arquivo. É um tipo de arquivo de fator padrão que funcionará muito bem em qualquer tipo de aplicativo de design. Eu também visitar livre pick dot com, que é um enorme repositório fora de todos os tipos off recurso de design é imagens, ícones. Pia são esses vetores, etc. Não, porém, que alguns deles são pagos. Então é assim que você pode trabalhar com as imagens dentro do ajuste no designer. É claro que, à medida que avançamos para a parte de design do curso, você verá alguns exemplos reais de manipulação de imagens em um cenário de Web design. Por enquanto, eu só quero que você lembre que você pode importá-los com a ferramenta de imagem local. Você vai cortá-los com a ferramenta de corte fator, e você pode exportá-los usando o comando export. Vamos agora passar para a última parte do estágio de preparação, que é a criação de estilos de texto. 28. 8.7Como criar estilos de fonte no Affinity Designer: estilos de texto em designer ofendido são uma ótima maneira de acelerar um processo de Web design. Se você é um fã desligado, altere os conjuntos de fontes muito rapidamente. Visualize diferentes variações do seu design. Você vai adorar estilos de texto. Como criar um estilo de texto com base nas características de um pedaço de texto que você já digitou. Basta selecionar esse texto e, em seguida, ir para o painel de estilos de texto e escolher o estilo que deseja criar. Ter uma caixa de diálogo que aparece imediatamente permite ajustar todas as opções de caracteres e parágrafos que você pode acessar nos painéis de caracteres e parágrafos. É melhor começar com a inserção do nome dos estilos, e eu sugiro torná-lo um pouco descritivo. Seu estilo de texto será mostrado no painel Estilos de texto, portanto, dado um nome facilmente distinguível, tornará o processo de design mais rápido. Uma boa técnica de produção é nomear seu estilo com base em suas características mais importantes. Se, por exemplo, você quiser que o estilo de texto use o fundo Roboto Condensed, tenha ah, somente caracteres verdes com 32 pontos de tamanho colocarão essa informação como o nome do estilo de texto . Quando terminar seu texto, estarei pronto e esperando que você o aplique a qualquer pedaço de texto que desejar. O processo de criação de estilos de texto no designer Afinitor é realmente flexível. Você não precisa absolutamente ter alguns criados anteriormente tributados para criar um estilo de texto fora dele. Você pode simplesmente pressionar qualquer um dos botões de estilo de texto saudação no painel de estilos de texto e escolher seu tipo de desejo na lista. E se você precisa mudar algumas coisas sobre seu estilo de texto, mas você foi para preservar o original, é melhor simplesmente duplicar e para o estilo de texto duplicado, clique com o botão direito sobre ele e escolha duplicar. A mesma caixa de diálogo irá aparecer onde você pode inserir os ajustes que você ish sem um fato no estilo de texto original. Por padrão, o estilo de texto duplicado terá um Suffolk numérico. Então, novamente, é uma boa idéia começar com a mudança de seu nome para excluir um estilo de texto clique com o botão direito sobre ele e escolha, exclua ou pressione o lixo que eu considerei no canto inferior direito do painel. Criar e gerenciar estilos de texto no designer Afinitor é um processo simples, e por isso é ensolarado em estilos de texto para o seu texto. Tenho certeza de que uma vez que você começar a criar muitos projetos de sites fora, você vai achá-los essenciais no seu dia a dia. Estilos de texto de rotina concluíram essa fase de preparação do processo de Web design. Agora você tem o conhecimento sobre todas as ferramentas e técnicas que são essenciais para projetar um site na afinidade Designer. Então vamos começar a parte de design. 29. 9.1A visão de design: bem-vindo ao design de parte do curso. Nos próximos vídeos, você aprenderá a projetar esta página de destino usando afinidade, designers, ferramentas, técnicas e alguns truques. Mas antes de entrarmos no design e no processo de design, deixe-me quebrar esse projeto rapidamente para você. Então aqui no topo, você pode ver o cabeçalho, e chegamos ao logotipo à esquerda que é basicamente apenas algumas letras, um pedaço de texto com os Grady INTs adicionados a ele. E quando vamos criar este solo, você vai aprender a adicionar ingredientes para a vida Fundo para a vida. Texto no Designer de afinidade à direita. Temos a navegação junto com eles batted um ícones de mídia social. Esses caras aqui são todos como arquivos V g, e logo você vai aprender como em mau como V g rápido, como esses ícones sociais e como trabalhar com eles dentro de um sentimento para designer sob o cabeçalho que temos para esta seção herói aqui, esta grande imagem no fundo, com algum pequeno retângulo sendo colocado sobre o seu para tornar esta imagem um pouco mais escura. Nós, é claro, temos este grande pedaço de tipografia bem aqui. E tiramos essa pequena peça de um controle deslizante. Navegação. Quero dizer, eu pensei que se você quiser criar um controle deslizante para o seu para seus projetos é uma boa idéia para alertar como criar uma pequena navegação para um para uma seção de controle deslizante. Em seguida, temos outra seção com esses itens em destaque aqui. Claro que, antes disso, temos esse grande divisor com algum cabeçalho de seção e algum texto de subtítulo e chegamos a esses ícones de ajuda aqui, divididos em duas linhas. E para colunas bem aqui eu deixei o texto para o mesmo para cada um desses pedaços. As peças em destaque itens porque eu pensei que, hum, você sabe, digitar tudo em ah tipo em novas palavras novas frases seria apenas redundante. Eso eu apenas copiei o texto e, em seguida, apenas substituí-los esses ícones e aqueles dois como apenas como os ícones aqui no cabeçalho. Eles são dois. Eles são como v g elementos embutidos neste documento. Então, novamente você vai aprender a incorporar como V g m ícones como estes em um documento de designer infinito . Em seguida, temos outra seção que seria como um divisor entre os itens em destaque e bem, a próxima seção que está vindo aqui. Como você pode ver que uma grande imagem à esquerda e temos alguns simples tributados à direita com um fundo escuro. Este é um outro talvez não uma tendência inteira, mas um pedaço fora da tendência e que é estar usando Web design agora. Digo, dividindo a página inteira em duas seções e colocando um pouco, bem , uma imagem de um lado e outra parte. Um pedaço de texto do outro lado. Bem, isso é apenas uma das tendências do designer agora. Em seguida, chegamos a algo como um de nossos blocos ação. Então eu criei uma seção mais leve bem aqui com um fundo mais leve. Eu adicionei algumas imagens à esquerda e esses caras, como você pode ver nossos quadrados e adicionar essas imagens nos permitirá aprender outra técnica para trabalhar com imagens dentro. Se gosta de designer com esses caras, esta imagem bem aqui, esta grande imagem na seção de heróis. Bem, esses caras estavam indo usar a ferramenta de cultivo fator. Mas com esses caras, bem, nós vamos usar Bem, é uma técnica ligeiramente diferente na criação de imagens perfeitas para a sua imagem bem destaque no bloco post para o seu bloco Post trechos como esses caras aqui. Então temos um tipo de feed do Instagram que eu queria. Queria fazer com que parecesse um feed do Instagram. E, na verdade, aqui vamos aprender como adicionar imagens e como usar máscara de recorte dentro, ofendendo ao designer. E esta será outra, eu acho, terceira técnica usando imagens dentro de um designer de móveis. Eu prometi a você que, quando chegarmos à parte de design do curso, você aprenderá a usar praticamente imagens dentro do designer de afinidade ao projetar sites. E essas três técnicas, eu acho que será um pensamento vai satisfazer a sua fome por técnicas de manipulação de imagem . Em seguida, temos um rodapé bem aqui que, como você pode ver, tem uma cor de fundo completamente diferente, completamente diferente. Eu queria fazer isso realmente contrastar. Eu queria destacá-lo neste design e nós temos as três seções com algumas com alguns links e algum texto bem aqui. E, claro, essas linhas divisórias, linhas horizontais e todo o projeto é terminado com o poço, uma repetição do nosso cabeçalho, mas é muito menor. O logotipo é menor, a navegação é menor e todo o fundo do Chapeleiro também é menor. Então acho que podemos começar a desenhar. Mas antes de começarmos a projetar, teremos que dar uma olhada nos ativos que temos à nossa disposição. Teremos que criar alguns estilos de texto para facilitar o nosso trabalho. Teremos que criar algumas amostras de cores também, e teremos que dar uma olhada em nossas imagens e eu venho para que saibamos o que temos à nossa disposição e o que usaremos dentro deste design. Então vamos realmente dar uma olhada para dar uma olhada em como dedo se preparar para projetar um site como este 30. 9.2Vamos criar as amostras de cores: O documento que vamos usar para o nosso design é exatamente o mesmo documento que criamos quando estávamos aprendendo sobre o grão de 12 colunas. Mas não é apenas a coragem que vamos usar para fazer este projeto acontecer. São também algumas cores, topografia, ícones, imagens, todas as coisas boas que precisamos para fazer dela o site do design acontecer. Então deixe-me esconder a grade por um segundo e deixe-me trazer esses caras para cima. Como você pode ver, eu tenho canções coloridas aqui, e eu tenho um fundo escuro aqui em baixo. Então os quadrados serão uma base para nossas amostras de cores. E aqui em baixo eu tenho um fundo escuro que em um segundo vai ser bem povoado com alguma tipografia. E eu fiz este fundo escuro porque, como você pode ver no design original, maior parte da nossa tipografia aqui é um cheio com uma cor fora de largura. Então eu acho que seria mais fácil para você ver que fora da cor branca contra um fundo mais escuro fora do curso, nós também temos alguns pedaços de texto mais escuros e escuros, mas nós vamos cuidar desses caras mais tarde, então eu sou começará com a criação de uma nova paleta de Amostras. Então, como você pode ver aqui no painel de amostras, podemos escolher anúncio será aplicativo ou uma paleta de documentos. A diferença entre esses dois caras é que se adicionarmos uma aplicação de paladar, as amostras de cores estarão disponíveis. E toda vez que você criar em seu documento, e se você apenas adicionar uma paleta de documentos, esse grupo de amostras de cores estará disponível no Lee com este documento específico. Então, na verdade, eu vou criar apenas uma paleta de documentos assim. E como você pode ver por padrão é, está frio. Bem, na verdade, é chamado no nome, então é assim não está muito frio. Então eu vou renomear essa paleta, e eu vou chamá-la de algo como, talvez nos tenha criado. Este é o nome do site. Vamos colocar assim agora. A parte do conjunto sobre criar as cores dentro, se dentro do designer do quadrado existente para que você possa ter, é que você tem que fazer isso um por um, então eu não posso simplesmente pegar todos esses caras e apenas talvez, como, colocá-los aqui ou escolher alguns, escolha alguma opção no menu para adicionar todos esses caras um amostras separadas. Infelizmente, existem maneiras de criar chamadas de todo o documento. Mas desde que temos um Grady int classificar você aqui, bem, grande infill, se no mundo do designer iria adicionar um monte de diferentes as cores que estão entre a esquerda , parte da tia-avó e o parte direita do grande, e eu realmente não quero que nós queremos apenas cores simples SWAT. Então eu vou pegar este primeiro preenchimento radiante bem aqui. E eu vou simplesmente clicar neste ícone de paleta que diz no Phil para paladar, assim como eu vou ser Eu vou adicionar todas essas cores restantes para minha paleta de amostras , assim como assim. E uma vez que eu terminar, eu tenho minhas amostras de cores que são chamadas Criado, e eu posso usá-las dentro deste documento. Não, claro que não precisarei mais desses retângulos. Posso deletá-los. E agora, se eu apenas criar um poço é retângulo simples. Eu posso usar qualquer fora das minhas cores exatamente como então Ok, então agora que temos nossas cores criadas, agora podemos passar a criar os estilos de texto que vamos usar para o nosso design . E como você pode ver, há o que um monte de cores diferentes significará que cores, mas estilos acontecendo aqui mesmo . Mas acho que podemos começar a criar os têxteis no próximo vídeo. 31. 9.3Vamos criar os estilos de texto: este design fora do curso ficaria muito triste se ele não tivesse um monte de imagens e ícones. Então preparei algumas imagens para você. E claro, você vai encontrar esses caras bem em uma pasta que eu vou ligar Teoh dentro deste poço, a descrição do curso. Então, se você quiser seguir só para dar uma olhada nessa pasta e baixar todos os elementos e todas as peças que você vai encontrar lá. Então, na medida em que as imagens vão onde temos o blogueiro excerpt imagens bem aqui, esses pequenos quadrados também temos este instagram feed imagens e também temos algumas imagens maiores para a nossa seção herói herói. Então, se você quiser ir com outra imagem, você não quer ir com a que eu usei você pode escolher. Escolha daqui. Agora vamos adicionar essas imagens usando a ferramenta de imagem lugar e lugar bem aqui. No entanto, quando se trata de ícones, vamos adicioná-los de uma maneira um pouco diferente. Mas vamos chegar a isso em apenas um segundo. Meus ícones estão sentados neste serviço de pasta, então esses são todos esses ícones aqui . E eu também tenho ícones de mídia social. Há esses caras aqui, e você não vai usar o comando local ou algo assim. Vamos simplesmente arrastar todos esses ícones para o nosso design. Mas como você vai notar em apenas um segundo. É e é fácil, mas haverá algum. Teremos que fazer algumas coisas sobre esses ícones incorporados. E essa é a palavra-chave aqui. Havia um Aiken embutido Nós estamos indo para um arrasto para o documento, mas isso vai acontecer em apenas um segundo. Vamos começar seu processo de design. Deixe-me passar para o projeto principal. Vamos começar o processo de design com a criação do logotipo aqui. Então você vai aprender como adicionar realmente eles e o grande e caiu para o seu pedaço bem de pedaço de texto do imposto de vida. Porque se eu pegar o tecido artístico, se quiser, ainda podemos mudar algumas coisas. Podemos distanciar apóstrofo e apenas digitar e. E ainda assim este ingrediente está sendo Ah foi aplicado a eles para o imposto, e está sendo atualizado em qualquer lugar. Mas eu vou deixá-lo sair, deixar o vivo o apóstrofo dentro E, no entanto, eu acho que podemos passar para a criação, para criar em nossa primeira peça de design, que será este logotipo. 32. 9.4Vamos dar uma olhada as imagens e ícones: este design fora do curso ficaria muito triste se ele não tivesse um monte de imagens e ícones. Então preparei algumas imagens para você. E claro, você vai encontrar esses caras bem em uma pasta que eu vou ligar Teoh dentro deste poço, a descrição do curso. Então, se você quiser seguir só para dar uma olhada nessa pasta e baixar todos os elementos e todas as peças que você vai encontrar lá. Então, na medida em que as imagens vão onde temos o blogueiro excerpt imagens bem aqui, esses pequenos quadrados também temos este instagram feed imagens e também temos algumas imagens maiores para a nossa seção herói herói. Então, se você quiser ir com outra imagem, você não quer ir com a que eu usei você pode escolher. Escolha a partir daqui. Agora vamos adicionar essas imagens usando a ferramenta de imagem lugar e lugar bem aqui. No entanto, quando se trata de ícones, vamos adicioná-los de uma maneira um pouco diferente. Mas vamos chegar a isso em apenas um segundo. Meus ícones estão sentados neste serviço de pasta, então esses são todos esses ícones aqui . E eu também tenho ícones de mídia social. Há esses caras aqui, e você não vai usar o comando local ou algo assim. Vamos simplesmente arrastar todos esses ícones para o nosso design. Mas como você vai notar em apenas um segundo. É e é fácil, mas haverá algum. Teremos que fazer algumas coisas sobre esses ícones estes incorporados. E essa é a palavra-chave aqui. Havia um Aiken embutido Nós estamos indo para um arrasto para o documento, mas isso vai acontecer em apenas um segundo. Vamos começar seu processo de design. Deixe-me passar para o projeto principal. Vamos começar o processo de design com a criação do logotipo aqui mesmo. Então você vai aprender como adicionar realmente eles e o grande e caiu para o seu pedaço bem de pedaço de texto do imposto de vida. Porque se eu pegar o tecido artístico, se você quiser, ainda podemos mudar algumas coisas sobre ele. Podemos distanciar apóstrofo e apenas digitar e. E ainda assim este ingrediente está sendo Ah foi aplicado a eles para o imposto, e está sendo atualizado em qualquer lugar. Mas eu vou deixá-lo sair, deixar o vivo o apóstrofo entrar. E, no entanto, eu acho que podemos passar para a criação, para criar em nossa primeira peça de design, que será este logotipo. 33. 9.5Vamos criar o logotipo primeiro: Então vamos começar esse processo de design criando um logotipo desse. Mas primeiro, vou esconder a coragem. Eu não vou precisar dele apenas agora, mas eu vou criar uma nova camada que eu vou renomear A e eu vou chamá-lo de, hum, cabeçalho, assim como assim. E eu vou pegar a ferramenta de texto artístico e eu estou simplesmente indo para digitar em criar fez exatamente como Então Agora a diversão que estamos usando é, bem, nosso principal para permanecer telefone cabeçalho, que é chamado de dica, como já sabemos. Mas é claro, não queremos que seja tão leve. Quero dizer, quando criarmos, se criarmos um fundo mais escuro, claro que poderíamos usar essa cor clara, mas você quer adicionar um Grady para fazê-lo. E uma vez que temos esta amostra aqui, este preenche esta grande informação, podemos simplesmente adicionar ao nosso ao nosso texto. No entanto, se você não tem um grande e grande em amostras aqui, você pode simplesmente ir em frente e ativar o filtro. E aqui onde você pode ver o tipo, você pode usar sólido, que seria uma cor simples qualquer cor que você gostaria exatamente assim. Mas você também pode escolher ingrediente linear, ingrediente elíptico, radial, cônico ou mesmo você poderia adicionar um mapa bit para o seu local, mas que seria estranho para um para um logotipo em um site. Então eu vou simplesmente escolher linear assim. E como você pode ver, nós já temos isso. Só amplie um pouco. Nós temos este Grady int Grady int slider bem aqui. E se você quiser mudar as cores do grande e controle deslizante, você pode simplesmente clicar sobre esta e esta caixa aqui e você pode mudar as cores do seu Grady int fora do seu Grady em paradas. Então talvez isso seja escolher algo assim e ainda mais escuro. Quero dizer, você pode brincar com ele uma tarde inteira e você pode apenas clicar e mudar a direção do controle deslizante apenas assim. No entanto, como eu disse, eu vou simplesmente usar esta amostra de Grady int aqui, e eu vou torná-la significativamente menor agora. Vou trazer migrantes de volta só para ver o que estou fazendo aqui. E eu vou mover meu logotipo para cá. Vou colocá-la contra a coluna da esquerda para a esquerda. Mas esta primeira coluna aqui e eu vou aumentar o tamanho. Vamos ver 36 talvez, e vai ser um pouco grande demais. 28 deve estar bem, assim. Claro que podemos. Sempre podemos mudar para mais tarde se não fôssemos assim. Agora que temos o nosso logotipo, basta mostrar-lhe rapidamente como é agora que temos o nosso logotipo que realmente pode precisar de algum tratamento que ele pode receber. Talvez queiramos estender um pouco em algum lugar aqui. Por que não? Agora que temos o logotipo, podemos passar a criar a navegação e incorporar nosso primeiro Aikens, os ícones de mídia social que acabamos de ver no vídeo anterior. Vamos realmente deixar o logotipo por apenas um segundo e, em seguida, vamos passar para a criação de sua navegação 34. 9.6Vamos criar os links do menu: neste vídeo, vamos começar a construir essa navegação fora do nosso site. E na verdade é tão fácil como pegar o tecido artístico, clicar e dragar e digitar algo como calma e você vincular. Por que não? Pode ser. Pode ler a “Manual Inc” agora. Eles estão na frente. Lá estão indo eu vou estar usando é bem, é o mesmo fundo que o logotipo. Então é Hinde? Claro que sim. Eu queria ser significativamente menor. Talvez 18 ou talvez 20. Veremos em apenas um segundo. Claro, eu queria ter uma cor diferente, e eu queria ser escrito em todas as maiúsculas. Então eu vou para o painel de caracteres e aqui eu posso mudar qualquer coisa que eu quiser sobre este texto. Bem, sobre isso Bem, tinha o item de navegação desta coisa. Então primeiro eu vou mudar a cor deste Grady int. Eu vou escolher minhas amostras, e vai ser essa cor clara, exatamente assim, e a palavra que você pode ver agora. Vamos consertar isso em um segundo. Ok, então agora eu vou clicar em todas as maiúsculas aqui em baixo. Agora temos nossa tinta manual escrita usando Onley, os velhos bonés, o poço, a toda a CIA. Vamos agora construir para todo o sistema de navegação Bem, tão mais fácil quanto só pode ser. Quero dizer, deixa-me fechá-la. Quero dizer, podemos simplesmente segurar a tecla Control e segurar a tecla Shift para restringir a proporção e enfraquecer apenas colônia esse cara para a direita. E agora, se você apenas pressionar o controle, j enfraquecer duplicar a última transformação do que foi copping eles estavam apenas lidando e ah, e se movendo. Então temos 12345 manuais assim. E eu sei que você provavelmente não está vendo isso muito bem para claramente. É por isso que eu vou agrupar esses caras e que eu vou agrupá-los junto com o logotipo, exatamente assim. E agora se nós apenas clicar nesta inserção atrás da opção de seleção que já estamos familiarizados com e agora basta pegar a ferramenta de retângulo que apenas zoom para fora um pouco. E agora, se criarmos um retângulo, vamos criá-lo na parte inferior. Isto deve ficar bem. Você poderia torná-lo maior. Você pode torná-lo menor. Vou deixar isso com você. Vou deixar assim. E, claro, eu quero ter queria ter um tipo diferente de ah preenchimento de cor diferente, cor essa cor mais escura. E espero que agora consigas ver tudo claramente. Mas é claro que eu não quero que esses caras sejam mais agrupados, então eu vou apenas agrupá-los. Mas eu também vou agrupar esses caras porque agora eu quero ter certeza de que as distâncias entre esses links esses itens aqui são iguais. Então eu vou comprar turno, clique, e eu vou selecionar todos eles, apenas assim. E a partir da guia A, eu vou escolher esse cara aqui que diz espaço horizontalmente, apenas assim e que eu vou bater. Ok, então agora eu posso ter certeza que nessas distâncias são iguais. Ok, então agora que eu sei que todas essas distâncias aqui são iguais, eu posso simplesmente selecionar todos esses caras e agrupá-los novamente, exatamente assim. Então nossa próxima ordem de negócios seria adicionar os ícones de mídia social aqui à direita. E como eu mencionei antes, vamos incorporar os documentos como V G dentro deste documento. Agora pode parecer complicado, mas realmente não é, mas há algumas coisas que 35. 9.7Vamos adicionar os ícones de redes sociais: Então, como você pode ver, eu abri para a pasta onde eu guardo minhas imagens. Então esses ícones 1234 estão prontos e esperando por mim aqui. Então, a maneira mais fácil de adicionar e incorporar um documento dentro de outro documento aqui, o suficiente no designer, especialmente Aiken. Documentos como estes. É o apenas agarrá-lo e simplesmente colocá-lo aqui dentro, dentro desta janela. Agora pode soar Ah, bem, pode parecer que é um super fácil, e acrescentando, na verdade é mas mudar neste ícone mudando sua cor Bem, isso não é tão simples. Quero dizer, você pode bem, você pode pensar que tudo o que é preciso é apenas pegar, pegar este ícone e apenas mudar sua cor de preenchimento para algo diferente. Assim como. Mas como você pode ver bem, na verdade, nada está acontecendo. Não posso mudar para preencher. Não consigo adicionar o traçado próximo a este ícone. Como você pode ver, nada está realmente acontecendo. Não vou torná-lo maior. Não vou mudar o derrame. E por que isso é hap? Por que não posso? Por que não posso mudar nada? Qualquer coisa sobre isso eu posso Bem, isso é na verdade porque é um documento embutido. designer do Afinitor está a considerar este tipo aqui como apenas uma representação do original. Então, na verdade, você não é. Bem, você está tentando afetar esse ícone porque você pode pensar que isso é realmente bem, o original, mas não é. O original ainda está sentado em outro lugar. E a maneira mais fácil de chegar ao original é clicando nesta opção de documento adicionado aqui . E assim que você fizer isso, você pode ver. O Affinity Designer está abrindo este documento em uma nova janela. Como você pode ver, diz embutido bem aqui. Então agora podemos simplesmente adicionar a cor de preenchimento ao nosso documento para o nosso Eu vim neste caso. E como podem ver, não temos nossa paleta de cores aqui. Nós só o temos neste documento porque nós o criamos como uma paleta de documentos e nós não o temos mesmo em um documento um tanto virtual e dinâmico aqui. Mas isso definitivamente não é. Definitivamente não é algo que possamos lidar. Então eu vou simplesmente para o meu documento original e, no painel de amostras, eu vou escolher a paleta de exportação. Vou deixar o nome como é Clique em Salvar. E então, quando eu voltar para o documento incorporado, eu agora posso escolher a paleta de importação, e nós poderíamos escolhê-la como uma aplicação de palete. Por que não é que eu vou simplesmente escolher esse cara? Clique duas vezes sobre ele. E como podem ver, temos o nosso paladar bem aqui e agora podemos escolher agora esta luz cheia assim. E agora, quando voltarmos, não podemos nem fechar esse cara agora. E agora, quando voltarmos ao nosso documento, vocês podem ver que temos nosso cara nosso Aiken criado aqui mesmo. Ele mudou o fundo e mesmo que aqui no painel no painel do brinde isso mostra que ele tipo de como tem um traço aplicado e preenchimento. E como podem ver, a cabeça espera, são cores diferentes da chamada do Phil. É mesmo assim que se chama? Isso está sendo aplicado ao nosso e eu posso. Então agora podemos apenas torná-lo menor, colocá-lo em algum lugar aqui contra nosso fundo mais escuro e torná-lo ainda menor do que isso. Talvez não tão pequeno. Algo assim deve fazer, acho que deve ficar bem agora, a fim de acelerar o processo, enfraquecer Basta clonar esse cara para a direita. Estou segurando o turno e o controle assim. E agora você pode usar esta opção de substituição de documento aqui. E se eu escolher talvez o Instagram. Estou mudando este documento. No entanto, não estou acrescentando o mesmo. O mesmo colar preenchido para o meu testamento Aiken. Então, novamente eu tenho que ir para o documento adicionado e eu tenho que ir para amostras de cores criadas e eu vou mudar isso apenas assim. E agora se clicarmos no Controle J, podemos clonar aquele cara e movê-lo para a direita. Assim como novamente, Substituir documento. Escolha-me. Twitter neste momento adicionou novamente o documento. Escolha a cor apropriada apropriada assim. Então, como você pode ver, o tamanho permanece o mesmo. Mas o carro vai, infelizmente, não está mudando para nós novamente. Podemos clonar para a direita. Substitua o documento desta vez com o Pinterest Eu venho agora podemos editá-lo, mudar o colarinho e podemos apenas fechá-lo, assim como assim. Ok, então agora nós podemos ter certeza que as distâncias entre esses manuais são as mesmas que as distâncias entre os ícones manuais e as mídias sociais e entre esses ícones de mídia social . Então eu estou simplesmente indo para agrupar esses links manuais e então eu vou simplesmente adicionar à seleção esses caras aqui, algum turno clicando neles. E agora se eu escolher espaço para Izon Tole e clicar em OK, enfraquecer. Agora podemos ter certeza de que todos esses caras estão espaçados uniformemente. Então agora nós podemos apenas agrupá-los, movê-los para a direita se o fato enfraquecer talvez até mesmo uma linha de para a nossa grade e, em seguida, apenas movê-los para cima em algum lugar aqui nós podemos agora apenas amigo este logotipo para baixo um pouco para ter certeza de que a linha bem. E lá vamos nós. Temos o cabeçalho criado. Podemos, é claro, talvez mover esse cara um pouco para baixo. Claro, você pode talvez aumentar as distâncias entre todos esses caras, se quiser. Bem, isso é totalmente com você. Mas o último negócio que eu quero fazer aqui é que eles querem indicar qual fora dos lados é realmente o lado ativo, então eu queria ter uma cor diferente. Agora, então, Agora, os outros links alguns simplesmente vai clicar duas vezes sobre ele e que esta é a maneira você é um alvo, um, um item dentro de um grupo que eu simplesmente vou adicionar este Grady e preenchido assim. E nós basicamente temos um onde temos o nosso cabeçalho bem criado? Assim, acho que foi muito fácil. Você não acha que há algo que você precisa estar ciente, por exemplo, adicionando, Ah, Ah, a classificação preenchida para texto, especialmente Erin, que ícones svg ou outros documentos incorporá-los e, em seguida, manipulá-los corretamente. Mas eu acho que todas essas técnicas são muito bem, muito simples. Eles precisam de alguns para se acostumar, mas para uma vez que você pegar o jeito deles, você vai usá-los suavemente e rapidamente. Então nossa próxima ordem de negócios seria pegar uma imagem grande. Coloque-o. Teoh vai torná-lo nosso proeminente para a peça mais proeminente deste mundo, a parte stop do design, e então colocar alguma mesa mais escura bem, tipografia mais leve contra ele e criar este sistema de navegação bem aqui. Então vamos realmente começar a fazer isso no próximo vídeo 36. 10.1Vamos começar adicionando a imagem principal: a próxima seção que vamos criar é esta seção de heróis bem aqui. Claro, o que é mais importante sobre isso é que ele tem essa grande imagem como fundo. Há também esta tipografia ousada, e nós também temos este sistema de navegação aqui em baixo, e criar a seção realmente nos dará uma oportunidade de descobrir um off designers de afinidade as técnicas e ferramentas que é permitindo-lhe adicionar imagens. E esse método é o mais direto. É a mais fácil, então vamos começar. Mas antes de adicionar uma imagem, vamos adicionar uma camada. Então eu vou criar um mais tarde aqui. Vou chamá-lo de herói, assim mesmo. E eu vou movê-lo para baixo da seção Chapeleiro e Heather Layer bem aqui. Então a maneira mais fácil de adicionar uma imagem dentro de um ajuste no designer é simplesmente usando a ferramenta de imagem local , que é este cara aqui. O que ele faz é simplesmente permitir que você abra e coloque uma imagem, o que é algo que também pode ser feito usando o comando file place. Mas este comando também permite que você incorpore outros formatos de arquivo, não apenas imagens onde é imagem lugar, então é projetado especificamente para adicionar apenas imagens à sua vontade. Para o seu documento soa simplesmente indo para clicar sobre ele e todas essas imagens, a propósito, estamos baixando a partir dos eixos que vêm um site que descobrimos em um dos vídeos anteriores . Então eu vou simplesmente escolher talvez esta imagem, e como você pode ver bem, nada está acontecendo. Eu acho que você não pode ver nada porque nada está acontecendo além do nosso cursor Kherson ter um ajudante. E este pequeno ícone está realmente indicando que se eu agora apenas clicar em qualquer lugar dentro do meu documento, eu estou indo para o pé. Adicione esta imagem. E como você pode ver, é grande. É muito grande para nossos propósitos, então precisamos torná-lo menor e, a fim de torná-lo menor, enfraquecer simplesmente arrastado por um de seus cantos, assim como assim, até que ele fique bem,tão até que ele fique bem, pequeno quanto nós Preciso dele. E, a propósito, você não precisa pressionar e manter pressionada a tecla shift porque, bem, um designer fraco por padrão assume que você deseja manter as proporções como elas são. Você não quer distorcer sua imagem, e isso é realmente muito útil porque nós não queremos distorcer a nossa imagem. Você não quer começar nossa imagem. Então, se você quiser fazer telefone seu documento tem o mesmo com a sua tela. Você pode simplesmente inseri-los aqui dentro do painel de transformação. Mas o que é importante aqui é que queremos que nossa seção seja puxada para esta imagem de fundo seja menor. Quero dizer, queríamos ser o mais amplo que tudo pudesse durar. Queríamos ir do lado esquerdo da porta View para o lado direito da porta de visualização, mas não queremos que seja esse pedágio. Queremos torná-lo menor. E, claro, se pegarmos por uma das alças aqui, vamos distorcer nossa imagem, e isso definitivamente não é o que queremos. Então, como podemos ter certeza de que, bem, a imagem permanece em proporção, mas não é tão grande como este original. Poderíamos usar a máscara de corte para isso, mas eu acho que seria mais fácil pegar o fator de colheita até esse cara aqui e simplesmente mover esse cara um pouco para, eu não sei, talvez em algum lugar aqui nós estamos vai verificá-lo em apenas um segundo. Assim, a ferramenta de corte vetorial simplesmente nos permite cortar a imagem. Mesmo que seja chamado de colheita vetorial. Ele nos permite cortar uma imagem assim sem afetar e a própria imagem que podemos até saber mover esse cara dentro de nosso dentro de nossa imagem cortada ou recortada quadro, assim como para ter certeza de que está bem, parece apenas uma maneira como Nós queremos que ele olhe. Então, se nós apenas ampliarmos um pouco mais, e agora se você apenas dar uma olhada no painel de camadas, você pode ver que nós temos abaixo da nossa imagem. Temos este retângulo adicionado aqui. E, como você pode ver por sua miniatura, e se você está familiarizado com a loja de fotos, ele meio que parece uma máscara, você não acha? Bem, isso é basicamente porque é uma máscara, uma máscara sendo uma aplicada dinamicamente à nossa imagem. Se o desligarmos, podem ver que estamos a recuperar toda a nossa imagem. Mas se virarmos, você pode ver que ele é cortado assim, e ele tem um grande benefício. Quero dizer, adicionar uma máscara à nossa imagem, mesmo que não tenhamos pedido o Adam. Quero dizer, um amigo para o designer adicionou este masculino automaticamente, mas nós podemos simplesmente ir embrulhar este retângulo e podemos ir para o nosso painel de transformação, certificar-nos de que a nossa transformação está a acontecer de um dos pontos principais. E agora podemos mudar essa altura de valor aqui para algo como, sei lá, talvez 700 pixels. Vamos ver. E como podem ver, nossa máscara está sendo cortada para exatamente 700. Então agora temos 920 por 700 pixels, exatamente assim. E se agora apenas visualizamos em 100% e nos livramos dos painéis assim podemos ver se realmente gostamos dessa altura, então se você quiser torná-la maior, podemos torná-la maior. Podemos diminuir se quiser, mas acho que vou deixar você decidir se quer experimentar um pouco mais. Você sabe como fazer. É Oh, então você pode fazer isso agora. Você pode fazer isso sozinho. O que eu quero fazer, no entanto, é que quero tornar esta imagem mais escura porque eu não gosto do fato de que ela é tão leve , especialmente considerando o fato de que eu vou ser colocado em alguma tipografia leve sobre ela em apenas um segundo. Então o que eu quero fazer é que eles querem torná-lo um pouco mais escuro. Mas, hum, tem uma coisa que você precisa ser cauteloso sobre, mas eu vou te contar tudo sobre isso no próximo vídeo. 37. 10.1Vamos começar adicionando a imagem principal: enquanto você continua construindo seu site, projetá-lo e continuar adicionando imagens e imagens grandes como este. Seu documento vai ficar maior e maior e maior e ir embora. O teu computador está a funcionar. Teoh corre mais devagar, mais lento e mais lento. Quero dizer, quanto mais grandes imagens ele tem para processar isso é mais lento que mais ram eo processo de energia consumindo todo o processo vai ficar, então há um pequeno truque que você pode fazer para garantir que tudo parece bem. Mas, ao mesmo tempo, tudo o que estou no processo é rápido e suave. Se você sabe que vai ficar bem, deixando esta imagem como está, você quer que sua imagem de herói seja tão alta quanto esse cara aqui. E você queria ser cortado assim, você pode simplesmente selecioná-lo. E agora se você apenas ir para exportação de arquivos, nós podemos apenas selecionar seleção sem fundo, torná-lo um J peg, baixar a qualidade para cerca de 75% exatamente como isso E agora quando nós exportamos esta imagem com essas configurações, toda a imagem vai ser cortada. Isso não é mais ser uma imagem enorme. Será muito, muito menor. Mas será, bem, o mesmo que você é visto aqui. Então, se eu agora basta ir em frente e clicar em Exportar e eu vou chamá-lo como, hum, imagem cortada assim E agora eu posso simplesmente excluí-la. E agora se você vai para a imagem local, ferramenta e que eu posso verificar onde eu coloquei meu aqui está lá? Aqui está E se eu apenas clicar aqui, você pode ver que eu tenho minha imagem cortada e perfeitamente alinhando com o meu com o meu todo em todo o design do site. E isso é realmente você pode fazer com todo o seu bem, pelo menos aquelas grandes imagens. Se o seu computador é talvez um pouco mais lento se você não tem RAM suficiente ou seu processador é um pouco lento, você sempre pode apenas ah dizer ofensivo ao designer Teoh Inouye, otimizar as imagens simplesmente tornando-as menores. E uma vez que você os tenha cortado, uma vez que você os tenha preparado bem do jeito que você quer que eles sejam. Você pode simplesmente salvá-los como ativos separados e adicioná-los novamente. Mas eles serão muito menores, e a qualidade será praticamente a mesma, e tudo funcionará mais suave. Então agora estamos realmente prontos para começar a adicionar o colar na nossa imagem. E novamente, haverá algo que você deixou que você tem a mente de Teoh Barre ao adicionar uma cor às suas imagens porque você pode ser tentado como eu normalmente sou tentado a fazer uma coisa, mas não vai funcionar como sua filmagem, então vamos falar sobre isso no próximo vídeo. 38. 10.2Como redir a imagem: enquanto você continua construindo seu site, projetá-lo e continuar adicionando imagens e imagens grandes como este. Seu documento vai ficar maior e maior e maior e ir embora. Seu computador está funcionando. Teoh corre mais devagar, mais lento e mais lento. Quero dizer, quanto mais grandes imagens ele tem para processar isso é mais lento que mais ram eo processo de energia consumindo todo o processo vai ficar, então há um pequeno truque que você pode fazer para garantir que tudo parece bem. Mas, ao mesmo tempo, tudo o que estou no processo é rápido e suave. Se você sabe que vai ficar bem, deixando esta imagem como está, você quer que sua imagem de herói seja tão alta quanto esse cara aqui. E você queria ser cortado assim, você pode simplesmente selecioná-lo. E agora se você apenas ir para exportação de arquivos, nós podemos apenas selecionar seleção sem fundo, torná-lo um J peg, baixar a qualidade para cerca de 75% exatamente como isso E agora quando nós exportamos esta imagem com essas configurações, toda a imagem vai ser cortada. Isso não é mais ser uma imagem enorme. Será muito, muito menor. Mas será, bem, o mesmo que você é visto aqui. Então, se eu agora basta ir em frente e clicar em Exportar e eu vou chamá-lo como, hum, imagem cortada assim E agora eu posso simplesmente excluí-la. E agora se você vai para a imagem local, ferramenta e que eu posso verificar onde eu coloquei meu aqui está lá? Aqui está E se eu apenas clicar aqui, você pode ver que eu tenho minha imagem cortada e perfeitamente alinhando com o meu com o meu todo em todo o design do site. E isso é realmente você pode fazer com todo o seu bem, pelo menos aquelas grandes imagens. Se o seu computador é talvez um pouco mais lento se você não tem RAM suficiente ou seu processador é um pouco lento, você sempre pode apenas ah dizer ofensivo ao designer Teoh Inouye, otimizar as imagens simplesmente tornando-as menores. E uma vez que você os tenha cortado, uma vez que você os tenha preparado bem do jeito que você quer que eles sejam. Você pode simplesmente salvá-los como ativos separados e adicioná-los novamente. Mas eles serão muito menores, e a qualidade será praticamente a mesma, e tudo será mais suave. Então agora estamos realmente prontos para começar a adicionar o colar na nossa imagem. E novamente, haverá algo que você deixou que você tem Teoh Barre mente ao adicionar uma cor às suas imagens porque você pode ser tentado como eu normalmente sou tentado a fazer uma coisa, mas não vai funcionar como sua filmagem, então vamos falar sobre isso no próximo vídeo. 39. 10.3Vamos tornar a imagem 10.3de mais escura: Neste, nós não fazemos. Eles vão tornar a nossa imagem um pouco mais escura, porque se olharmos para o original, podemos ver que está realmente bem. É mais escuro do que diferente desta imagem original porque queremos colocar esta tipografia clara contra esta imagem. E especialmente no caso. No caso desta imagem, se colocássemos a tipografia de luzes neste fundo, seria pouco visível. E isso não é uma boa experiência de usuário. Então o que queremos fazer é fazer uma coisa mais escura para que você possa ser tentado a fazer. Se você está tentando Teoh apenas, você sabe, bater. O sistema estava tentando várias vezes você pode ser tentado a apenas usar a ferramenta de preenchimento. E para o tipo de preenchimento, você pode querer escolher alguma cor. Por exemplo, se nós apenas ir com sólido, você pode ver que nós realmente não estamos adicionando uma cor. Mas estamos mudando. Estamos mudando toda a foto, e se você quiser ir para este tipo de efeito artístico, será o meu palpite. Você pode escolher muitas cores diferentes e realmente mudar a forma como este carro este que esta imagem é realmente vai olhar em, mas isso realmente não é o que nós queremos. Então lembre-se de bem não usar esta opção se você. Se você quiser apenas tornar a imagem mais escura, não escolha a cor de preenchimento para torná-la. Mas se você quiser tentar derrotar o sistema, você não vai vencê-lo assim. Você pode, no entanto, apenas pegar o retângulo para criar um pequeno retângulo e preenchê-lo com uma cor escura. Então eu vou simplesmente escolher. Talvez esta cor e eu queira torná-la tão grande quanto a imagem. E já que é 1920 por 700, é o que vou introduzir aqui. 700 assim, agora podemos simplesmente colocá-lo sobre nossa imagem e certificar-se de que ele se encaixa exatamente assim . E agora podemos simplesmente baixar a opacidade. Vamos ver algo como talvez 40%. Eu acho que 40% deve estar bem, porque, como eu disse, a imagem subjacente é bastante leve, então eu não acho que devemos baixar a opacidade para algo como, eu não sei, 17% Goes disse que simplesmente não vai fazer nenhum sentido. Claro, poderíamos talvez tentar adicionar uma chamada mais escura talvez, tipo, tipo, cor preta e depois enfraquecer. Solte a opacidade ainda mais. Mas eu acho que eu vou apenas ir com a minha cor original, e eu vou aumentar a capacidade para algo como, talvez 35 40% apenas assim. Então agora podemos simplesmente pegar a imagem e o retângulo e enfraquecer. Basta agrupá-los, se quiser. Você pode renomear o grupo como talvez imagem principal, algo assim. Só para que saibas o quê? Na verdade, está aqui dentro deste grupo. Então agora podemos começar a adicionar essa tipografia que podemos começar neste texto principal. O texto principal aqui. Lembre-se, criamos um estilo de texto específico para ele, mas acho que podemos começar a fazê-lo no próximo vídeo. 40. 10.4agora vamos adicionar o texto principal: Agora podemos começar a adicionar a tipografia principal e colocá-la contra este fundo de imagem mais escuro . Então eu vou simplesmente pegar a ferramenta de imposto quadro e eu vou criar eu vou criar um quadro de texto assim como ele não tem que ser todo esse grande entorpecimento. Nós vamos pegar a ferramenta de textos e eu vou escolher inserir texto de preenchimento, assim como e de nossos estilos de texto, eu vou escolher nosso pensamento chamado cabeçalho principal. Vou alinhá-lo à esquerda e agora movê-lo, movê-lo para algum lugar. Aqui, deixe-me ver se snaps bem moovit verão aqui agora, se você quiser, você pode, claro. Ah, bem, digite algumas palavras reais aqui como eu tenho no que eu tenho no original, mas eu vou deixar isso com você. Eu só quero mostrar a vocês como criar esse tipo de efeito. Agora, se você não gosta do jeito que isso está olhando, se você não gosta do jeito que os personagens estão sendo colocados se você não gosta do caminho na linha Oi, Tim está sendo, Ah, bem exibido Aqui. Claro que pode. Você pode mudar algumas coisas sobre isso. Então, por exemplo, podemos simplesmente pegar o painel de caracteres e, por exemplo, podemos tentar mudar, aumentar a liderança, talvez para 78 assim. E, claro, teríamos que expandir esse quadro assim. Você também pode tentar aumentar a distância entre caracteres específicos. E isso é, claro, o rastreamento. Então, vamos ver por você apenas digite um. Eu não iria ao mar com isso. Estamos vendo um ligeiro aumento, mas não tanto. E eu não iria longe demais com isso. Talvez nos fiquemos a cinco. Algo como... Então, isto deve ficar bem. E também, se você quiser, talvez você possa tentar com os outros pesos dianteiros, como regular, semi careca. Eu não iria com luz e talvez média. Acho que ousado seria o melhor porque nos daria, bem, bem, uma sensação de consistência em todo o nosso design. Quero dizer, o logotipo está escrito em qualquer versão mais ousada da fonte. Os links de texto bem, os manuais estão escritos em uma versão negrito fora da frente, então eu simplesmente ficaria com o estado com negrito Se você quiser, você pode escolher Teoh, sublinhar todo este texto se dermos uma olhada o original porque você pode ver que eu sublinhei a esta palavra apenas o mundo criado. Mas isso é possível no Lee. Se você só se você adicionar um pedaço real de livro de texto é se é apenas que este texto de preenchimento automático é apenas um filtro e você não será realmente capaz, Teoh Ah, manipular Onley obras separadas. Então, só como exemplo, se eu pegar esse cara e se eu copiar, eu vou querer ter certeza de que eu estou à direita mais tarde aqui e eu vou me livrar desse cara. E se eu me mover, é aqui em cima como então Agora, se você quiser, você pode apenas agarrar na moldura ou no tecido artístico. Talvez eu vá pegar o tecido artístico e podemos selecionar palavras específicas. Então, por exemplo, vamos pegar fascinante. Deixa-me só agarrá-lo. E agora eu posso sublinhá-lo, ou eu posso até mesmo sublinhá-lo se eu quiser, mas eu não posso fazê-lo apenas com este imposto de enchimento que você pode usar a partir do manual de texto . Porque, como eu disse, é apenas um filtro dinâmico e você não é capaz de manipular palavras simples. E, claro, a última coisa a fazer seria simplesmente pegar o texto e o fundo do Sublinhado e simplesmente alinhado esses caras para dissidente, apenas para ter certeza de que tudo está bem. Portanto, se agora analisarmos o nosso progresso, isto é o que temos até agora. Temos a patente, o cabeçalho. Temos o logotipo, temos o menu, temos os ícones sociais, os ícones das redes sociais. Ficamos bem, quase a seção de heróis acabados. E se você não quiser criar uma navegação deslizante, você pode apenas mover para outra seção para a próxima seção. Mas acho que vamos. Teoh definitivamente vai criar que os botões de navegação deslizante aqui em baixo, Mas até agora tão bom, temos o que poderia ser facilmente acabado, parte final, parte superior do design, porque temos o cabeçalho. Apanhámos o herói. Agora vamos passar para o próximo próximo a seção de itens em destaque Seção dois. Mas antes que não estejamos antes de fazer isso estava criando a navegação da navegação Styler aqui em baixo, certo, então fique atento. 41. 10.5Vamos adicionar a navegação slip: criando o controle deslizante. Navegação é, na verdade, um processo bastante simples. Então vamos começar a construí-lo agora mesmo. Primeiro de tudo, eu quero criar uma elipse que vai ter uma cor de traço, e não vai ter nenhuma cor de preenchimento do traçado com o dossel. Só um ponto. Podemos sempre mudá-lo mais tarde. E eu vou simplesmente criar uma elipse. Ah, em torno de 25 pixels no poço, tanto com e altura. Deixe-me aproximar mais para ver o que estou fazendo aqui. E o que vou fazer é simplesmente clonar para a direita duas vezes. Então é um e dois assim. Agora o que? Eu vou fazer isso. Deixe-me mover esse cara para a esquerda e para a direita, esse cara. Mas é claro, nós vamos consertá-lo, consertar, consertar, hum, o espaço. E em apenas um segundo, Então o primeiro Bem, o primeiro ícone o primeiro círculo vai ter um Phil vai ter um grande infill que iria corresponder com o Grady no logotipo de reboque. Queremos indicar que, na verdade, este slide é o primeiro slide nas pilhas. Então é por isso que este primeiro círculo vai ter um preenchimento. Soa simplesmente indo para clicar no meu grande e preencher minhas amostras assim. E agora podemos criar esses botões triangulares à esquerda e à direita. Na verdade, esse seria o nosso fundo anterior e o próximo. Então, a partir do painel de ferramentas que eu vou criar, eu vou selecionar a ferramenta de triângulo. E eu vou simplesmente criar um triângulo que vai parecer algo assim, é claro que eu não quero que ele tenha um Phil. Eu queria ter um derrame, alguns simplesmente vão trocar essas cores. E eu queria ser leve assim, agora deixe-me girar. Estou mantendo pressionada a tecla Shift, e agora vou cloná-la para a direita e a partir do painel de ferramentas. Vou simplesmente esvaziar o núcleo de Philip de comando horizontal assim. E agora, se eu escolher todos esses caras, eu posso ir novamente para o painel de alinhamento e, na verdade, você vai usar muito este painel de linha. Então eu aconselho que você aconselho que você se familiarize com este painel porque é extremamente importante em projetos de sites. Soa simplesmente indo para escolher o espaço horizontalmente clique. OK, e então podemos simplesmente agrupar todos esses caras e garantir que todos fiquem juntos assim. Agora eu vou apenas movê-los, apenas alinhá-los para a grade mais do que um pouco para cima para algum lugar aqui e apenas zoom para fora um pouco assim. E lá vamos nós. Chegamos à navegação que criou, Claro, se você quiser, você sempre pode fazê-lo. Teremos o “A “é, bem,um bem, derrame mais forte. Então deixe-me pegar todos esses caras assim e no painel de traços, eu vou aumentar para talvez dois pontos. Então é só para que eles sejam bem visíveis em nosso plano de fundo. E se eu agora apenas se livrar dos painéis agora podemos ver que temos todo o cabeçalho e temos a seção heróis completa seção herói saudado junto com a nossa navegação deslizante deslizante. Então a próxima coisa que faríamos é começar a criar esta seção em destaque, esta grande seção aqui. Então vamos realmente começar a fazer isso no próximo vídeo 42. 11.1Vamos começar a criar o primeiro de secion de destaque: a próxima seção que vamos criar é nossos itens em destaque da seção, então é Ah, na verdade é dividido em duas partes separadas. Esta parte principal, como você pode ver, é colocada contra um fundo rosa, e há um grande cabeçalho de seção e algum texto abaixo dela. Então temos uma parte da seção que tem um fundo mais leve e ah, 1234 oito itens em destaque no total, e cada item compreende off. Por um lado, eu venho uma peça do Andy fora do texto. Poderíamos adicionar um botão como ler mais aqui ou um link, mas é ah bem, não é necessário porque toda esta seção aqui pode ser um link. E é realmente bem, mais fácil clicar ou tocar em um link como este que quando é um grande como este item inteiro e destaque do que apenas um pequeno link aqui na parte inferior, foi realmente começar a criá-los que esta seção a partir deste topo de parte rosa. Então, novamente, deixe-me trazer os painéis de volta. Vou começar com a criação em uma camada separada para o meu para a minha seção, e eu vou chamá-lo de algo como destaque um assim e eu vou colocá-lo sob outro herói, uma camada de herói. Então eu só vou pegar a ferramenta de retângulo e eu vou criar e retângulo que vai esticar toda a nossa tela. Vou torná-lo maior. Há se encontrarmos algo assim, podemos sempre mudá-lo depois. E, claro, eu não quero que ele tenha nenhum derrame. Eu queria ter um cheio e eu queria ser. Eu queria ser cor-de-rosa, assim mesmo. Claro que não. O que temos de fazer é simplesmente acrescentar a essa tipografia. Então eu vou pegar o texto para ela, um amigo tal moldura têxtil. Eu vou criar um quadro de texto que eu vou preencher com algum texto de preenchimento, exatamente assim. E já que temos um subtítulo, um título de seção, bem , estilo de texto, eu vou simplesmente usá-lo agora. Embora eu vou mudar é um pouco. Vou alinhar para o centro assim. Agora, o que podemos fazer é simplesmente pegar emprestado este pedaço de texto e cloná-lo e simplesmente mudar o estilo do texto para a luz corporal, assim como isso. E se quisermos, podemos torná-lo ainda maior, assim. E se você acha que é muito pequeno ou talvez muito grande, você pode simplesmente ir para o painel superior e talvez fazer 18 se você quiser. Mas é totalmente opcional. Quero dizer, eu acho que eu iria apenas com os simples 16 pontos como estes são eles. Um maio nah, tamanho do telefone, o típico de tamanho para Old Boy Tech. Então eu só vou com 16 exatamente assim. E, claro, podemos brincar com a posição em apenas um pouco. E uma vez que está tudo pronto, podemos apenas pegar esses dois caras, agrupá-los e, em seguida, clique sobre eles que o fundo. Para adicioná-lo à seleção e enfraquecer, basta certificar-se de que tudo está sendo bem alinhado ao centro. 43. 11.2Vamos adicionar os itens de destaque: Agora, como podem ver, estamos começando a perder algum espaço aqui mesmo. Precisamos mover esse cara. Precisamos expandir nossa vontade, nossa diretoria. Mas antes disso, acho que podemos querer talvez mover esses caras um pouco para cima e talvez fazer esse cara um pouco menor e novamente alinhar tudo bem com o centro. Assim como assim. Então agora nós podemos apenas pegá-la O quadro de arte Ainda assim, apenas assim, clique na arte do tabuleiro. Deixe-me apenas zoom para fora um pouco e simplesmente estender nosso nosso barco e estendido ainda mais fazer em algum lugar Talvez aqui, apenas assim. Isto deve ficar bem. Então,a próxima Então, parte para fazer a próxima peça de arte que precisamos criar no leste? Claro, esta parte inferior inferior desta seção de itens em destaque. Então, desta vez, não vou começar criando esse plano de fundo. Vou começar com a criação de apenas um item em destaque, apenas este. Então, novamente, eu vou simplesmente navegar para a pasta onde eu guardo meu onde eu mantenho minhas cores dos olhos e eu vou trazer uma para o meu documento. Ok, então eu tenho a pasta bem aqui e agora eu posso apenas trazer talvez esta resposta eu entrar no meu documento apenas assim. Claro, é muito grande, então eu posso simplesmente torná-lo menor para algo assim, isso deve ser bom. Só um minuto. Mas, claro, novamente, se você quiser mudar a cor do nosso, não podemos usar apenas este Phil e um traço para ferramentas de cor de traço. Precisamos adicionar o documento e agora podemos selecionar tudo e talvez nos livrar do derrame. Acho que não vamos precisar dele. E, novamente, precisamos encontrar nosso grupo de amostras e simplesmente mudar a cor. E não podemos fechar esse cara, assim como agora. O que precisamos fazer é adicionar esse imposto abaixo do nosso ícone. Então, novamente, eu vou pegar o quadro têxtil, criar um pequeno quadro novamente, inserir algum texto de preenchimento, mas desta vez eu vou usar o título em destaque têxtil. Assim como assim. Claro que tinha pode ter uma linha de imposto mão, poderia ter duas linhas de texto. Eu vou deixar isso com você, que, bem, bem, quão grande este monte de texto vai ser em seu projeto. Em seguida, vou pegar emprestado esse cara em Kelowna. Dour estendeu um pouco, mas eu vou mudar este têxtil para corpo escuro assim. Como podem ver, trabalhar com têxteis poupa-nos muito tempo. Torna todo o processo fácil e agradável. Realmente, é só uma questão de adicionar o texto de preenchimento e o direito ao estilo do texto, e basicamente terminamos. Mas com isso, eu poderia enfraquecer. Agora simplesmente certifique-se de que tudo está sendo alinhado bem com o centro, exatamente assim, e nós podemos simplesmente agrupá-lo agora. Outro benefício fora do trabalho desta forma é que se agora apenas torná-lo menor, você pode ver que o imposto de enchimento também está se ajustando para os nossos dois para o tamanho do novo tamanho fora do nosso Aiken, fontes esperança, não importa como pequeno vamos torná-lo ou grande, ele sempre vai ser bem exibido em proporção. Claro, podemos sempre selecionar, selecioná-lo e talvez expandido um pouco, para que pareça tão bem um pouco diferente. Uma coisa que precisamos enterrar minha ao criar esses caras aqui é se nós apenas voltar para o original, você pode ver que temos 1234 itens em destaque aqui em uma linha. E, claro, temos duas filas. O que significa que já que temos quatro itens, precisamos ter certeza de que não é maior que três colunas, certo, porque quatro vezes três leste 12th. Então agora eu posso ver que eu sou. Acho que vou ficar bem, porque o meu ícone não é tão grande. Não é mais largo do que apenas as três colunas. Então, na verdade, tudo o que precisamos fazer agora é simplesmente colônia. Todo esse grupo, todos esses caras para a direita, assim e, em seguida, basta pressionar o controle J Control J. E, claro, você pode querer fazer uma limpeza de casa. Talvez queiramos fazer um pouco. Há algum alinhamento, assim como Então, só para ter certeza de que todos esses caras estão sendo alinhados para alinhar proporcionalmente E claro, você pode brincar com o tamanho desses ícones. Vou deixar isso com você. O que eu quero fazer o que eu quero mostrar aqui é como criá-lo. Esta é a seção fora dos itens em destaque. Mas, claro, não queremos que todos esses ícones sejam apenas computadores e dispositivos móveis. Queremos que sejam ícones diferentes, certo? Então, assim como no caso de nossos ícones de mídia social, podemos simplesmente selecionar e vai 11 imagem quando eu puder aqui. E lembre-se que você pode direcionar para ele um subgrupo ou um objeto dentro de um grupo clicando duas vezes sobre ele, apenas assim, apenas assim. E agora podemos apenas bater, substituir documento e apenas encontrar a imagem que estamos procurando. Vou fazer o mesmo com o resto fora do documento. Alguns simplesmente vão substituir o documento. Substitua que era o folheto. Talvez aquela consultoria, hum talvez lá crescendo. Por que não o próximo com prédios ao lado poderia ser a câmera e o último poderia ser o cartão i d. Assim como assim. Claro, ainda precisamos mudar suas cores, certo? Quero dizer, queremos que estas cores sejam bem, um pouco. Bem, exatamente. Bem, em correspondência com as outras cores com o nosso com o nosso esquema de cores. Então eu faria essas cores, bem como com estes com esses pedaços de texto, eu faria com que eles se certificassem de que têm a cor certa. Bem, estamos prontos para ir com esses pedaços de texto porque lembre-se que nós criamos estilos de texto quando estávamos criando esses têxteis, nós adicionamos a cor certa, que é indicada aqui. Mas esses ícones ainda precisam ter a cor certa para serem adicionados a eles. Então, novamente, se apenas clicar duas vezes em um específico incorporado para documentar este ícone aqui e clicar duas vezes sobre ele novamente, podemos incorporar com isolado em um em uma janela separada. E agora nós por apenas selecionar tudo o que podemos novamente, apenas certifique-se de que estamos adicionando a cor certa eo processo é o mesmo que ele waas antes que eu saiba que a mudança é muito leve aqui. Quero dizer, você não pode realmente ver a diferença de cores. Mas confie em mim, há uma diferença nas cores. E para ser quase consistente em relação ao seu design, é bom saber que é bom fazer. É bom certificar-se de que todas as cores estão sendo exibidas corretamente. Então deixe-me checar esse cara e deve ser bom. Então deixe-me adicionar rapidamente o poço, as cores certas todos esses caras e eu estarei de volta com você. Então, uma vez que todas as cores estão nele e todas as cores estão bem corretas, agora podemos simplesmente selecionar todos esses ícones e agrupá-los. Agora podemos ter certeza de que estamos atrás deles. Então eu vou ativar a inserção atrás do modo de seleção, assim como, pegar a ferramenta de retângulo e apenas criar direcionamento que iria esticar toda a tela assim. Acho que isto deve ficar bem. E é claro que eu vou ter certeza que ele tem o campo certo. Desta vez vai ser um pouco mais sombrio. Cinza. Assim como agora a última coisa a fazer seria apenas certificar-se de que tudo está vivo bem para o centro, apenas assim. E, claro, se você quiser, você ainda pode fazer isso bem, todo esse fundo maior se você quiser, ou talvez os ícones um pouco menores. Mas como eu disse, vou deixar tudo com você. Eu quero que você experimente com todas essas técnicas porque esta é a única maneira de você ficar bom nelas. Então a próxima seção que vamos criar será nossa segunda seção, que é esse cara aqui. E, a propósito, criará nesta seção nos dará outra oportunidade de oportunidade de mas trabalhar com imagens dentro, ofendendo ao designer e ver e como também podemos gerenciar. As imagens colocarão uma imagem dentro do ajuste no designer, então fique atento 44. 11.3Vamos adicionar a segunda seção de item de item de destaque: neste vídeo, vamos descobrir mais um aspecto importante para lidar com imagens dentro do designer de afinidade. Nós estamos indo para criar este recurso segunda seção em destaque aqui e nós estamos indo para começar. Deixe-me apenas trazer de volta os painéis criando outras camadas. Então eu vou simplesmente criar um e renomeá-lo como destaque para Isto vai ficar bem. Nós vamos trazê-lo abaixo de um destaque novamente. Vou usá-la o lugar, ferramenta de imagem, e vou escolher esta imagem aqui. O que eu quero é que esta imagem seja bem esticada na parte esquerda da porta de visualização . Então eu preciso ter certeza de que ele não está atravessando a sexta coluna Collins em nosso grande. Então é 12345 seis. Por isso, vou certificar-me de que está a alinhar bem com esta coluna. Assim como assim. Simplesmente assim. E como podem ver, a imagem está sendo cortada aqui à esquerda. Por padrão, designer de afinidade irá cortar qualquer coisa que é que está tocando sua borda ou ele está atravessando sua. Então, se você está familiarizado com a loja de fotos e se você está familiarizado com o ilustrador, você vai notar que, bem, aqueles dois que você já sabe que essas duas peças fora de software lidar com imagens neste tipo de situação um pouco diferente. No Illustrator, você pode colocar uma imagem fora do quadro de arte e mover-se livremente e em uma loja de fotos. Por padrão, a imagem será coletada pelo quadro de arte, assim dizer. No Afinitor Designer, você obtém o melhor dos dois mundos porque, como padrão, você admite que a imagem está sendo cortada direita está sendo cortada e ângulo direto está cortado ou toda essa seção está recebendo um clipe. Tudo está sendo cortado. No entanto, se você apenas levá-lo longe o suficiente, você pode separá-lo deste da cannabis do rodapé em si para que você possa tê-lo ao lado. Você pode tê-lo do lado, por assim dizer. Você pode fazer isso bem, você pode fazer transformado em sua agenda, suas anotações ou algo assim. Mas se você quiser, você pode trazê-lo para o design e você pode fazer com que ele os rodapés cortem toda a sua imagem inteira, e isso é realmente o que eu quero então eu quero colocá-lo na sexta coluna. Então é 12345 e é seis. Deixe-me apenas ter certeza de que está bem alinhado, só assim, talvez um pouco acima. Eu só vou agitá-lo um pouco. E, claro, a próxima peça de arte que precisamos criar é a parte certa desta seção. Então eu só vou pegar a ferramenta de retângulo, e eu vou criar um retângulo que vai esticar assim. Claro, se eu quisesse, eu poderia ir e esticá-lo assim. Mas eu não preciso. Então eu vou simplesmente deixá-lo assim e dar-lhe uma cor adequada e adequada. E agora vou me certificar de que tudo está bem alinhado assim. E a última, a última coisa a fazer aqui seria apenas adicionar o texto. Então, novamente, eu vou pegar a ferramenta de texto quadro e criar um quadro de texto. Preencha com o próximo, e eu vou ter certeza de que ele tem o estilo de texto adequado, que seria o cabeçalho seção Alinhar! É para a esquerda, talvez apenas torná-lo menor, apenas assim. Vou me certificar de que está bem alinhado com o meu talvez com esta coluna, assim mesmo. Eu vou trazer isso para cima. Brennan caiu, cloná-lo, na verdade, e mudou isso para estilo de texto para luz corporal. Isso pode ser estendido apenas um pouco, apenas assim. Então você pode ver como é fácil isso uma vez que você tem o imposto de preenchimento e você tem os estilos de texto, como é fácil apenas adicionar alguns pedaços de imposto e manipular texto com isso com as estrelas de texto . Então, eu vou pegar esses caras, agrupá-los e ter certeza de que eles estão alinhados com o centro, exatamente assim. E temos esta seção criada agora enfraquecer Só espero que todos esses caras apenas para ter certeza que eles são, eles são bem colocados juntos. E lá vamos nós. Conseguimos criar ele e o segundo grupo futuro. Deixe-me apenas conceder onde ele precisa ir, apenas assim. E lá vamos nós. A próxima parte, a próxima seção que vamos criar vai ser este post blawg irá bloquear trechos postais na verdade, bem aqui, então isso pode ser como a partir da nossa seção Blawg e todos esses caras podem ser bloqueados pós bloco postar trechos e novamente. E esta criação desta seção nos dará outra oportunidade. Teoh trabalhar com imagens de uma outra maneira que bem, esta maneira realmente pode vir realmente útil em sua vontade diária todos os dias. Bem, site um trabalho de design, então fique atento. 45. 12.1Vamos começar a criar a seção do blog: antes de começarmos a criar a partir de nossa seção de blocos, precisamos expandir nosso quadro de arte um pouco mais. Então, vou garantir que este quadro de arte ainda seja selecionado. Clique na placa de quintal e estendido ainda mais para algum lugar aqui, talvez até um pouco mais. Agora eu tenho que estender a grade em si. Então deixe-me encontrar a grade. É bem aqui que eu vou simplesmente derrubá-lo assim. Deixe-me trancá-lo novamente e eu vou criar outra camada e chamá-lo de Ah, bloco. Assim como assim. Então vamos começar com a criação do travamento seção. Então eu vou pegar a moldura têxtil e simplesmente criar uma moldura de texto que vai parecer algo assim. Vou inserir algum texto dentro, e vou me certificar de que o cabeçalho da seção está ativado como este estilo. E eu vou me certificar de que um centro de linha também é ligado assim. No entanto, eu quero mudar a cor deste título. Eu vou simplesmente escolher essa cor mais escura assim agora eu vou talvez fazer apenas uma linha de texto desta vez e eu vou ter certeza de que ele está sendo alinhado com o centro do meu quadro de arte. Assim como quando dermos uma olhada no original, você vai notar que as imagens em destaque são realmente quadrados. E se você quiser, você pode pegar a ferramenta de corte fator, importar imagens e tentar cortá-las para, você sabe, para combinar as proporções quadradas. Mas há uma maneira mais fácil de criar imagens quadradas dentro de um designer de móveis. Então vamos dar uma olhada agora. Vou simplesmente criar rapidamente um novo documento que nem vou salvar. Mas eu vou ter certeza de que ele tem realmente as proporções quadradas, por assim dizer que eu estou criando uma tela quadrada. Vou me certificar de que o com, por exemplo, 200 pixels e altura são os mesmos, e eu vou simplesmente bater. Ok, agora eu congee basta pegar a ferramenta de imagem local, e eu posso apenas navegar para a pasta onde eu mantenho minhas imagens e começar em imagens. Então eu vou começar com esse cara aqui, e eu vou colocá-lo, e claro, e claro, é muito grande, então eu preciso ter certeza que IHS o quê? Isso é menor. Deixe-me diminuir um pouco e eu estou mantendo pressionada a tecla de controle e eu estou fazendo marchar muito menor. Assim como assim. Simplesmente assim. E agora, como podem ver, minha tela meu barco está agindo como uma máscara de recorte. Então eu estou em Lee vai salvar a guerra. Consigo ver dentro do meu campus. Então agora meu trabalho artístico tem 250 pixels de largura e 250 pixels de altura. Então agora eu posso simplesmente ir em frente e exportar todo o documento porque ele tem as dimensões certas e proporções certas tem um J pic. Vou apenas reduzir a qualidade para cerca de 75% e posso simplesmente atingir a exportação. E, claro, já que eu já tenho essas imagens criadas aqui, eu vou apenas nomear lembrar de forma diferente, talvez como um apenas assim e então B C. D. Etcetera. Então agora o que podemos fazer é simplesmente pegar essa imagem e escolher substituir imagem, e agora podemos escolher Talvez esse cara bem aqui E como você pode ver, é Ah, essa imagem está sentindo as mesmas proporções que nossa imagem anterior. Então não temos que redimensionar nada que possa ser como mudar as proporções. Nada como isso. Podemos simplesmente substituir uma imagem e, em seguida, apenas talvez usado o controle tudo mais Shift Plus como um atalho para obter as configurações de exportação. E todas as configurações de visualização já estão aqui, então podemos simplesmente ir em frente e clicar em Exportar. Renomeie esse cara e faça o mesmo repetirá o processo mais uma vez. Então vamos apenas agarrar esta imagem, como Então novamente velho controle shift s exportação, ver e inserir substituir imagem. Talvez esse cara agora, velho turno de controle como exportação e esse cara vai ser, eu acho que ele vai voltar a substituir a imagem e eu acho que vai ser talvez talvez essa imagem desta vez novamente. Deslocamento de controle antigo como. E vai ser e substituir a imagem. E vamos pegar pensando nesse cara muitas imagens, eu acho. Mas muitas imagens e exportação e f assim. Então agora podemos simplesmente fechar este documento. Nós realmente não precisamos dele, mas agora nós podemos simplesmente pegar a ferramenta de imagem local, e nós podemos começar lugar em imagens. Então deixe-me encontrar a minha imagem assim. E se você quiser, você pode torná-lo menor, simplesmente pode arrastar por um de seus cantos e torná-lo menor, exatamente assim. Claro, se fizéssemos os documentos menores, teríamos que não precisaríamos redimensionar essa imagem. Mas apenas por uma questão de aprender técnicas específicas aqui dentro do designer de móveis , vamos apenas fazê-lo da maneira mais longa. Então agora nós temos uma imagem e tudo o que realmente precisamos fazer é adicionar algum texto ao lado, porque se olharmos para este original, você pode ver que há uma imagem e há algumas texturas, um cabeçalho e há algum texto no direita e na verdade tanto o eu quero dizer, o título e o texto. Eles já têm têxteis específicos em nossa biblioteca, então realmente só precisa fazer é pegar e pegar a ferramenta de texto quadro e apenas criar um quadro de texto em algum texto e dos estilos de texto escolher cabeçalho em destaque torná-lo talvez justiça Só um pouco menor. Alinhar. É para a esquerda e talvez apenas mais pequeno, apenas assim. E, em seguida, apenas cloná-lo para o fundo apenas assim e estendido um pouco mudou. Ah, estilo de texto para corpo escuro. Assim como assim. E é assim que podemos criar um item em destaque, um trecho de bloco suficiente no designer. Nós podemos, é claro, brincar com alguma posição em apenas um pouco, já que queremos ter ah três itens bem apresentados em nossa placa de ritmo. Um item em destaque não pode exceder quatro chamadas, certo, porque três vezes quatro é igual a 12. Então agora podemos simplesmente pegar a imagem, pegar o texto e simplesmente torná-lo menor assim, e ter certeza de que o famoso designer está fazendo todo o trabalho pesado para nós. É ah tornando a imagem menor, e é ah, tornando-os que o texto do quadro menor também. Mas agora podemos simplesmente colocá-lo aqui e estender o quadro de texto assim talvez estender esse cara também um pouco. E lá vamos nós. Temos a nossa moldura. Bem, temos nossa imagem em destaque criada 46. 12.2Vamos substitua as imagens: Então, a fim de terminar nossa seção de postagens de um blogueiro, temos que crescer rampa nosso item em destaque enfraquecer o grupo se você quiser. E agora ele simplesmente tem que segurá-los para controlar o clone da chave e para a direita, assim como isso. Tudo o que temos que fazer agora é pressionar o controle J para duplicar a última transformação. Agora, se selecionarmos todos esses itens em destaque e trazê-los para baixo em algum lugar aqui, agora podemos criar seis elementos de itens em destaque. E tudo o que temos que fazer agora é pegar, clicar duas vezes nesta imagem para pegá-la e clicar, Substituir imagem, encontrar a imagem, fazer o mesmo com esse cara. Isto vai ser ver imagem, assim como este tipo vai ser a imagem D assim. Esta será a imagem, e esta será a imagem F. Agora vamos apenas adicionar um link simples que diria Ver o blawg. Então eu vou pegar o tipo têxtil artístico, ver a loira, aquele bloco, não necessariamente no tronco. E agora nós podemos apenas ah, tinha o título em destaque têxtil para ele. Mas eu não quero que esses personagens sejam capitalizados. Então eu vou me certificar de que no painel de caracteres a função em maiúsculas é desligada assim e eu vou me certificar de que a cor é adequada. Assim mesmo, vou colocar o verão à direita. Uh, em algum lugar aqui, isso seria bom. E, claro, agora podemos ter certeza de que todos esses caras estão agrupados e todos esses caras são do grupo. Então agora podemos simplesmente adicionar o plano de fundo abaixo deles para que possamos pegar a ferramenta de retângulo e começar a desenhar um fundo assim. E, claro, vamos nos certificar de que não é tão escuro, embora possa parecer agradável. E, mas ele vai ter esta cor clara fundo Aziz. Assim como então Agora podemos apenas pegar ambos esses caras, ter certeza de que eles estão alinhados ao centro corretamente estender este cara apenas um pouco para ter certeza de que ele é também colocado bem, exatamente no meio do quadro de arte. E lá vamos nós. Criamos a seção do bloco. Em seguida, vamos criar esta seção de feed Instagram e vamos ter um monte de diversão com o mascaramento dentro de um ajuste em designer. Primeiro, vamos criar um monte de retângulos, e então vamos usá-los como máscaras de recorte para criar este feed do Instagram, então fique atento. 47. 13.1Vamos começar a criar a galeria de imagens: nosso site está começando a ficar bonito. Nós já temos a seção de cabeçalho bem aqui, juntamente com os ícones de navegação e mídia social. Temos a imagem de herói com a imagem de fundo, a tipografia e a navegação deslizante. Então nós temos esta grande seção de itens em destaque aqui que iria dividi-lo em duas subseções separadas. E então chegamos a este Segundo apresentou um item em destaque, a subseção que está dividindo todo o nosso site em duas metades esquerda e direita. E depois recebemos o nosso da nossa secção de blawg. Então, em seguida, vamos criar o instagram feed uma seção para o nosso design. Então eu vou criar uma nova camada como de costume e poderíamos chamá-la de Instagram. Ou podemos simplesmente chamá-lo de galeria, assim como, no processo de criação da galeria, você vai aprender a usar máscaras de recorte dentro do designer de móveis, e ele vai ser a última técnica usando imagens dentro deste software. Então o que queremos aqui é um Siri fora de retângulos e quadrados que serão os contêineres para nossas imagens. Então eu estou indo para vovô a ferramenta de retângulo, e eu vou simplesmente criar. Eu vou simplesmente criar um retângulo que vai ser, bem, algo como Então, por que não? Não, eu vou simplesmente cloná-lo para a direita apenas assim, e talvez torná-lo apenas um pouco menor para algo como Então então eu vou cloná-lo novamente para a direita e estender do que clone int novamente e estendido ainda mais. E então eu vou simplesmente pegar esse cara, movê-lo para a direita e torná-lo significativamente menor, assim como lâmpadas e talvez mudar algumas dessas cores apenas para que ele não pareça tão chato assim. E o que podemos fazer agora é enfraquecer simplesmente derrubar esses caras e cloná-los, apenas assim, transformá-los em um grupo e simplesmente virá-los assim. Então agora a nossa vontade. Nosso feed Galeria do Instagram não é tão repetitivo. Eu vou no grupo esses caras e cada um desses pequenos elementos fora desses pequenos retângulos e quadrados vai ser 11 contêiner para o nosso para nossas imagens. Então o que podemos fazer agora é enfraquecer simplesmente começar a adicionar imagens. Então eu vou usar a ferramenta de imagem local, e eu vou navegar para a minha pasta do Instagram. Eu especificamente fiz essas imagens um pouco menores, só para que você não tenha que me ver redimensionando-as. E Justin, eles vão soar demais simplesmente indo para abrir esse cara e colocá-lo exatamente assim. Então agora você pode ver no meu gasto mais tarde tudo que eu tenho a imagem e eu tenho todos esses retângulos bem aqui. Então, como dedo do pé realmente corta essa imagem usando um desses retângulos? Bem, é fácil e não fácil ao mesmo tempo. É fácil porque você pode simplesmente agarrá-lo e movê-lo abaixo do retângulo que você quer. O Teoh. As Crianças, também, funcionarão como um clipe em uma bagunça. Então vamos dizer que vai ser esse cara verde aqui. Mas como você pode ver, às vezes você só tem que arrastar e encontrar o lugar certo para esta técnica funcionar. Mas uma vez que você encontrá-lo, você pode ver que bem ali você pode torná-lo uma máscara de recorte, apenas assim, e nós podemos movê-lo para algum lugar aqui. Isto deve ficar bem. Então, novamente, eu vou ter certeza de que eu estou no jogador certo aqui e pegar outra imagem. Talvez isto talvez estes lápis de cor, assim e eu simplesmente vou clicar assim. E eu realmente me pergunto esta imagem para ser cortada por este retângulo verde. Como você pode ver aqui, meu painel de camadas, todos esses retângulos tem uma miniatura diferente, e é Ah, eu acho que é uma boa idéia fazer esses caras para dar a eles cores diferentes, porque agora você pode ver que eles são diferentes no painel de camadas também, por isso é mais fácil apenas distinguir qual retângulo é qual. Então eu vou mover esse cara para baixo deste retângulo, mas como você pode ver, ele desapareceu muito bem. Isso é porque está caindo fora da nossa máscara de corte. Mas se o movermos sobre o nosso retângulo, será magicamente reaparecendo. Assim como assim. Então agora nós podemos apenas repetir o processo com todas as imagens restantes, mas eu acho que antes de fazer isso, nós podemos talvez mudar as cores de alguns desses retângulos porque nós temos quatro ângulos corretos ping aqui, e ele pode ser um pouco confuso em nosso painel de camadas Então vamos apenas escolher rapidamente algumas cores arbitrárias. Apenas para que nossos retângulos sejam bem mais visíveis em nosso painel de camadas. Talvez este preto também. Deixe-me mudar sua cor para uma cor azulada assim. E agora podemos realmente ter certeza de que estamos na camada certa. Coloque uma imagem, talvez esse cara e digamos que ela vai ser cortada por esse cara verde bem aqui. Então deixe-me encontrá-lo no painel de camadas. É esse cara aqui, e eu simplesmente vou movê-lo para lá. Então, novamente, eu vou ter certeza que eu estou na camada certa e talvez este aqui e talvez vamos talvez cérebro sobre este vermelho então novamente aqui e movê-lo para cima. Então deixe-me fazer este processo rapidamente com todas as imagens restantes, e eu vou voltar para você em apenas um segundo. E lá vamos nós. Temos a galeria criada, o feed do Instagram criado. Então lembre-se que, a fim de criar uma máscara de recorte, bem, a maneira mais fácil de dentro, se em designer é apenas colocar uma imagem e, em seguida, colocá-lo irá colocá-lo dentro de um recipiente como um ah, bem, retângulo ou um quadrado ou uma sílica ou qualquer forma que você quiser. Então, agora que temos esta seção de criado, nossa próxima ordem de negócios será apenas criar seu rodapé. E no nosso caso de Rodapé é bem composto de duas partes com a partir deste contra o solo dólar e o menor aqui na parte inferior. Isso é uma repetição do Chapeleiro. Então vamos começar a fazer isso no próximo vídeo. 48. 13.2Vamos criar a primeira coluna do balanço: neste vídeo, vamos começar a criar nosso rodapé. E como você pode ver, eu já estendi nossa arte, mas porque ela estava ficando muito pequena. Então vamos agora criar outra camada. Deixe-me fazer uma limpeza rápida aqui. Então deixe-me apenas rapidamente creedy nova camada e chamá-lo de rodapé assim que eu vou trazê-lo aqui abaixo da galeria, e eu acho que vamos começar com a criação do fundo porque o nosso imposto vai ser branco e eu apenas queria ser facilmente visível para você. Então eu vou pegar a ferramenta de retângulo e simplesmente criar um fundo que vai ser deste tamanho. Acho que deve ficar tudo bem. Claro que precisa ter a cor adequada. E talvez eu anote um pouco, assim. Mas eu vou fazer agora é eu estou indo para Gramp o quadro têxtil e eu vou criar um amigo texto que vai ser talvez três colunas de largura. Assim e de novo. Inserir preenchimento, texto fora do curso, se você tivesse algum antigo cliente de texto, você seria preenchido com isso. Mas já que não o temos. Estamos simplesmente preenchidos com preenchê-lo com o algum texto fictício. Então eu vou ir em frente e escolher estilos de texto e escolher cabeçalho de seção e deixe-me apenas colocá-lo apenas como então Talvez estendido apenas um pouco como assim e colocá-lo um pouco para tropeçar aqui. Isto deve ficar bem. Claro, se você não quiser que Teoh tem isso vai molduras de texto tão grandes que você pode simplesmente torná-lo menor. Ou você pode simplesmente pegar a ferramenta de texto quadro novamente e novamente e criar outro quadro de texto e inserir algum texto de preenchimento porque desta vez designer ofendido provavelmente irá dar-lhe algumas outras palavras para o editor que você pode usar para simular o simulador que, bem, dirigindo cada seção específica. Deixe-me deletado. Vou clonar esse cara para algum lugar aqui de forma bastante significativa. Vou deixá-lo por um segundo porque agora eu quero pegar a caneta tal. Quero ter certeza de que estou usando o derrame, mas não desse cara para que nós apenas diesel eleito. Vou pegar o mental de novo. Vou me certificar de que eu tenho sobre Lee o derrame, que eu não tenho nenhum Phil e eu quero um derrame para ser leve. E eu vou criar uma linha que vai ser arranhando da esquerda para a direita em todas essas quatro colunas. E estou fazendo isso porque se você deixasse apenas esta palavra aqui, pareceria meio vazia. Quero dizer, nós vamos ter algumas ligações aqui à esquerda em apenas um segundo. E se deixarmos assim e entrarmos em outra coluna e outra coluna, porque no total, teremos três colunas. É só que parece que eles estão desperdiçando muito espaço. E esta linha aqui está agindo como um bom divisor como um bom Philip. Não é muito intrusivo, mas, ao mesmo tempo, realmente parece que tem seu lugar. Então agora, eu vou simplesmente mudar isso de uma seção indo para a luz do corpo, apenas assim, e eu vou fazer com que apenas 11 palavras assim. E eu vou trazê-lo para cima e cloná-lo para baixo talvez três vezes apenas assim E claro , novamente, se você quiser, você pode simplesmente adicionar outro quadro de texto e mudar o preenchimento de texto. Ou você pode simplesmente digitar algum outro. Há outras palavras bem, que você escolhe. Talvez alguns links realmente se você quiser. 49. 13.3Vamos terminar o design e o fundo: no total. Queremos ter três colunas. Se olharmos para o original , são três colunas. São esses caras bem aqui. Então eu quero ter certeza de que cada uma dessas colunas está devidamente alinhada. Teoh o apropriado uma chamada de grade. Mas este fundo está a bloquear a minha visão. Então eu vou me certificar que esse Phil é selecionado aqui dentro do painel de amostras que eu vou deixá-lo baixo para algo como 25%. Talvez eu vá trazê-lo de volta em apenas um segundo. Então deixe-me ampliar um pouco. E agora, se eu pegar todos esses caras todos esses elementos e eu vou agrupá-los agora, eu posso facilmente mover esse cara para a esquerda e então apenas pressionar o controle J para clonar para a direita, exatamente assim. E agora podemos pegar nosso fundo e trazer de volta a opacidade para 100% no original . Temos um pouco mais de texto aqui à direita, então algo como um trecho sobre EUA aqui à direita, em vez de apenas links aqui à esquerda. Então eu vou apenas clicar sobre esses caras, removê-los e, em seguida, clique duas vezes sobre este cara e apenas estendido apenas assim. Talvez só um pouco. Só um pouco para cima e talvez cloná-lo em algum lugar aqui. E se removermos os painéis por apenas um segundo e talvez ampliarmos um pouco, podemos ver que criamos nossas colunas com os links e algum texto aqui. Tão velho. É deixado a fazer é simplesmente apenas certificar-se de que tudo está sendo alinhado bem. Então temos que agrupar todos esses caras trazer de volta os painéis, adicionar o quarto à seleção e apenas uma linha, tudo para dissipar. Então, realmente, a última coisa que precisamos fazer aqui é pegar emprestado o Cabeçalho Paul desses caras, assim como o chamado Pete e apenas ir até aqui, encontrar os achados certos logo depois, enrolado dentro e Apenas traga um pouco para baixo. Talvez vamos movê-lo para cima. E agora o que poderíamos fazer é simplesmente fazer todos esses caras menores porque normalmente se você está repetindo um pé em uma cabeça, por assim dizer, geralmente esses caras são menores todos esses elementos ou menores. Então eu vou fazer isso pode ser tão grande e dizer vai para este menu. Então eu vou simplesmente torná-lo menor, apenas assim. E, claro, podemos apenas remover a nossa placa dura, trazer um pouco para cima e lá vamos nós. Criamos nosso design. Espero que tenha aprendido que eles também sabem. Mas acima de tudo que você gostou de criar este site junto com porque eu realmente espero que você criou junto comigo. Se algo não estiver certo, basta rebobinar o vídeo assistir novamente. E se algo ainda não está muito claro, você sempre pode apenas fazer uma pergunta Em nosso quadro de discussão, o projeto pode ser terminado, mas para nós não estamos terminado de trabalhar com ainda tem algumas coisas a fazer. Ainda precisamos que o Teoh faça isso. Vamos prepará-lo para entregá-lo ao cliente e entregá-lo a um desenvolvedor da Web. Se você vai estar trabalhando com um se você não está desejando desenvolver o site você mesmo. Mas o design está feito 50. 14.1Entrega o design para o cliente: Quando você terminar com a concepção de uma página da Web, é hora de entregá-la ao cliente em vários estágios de comunicação com o cliente. Você apresentará versões diferentes e ligeiramente alteradas fora do design, por isso é bom saber como salvar e compartilhar rapidamente seu trabalho. Usando uma coisa para designer, A maneira mais óbvia de apresentar trabalhador seria salvar o design e enviá-lo para o cliente. Na maioria dos casos, eles não terão ofendido designer instalado em computadores, então você precisa enviar um arquivo que seja comum, luz facilmente reconhecível e que irá preservar a qualidade do seu design. O formato de arquivo mais fácil e infalível para escolher enviar para seus clientes é, claro, J. P G. Salvar seu trabalho como um arquivo J pic é tão fácil quanto usar o comando de exportação que você confinou sob o menu de arquivo. Realmente, as duas únicas opções que você precisa prestar atenção a um este estágio é que o controle deslizante de qualidade e o seletor de área, como eu imaginei antes do melhor compromisso entre boa qualidade e tamanho de arquivo pequeno, é 70 a 75%. Uma grande desvantagem, embora usando uma escolha J como formato de arquivo é que ele não suporta transparência. Se o seu design tem alguns elementos gráficos que contêm transparência, batter escolha P e G como formato de arquivo. PNG suporta transparência, mas como você pode ver, não há como controlar a qualidade, o que basicamente significa o nível de compressão aplicado fora. arquivo deles. Vet significa que normalmente os arquivos PNG são maiores que J. P G, mas você já sabe como comprimir P e G para que o tamanho maior do arquivo não seja um problema. Quanto à área, você quer exportar judeus documento inteiro ou uma arte específica a bordo se Europhile tem vários projetos espalhados por várias placas de arte, como um monte de perguntas de estudantes perguntando o que formatos pai eles devem entregar para seus clientes. Então deixe-me abordar esta questão muito rapidamente, assumindo que o design acabou e que o cliente está feliz e pagou, é hora de entregar o seu design. Os formatos de arquivo que você coloca dentro do pacote de entrega devem incluir todos os principais, como P e G. J. Paige. PDF PSD tiff e por último, mas definitivamente não menos importante o arquivo de origem, que neste caso é ponto um projeto f. Eu recomendaria exportar o design para todos esses formatos de arquivo e, em seguida, zip nos arquivos no reboque. Um arquivo menor, mas o cliente está ligado. Lee venceu o fim do processo de entrega do projeto. O outro é o desenvolvedor que vai estar desenvolvendo o site. Quero dizer, se você é o desenvolvedor, você pode pular o próximo vídeo. Mas se você não estiver, deixe-me orientá-lo através do processo de entregar o arquivo e diferentes ativos para o desenvolvedor da Web a seguir. 51. 14.2Entrega o arquivo para o desenvolvedor: Se você estiver pronto para enviar o projetado para um desenvolvedor, há algumas coisas que você precisa cuidar. Primeiro de tudo, as chances são de que um desenvolvedor que você estará enviando o arquivo terá Photoshop apenas velho em sua loja de fotos de computador é tão onipresente que você deve realmente ser areia fina em um arquivo PSD ou TIFF. Exportar para qualquer um desses cinco formatos é, naturalmente, para baixo através do comando expert encontrado no menu de arquivos. Mas exportando para um PSD, você pode escolher entre três predefinições das quais apenas primeiro deve ser um assunto de sua preocupação. Você pode dizer ao designer para preservar a precisão máxima ou a capacidade máxima de edição. Infelizmente, nenhuma dessas predefinições manterá o texto como Aditya Ble. Não importa se você usou o texto de preenchimento ou digita algumas palavras reais. Designer irá convertê-los em pixels. Todas as camadas e massa devem ser preservadas, mas não o texto auditável. Portanto, é apenas algo que você deve ter em mente. Outro fator importante a ser considerado neste processo específico é exportar os ativos que você usou em seu experimento. Eu não estou falando sobre nada que você colocar dentro do painel de ativos, mas sobre as imagens, ícones e outros elementos gráficos que você usou. Há basicamente duas maneiras de sair da exportação desses ativos no designer, então vamos dar uma olhada em ambos. O 1º 1 é ótimo. Se você só precisa exportar um ou dois ativos rapidamente, basta selecionar um ícone de imagem ou até mesmo um pedaço de texto como nosso logotipo e usar o comando de exportação . Escolha o formato de arquivo que você precisa e não se esqueça de alterar a área. Opção para seleção sem exportação de hit em segundo plano, e você pode exportar todos os ativos que quiser muito rapidamente. Mas um amigo do designer vem com um espaço de trabalho especial dedicado apenas à exportação. É chamado de persona de exportação, e vamos dar uma olhada em seguida. 52. 14.3Como usar a Persona para usar os ativos em em massa: a persona de exportação é um espaço de trabalho totalmente diferente e acionou ferramentas criadas apenas para exportar seus ativos. Sua ferramenta principal é chamada para a ferramenta de fatia, e permite que você crie pequenas peças de arte chamadas fatias, e essas fatias podem então ser transformadas em arquivos separados, graças ao painel de fatias. Mas há um grande problema com essa ferramenta. Às vezes, muitas vezes, realmente imaginar a fatia com o objeto real que você deseja exportar pode ser extremamente difícil. Infelizmente, você não pode simplesmente selecionar uma imagem ou qualquer outro ativo e, em seguida, escolher a fatia roubada para criar uma fatia perfeita. Não sei quanto a você, mas para mim isso é muito frustrante. Mas, felizmente, há uma solução para isso. Se você simplesmente pegar a ferramenta de seleção e clicar com o botão direito em uma peça de arte, você pode selecionar a opção criar fatia e qual designer criou a fatia para você e até mesmo dar-lhe um nome correspondente com seu nome no painel de camadas e o que é ainda mais legal . Você vai selecionar vários elementos de uma só vez e criar várias fatias usando o mesmo método . Uma vez que todas as fatias são criadas, você pode passar para o painel de fatias e escolher quais delas devem ser exportadas. Simplesmente marque ou atique-os, então exporte apenas um único arquivo ou todos eles ao mesmo tempo. Não se esqueça de escolher a predefinição de exportação que se adapte às suas necessidades. É assim que você pode usar a persona de exportação para salvar ativos individuais de seu design. Eu acho que é uma ótima maneira de exportar várias peças de arte quando você quer economizar tempo. 53. Agradecemos por assistir o curso: Então, parabéns. Você completou o curso. Eu realmente espero que você tenha gostado e que tenha aprendido muito. Quero dizer, eu espero que agora você esteja se sentindo muito mais confortável sobre usar um designer desmaiado para projetar sites. Então, no curso, você aprendeu não apenas como usar suas ferramentas e técnicas para montar um site, mas também tendências e inspirações de Web design. Como escolher os melhores fundos e cores para seus sites. Onde encontrar grandes imagens, como trabalhar com ícones, como trabalhar com cores, basicamente todas as ferramentas essenciais, coisas, técnicas e truques que devem começar e permitir que você projete forma independente. Então, se você gosta deste curso, por favor, dê uma revisão honesta. E eu espero vê-lo em um dos meus próximos cursos ter um bom design. Meu nome é David Tyminski. 54. 1Vamos descobrir a armação para o design: nos próximos vídeos, você aprenderá a criar esse design moderno de blocos criativos e criaremos tanto a primeira página quanto uma única página de postagem. Mas antes de passar para o processo de design real, vamos dar uma olhada no quadro de arame que eu criei especificamente para este projeto. E vamos realmente começar com o arame para apenas o principal, a frente, uma página bloqueada. Então, como você pode ver, eu comecei com o cabeçalho e você pode ver que há um logotipo à esquerda e um sistema de navegação à direita. Agora o fundo é escuro porque eu quero vontade. Em última análise, vou criar o fundo que vai ficar escuro, e vou colocar um pouco de contraste em elementos mais claros, como o logotipo e o sistema de navegação. Contra esse fundo sob a urze, nós temos o herói da seção, e mesmo que neste quadro de arame pareça que nós vamos apenas criar uma única imagem , na verdade, no design principal, vamos criar alguma coisa. Estamos interessados. Vamos criar um controle deslizante de carrossel com as múltiplas imagens, bloco de trechos postais e, claro, navegação. Por baixo disso, decidi dividir as seções principais em duas seções. Então, à esquerda temos o bloco gabar-se excerto o bloco principal destaque ostentam trecho. E à direita, decidi criar uma barra lateral. Então, primeiro à esquerda, chegamos à imagem futura do futuro para bloquear a vangloria. E então temos algumas representações simples da esposa fora da data. Claro, todos esses elementos são um texto simples. Então nós temos o elemento de arame data no bloco Post vai liderar o título dela. Chegamos à informação do autor o número de Commons aqui. Temos algumas pequenas representações dos ícones das mídias sociais que chegamos ao trecho de postagem do bloco nas tags ou nas categorias e o botão ler mais aqui à direita. E todos esses caras, todos esses elementos estão sendo exibidos contra um contraste no fundo este recipiente como um diferente por terra, um mais amplo enquanto um fundo leve. E está em contraste com todo o fundo de toda a página da Web do bloqueio sanguíneo. Como, abaixo disso poderíamos continuar. Poderíamos apenas duplicar essa idéia e simplesmente clonar tudo isso, todo esse contêiner inteiro para um poste de bloco. Mas eu decidi que poderíamos apimentar as coisas que o pouco poderíamos dividir este bloco aqui em duas seções separadas em duas colunas separadas. No entanto, estamos duplicando no posto de bloqueio. Excepto, mas é claro, estamos a torná-lo muito, muito menor. E estas duas colunas host vai 123456 bloco post trechos juntos. E abaixo disso, eu decidi colocar uma garrafa ou um link de texto que iria navegar para posts mais antigos dentro deste site e à direita. Temos a barra lateral bem aqui. E o ciber-cibernético também é separado em Collins específico. Então talvez me deixe apenas zoom rápido, zoom um pouco assim. Chegamos à caixa de busca aqui, depois pegamos a primeira. A primeira seção que é ah, bem, que começa com um pequeno rótulo bem aqui. Então temos o texto da imagem e alguns ciclos de mídia social. E toda essa seção, este fragmento vai ser nossa seção sobre mim sobre mim. Então temos outra etiqueta e uma mensagem. Então temos algo como um bloco mais popular ou tendência gaba-se. Temos uma imagem em destaque à esquerda, no quarteirão. Possui título à direita, a data e a vontade, a data no topo e a categoria ou etiquetas aqui na parte inferior. E como podem ver, estes pequenos contentores estão a ser separados por uma linha divisória. Mas não todos eles. O último não tem esta linha, porque aqui temos outra gravadora. Então esta linha divisória aqui parecerá redundante. Acho que não precisávamos aqui. Então, e então, é claro, temos apenas um rótulo simples e algumas imagens a e esta seção. Decidi fazer isso como um contêiner para alguns anúncios. Talvez assim, quando tudo isso for feito, podemos mudar para o rodapé fora do curso se você quiser, você poderia talvez adicionar algum feed do Instagram bem aqui. Mas desde que criamos esse feed do Instagram em nosso design anterior, pensei que deixaria essa decisão com você. Quero dizer, se você quiser criar este recipiente de feed do Instagram aqui em baixo, você já sabe como fazê-lo, e você pode incluir neste fio neste design. Então decidi ir direto para o rodapé. E como você pode ver, eu o separei em três colunas com os mesmos rótulos que podemos ver como podemos ver em nossa barra lateral bem aqui. E, claro, nós temos alguns links no texto aqui em baixo, e eu repeti que repetiu o cabeçalho. Mas é claro, é quem incham, maneira menor, muito menor do que o heller principal em cima. E, claro, com base nesta armação de arame, vamos criar este design. Mas eu acho que vamos quebrá-lo e no próximo vídeo. 55. 2Vamos descobrir o design do blog: Então, neste vídeo, vamos dar uma olhada em seu design principal. Agora sabemos como a armação do fio se parece. Então agora é hora de dar uma olhada no design principal. Como todo o conceito será parecido, com base nessa armação de arame. Então, novamente, no canto superior esquerdo do nosso chapeleiro, temos o local, que é um texto simples e simples à direita. Temos aqui o sistema de navegação com os ícones das redes sociais. Então, é um conceito muito, muito básico, mas eu gosto dessa abordagem minimalista quando se trata de cabeçalhos. Então temos a imagem do herói. E como podem ver, criamos um carrossel. O controle deslizante de tipo, um controle deslizante de carrossel, é um controle deslizante que hospeda não apenas uma imagem, uma imagem grande gastando em toda a porta de exibição, mas um grave off, imagens menores que quando? Quero dizer, quando você clica em um lá fora, os botões de navegação simplesmente se movem para a esquerda ou para a direita, assim como um carrossel. Então, cada um deles, como contêineres para imagens, tem seu próprio título exclusivo aqui. E claro, nós temos esses botões de navegação bem aqui E se você está se perguntando por que esses caras são brancos , este título, este título e esta seta e este título e esta seta bem, o Bagram para esta seta e são eu acho que é como uma cor rosa escuro. Bem, isso é só porque eu estou indicando o que eu gostaria que esses links parecessem sempre que você passar o mouse sobre essa seta eu quero que o fundo fique rosa. E sempre que eu pairava sobre este título, eu queria virar rosa. O mesmo vale para esta casa. Bem, para o link da página atual aqui. Mas esta foto deve logotipo vai ser, bem, bem, rosa o tempo todo. Então, em seguida, temos, é claro, nossas seções. Então nós temos a imagem principal principal a imagem em destaque bem aqui. Os dados, o título da postagem do bloco. Chegamos a informação do autor, comentários, ícones, texto, algumas etiquetas e o botão ler mais aqui. Nós já vamos ver na parte armação de arame o que? O que todos esses recipientes devem conter. Mas note que alguns desses caras são, bem, da mesma cor. Quero dizer, esta data da dieta é da mesma cor que os arcos do bloco. Isso por texto é o mesmo. Cólera. O trecho de texto é da mesma cor que as cores para eles, os ícones de mídia social. No entanto, todos esses links aqui os comentários, as etiquetas de viagem estilo de vida fotografia são escritos em uma cor diferente. Esta é a cor principal para os links dentro desses contêineres. No entanto, quando você paira sobre eles, eles disseram que eles deveriam se transformar em rosa assim como esses caras aqui. É por isso que eles estão escritos em uma cor diferente e diferente. Mas quando você vai para estes thes post, exceto que você considerar, decidiram apenas deixar as ligações básicas cores que são verdes, que é verde, neste caso. E, claro, todos esses textos estão sendo encolhidos, então eles são menores que o principal, o principal tex aqui em cima. E, claro, temos duas colunas e fotos diferentes, e temos seis elementos todos juntos. Agora, quanto a eles, tanto quanto ao lado da Margo, você pode ver que temos esta lupa simples aqui que este recipiente tem uma borda simples , simples, , e eu tenho a busca de texto aqui dentro, e então chegamos aos rótulos. Então recebemos o texto da foto que está alinhado com o centro de mídia social I armas. E depois há o texto que acabamos de ver. Claro, o rótulo e o texto. Este texto não está sendo alinhado ao centro, mas à esquerda. E então nós temos os gabaritos de bloco mais populares. Então esta imagem em destaque. Está se estendendo de cima para baixo. Mas é claro, é apenas tirado em torno de 1/3 de todo o recipiente. Temos a data no título do post do bloco e a categoria aqui, e temos 1234 contêineres. E então poderíamos ter um contêiner, 40 anúncios. E, claro, são apenas algumas imagens simples. E depois, claro, temos a comida. Ou deixa-me apenas diminuir o zoom. Temos o rodapé com algumas pernas. É só um texto de espaço reservado. E é claro que eu fui vai duplicá-lo. Mas encolheu o cabeçalho de cima para baixo. Então temos o logotipo. Temos a navegação e algumas mídias sociais que tenho. Então lá vamos nós. Este é o aspecto do nosso design básico. Mas, claro, ainda precisamos de T.O. Dê uma olhada no que nossos ativos serão as cores, os fundos, as imagens que usaremos para fazer esse projeto acontecer. Mas acho que devemos fazer isso no próximo vídeo. 56. 3Vamos dar uma: Então, para fazer este projeto acontecer, vamos basicamente precisar de três coisas, vamos precisar de colares, imagens e tipografia. Agora, essas cores da floresta vão. Entramos no painel de amostras que todo o grupo criou aqui. Então temos 12345 cores. Não precisaremos de mais. Chegamos a esta cor muito pálida, muito pálida, muito pálida, grande que é na verdade a cor fora do nosso fundo principal. Este é esse cara bem aqui. Chegamos ao sotaque na cor branca. Essa é a cor desses links, os links de navegação, esses ícones de mídia social, é claro, os fundos dos contêineres, uma ondulação. Então chegamos à cor principal da tipografia, que é esta cor cinza muito, muito, muito escura. Não é preto, é muito para um escuro. E então chegamos a esses dois acentos principais em cores, que é este banco este rosa escuro e esta cor verde. E eu criei toda essa paleta. Eles usando coolers que co esta ferramenta que já estavam bem, nós aprendemos um dos vídeos anteriores e eu comecei com apenas um eu sabia que eu queria criar um mais escuro vai mentir para grande fundo e eu queria colocar alguns recipientes brancos contra isso plano de fundo. Então eu primeiro eu simplesmente digitei o valor para esta grande cor, a cor branca. E então eu adicionei essa cor cinza muito, muito escura. E então eu apenas deixei o algoritmo para vir acima com esses dois sotaque em cores para mim. Claro, temos um monte de imagens bem aqui. E eles são. Eles vão ser fornecidos a você em uma pasta separada s para que você possa trabalhar junto comigo . E como você pode ver, há muitas dessas imagens e elas são indiferentes aos tamanhos e em recipientes diferentes . E este tipo de design nos permitirá trabalhar novamente com a colocação em imagens dentro de recipientes específicos como recipientes quadrados, recipientes retangulares. Então eu acho que é fundamental saber como trabalhar suavemente com imagens dentro de um quadro. O designer, quando você está projetando sites e deixe-me apenas dizer-lhe que nós não vamos usar máscaras , iria usar outra técnica de trabalhar com imagens dentro de um amigo para designer, que pode ser um pouco É mais fácil para você. Oh, já pode não se cansar. No final do dia, você tem que decidir qual técnica é mais fácil para você, se é mascaramento ou esta outra técnica ainda um pouco misteriosa. E depois que estivermos bem depois de sabermos, depois de conheceres ambas as técnicas de mascaramento e outra, poderás decidir qual delas funciona melhor para ti. Então essa tipografia da floresta vai. Decidi ir com a família Roboto Superfund. Agora é chamado Super Família porque você tem diferentes tipos de letra dentro dessa família e fundos diferentes com então essas famílias, por exemplo, o logotipo aqui e ali Block post títulos são escritos usando a empresa, o Roboto Condensado e sua versão ousada do fundo. Mas o texto principal do corpo é escrito é escrito usando Roboto regular. Mas os links aqui são escritos usando Roboto, itálico e, claro, o ler mais texto aqui e eles estão usando Roboto negrito que condensado, mas roboto negrito e todos esses caras têm texteis separados aqui. No entanto, penso que, neste caso, não vamos primeiro criar têxteis. Mas acho que vamos criá-los por último. Quero dizer, com desenhos como este. - É o quê? Até terminar, é sempre um progresso de trabalho, certo? Assim, você pode mudar de idéia de vez em quando ou com mais frequência do que de vez em quando e sobre como seus fundos devem ser. Então, até que você esteja completamente decidido sobre, digamos, os títulos de postagem de sangue ou os links, você não deveria. Acho que talvez não. Você não deveria. Mas é uma boa ideia. Pode ser esperar até que você tenha o conceito tudo planejado e, em seguida, apenas para criar o têxtil. E eu acho que essa é a abordagem que vamos adotar neste design porque trabalhar com têxteis em um amigo para designer pode ser um pouco complicado. Então, talvez usando desta maneira irá ajudá-lo a aproveitar os têxteis o suficiente em designer e permitir que você trabalhe com eles um pouco mais eficientemente. Ok, então nós temos a armação do arame coberto. Temos que quebramos este projeto e sabemos que ativos vamos precisar. Também não me lembro da lembrança Não se esqueça que temos essas seções colocadas contra camadas separadas. Então temos a camada de cabeçalho. Temos o herói em camadas na barra lateral da camada de seção, rodapé. E, claro, todo esse design está sendo exibido está sendo colocado contra uma grade que você pode ver aqui . Então eu acho que temos tudo muito bem coberto. Não se surpreenda se, de vez em quando eu vou estar me referindo a armação de arame ou preferencialmente este design principal, porque eu não quero um eu quero passar muito tempo olhando para mim, tentando descobrir o que era o original. Perdoe-me se eu apenas de vez em quando, basta dar uma olhada no Swyche original e assim eu posso mostrar-lhe as técnicas necessárias para criar este design um pouco mais rápido sem tentar descobrir o tamanho do telefone ou a cor. Então, sem mais delongas, vamos realmente mergulhar no processo de design principal. E vamos começar com a criação do Chapeleiro 57. 4Como criar o logotipo e Nav: Então, como você pode ver, vamos criar nosso design e com base na grade de 12 colunas que usamos antes. Então, se você quiser trabalhar comigo, você pode baixar os mesmos cinco que você poderia baixar quando estávamos criando nosso design anterior e simplesmente trabalhar usando esse arquivo. Mas antes de começar a desenhar qualquer coisa, vou criar uma camada para o nosso cabeçalho. Então, no painel Camadas, eu simplesmente vou clicar na nova camada. Eu venho e vou chamá-lo. Cabeçalho a tem assim tão cabeça assim, e eu vou movê-la para abaixo da grade. Então eu vou começar com a criação do chão saco para o cabeçalho e deixe-me apenas rapidamente dar uma olhada no original para verificar as dimensões deste fundo. E como você pode ver no painel de transformação, tem 1920 pixels de largura e 100 pixels de altura. E, claro, tem 1920 pixels de largura porque este é o com fora da nossa porta de visualização fora da nossa página web. Então o que eu vou fazer é eu vou ter certeza de que, claro, eu estou na camada de cabeçalho agarrou a ferramenta de retângulo. Criar um retângulo que vai ter, tipo, muito arbitrário nas dimensões do mundo. Porque agora eu vou ter certeza que meu ponto de referência aqui está definido para este canto superior esquerdo para que eu possa movê-lo. Teoh, o canto superior esquerdo da minha página web. Então eu vou simplesmente inserir zero para o valor X e zero para o selvagem. Por que o valor assim Para torná-lo encaixado neste canto superior esquerdo bem aqui. E agora eu estou simplesmente indo Teoh. Bem, eu vou me certificar de que esta opção de link não está marcada. Então eu vou digitar em 1920 e eu vou digitar 100 para a altura, exatamente assim. E lá vamos nós. Criámos o nosso passado. Claro, ainda precisamos dar uma cor de preenchimento adequada. Então eu vou clicar nesta amostra mais escura aqui e agora podemos começar a criar nosso logotipo bem. Então novamente eu vou me referir ao meu para o meu original. Eu só quero ver o tamanho desta frente como você pode ver é 42 pontos como esse , e é claro, escrito na refutação condensada, ousada. E a propósito, se você não tem este Roboto Super Super Family instalado em seu sistema, você teria que ir para os fundos do Google Web e simplesmente baixado e de lá. Mas já discutimos como fazê-lo. Então eu acho que você não deve ter nenhum problema e eles apenas baixando na frente e instalando. Designer de Afinitor Insider. Então eu só vou pegar o têxtil artístico, assim é claro que eu vou ter certeza de que eu estou na camada certa. Então, com o têxtil artístico, eu simplesmente vou clicar e arrastar para começar a criar texto. Eu vou definir a frente para Roboto condensado exatamente assim, e eu vou escolher sua versão ousada. E eu vou digitar 42 para seu tamanho e mudar a cor para este, uh, pálido pagamento de boas-vindas de uma cor rosa escuro assim. E eu vou digitar o inimigo rebocado assim. E eu estou simplesmente indo e é claro que eu preciso movê-lo para a camada certa, e eu vou simplesmente movê-lo para cima até que ele combina com o meu, uh bem, pode ser grão. E, claro, podemos simplesmente selecionar esses dois caras para ter certeza de que esse logotipo ah está sentado exatamente no meio de nosso fundo. E eu vou simplesmente para a linha fora do painel de arranjos e escolher esse cara aqui . Diz uma linha de metal assim. Pressione OK E terminamos com o logotipo. Então, em seguida, nós criaríamos esta vontade este sistema de navegação junto com aquela madeira, o poço vai itens de mídia social. Então, de novo, deixe-me verificar a altura desse cara. É ah Roboto médio 16 pontos, como você pode ver aqui. Então eu vou simplesmente pegar o têxtil artístico novamente. Clique e arraste. Eu vou mudar a cor para Branco que eu vou digitar e talvez para casa apenas como então deixe-me apenas movê-lo contra o quarto mais escuro dos fundos. Então você admite. E assim foi roboto um roboto médio roboto médio oito na altura era 16, eu acredito. Deixe-me verificar isso de novo. 16 e ah, O que queremos fazer é ter certeza de que todos esses links de navegação são escritos usando letras maiúsculas Onley. Então eu vou para o painel de caracteres e eu vou escolher esta opção aqui que diz todas as maiúsculas. E se eu clicar nele, você pode ver que todas essas letras estão sendo mudadas para verdadeiras para suas versões maiúsculas . Mas até onde me lembro, nosso link inicial foi escrito usando esta cor rosa, o que indica que esta é realmente a página ativa. Então eu vou mudá-lo para a cor rosa, assim como agora a única coisa que resta fazer aqui é simplesmente duplicar este cara para a direita, e eu estou segurando a tecla control e a tecla shift para restringir o movimento assim como Então. E eu vou mudar a cor do dedo do pé branco, e eu vou digitar algo diferente, por exemplo, talvez galeria e notar que nós não temos que pressionar as tampas lock nem a tecla shift a fim de torná-los estas letras de bezerro velho. Porque eles são, Eles ainda têm atribuído os antigos atributos caps bem aqui. Isso foi dito, só um segundo para entrar no painel de caracteres. Então agora podemos simplesmente deixar-me fechá-la. Agora podemos simplesmente colônia esse cara para a direita novamente e ah, digitar e talvez meu equipamento e talvez mais um que simplesmente vai ser, uh, digamos, talvez contato assim. Agora temos a navegação. Sistema de navegação que criei. Eu vou mover esses caras um pouco para o lado, apenas assim. Talvez todos eles, mas mais para o lado. Então o que temos que fazer agora é que temos que adicionar esses caras aqui, esses ícones de mídia social bem aqui. Então, para isso, vamos usar o comando da polícia. E eu acho que eu acho que nós poderíamos fazer isso no próximo vídeo porque nós vamos fazer alguma edição com nossos ícones de mídia social. Então eu acho que eu acho que seria melhor se nós fizéssemos isso no próximo vídeo 58. 5Vamos adicionar os ícones de redes sociais: Então, antes de começar a colocar em nos ícones de mídia social, deixe-me apenas verificar rapidamente o quão grande eles são. Deixe-me só ampliar um pouco e deixe-me clicar nesse cara aqui. É Ah. Bem, digamos que são 16 pixels bem aqui. Então o que eu vou fazer é clicar na ferramenta de imagem local, e eu vou navegar para onde eu mantenho meus ícones de mídia social. E eu vou começar com o ícone do Twitter e eu simplesmente vou abrir e eu vou colocá-lo em algum lugar aqui. Claro, é muito grande, então vou torná-lo menor desta vez. Vou me certificar de que a opção de proporção de bloqueio seja roubada. E eu vou digitar 16 para fazer esse cara bem, bem menor. Mas, claro, a cor deste ícone é, bem, bem, não é boa. É suposto ser branco, mas como já sabemos, podemos simplesmente mudá-lo no nosso painel de ferramentas. Temos que ir para a opção de documento adicionado, e nós temos que simplesmente escolher a cor branca como essa e fechar esse cara para que agora possamos ter Ah para que agora possamos ter neste ícone cores impróprias. Em seguida, eu posso simplesmente colônia este cara para a direita ir para substituir documento e escolher talvez Facebook. Mas novamente, como você pode ver, novamente temos que mudar a cor. Eu realmente desejo um amigo para designer. Bem, acho que não é uma caixa. Então eu posso dizer que eu realmente gostaria que eles corrigirem este bug, mas eu acho que seria melhor se eles apenas adicionassem disfuncional que se eu fosse colônia neste cara este documento embutido eu estou clonando seus atributos também para que eles pudessem ser um clone. Como neste caso, o colar pode ser clonado para o objeto clonado também. Mas como não é, ainda temos que ir adicionar um documento, clicar no branco, uma amostra, depois duplicar o Facebook. Eu venho para a direita duplicado deixe-me apenas duplicado, assim como novamente substituído o documento com o logotipo do Instagram, documento adicionado e novamente clonado este cara selecionado e roupas para a direita. Substituí-lo por um logotipo prisão pitada editado, cor branca. E lá vamos nós. Criamos o concerto dos olhos. Então a última coisa a fazer aqui seria alinhar tudo bem. Então o que eu quero é que eu quero distâncias iguais entre todos esses caras, não apenas os links de texto, mas também com os Aiken. Então o que eu vou fazer é eu vou primeiro crescer este logotipo do Pinterest eu instagram, Facebook, Twitter e todos esses caras. E eu vou ter certeza de que eles estão sendo alinhados corretamente para dissidente para o meio , assim agora eu poderia movê-los para a direita e alinhá-los com o meu com minha grade. Só amplie um pouco, assim. Isto deve ficar bem. Então o que eu quero fazer agora é ter certeza de que a distância entre todos esses caras é igual. Então, não só entre os links de texto, mas também entre lings de texto e ícones de mídia social. Então o que eu vou fazer é simplesmente clicar em todos esses elementos para selecioná-los . Mas só esses caras e os ícones das mídias sociais também, assim. E eu vou para isso. Talvez me deixe mover um pouco para que você possa ver tudo melhor. Então eu vou para este painel de intervalo e da opção de alinhamento horizontal, eu vou escolher espaço horizontalmente. E se você quiser deixá-lo, como também distribui, bem, você pode fazê-lo. Mas se você quiser ter certeza de que a distância entre todos esses elementos é exatamente o que você quer, você pode simplesmente verificar, encomendar, distribuir e apenas brincar com este controle deslizante aqui. Talvez. Vamos ver algo em torno de 20 ou 24 pixels. Eu acho que isso deve fazer isso agora nós podemos apenas mover esses caras para a direita e ter certeza que eles estão bem alinhados com nossa grade. Talvez um pouco para a direita. Algo assim. E poderíamos agrupá-los pelo Presidente de Controle G no nosso teclado. Então, agora que todos esses caras são linhagens criadas, zoom de volta, todos esses caras são criados. Podemos novamente certificar-nos de que tudo está a ser está a ser bem alinhado. Eu acho que eu tenho que agrupar esses caras novamente assim, Controle G. Então nós podemos apenas ter certeza de que eles estão alinhados corretamente bem assim, e que eles estão alinhados corretamente em relação ao fundo, apenas assim. Então lá vamos nós. Temos este Chapeleiro criado. Se eu apenas pressionar guia, podemos ver nosso site. Acho que esse cara se mexeu um pouco. Podemos ver o nosso site em toda a sua beleza. Bem, site, é só que é apenas o nosso cabeçalho. Podemos rapidamente livrar-nos da grelha assim. Assim podemos ver. E nosso e havia guias para que pudéssemos ver tudo melhor. Então isto é o que o nosso e isto é o que o nosso cabeçalho parece. Eu acho que parece um pouco minimalista, mas ao mesmo tempo, esta cor rosa é que em um pouco. Ah, bem, isso faz todo esse cabeçalho parecer um pouco mais animado. Então a próxima ordem de negócios seria criar nosso controle deslizante. Deixe-me apenas diminuir o zoom para criar nosso controle deslizante para criar essas fotos para criar esses blocos. Bem, eles estão realmente levando a um posto de bloqueio. Então eu acho que poderíamos dizer bloquear títulos postais e essa navegação. Mas vamos fazer isso no próximo vídeo 59. 6Vamos adicionar as primeiras imagens: Então, como de costume, vamos começar a criar a seção de herói criando e camada inadequada para essa seção. Então, novamente, eu vou simplesmente adicionar uma nova camada e ah, nomeá-lo. Ah, herói. E eu vou movê-lo abaixo da camada de cabeçalho assim. Então o que eu vou fazer novamente é eu vou simplesmente pegar a ferramenta retangular e eu quero torná-lo tão bem como grande como o próprio site. E eu vou simplesmente posicioná-lo corretamente, apenas assim. Porque o que vamos fazer agora é criar três contêineres separados para essas imagens. Eso, a fim de ter três contêineres separados, precisamos adivinhar este retângulo bem aqui. Deixe-me apenas para que os homens sempre tão ligeiramente assim. Então, nesta fase, a altura não é importante. Será em apenas um segundo. Mas, por enquanto, o que é importante é que nosso retângulo está se espalhando por nossa página da web em nossa porta de visualização . Então, já que queremos ter três contêineres separados, precisamos dividir nosso retângulo por três. Então lá dentro e eu vou simplesmente primeiro, eu vou ter certeza de que eu estou dividindo isso do ponto de ancoragem da parada esquerda. Então o que eu vou fazer é eu simplesmente vou digitar ah barra três, que vai dividir este um retângulo por três, exatamente assim. E como você pode ver, é com seus 640 pixels exatamente assim. Então, se eu quiser que este recipiente seja um quadrado como aqui que eu tenho que simplesmente fazer a altura igual ao com. Então, neste caso, 640 exatamente como agora, outra coisa que vale a pena notar é que as principais distâncias entre seções ou dentro seções e entre elementos principais fora de seções são geralmente 25 pixels ou o dobro do que é de 50 pixels. Então a distância entre esses contêineres é essa lacuna bem aqui. Essa margem é de 25 pixels, e a margem entre esse controle deslizante e o heller também é de 25 pixels. Então agora eu vou simplesmente mover este cara para cima os snaps com o cabeçalho e para o valor y novamente, eu vou certificar-me de que o meu ponto de referência é colocado bem no topo bem aqui. E eu estou simplesmente indo para o pé. Adicione 25 assim. Mas eu vou mover esse cara 25 pixels para a esquerda porque eu quero criar esse tipo de carrossel afetado esses contêineres estão realmente saindo da porta de visão. Então, novamente, eu vou mover esse cara para o poço, eu vou movê-lo para a esquerda por 25 pixels. Então, para o valor X, eu simplesmente vou digitar um menos 25 assim. E então eu vou simplesmente clonar esse cara para a direita até que ele se encaixe com o original. E eu vou Teoh, adicione 25 assim. E então eu vou clonar esse cara para os snaps certos com o original que eu vou adicionar 25 exatamente assim. Então agora temos três contêineres separados que bem, o contêiner esquerdo e o contêiner direito são como sair da nossa porta de visão e , claro, eles no meio. Chegamos a todo este contentor quadrado. Claro, todos esses caras são contêineres quadrados, mas esses podem parecer mais um retângulo. Já que podemos ver esta lacuna de 25 pixels bem aqui. Então, novamente, se eu simplesmente me certificar de que esses caras estão na camada certa na camada de herói, agora eu posso usar outro. Outro truque para fazer esses caras vão se comportar como se fossem contêineres de imagem. Então, se eu me abrir no meu painel de camadas, você pode ver que eu tenho todos esses retângulos bem aqui. Ok, Então eu rapidamente me certifiquei de que meus retângulos estão no jogador certo que as camadas certas à direita estão entediadas, e eu poderia ter certeza de que eles estão sendo exibidos na direção certa. Então deixe-me verificar rapidamente. Então eu vou mover esse cara para baixo. Então agora todos esses retângulos antigos enquanto esses quadrados podem funcionar como nossos contêineres de imagem e isso é tão fácil como simplesmente selecionar um e, em seguida, certificar-se de que a inserção inserida dentro opção Seleção está marcada exatamente assim E então se nós apenas espremedor a imagem lugar para ou ir para o menu de arquivo e, em seguida, colocar navegar para o local onde mantemos nossas imagens agora enfraquecer simplesmente, basta escolher uma imagem Talvez. Talvez esta imagem de café. Por que não? E agora, se apenas clicarmos, esta imagem será colocada dentro daquele recipiente vermelho. Esse ângulo em rack será quadrado no nosso caso, e agora podemos simplesmente torná-lo um pouco menor. Nós podemos. Você pode movê-lo se quisermos. Assim como assim. Então, de novo. Selecione o retângulo. Certifique-se de que esta imagem de inserção será inserida dentro. A opção de seleção está marcada. Coloque uma imagem. Basta navegar até a pasta onde você mantém suas imagens. E talvez desta vez eu escolha, hum, hum, algo um pouco mais de contraste. E. Ou talvez não. Talvez. Vamos continuar, vamos ficar dentro do bar e do tema do bar. Eu vou com o clique do bolo como, então certifique-se que é apenas um pouco maior. Hum, talvez assim, isso deve ser bom. E o último de novo, Seletor. O retângulo coletado dentro. Inserir dentro opção de seleção e colocar a imagem E talvez desta vez o sanduíche. Já que estamos em um bar, vamos ficar no bar, o tema do bar , assim mesmo. Então lá vai você. É assim que você pode simplesmente usar o mais simples. O mais simples realmente diz para criar contêineres de imagem com boa aparência. Então temos o cabeçalho que temos. Chegamos a esta seção de heróis está quase terminando. Adicionamos as imagens a ele. Criamos os retângulos e depois os transformamos em suportes de imagem. Mas é claro, o que ainda precisamos não é a navegação que serão as setas à esquerda e à direita e, claro, o bloco postar os títulos. Mas vamos começar a fazer tudo isso no próximo vídeo. 60. 7Vamos adicionar o somde às imagens: Então eu vou começar a criar ah, as peças restantes fora do nosso controle deslizante carrossel, primeiro verificando a fonte que eu adicionei ao design original. Então, como podem ver, está escrito usando a versão do fundo condensada e arrojada do Roboto , e está definido para 46 pontos. E, claro, no meio. Um não é usar no branco cheio, mas o agradecido porque ele está indicando que é que ele está sendo, como, Destaque que, que ele está no link ativo agora. Então, de volta com o nosso design, eu vou simplesmente grap o quadro têxtil exatamente assim. Claro que eu vou ter certeza que eu estou na camada certa e eu vou simplesmente clicar e arrastar assim, e eu vou definir a frente para Roboto Condensado e eu vou escolher. É claro, versão ousada. Certifique-se que ele define para 46. Acho que foi 46. Eu vou torná-lo branco, e agora eu vou simplesmente escolher texto inserir texto preenchimento para apenas assim, e eu vou alinhá-lo ao centro. Eu vou fazer este quadro um pouco menor então ficamos apenas com três linhas de texto, apenas assim que apenas movê-lo um pouco para a direita e eu vou movê-lo para baixo para o verão. Aqui, isto seria encontrá-lo. Então agora eu vou mover esse cara para a direita assim, e esse cara para a direita também, assim como agora eu vou virar esse cara para esse pedaço de texto para pensar, e já é um pouco mais visível, apenas assim. Mas como você pode ver, já que clonamos este primeiro texto de preenchimento uma e duas vezes para a direita, bem, ainda é o mesmo texto, certo? Mas podemos alterá-lo rapidamente simplesmente selecionando um pedaço de texto de preenchimento, em seguida, indo para o menu de texto, inserir preenchimento, texto. Basta clicar nele para de selecioná-lo e depois selecioná-lo mais uma vez, a fim de colar algum outro pedaço de texto. Então, novamente, de select, inserir texto de preenchimento e, em seguida, inserir texto de preenchimento novamente. Então é outro pedaço de texto. momento, no entanto, as chances são de que, de tempos em tempos, seu texto pode não ser muito visível contra um determinado fundo em relação a uma determinada imagem. Banqueiros como neste caso, se você deixar como branco, você pode ver que nós não podemos deixar. Nós realmente não podemos ver isso contra agora. Este prato vai ficar bem aqui. Se definir o Teoh para rosa. Então, sim, é visível, mas sem isso, não é realmente visível. Então, como podemos consertar isso agora? Em situações como esta, é uma boa ideia ter algum tipo de mochila moída. Adicione-o aos seus contêineres de imagem de vontade aqui mesmo. Então o que eu vou fazer é simplesmente criar um retângulo que vai ser, bem, bem, o mesmo que nossa imagem de Assauer de espaço reservado. Mas ele vai ser colocado sobre a imagem, e então nós vamos adicionar um Grady int a ele e soltar sua opacidade para baixo. Sei que parece muito, mas é muito fácil. Então confie em mim, confie em mim desta vez. Então eu vou entrar em um seletivo, este espaço reservado para imagem, e quando eu for para o meu painel de camadas, você pode ver que eu tenho este café bem aqui. É um retângulo com uma imagem de café dentro dele para que pudéssemos fazer. E, na verdade, o que temos que fazer é bem, acho que seria mais fácil. Teoh duplicar este contêiner de imagem que temos aqui. Então eu vou simplesmente encontrá-lo no meu painel de camadas. Este é esse cara aqui e você pode ver que ele diz retângulo e que há essa imagem de café sendo colocada dentro deste retângulo. Então o que poderíamos fazer é simplesmente clicar com o botão direito sobre ele e escolher duplicado. Ou você sempre pode usar o controle mais atalho J. E o que ele faz é criar uma duplicata dessa imagem deste bem, objeto inteiro acima dele. Então temos um retângulo e uma imagem de café bem aqui. Então o que poderíamos fazer é simplesmente selecionar essa imagem de café assim. E se acabarmos de excluir, você pode ver que ficamos com um retângulo plano. E se você ir para a ferramenta de campo apenas assim, podemos alterar o tipo de preenchido de dois sólidos lineares para criar um Grady int. E se você souber, clique neste ícone aqui, podemos mudar a vontade, a capacidade, a posição, claro, o tipo também. Mas o que queremos aqui é que queremos mudar essa cor de cinza para apenas branco simples assim, e baixar sua opacidade todo o caminho para zero, exatamente assim. E agora podemos simplesmente ainda usar o filtro mover o int Grady para cima assim. Simplesmente assim. Claro, ainda podemos clicar no nosso Grady int e talvez mudou este colar para avião em preto assim . E se você quiser, você pode simplesmente soltar sua opacidade. Digamos que talvez 15 assim, e já parece muito melhor. Então, de novo, assim como a repetição me deixou pegar esse cara. Este, uh, este retângulo e eu vou novamente e duplicá-lo. Livre-se da imagem dentro desse cara aqui. Em seguida, usando o filtro irá mudar o preenchido para linear alterado um Grady int este Grady na cor de cinza dois liso branco soltar sua capacidade para baixo para 50 ou talvez até mesmo zero. Assim, mudou a cor desse cara para preto, mudar sua capacidade para 50 assim e então apenas trazer esse cara de baixo para cima assim. Então agora o nosso estava bem, títulos podem ser visíveis um pouco melhor. Então, se eu mudar esse cara de rosa para branco, você pode ver que é visível muito melhor. Então, de novo, vou agarrar. Este é um retângulo sanduíche. Vou duplicar assim mesmo. E novamente, eu vou me livrar desta imagem, assim e novamente Ir para a ferramenta de preenchimento, alterá-lo de sólidos muito lineares e mudar o Grady int. Vamos com opacidade zero. Desta vez, vamos mudar. Vamos mudar esta cor para preto liso, assim como assim novamente, mudar a opacidade para 50%. E vamos mover o Grady de baixo para cima, assim mesmo. E lá vamos nós. Temos o controle deslizante que o carrossel criou, exceto fora do curso para a navegação que vamos criar no próximo vídeo 61. 8Vamos adicionar os botões de navegação: Então, antes de começarmos a criar na navegação de enquanto para o nosso couro Carrizalez, eu acho que devemos fazer alguma limpeza simples e simples. Quero dizer, eu quero ter certeza de que todos esses elementos, todas essas peças estão bem agrupadas e rotuladas. Então o que eu vou fazer é simplesmente clicar em ambos os botões do mouse e eu vou simplesmente selecionar esses caras e pressionar o controle. G. E eu sou uma celebridade pressionando os botões esquerdo e direito do mouse para, a fim de selecionar em elementos ajustar por fragmentos fora de suas caixas delimitadoras. Então, novamente, vou simplesmente clicar e selecionar. Mas às vezes ele não funciona corretamente, e você tem que realmente clicar novamente apenas para ter certeza que Zebina selecionado corretamente. Então, novamente, clique e colete e selecione, assim como, Controle G. E lá vamos nós. Então agora podemos rotular esse cara como, uh, digamos imagem um. Lá vamos nós, então. Esse cara como imagem e o terceiro cara como imagem três. Ok, então agora vamos criá-lo da navegação, e isso vai ser muito fácil. O que eu vou fazer é me certificar que meu bem, para este momento que meu derrame está definido. Teoh esta cor escura e eu vou pegar o lápis e eu vou deixá-lo para este em seu modo de caneta padrão. E eu vou simplesmente segurar no turno e clicar em um clique duas vezes e, em seguida, rápido mais uma vez. A fim de criar este tipo de um este tipo de flecha tinha exatamente assim. Deixe-me aproximar um pouco mais. Então agora vamos apenas um agarrador, o dedo do pé retângulo e mantenha pressionada a mudança, a chave para criar um quadrado que vai parecer algo assim. Então agora o que podemos fazer é simplesmente garantir que esses caras estão sendo alinhados corretamente . E se você quiser, você pode sempre fazer esse cara maior. Se é isso, essa é a sua escolha bem projetada. Mas acho que vou deixá-la assim. Agora, é claro, não queremos que Teoh selecione ambos esses caras clonam para a direita e simplesmente os reflitam para criar a segunda besta fora de nossa navegação. Mas como eu mencionei, e se dermos uma olhada no original, você pode ver que esse cara está bem, essa flecha está sendo colocada contra um fundo rosa porque isso está apenas indicando que quando essa seta está sendo selecionada, quando o usuário está clicando ou tocando nele, ele deve mudar. Então, neste caso, eu estou simplesmente indo Teoh, talvez pressione uma mudança, atua para trocar para preencher com acidente vascular cerebral e, claro, mudei um traço para esta cor rosa e certifique-se de que ele está sendo colocado abaixo do flecha assim. Agora que temos esses caras foram criados. Talvez antes de eu movê-los para cima, deixe-me apenas talvez transformar este cara para transformar o derrame em branco. O mesmo para este tipo. E, claro, uma vez que eles são maneira de assar, podemos rapidamente torná-los menores. Faça algo assim e pegue esses caras. Talvez todo o grupo rapidamente colocá-los em algum lugar aqui assim e, em seguida, pegar esses caras colocá-los em algum lugar aqui e agora nós podemos apenas agrupá-los assim e ter certeza de que eles estão alinhados para dis entrou no dissidente corretamente, apenas assim. Claro, se quiser, pode me deixar fazer o zoom bem rápido. Se você quiser. Talvez você possa fazer o derrame, mas maior. Então, em vez de Juan, vamos tentar apenas assim o mesmo vale para esta flecha em vez de uma. Vamos fazer com que seja mais visível. E é claro que temos que fazer o mesmo para esta flecha em vez de uma. Vamos fazer dois, assim mesmo. E se nós agora apenas zoom para trás, isso é o que nosso Este é o que nosso controle deslizante parece Curso. Talvez. Vamos pegar esses caras e ter certeza de que eles estão sendo alinhados corretamente. Claro, verticalmente também. Vamos apenas derrubá-los assim. E agora, se olharmos para o nosso design do dólar, ele está começando a parecer. - Parece legal. Temos o cabeçalho com o logotipo com a navegação com os ícones de mídia social. Temos o controle deslizante do carrossel com eles, as setas, claro, os slides e o texto. Então chegamos à urze e às seções de herói criadas. Então, a seguir, o que faríamos é passar para as partes mais complexas. Então fomos avisados. Agora podemos avançar para talvez este primeiro bloco grande se vangloriar trecho de uma seção, então vamos começar a criá-la no próximo vídeo. 62. 9Vamos criar um recipiente para a postagem do blog: Vamos começar a criar um contêiner de imagens em destaque, primeiro trazendo o grão. Quero ver a grade porque quero saber como. Por que você atirou no contêiner do bloco Post, quão grande deve ser. Porque quando você vai Teoh, quando nós damos uma olhada nele o original e nós pegamos nós damos uma olhada na grade. Podemos ver que ele está se espalhando por uma certa quantidade de colunas, e o cibernético também está se espalhando por uma certa quantidade de colunas. E neste caso, a postagem de bloco está se espalhando pelas nove colunas e decidir barra em três gols porque nove mais a três é igual a 12. Então, no nosso caso, temos que ter certeza de que nosso contêiner de postagem de bloco A quero dizer, bem, bem, nosso contêiner de imagem em destaque está se espalhando por nove colunas. Então, como de costume, eu vou começar com a criação de uma nova camada assim. E eu vou chamá-lo, uh, uh, gabar-se de sangue em destaque. Vamos levar. Você não gostou disso. Eu vou trazê-lo para baixo, então eu vou simplesmente pegar o retângulo para, e eu vou ter certeza de que ele tem alguma cor visível anexado a ele. mas talvez para o filme, e eu vou espalhá-lo em nove colunas assim que eu vou trazê-lo para cima para que ele combina. Então ele toca meu herói, uma seção bem aqui, exatamente assim. E deixe-me trazer um pouco para baixo. E o que eu quero fazer agora é movê-lo para baixo em 25 pixels. Então eu vou adicionar 25 ao valor do eixo Y, assim como assim. E este é o nosso recipiente de imagem, claro, medida em que o seu Ah, uma espinha. Ah, o que? Talvez me deixe apenas com também, porque eu posso ver que não é muito. Não é, também. Sim, esse cara que desta vez está tudo bem. Está se espalhando por exatamente nove colunas, e quanto a elas, a altura deste contêiner vai neste caso, é bastante arbitrário. Quero dizer, você poderia deixar isso moral como um quadrado se você quiser, ou você pode ir para a proporção padrão 16 por nove se você quiser, e eu acho que eu vou para isso algo como 5 50 pixels. Acho que quebrou isso, obviamente, 16 por nove. Quero dizer, é um blawg de fotografia. Em vez disso, não tem que ser tudo isso, como aspecto de vídeo em termos desligados em termos de suas imagens. Então agora que temos esse ah, este contêiner criou o que poderíamos fazer é talvez pudéssemos simplesmente trazê-lo para baixo para criar o contêiner para nossos trechos de texto bem. E este será o pano de fundo para os nossos trechos de texto. E eu vou mudar o colar de enchimento para, bem, esta cor branca. Então eu vou para amostras escolher White, apenas assim. Então agora nós temos Quando isso temos Teoh, deixe-me apenas movê-los apenas um pouco para a direita e novamente certifique-se de que eles estão sendo bem alinhados com a nossa coluna direita. Como você pode ver, às vezes ele só requer um pouco fora de ajuste para fazer tudo pixel perfeito, assim como assim. Mas é um eu acho que é importante. É por isso que estou prestando atenção a esses pequenos detalhes. Então, novamente, agora que temos esses caras criados, nós poderíamos simplesmente novamente e pegar esse retângulo aqui e novamente escolher inserir a seleção do site e encontrar uma imagem inapropriada Talvez isso. Vamos ver. Talvez este grande Ben seja uma foto. Por que não? Vamos apenas clicar. Cansado demais para colocar baseado em apenas assim. Espalhe e lá vamos nós. Nós temos a nossa e nós temos a nossa imagem principal criada. Claro, essa foi a parte fácil. A parte mais difícil é adicionar todas essas peças fora do texto. Claro, é um Não é difícil adicionar o texto, mas certificar-se e projetá-los para que eles interajam uns com os outros da maneira que devem ser, às vezes, um grande desafio. Porque dê uma olhada neles. Esses caras têm que ser um pouco diferentes. Quero dizer, não só por dentro, mas também eles são itálico e que esses caras completamente, completamente não itálico. É um ousado, é condensado, está realmente se destacando. Mas esses caras também têm que se destacar, mas de uma maneira um pouco diferente. Eles têm que ser informativos, visíveis, mas não intrusivos. Então é esse tipo de equilíbrio que muitas vezes é difícil de alcançar quando você está criando essas peças elaboradas e elaboradas fora do texto. Então vamos começar a criar nossas peças fora do texto. Nosso bloco possuem links, trecho de texto e este link ler mais no próximo vídeo 63. 10Vamos adicionar as primeiras partes de texto: Então, antes de começarmos a criar o texto, temos que corrigir um problema. Quero dizer, se agora dermos uma olhada no nosso contêiner de trechos do bloco e olharmos para o fundo, podemos ver que não há absolutamente nenhum contras entre esses caras. Não é intencional, eu tenho que admitir, mas na verdade vai nos dar uma boa e a chance de descobrir um. Uma característica de afinidade. Designer em ofendeu o designer que você pode e cores não apenas para objetos, mas também para toda a palavra arte. Então, neste caso, não precisamos criar um retângulo separado que posaria como um retângulo, bem como um plano de fundo como teríamos que fazer em outro software de design como o Illustrator, podemos simplesmente selecionar a arte a bordo e enfraquecer. Basta clicar nesta grande amostra cinza para fazer com que pareça assim. E assim, nós enchemos toda a arte a bordo com apenas uma cor, e agora nós podemos ver que nós realmente temos isso tem esta diferença este contraste entre o nosso entre o fundo e o recipiente bem aqui. Então nós vamos começar o processo de criar o texto para o nosso post bloco exceto com a data E mesmo que seja apenas uma linha fora a seguir, eu vou usar sua ferramenta de imposto quadro para este pedaço de imposto porque o quadro Texel a data E mesmo que seja apenas uma linha fora a seguir, eu vou usar sua ferramenta de imposto quadro para este pedaço de imposto porque o quadro Texel tratar uma caixa delimitadora que nos permitirá alinhar tudo bem. E ele vai tornar o quadro de dados reutilizável. Então deixe-me apenas pegar o quadro têxtil e clique e arraste para criar quadro de texto. Agora a diversão que vamos usar é, claro, claro, Roboto. É a versão itálica. O tamanho divertido é 14 e, claro, a cor é esta cor preta muito, muito escura. Agora, se você quiser, você pode usar algum texto de preenchimento. Mas eu vou digitar a data 2017 assim e agora eu vou fazer este quadro menor até que ele se encaixe bem com a minha data com a data. Então, não o que temos que fazer é orar nele até o canto esquerdo da parada até que ele se encaixe bem, assim e agora podemos movê-lo para a direita por 50 pixels. Lembre-se de que temos nosso ponto de transformação original de origem de ponto definido para cima esquerdo e para baixo em 50. Assim como neste pedaço de texto vai ser nosso tipo, como uma âncora para criar o restante em pedaços fora do texto. Então agora nós podemos fazer é podemos reutilizar este pedaço de texto para criar o título da postagem do bloco, então eu vou simplesmente selecioná-lo, segurar o controle no meu teclado e duplicar para baixo assim Agora eu vou estender este quadro de texto todo o caminho à direita até encaixar com o fundo. E uma vez que é um texto de bem, tornou-se é muito parecido com um objeto. Então podemos simplesmente subtrair 50 da nossa frente da largura para ter certeza de que a distância entre isso não é como que a distância entre esta parte esquerda do amigo texto é a mesma que a distância entre a parte direita do quadro de texto e o fundo. É claro que temos de mudar o texto. Será que o tamanho do texto encontrado e ao longo disso. Mas primeiro, vamos movê-lo para baixo em 25 pixels, exatamente assim e agora ele pode mudar a fonte de Roberto para Roberto Condensado. É uma versão ousada e deixe-me apenas verificar com o original. São 54 pontos. Eso parafuso remoto. Oh, condensado 54 assim. E, claro, ainda podemos preenchê-lo com alguém com algum texto falso. Se você quiser digitar algo significativo, seja meu convidado, mas simplesmente indo para eu simplesmente vou inserir algum texto de preenchimento e estender os quadros de texto para que tenhamos um pouco mais ou texto. 64. 11Vamos adicionar as peças de texto: Então, os próximos pedaços de texto são o nome do autor, comentários. E, claro, temos estes ícones de redes sociais aqui em baixo. Então, novamente, podemos pegar esse cara, colônia até que ele se encaixe com o original, e podemos simplesmente fazer esse cara menor. Assim como mudou o fundo de refutação de volta para remoto, oh, oh, condensado de volta para Roboto e desta vez, regular 14. Assim como assim. E em vez de texto de preenchimento, eu vou apenas digitar a palavra por. Mas antes de fazer isso, deixe-me adicionar 25 assim. E eu vou digitar por apenas assim. E, claro, deixe-me apenas torná-lo significativamente menor, e eu vou para Kelowna fazer o certo. Isto deve ficar bem. Algo assim pode ser um pouco para a direita, e eu vou digitar o nome do autor, e eu vou estender este quadro de texto, e neste caso, vamos mudar a cor desta nota para verde e de regular para itálico. E então nós só temos que colônia esse cara para a direita para criar o link para comentários como esse e talvez possamos apenas agrupar esses caras. E tudo o que resta a fazer é adicionar os ícones das redes sociais, esses caras aqui. Mas eu não quero que você olhe, me faça clicar e fazer tudo isso, todas as mesmas coisas que fizemos quando criamos o cabeçalho. Porque novamente, seria apenas, ah, ah, adicionar os documentos, editá-los, substituí-los, mudar o tamanho. Quero dizer, acho que você já sabe o que fazer. Você sabe como fazer isso. Então deixe-me pegar um atalho e copiar esses caras para tornar o processo mais rápido e agradável para você. Então eu vou simplesmente copiar esses caras, e eu vou simplesmente para o ritmo do sido apenas assim e alinhá-los corretamente apenas assim. Ok, então a próxima coisa que então a próxima coisa queteríamos que fazer é simplesmente pegar emprestado esse cara, alinhá-lo com esses caras aqui e me deixar checar rapidamente. teríamos que fazer é simplesmente pegar emprestado esse cara, Acho que são 25 pixels de novo. Então, novamente, eu movia esse cara só Justin para baixo, pressionava Enter, e então trocava a frente de volta para Roboto ou normal 16. Verifique o chumbo e mude de 16 para algo como 22. Simplesmente assim. Deixe-me apenas fechá-la. E, novamente, só acho que ainda precisamos fazer isso. Sim, esses pedaços de texto bem aqui, a fotografia, a fotografia, estilo de vida e viagem Eso eu vou simplesmente pegar, apenas zoom em um pouco, pegar esse cara e cloná-lo assim novamente, fazer mais 25 e digite as tags. Agora vamos estender esse quadro de texto assim. E o último pedaço de texto que precisamos é apenas este botão ler mais aqui em baixo. Então, novamente, o que podemos fazer é simplesmente clonar esse cara para a direita e talvez vamos movê-lo um pouco para baixo. Então é um pouco mais proeminente, assim como para o personagem no painel de caracteres. Eu vou mudar, e eu vou me certificar de que essas letras são escritas em todas as maiúsculas, assim como então mudá-lo de certo Alec para eu acho que foi médio, mas deixe-me apenas verificar rapidamente Não, ele foi boliche, alguns vai mudá-lo de médio muito ousado. E é claro que vou digitar, ler mais assim. Talvez eu o alinhe à direita e talvez vamos mudá-lo de verde para esta cor rosa . Então sabemos que isso realmente fácil um link. E agora podemos agarrá-lo da hora, nosso fundo e movê-lo para cima e, em seguida, apenas adicionar 52 50 pixels. Mas não eu não quero que eles se movam. Eu não quero movê-lo. Eu quero aumentar a sua altura assim. E se agora reduzirmos o zoom, podemos ver que criamos nosso texto. Bem, primeiro bloquearei a maioria. Só que conseguimos a imagem. Nós temos o imposto, nós temos os ícones, nós temos os links e tudo está olhando está muito bonito. Se você quiser, você pode ir talvez pegar este pedaço de imposto e talvez torná-lo um pouco menor. E, em seguida, basta adicionar outro, outro parágrafo para que pareça um pouco. E nós vamos um pouco diferentes um pouco mais, eu acho, mais animado. Mas lembre-se de que você teria que se certificar de que essas distâncias novamente são iguais. E talvez vamos mudar rapidamente as pilhas para algo diferente, assim. Então parece um pouco mais dinâmico. Vamos colocar assim. Então lá vamos nós. Recebemos o primeiro post do bloco, exceto criado. Nossa próxima ordem de negócios seria criar as colunas com ambos e com ambos os mundos, imagens menores. Alguns recuam com estes pedaços menores fora do texto. Mas vamos começar a fazer isso no próximo vídeo. 65. 12Vamos começar a criar a grade do blog: nos próximos vídeos. Nós vamos criar estes blocos ostentam trechos. Estas cartas bem aqui. Nós já temos o principal post em destaque bem aqui. Então agora é hora de adicioná-los. Cortado como mais velho no bloco ostenta contêiner aqui em baixo. E como podem ver, temos duas colunas, a esquerda e a direita. E cada um tem três cartões postais. Eso Eu acho que você poderia dizer que existem três linhas e cada um hospeda para bloquear gabar-se carrinhos. Agora, o que é importante entender aqui é que precisamos Bem, queremos manter as mesmas lacunas entre esses elementos como nós criamos o dedo do pé aqui. Então, o que também é importante entender é que essas cartas serão muito, muito menores do que nosso post principal. Então, podemos querer considerar talvez remover alguns desses elementos em vez de adicionar todas essas tags, ícones de mídia social, todos esses links que podemos querer simplesmente como um negociar-los os elementos de design para mais simplicidade e usabilidade. Então deixe-me voltar ao nosso projeto principal aqui, e deixe-me apenas trazer rapidamente a grade Então a primeira coisa que eu vou fazer é criar uma camada separada para a minha grade de postagem de bloco. Então eu vou simplesmente adicionar uma nova camada e renomeá-la para bloquear post grade. Agora vou movê-lo para baixo do quarteirão. Post em destaque assim agora. Então o que queremos fazer agora é criar Ah, algo como guias visuais que nos ajudariam a criar contêineres para nossos carrinhos. Então a primeira coisa que vou fazer é pegar uma ferramenta simples de retângulo. Vou dar-lhe um pouco visível, falhou. Talvez esta sensação mais escura, assim como agora eu vou criar um criar um retângulo que vai se esticar em todas essas nove colunas assim. E deixe-me ver rapidamente se cara se eu alinhei tudo corretamente e eu acredito que eu fiz apenas assim Então eu quero ter um intervalo de 25 pixels entre este recipiente principal e meu próximo contendo minha próxima grade. Então, no painel de transformação, eu simplesmente vou adicionar 25 pixels para o valor do eixo Y aqui. Mas lembre-se de definir o ponto original para um dos pontos principais aqui. Pode ser centro esquerdo ou direito. Desde que seja um ponto alto, ficaremos bem. Então eu só vou adicionar 25 agora. A fim de manter as lacunas iguais entre os nossos elementos, teríamos que criar uma lacuna de 25 entre as colunas de Will 25 para as nossas cartas, certo? Então, novamente, vamos pegar a ferramenta de retângulo e desta vez criar talvez como um retângulos mais verticais, exatamente assim. E talvez eu mude sua cor para algo. Talvez esta cor rosa para que você possa ver tudo melhor, e eu vou me certificar de que ele tem. Isso é com exatamente 25 pixels, exatamente assim. E agora podemos pegá-lo, movê-lo para cima e ter certeza de que está sendo uma sonda que este feijão e nós vamos incidente no centro fora do nosso principal como nosso guia visual principal. Então eu estou selecionando ambos a bola, esses retângulos, e eu estou simplesmente posicionado neste cara exatamente no ponto central, exatamente assim. Mas é claro que não vamos precisar deste retângulo, então vou selecionar todos eles. E aqui eu vou escolher subtrair do nosso caminho operações assim. E agora eu posso ter certeza de que a distância entre meus contêineres é exatamente 25 25 pixels. Agora, se você não vê esses retângulos, mas você ainda quer ter alguns guias visuais ajudando você a estabelecer o tamanho dos contêineres para os cartões, você sempre pode simplesmente trazer para os guias deles. Então, primeiro eu vou Teoh, mostrar aos governantes que eu vou ver os governantes do show. Ou você poderia ir com o controle mais nosso atalho que seria ainda mais rápido. E eu vou simplesmente começar a imprimir os guias assim. Então eu sei onde estavam meus contêineres e onde meus contêineres começam assim. E poderíamos trazer uma horizontal assim e uma vertical assim. Então, agora, se você não quer Teoh, deixe-me apenas certificar-me de que esses caras estão posicionados corretamente. Então, se você não quiser ver esses retângulos, você pode simplesmente brincar com os caras. Mas eu definitivamente recomendo começar com os retângulos. Então você sabe onde posicionar seus guias. Então, uma vez que eles são feitos, você pode simplesmente remover esses retângulos. E agora tudo o que eles teriam que fazer é apenas pegar o principal esta imagem principal. Deixe-me desligar a grade, este contêiner principal, cloná-lo e simplesmente brincar com seu tamanho e o texto. Mas eu acho que isso é algo que vamos fazer no próximo vídeo. 66. 13Vamos criar o primeiro cartão de post do blog: Ok, então agora podemos começar a criar nossos cartões para a grade. Então vou desligar a visibilidade dos governantes pelo Presidente de Controle. Além disso, são assim. E eu vou selecionar tudo nesta camada de destaque post bloco e eu vou copiá-lo e colá-lo toda a minha camada de grade post bloco, assim como então e agora agrupar tudo. Então, neste momento, todo esse contêiner é apenas um, é apenas um grupo. Deixe-me ter certeza de que está na camada certa, assim mesmo. Então agora podemos simplesmente movê-lo usando nossos guias. Mova para o canto esquerdo da parada, assim. Deixe-me diminuir um pouco mais rápido. Então, agora, se começarmos a fazer esse cara menor assim, podemos fazer tudo menor proporcionalmente e deixar o texto bem, intocado. Mas também podemos agarrar por este canto inferior direito superior Bob. Traga-o para dentro. E como você pode ver, desde que criamos nosso texto, bem como texto de preenchimento em tempo real, os quadros de texto estão mudando. Eles estão tentando se ajustar ao novo tamanho fora do curso. Não parece que não esteja nem remotamente tudo bem, mas vamos consertar isso em um segundo. Mas antes de começarmos o Krug, bem, está apenas no imposto. Deixe-me apenas mudar rapidamente este Big Ben uma foto, alguns vão clicar duas vezes sobre ele para navegar até ele e revelá-lo no meu painel de camadas. Então eu vou me livrar dele exatamente assim e, em seguida, selecionar este retângulo novamente. Certifique-se de que eu tenho que incerto opção de seleção lado ativado e basta navegar para eles um lugar onde eu manter minhas imagens e talvez vamos com esta foto bolo. Assim como eu vou clicar apenas no tamanho e lá vamos nós. Chegamos à imagem criada. Então, como eu disse antes, poderíamos sacrificar e a quantidade de elementos de design que temos aqui para mais visibilidade, melhor visibilidade, usabilidade de batalha. E eu acho que isso é algo que nós estamos indo para dilatar agora. Então, primeiro de tudo, eu vou Teoh, vire bem, este spink o texto do Spink em um texto verde. Não quero que seja. Eu não quero mais ser um link, então eu vou deixar assim agora para o encontro. Eu vou simplesmente clicar duas vezes sobre ele e expandido, assim como agora eu não vou estar usando esses ícones de mídia social. Vou me livrar deles. Eu não vou usar os comentários, então eu vou clicar duas vezes. Às vezes você tem que clicar duas vezes algumas vezes para navegar para um grupo dentro de um grupo dentro de um grupo que ele funciona. Mas às vezes você só tem que clicar. Poderia clicar em espiral duas vezes em apenas mais uma vez. Então agora eu vou Teoh, talvez pegar essas etiquetas e estendê-las um pouco, só um pouco. E acho que vou deixar uma marca de ferida assim, e trazer esse cara para a esquerda um pouco. Claro, os nossos eram. Nossa principal preocupação é este título aqui, porque ele vai ser a coisa mais visível em nossos cartões, então precisamos ter certeza de que ele é visível, mas não é muito intrusivo ao mesmo tempo. Alguns vão clicar duas vezes sobre ele, e eu vou mudar o fundo de um 54 para Vamos ver 22. Talvez eu acho que isso bem e talvez vamos apenas aumentar ligeiramente a altura da linha de 22. Então vamos ver. 26. Deixe-me apenas diminuir o zoom para ver como é. Isso seria bom. Acho que podemos deixar assim. Podemos sempre brincar com ele mais tarde. Então, agora podemos simplesmente pegar nossas principais coisas de texto principal recipiente para o nosso trecho post e deixe-me apenas rapidamente talvez estendido um pouco para três linhas de movimento de texto. É só um pouco acima, assim como agora. Poderíamos pegar o título e movê-lo um pouco para baixo assim. E vamos ver o que parece agora. Acho que está tudo bem. Enfraquecido. Podemos deixar assim. Claro, poderíamos jogar a tarde inteira com todos esses elementos, tentando encontrá-los o equilíbrio perfeito, mas geralmente apenas um problema fora. Adicionando um ponto Teoh para o tamanho do telefone ou dois pontos. Então deixarei isso com você. Mas eu acho que está tudo bem agora, então eu vou deixar isso assim. Então tudo o que realmente temos que fazer agora é apenas copiar ou duplicar este todo, todo esse grupo para a direita e depois para o fundo, mudar o texto, mudar as imagens e nossa grade estará completa. Mas vamos começar a fazer isso no próximo vídeo. 67. 14! Vamos adicionar os cartões restantes: Agora podemos duplicar nosso primeiro cartão para a direita e depois duplicar ambos os cartões duas vezes para que possamos criar nossa grade. Então eu vou pegar este cartão primeiro, manter o controle pressionado e mudar para clonar este cara para a direita, exatamente assim. Então eu vou mudar, enfraquecer ambos os cartões e novamente, controle, deslocamento, clique e derrubá-los. E, claro, queremos esses caras. Quero dizer, queremos que a diferença entre esses caras seja de 25 pixels. Então, novamente, eu vou simplesmente adicionar 25 exatamente assim E agora, novamente, nós podemos apenas clicar em ambos os cartões, clicar e arrastar, é claro, mantendo pressionada a tecla Control. E então podemos novamente adicionar 20 e cinco. Assim como assim. Tudo o que temos que fazer agora é mudar esse texto. Claro, temos que mudar as imagens e o grande será basicamente completo. Então, de novo, estou indo. Teoh, isole isto. Ah, esta imagem bem aqui. E como você pode ver, eu tenho isso aqui no painel de controle no painel de camadas. Eu posso apenas saber, excluir esta imagem e novamente certificar-se de que a inserção dentro da seleção é opção está ligado lugar a imagem e aderência, talvez a foto do gato. Por que não fazer a mesma coisa com esse cara tão isolado no meu painel de camadas? Pegue a imagem, remova-a e novamente apenas para inserir dentro da seleção assim e novamente. Talvez adicionar esta imagem assim. Então, o que você também pode fazer é mudar o texto. Basta lembrar que, uma vez que este é um imposto de preenchimento, este é um filtro aplicando texto de preenchimento enfraquecer. Ainda assim, podemos ir para o menu de texto em Chek inserir texto de preenchimento e, em seguida, fazer a mesma coisa. Insira o texto de preenchimento novamente. E desta vez o designer de afinidade nos deu um texto diferente da Lauren Gibson. Podemos fazer a mesma coisa com o chuveiro vai postar, exceto para que ele possa apenas isolá-lo desmarcado o imposto de enchimento inserção e, em seguida, basta clicar inserir texto de preenchimento novamente apenas para torná-lo um pouco diferente. Então, novamente, eu vou navegar para esta imagem, encontrá-lo no painel de camadas, excluir esta imagem como então certifique-se de que eu estou baseado na imagem dentro da seleção. Pegue essa imagem de café. Talvez desta vez. E como você pode ver, é muito grande, então temos que torná-lo menor. Então, estou segurando a tecla de controle agora. Teoh torná-lo menor a partir de seu ponto central. Assim como assim. Isto deve ficar bem. Vamos mudar pelo menos o título. Então, novamente, vá para o menu de texto e insira outro conjunto de texto de preenchimento novamente. Esta imagem, como assim DoubleClick Oona para encontrá-lo no painel de camadas. Remova-o em uma determinada seleção lateral. Corrompa a foto assim apenas um pouco ao redor. Por isso, preenche o nosso espaço reservado muito bem. Faça a mesma coisa com esta imagem para que você possa ver um designer de móveis realmente leste, flexível quando o quando se trata de adicionar imagens, criando trechos post bloco, eu vou realmente criar em qualquer tipo fora de qualquer tipo de imagem de espaços reservados. Talvez façamos esse cara, mas menor porque, como você pode ver, é um pouco grande demais. E uma vez que você conhece as técnicas simples, você pode realmente acelerar o processo e criar um blogueiro de aparência profissional frente ,primeira página. , Então eu só vou mudar este texto assim talvez mudou esta imagem. Altere este título assim em uma espécie de texto de preenchimento. E lá vamos nós. Se voltarmos agora e talvez desliguemos a visibilidade dos nossos guias. Assim como agora temos a imagem principal feita bloco post. E então temos essa grade bem aqui, parecendo muito bonita. Agora, lembre-se que este é apenas 11 tipo de bom que você pode criar para mostrar outras postagens bloco menores dentro do seu design. Você sempre poderia apenas criá-lo, talvez duplicar esta imagem principal este post bloco desmaying apenas duplicado algumas vezes e ter uma lista fora grandes, grandes recipientes de imagem e texto. Ou você pode simplesmente criar uma lista com a imagem à esquerda e o texto à direita. Mas vamos criá-lo na barra lateral. É por isso que eu não queria, tipo, tipo, duplicar este conceito aqui. E você também pode criar algo que é chamado de labirinto e arrependimento, que basicamente se parece com uma alimentação de prisão pitada. Então, em um arrependimento pedreiro, você só tem imagens maiores podem ser um pouco mais impostos, então os contêineres parecem blocos de diferentes tamanhos. Então agora sabemos como criar uma grade de postagem de bloco que criamos primeiro. Criamos alguns guias visuais, lembre-se que criamos para os retângulos, depois para os guias. E então nós apenas copiamos este recipiente principal do topo. Nós argumentamos que competiu para o nosso para a nossa camada que vai mudar seu tamanho. E então nós apenas mudamos o texto em imagens e nos livramos de alguns dos elementos, como ciclos de mídia social e alguns links. Claro, se você quiser, você pode adicionar um pouco mais. Um pouco mais de golpe, mais alguns contêineres bem aqui. Mas acho que, por enquanto, vou embora. Isto tem. Mas eu vou, no entanto, no entanto,adicionar os posts mais antigos Battle aqui, e nós vamos adicionar um estreito porque queremos que os usuários tenham a capacidade clicar e neste botão para ver barcos mais antigos dentro do nosso design. Mas vamos realmente fazer isso no próximo vídeo 68. 15Vamos adicionar o link de posts mais velhos: então eu quero tornar as coisas simples para você. Então, quando você está recriando este design, você pode simplesmente seu recriado mais rápido e ah, e ver e obter uma melhor olhada no que está acontecendo aqui. Então eu decidi apenas nomear um, bem, esses cartões, todos esses grupos. Assim, decidi dar-lhes números. Então, quando você apenas olha para este arquivo, você pode simplesmente trabalhar com ele um pouco mais fácil. Então agora é realmente criar esses posts mais antigos. Ah, link aqui em baixo. Então eu só vou pegar para ela as imagens de fezes de texto artístico rapidamente zoom em e eu vou clicar e arrastar e digitar em posts mais antigos. Como pode ver, estou usando a fonte condensada do Roboto. Deixe-me fazer isso. Isto vai cor verde escuro e eu não acho que eu quero que seja tão grande. Vamos torná-lo um pouco menor. Vamos tentar 20 20 deve estar bem. E, claro, queríamos ser colocados exatamente no centro entre esses caras e queríamos ser colocados da maneira que queremos criar uma lacuna de 25 pixels entre este pedaço de texto e os contêineres assim novamente. O que eu vou fazer é eu vou adicionar 25 apenas assim para derrubá-lo assim. Claro, eu queria t estar na camada principal, então eu estou indo para colocá-lo neste bloco, arcos, cred, camada assim. E talvez vamos movê-lo para algum lugar aqui. Agora, se olharmos para o original, podemos ver que há esta pequena flecha aqui em baixo. Então, para criá-la, podemos usá-la. As formas personalizadas dentro de um designer de fader. Então eu vou simplesmente agarrar o dedo do pé da seta e rapidamente criar um estreito que vai parecer algo assim. Então, a partir do menu de contexto, eu vou escolher conhecido para a esquerda e apenas assim e pré-nupcial, trazê-los a espessura para baixo. Vamos ver, talvez 10%. Isto deve ficar bem. Deixe-me apenas torná-lo mais pequeno para o verão aqui. E quanto à direita e fantasma, vamos mudar de flecha para farpado assim, e mudar sua cor. E agora, se mudarmos seu tamanho, você pode ver que ainda podemos manipular essa flecha assim. E, claro, se você segurar a tecla shift, podemos proporcional para torná-la menor até que seja algo assim. Não, deixe-me trazê-lo para algum lugar aqui. E talvez eu estenda isso um pouco. Não quero ser muito grande. E, claro, ainda podemos mudar a espessura. Se quisermos Tio, é claro, podemos mudar os fins. Podemos mudar a espessura da nossa flecha. Vamos, talvez com 20%. Então vamos mudar a espessura para 20% para lembrar que vai ser muito, muito pequeno. Então talvez seja uma boa idéia torná-lo um pouco mais visível, apenas assim e talvez apenas ter sido menor, certo? Então agora podemos movê-lo um pouco para a direita, agrupá-los e certificar-se de que eles estão posicionados em algum lugar no centro, assim como então vamos adicionar 25 e lá vamos nós. Nós criamos a grade. Nossa próxima ordem de negócios seria criar esses trabalhadores paralelos. Agora, chegamos ao cabeçalho. Temos este controle deslizante que temos para a imagem principal. Bem, bloco principal, correio contentor. E nós temos a grade de mensagens de bloco, juntamente com o mais velho possui um link aqui na parte inferior. Então agora vamos realmente passar para a criação do controle deslizante. E vamos explorar este tipo de design com mais detalhes começando no próximo vídeo. 69. 16Vamos explorar o projeto da Sidebar: nos próximos vídeos. Vamos criar esta barra lateral, então vamos dar uma olhada para agora. Primeiro de tudo, você pode ver que é um alongamento em três colunas bem aqui, e é dividido em separado. Vamos chamá-los de idéias, e cada idéia é, ah, tag é rotulado aqui. Então primeiro temos uma simples caixa de busca. Então é apenas um retângulo simples com algum texto dentro e eles o ícone de lupa bem aqui. Nós também temos esta primeira idéia, este primeiro recipiente que é este sobre mim recipiente. Então chegamos a este rótulo. Chegamos à imagem, e como você pode ver, é uma imagem quadrada, um contêiner de texto, contêiner e mídia social. Eu desço aqui. Então temos um simples, simples , como um recipiente de texto com um com outro rótulo. E então temos o contêiner mais popular. Este é um tipo de como um blogueiro post feed, mas ele está mostrando em Lee o mais popular, o mais popular bloco ostenta, e estes e esses barcos bloco podem ser os que têm o maior número de comentários gosta ou que foram compartilhados. A maioria das vezes. E como você pode ver, este pequeno recipiente retangular é dividido em duas partes. Então, à esquerda temos uma imagem quadrada, e então temos um contêiner de texto bem aqui com uma data com o claro, um, com o título do post e a etiqueta. E há uma pequena linha dividindo esses caras aqui. E, claro, o último contêiner não tem essa linha divisória, porque abaixo disso temos esse rótulo que está começando uma próxima seção irá conter os anúncios, que, claro, neste caso são imagens simples apenas para representar os anúncios dentro do nosso design. Então vamos começar a criar nossa barra lateral agora, e vamos começar a criá-la com uma nova camada. Então deixe-me trazer de volta os painéis e deixe-me criar uma nova camada, e eu vou chamá-lo de barra lateral. E agora estamos prontos para criar nossa primeira seção em nossa barra lateral. Que fora do curso são eles que o item da caixa de pesquisa bem aqui no topo? Então vamos começar a fazer isso no próximo vídeo 70. 17Vamos criar a caixa de pesquisa: Então eu vou começar a criar essa caixa primeiro usando a ferramenta de retângulo. E eu vou ter certeza que ele tem o Phil branco e eles derrame mais escuro e que o derrame não é muito grande. Um ponto deve ser suficiente. Deixe-me agora apenas ampliar rapidamente assim e agora podemos criar uma caixa de pesquisa que vai ser algo como Então não tem que ser, não tem que ser muito grande. Podemos talvez até fazer menor a 50 pixels, assim como agora eu vou me livrar da grade. Eu não preciso mais dele. O que eu preciso, no entanto, é da visão do texto. Então, com a ferramenta de texto artístico, vou clicar e arrastar e digitar algo como Pesquisar aqui. E, claro, queremos mudar a fonte de Roboto condensado para simples roboto. Talvez não magro, mas itálico. Simplesmente assim. Mude o tamanho para algo como 16. Vamos mudar a cor para esta cor cinza escuro assim. E, claro, vamos nos certificar de que é na verdade, uh, a sensação que estava afetando, não o derrame, e vamos agora talvez superar a capacidade até, digamos, 50,50%. E o que temos que fazer agora é, é claro, temos que criar a lupa, que não deve ser um problema sólido. Basta pegar o tal elipse, criar uma elipse. E agora vamos pegar a ferramenta de retângulo e criar um retângulo que vai ter um preenchido, mais escuro, preenchido e eu não quero que ele tenha nenhum traço, assim como assim E vamos torná-lo menor. Vamos com talvez até um pixel. Por que não? E vamos girá-lo de um de seus pontos inferiores em 45 graus, assim como assim E vamos torná-lo um pouco menor. Vamos descer para 10 pixels algo assim. E agora nós poderíamos apenas talvez trazer o finalista para baixo um pouco. E se você quiser, é claro, você pode torná-lo menor, então eu vou apenas agrupá-los e torná-los menores para algo assim. E, claro, nós também podemos deixar cair sua capacidade para baixo. Vamos ver 50% como com o nosso texto, e é claro, precisamos perturbar sua passagem para baixo todos os elementos por cento novamente, deixe-me apenas diminuir o zoom. Isto é o que parece. Glutão. Talvez mova esse cara um pouco para a direita. Como você pode ver, não é realmente difícil, mas ele só precisa de um monte de ajustes. Deixe-me trazer esse cara para 12 pontos, tão bem, mas um pouco para a esquerda. E agora vamos ver como é. Pode ser muito pequeno para você. Pode ser muito grande para você. Ele já sabe, realmente uma questão de preferência pessoal pássaro. OK, vamos deixar assim. Não vamos gastar muito tempo fazendo com que pareça. olhar perfeito vai da minha experiência. Posso dizer que raramente parece perfeito, e eu estou gastando muito tempo fazendo apenas, tipo, realmente, pequenos ajustes. Ainda assim, parece OK, mas como sabemos feito é melhor do que perfeito. Então vamos deixar assim. Então nossa próxima parte seria criar este primeiro contêiner, que era a seção sobre mim. Então temos que criar o rótulo, a imagem e, em seguida, algum texto com ícones de mídia social. Então vamos começar a fazer isso no próximo vídeo 71. 18vamos criar a seção sobre me: Então eu decidi agrupar os elementos que criam nossa caixa de pesquisa. E eu nomeei bem o grupo, caixa de busca aqui. Então agora podemos seguir em frente para criar em nosso primeiro sobre bem, primeiro emblema, primeiro rótulo e depois todo sobre mim parte fora da barra lateral. Então o que eu vou fazer primeiro é pegar a ferramenta de retângulo, mudar a cor para esta cor vermelha ou rosa. E, claro, certifique-se de que a opacidade é retrocedida para Beckett 100%. E eu vou começar a criar meu retângulo a partir deste canto inferior esquerdo fora do retângulo anterior . Isto deve ficar bem. Vou deixá-la por enquanto, assim. E agora eu vou criar outro retângulo que se estende da direita dois à esquerda, assim e novamente. Não quero que seja muito grande. O que temos que fazer agora é, naturalmente, temos que adicionar algum texto aqui dentro. Então eu vou pegar o têxtil artístico, clicar e arrastar direito sobre mim, assim que eu vou mudá-lo de metálico muito ousado, apenas assim. E, claro, nós vamos mudar a cor para branco e talvez vamos trazer isso um pouco para, tipo, 14. 14 deve estar bem, e eu vou trazê-lo para cima. E como podem ver, talvez precisemos ajustar um pouco este retângulo. Então tudo parece bom. Talvez até um pouco para a direita, assim. Então agora podemos pegar todos esses elementos, agrupá-los e simplesmente derrubá-los. A partir do reenvio do centro irá ponto superior trazê-los para baixo em 50 pixels. Então agora podemos começar a criar essas imagens. Será que esta imagem e este recipiente de texto Então eu vou apenas novamente envolto o dedo do pé retângulo encontrar esta parte inferior esquerda, deslocamento canto esquerdo, clique e arraste. Torná-lo um pouco maior para torná-lo realmente quadrado escrito para baixo por 25 pixels. Claro, a cor deste recipiente realmente não importa neste ponto, mas eu vou cloná-lo para baixo, torná-lo um pouco menor, apenas assim e, claro, transformou este neste retângulo em um fazendo contêiner de imagem. Alguns vão clicar nesta opção de seleção inserida dentro e encontrar a imagem apropriada. Talvez esta imagem porque é claro, Isso não é sobre mim seção, então seria melhor mostrar alguns. Mostre a foto da pessoa que é o autor fora do blog. Vamos centrar assim. Vamos ligar a cor deste fundo também, também, certo? Pegue o quadro de texto, moldura de dedo do pé têxtil e crie um pedaço simples de texto que vai se parecer isso. Acho que deve ficar tudo bem. Vamos alinhar corretamente é apenas um segundo. Vou preenchê-lo com alguns com algum texto de preenchimento. E, claro, certifique-se de que eu tenho a refutação regular, mas 16. E claro que eu quero mudar, e eu quero mudar a cor também. Apenas certifique-se de que eu tenho tudo selecionado corretamente. 16. Mude a cor para esta cor cinza escuro, assim como assim. E, uh, talvez vamos alinhá-lo ao centro e vamos dar uma olhada na altura da linha. Vamos abaixar um pouco. 2 22 Talvez eu vá imprimir apenas dele, e agora podemos ter certeza de que tudo está alinhado com o centro em relação ao nosso passado, e eu vou simplesmente pegar emprestado essas mídias sociais. Eu vem. Vou copiá-los aqui e de novo. Eu vou me certificar de que eles estão sendo alinhados bem no centro, em relação a este recipiente. E agora podemos pegar o texto e os ícones agrupá-los. E agora uma linha tudo bem para o centro, assim como assim. Então criamos nosso contêiner de contêiner. Agora eu só notei que eu acho que eu deveria ter apenas criado bem adicionado 25 pixel gap em vez de um intervalo de 50 pixels. Mas você sabe, às vezes esses erros bem, que eu cometo realmente vai nos dar um, bem, um bom incentivo para aprender algumas coisas novas sobre diferentes do designer. Nosso tipo de como resolver desafios de design que você definitivamente principal vêm para quando você está projetando sites, porque as chances são de que você está indo para cometer erros, e tudo bem e é realmente até mesmo bom. Bem, é bom desde que aprenda com esses erros. Então eu vou pegar todos esses elementos. Deixe-me ter certeza de que estou pegando todos esses elementos. Eu vou agrupá-los e agora o que podemos fazer é simplesmente ter certeza de que temos esse cara definir este ponto original para cima e simplesmente para trazê-lo para cima em 25 pixels. Eu vou fazer algumas contas aqui, então eu vou com menos 25. E lá vamos nós. Uma vez que tínhamos esta lacuna aqui ajustada para 50 pixels, qualquer um teria definido para 25. Então sempre realmente tem que fazer é apenas subtrair 25 pixels desta lacuna aqui. Então isso é o que parece agora. Então temos nossa caixa de busca. Temos nossa seção sobre mim. Nós temos a imagem, um, este recipiente de texto, e chegamos à orientação. Então pegamos o primeiro. Bem, primeiras 2 partes da nossa barra lateral criaram a próxima parte da barra lateral seria criar isto. Deixe-me voltar ao original, este pequeno pedaço de texto aqui e este pequeno rótulo. Então vamos fazer isso no próximo vídeo 72. 19Vamos criar a seção de texto da barra de lateral: Então agora podemos criá-los Minha seção blawg fora da nossa barra lateral. E, mais uma vez, vamos reutilizar os elementos que já temos aqui. Então, primeiro, eu vou pegar o rótulo assim e copiá-lo para baixo até que ele se encaixe com este, uh , este recipiente, deixe-me trazer de volta os painéis e eu vou colocá-lo para baixo por 50 pixels apenas assim e deixar é mudar tudo vermelho, em seguida, o sobre mim texto, Vamos mudar para o meu bloco. Então, com o texto dito ao têxtil artístico, eu vou selecionar este texto e apenas digitar meu blawg assim. E, claro, dependendo do tamanho ou da largura deste texto para o nosso rótulo, talvez tenhamos de o fazer. É só que é fundo. Então, neste caso, eu vou pegar este retângulo de cardo e apenas fazer este retângulo um pouco menor, apenas assim. Então agora eu posso pegar emprestado este texto fora aqui e este CO de fundo e baseá-lo e trazê-lo para baixo assim, é claro, eu vou no grupo tudo. Não vou precisar desses ícones de mídia social. Vou me livrar deles. Eu estou indo. Teoh, mude o alinhamento do centro 2 à esquerda assim. E podemos simplesmente trazer este parágrafo para baixo. Se eles mudarem algum texto de preenchimento dentro. Por que não? E agora espalhe esse cara para baixo. Criando sobre esta peça fora como simples agradecimentos simples pode nos dar outra ocasião dedo do pé, aprender mais um aspecto de trabalhar com diferentes funções e disse, Senhor, No designer de afinidade, lembre-se que temos em geral lacunas com 25 pixels ou 50 pixels. Por isso, se quiseres, podes manter isto. Bem, essa idéia dentro de suas caixas de texto. Então, por exemplo, aqui, se queremos ter certeza de que na verdade as lacunas, o preenchimento dentro desta caixa é definido para 25 pixels sobre o uso do que já temos Bem, isso é realmente muito, muito simples . Tudo o que temos que fazer é ter certeza de que nossa caixa de texto está se espalhando por nosso poço, nosso fundo neste caso. Então agora o que podemos fazer é simplesmente torná-lo menor. Então, primeiro eu vou torná-lo menor a partir do topo para criar a lacuna de 25 pixels. Então eu vou definir o ponto original para o fundo e eu vou subtrair 25 de sua altura, exatamente assim. E eu vou fazer o ponto central ficar no centro. E agora eu vou subtrair 50 do com porque eu quero, e eu quero criar a lacuna à direita e à esquerda. E ambos devem ser 25 25 mais 25 é geralmente 50 alguns vão adicionar 50. Vou subtrair 50 assim, e lá vamos nós. Agora podemos ter certeza de que a distância entre o topo e as partes esquerda e direita vai bordas do nosso recipiente ou exatamente 25. Agora posso me livrar desse cara e derrubar esse cara. E se você quiser, você também pode ter certeza de que a distância entre esses caras é 25. Mas eu não vou tão bem. Eu não vou. Não vou criar essa grande lacuna. Eu vou talvez adicionar 12 pixels assim e novamente com este tipo enfraquecer fazer exatamente o mesmo. Podemos apenas derrubá-lo assim. E certifique-se de que isso é realmente 20. Que a lacuna aqui é 25. Então podemos eso enfraquecer simplesmente. Agarrar o quê? Talvez desta vez vamos fazer a transformação do topo. E do chumbo de altura, subtraia 25 assim. E ah, claro, podemos mudar o próximo texto de preenchimento assim. Ok, então chegamos a esta peça bem aqui, criado para que a próxima seção seria criar este grande, mais popular feed blawg post post feed bem aqui. Então vamos começar a fazer isso no próximo vídeo. 73. 20vamos criar o primeiro recipiente para os posts mais mais populares: Então vamos começar a criar a próxima seção novamente apenas duplicando alguns elementos. Eu vou pegar este rótulo aqui e trazê-lo para baixo até que ele se encaixe com este recipiente superior e eu vou adicionar 50 pixels para ele, assim como em seguida, eu vou apenas Gramp a ferramenta retângulo. Como você pode ver, estamos usando principalmente as ferramentas mais simples. E eu vou criar um recipiente assim como então trazer para baixo talvez. E eu vou simplesmente adicionar novamente 2025 pixels a ele. E se olharmos para o original, podemos ver que ele está dividido em duas seções. Mas honestamente, primeiro foi dividido em três seções porque eu queria criar uma espécie de 1/3 2 3ª divisão bem aqui. Então, como podemos fazer isso? A maneira mais fácil de fazer isso é simplesmente copiar este retângulo alguma cópia e colar nele assim, e deixe-me apenas talvez mudar rapidamente sua cor para que você possa ver melhor. Então agora nós temos fazer diferentes dois recipientes diferentes para diferentes retângulos. Então, como criar dois contêineres a partir deste contêiner que e um desses contêineres será 1/3 do total com e o outro será 2/3 do total com. Então, primeiro, eu vou não dividir este primeiro recipiente este primeiro retângulo por três. Assim como para criar uma versão 1/3 fora de todo este todo este recipiente inteiro. Então agora temos este retângulo menor e este retângulo maior bem aqui. Então eu vou pegar esses dois caras e da operação de caminhos eu vou escolher dividir assim. Então nós temos apenas este retângulo e este retângulo. Mas como você pode ver quarto tão bem, este é um retângulo e nós queríamos ser um quadrado porque se formos ao original, este cara é um quadrado. Então, já que é ah, com 90 pixels, a altura precisa ser a mesma. Alguns simplesmente vão digitar 19. Assim, Adam se meteu no mesmo com esse cara. Basta digitar 90 e este é o nosso primeiro nosso primeiro recipiente. Agora, a última coisa a dificar, é claro. Bem, recipiente sábio. Eu sei. Eu sou eu sou saquê. Contentor. Muito é criar uma linha. Aqui diz que esta divisão está bem aqui. Então eu vou simplesmente agarrar direcionando para a ferramenta retangular novamente e criar um retângulo esticando através de nossas três colunas e torná-lo difícil. Faça com que seja apenas um pixel de altura assim. E eu vou Teoh arca-lo para baixo por 12 pixels. Não quero dividir pixels ao meio, e sei que normalmente temos 25 pixels e em breve teremos 25 pixels entre esses contêineres. Mas eu quero que esta linha seja colocada exatamente no meio desta lacuna bem aqui. Então, desde 25 dividido por 2 para 12,5 e podemos dividir pixels para que possamos ir com 12 ou 13 em, eu vou com o 12. E assim, nosso primeiro contêiner é criado. Então ele conseguiu o marcador de imagem à esquerda. Próximo espaço reservado à direita. E esta linha é uma fronteira aqui em baixo. Então, no próximo vídeo, vamos começar a adicionar o conteúdo. Vamos adicionar a imagem, vamos adicionar o texto e, em seguida, duplicar este bloco post trecho. Bem, vamos duplicá-lo três ou quatro vezes, então fique atento 74. 21Vamos criar a lista as posts mais populares: agora, antes de Kelowna este recipiente e preenchido com conteúdo. Vamos mudar o texto que meu bloco para texto para o mais popular. Claro, você pode digitar tipo em outra coisa, como outros usuários estão lendo ou como a maioria lida. Não, o mais compartilhado, mais parecido com o que você quiser. Eu só vou para o padrão, mais popular e eu vou mudar o tamanho. Vou tornar o tamanho deste fundo um pouco maior. Então, agora eu vou descer. Eu estou indo para Eu estou indo para zoom para trás um pouco zoom para trás. Então agora podemos pegar este retângulo e transformá-lo em um recipiente de imagem usando-os que é isso que este sistema nós já conhecemos. Eu só vou com base na imagem em apenas assim. E agora podemos começar a adicionar texto. Então deixe-me pegar emprestado rapidamente talvez esta data ou talvez do nosso mais grade. Então eu vou pegar a data em que os explodem o post intitulado e esta etiqueta copia-os e baseando-os sobre eles aqui. E, claro, apenas traga-os assim. E talvez eu vá fazer este encontro um pouco menor do pé, como 10 pontos. Espero que isso ainda seja visível para você e coloque-o em algum lugar aqui. Apenas alguns em como Então agora eu vou fazer esse cara menor. Vamos tentar 18 e vamos mudar a altura da linha para atingir 22 ou talvez até 20. E vamos fazer todo o recipiente muito, muito menor e vamos ver como ele ficará aqui. Ainda pode ser um pouco grande demais. Talvez seja um pouco menor. E talvez vamos tornar o imposto ainda mais pequeno. Na verdade, vamos descer como um 16 mais lento. Talvez agora possamos estender apenas um pouco, também em algum lugar aqui e agora podemos apenas pegar este estilo de vida dezembro esta tag. E já que isso era 10 vamos com 10 também aqui e torná-lo apenas um pouco menor. E vamos digitar a palavra correta, assim como agora ele pode simplesmente pegar todos esses caras e distribuí-los, assim como agora podemos agrupá-los. E lá vamos nós. Criámos o nosso primeiro contentor. Se você apenas diminuir o zoom. Isto é o que parece, e eu acho que parece. Acho que parece muito bom. Então agora o que podemos fazer é pegar todo esse contêiner Kelowna até que ele se encaixe com nossa linha. Isto deve ficar bem. Vamos agora adicionar novamente. 12 ou mesmo 13. Então ele pegou 25 assim e de novo. Podemos mudar essa, uh, esta imagem aqui. Este é esse cara bem aqui. E, claro, você já sabe o que fazer. Você sabe como fazer isso. Então isso é apenas rápido. Vamos mudar rapidamente na foto. Talvez desta vez estas rochas tornem a imagem inteira menor. Simplesmente assim. E mais uma vez, podemos mudar. Podemos mudar de texto assim. E novamente, vamos apenas Colônia está para baixo. Vamos adicionar 12. E novamente, vamos mudar a inserção da imagem dentro. A seleção talvez tenha desaparecido desta vez. Vamos reduzir a imagem. Como você pode ver, é muito, muito grande, apenas assim. E, novamente, podemos mudar. Podemos alterar este texto aqui Curso. Também podemos mudar a etiqueta, mas não vamos fazer isso agora. E vamos fazer a rotina toda mais uma vez, então vou derrubar esse cara. Eu vou adicionar 13 pixels porque você quer ter 25 no total, exatamente assim. E desta vez eu vou me livrar dessa linha assim, e eu vou mudar. Eu vou mudar isso. Esta imagem, outra coisa. Vou para a base do dedo do pé. Talvez neste Natal, esta foto de Natal, assim e de novo. Mude este texto assim. E lá vamos nós. Temos o nosso mais popular, mais popular alimentador de sangue criado. Então a última coisa a fazer seria criar o local para esses anúncios aqui. Então tudo o que realmente precisamos fazer é criar este rótulo e, em seguida, basta adicionar as fotos, os contêineres, fotos da Porta e as fotos para si mesmos. Então todos eles se parecem com isso é claro, se você quiser, você pode projetar alguns realmente acrescenta algo como 20% de desconto em coisas assim. Mas eu vou apenas ir com o com imagens simples só para mostrar o processo. E eu não quero que você para Teoh para passar o tempo olhando para mim, chegando com alguns lançamentos de vendas funky, em algumas áreas funky. Anúncios de vendas, coisas assim. Então vamos começar a criar nossa última peça fora da barra lateral no próximo vídeo. 75. 22Vamos criar a seção de anúncios: Então, vamos começar a criar na seção de anúncios novamente apenas emprestando o rótulo. Então eu vou derrubá-lo e eu vou adicionar 50 pixels a ele. E em vez de mais popular, vou digitar, vamos digitar a cabeça de anúncios. Claro, temos que fazer esse cara menor, e vamos ter que fazer esse cara causa muito, muito maior. Como você pode ver, é muito pequeno. Então vamos começar a adicionar, e a propósito, você poderia segurá-los shift para adicionar valores em incrementos de 10 pixels aqui no painel de transformação . Então eu estou segurando o turno e você pode ver que eu estou mudando o valor por tempo. Ok, então agora tudo o que precisamos fazer é criar quadrados simples e simples que hospedarão nossas imagens. Então, novamente, eu vou pegar a ferramenta de retângulo segurando shift para criar este quadrado, exatamente assim. E é claro que eu vou movê-lo para baixo em 25 pixels assim, e eu vou colônia para baixo, e eu vou pressionar o controle J para cloná-lo para baixo mais uma vez. Mas é claro, esses caras precisam diminuir 25 pixels também. Então, uma e duas vezes em apenas um segundo como esse. E agora podemos transformar esses contêineres em contêineres de imagem. Então, novamente, inserir decide seleção, agarrou a imagem, colocá-la dentro, torná-la menor para que possamos ver algo um pouco menor. Assim de novo com esse cara baseado, talvez, talvez essa imagem dentro, assim. E o último baseou algo lá dentro. Talvez este sanduíche assim. Então lá vamos nós. Temos a barra lateral que Said foram criados. Claro que não. Só uma barra lateral, porque já temos. Então esse , cabeçalho, temos o controle deslizante, e então chegamos ao poste do bloco principal bem aqui, e temos a barra lateral. Nós temos esses bem apresentados que apresentavam orgulho de sangue também, e nós temos os anúncios. E a única coisa que nos falta aqui é o rodapé. E nós também vamos começar a criar o rodapé no próximo vídeo 76. 23Vamos dar uma parte de nossa booter: Vou me certificar de que eu tenho para esta arte a bordo selecionado aqui, e eu vou pegar a arte a bordo. Ainda que eu vou estender meu quadro de arte para algum lugar aqui, então eu vou fazer o mesmo com os grãos de aveia. Vou voltar a ligar a visibilidade dele e vou, Teoh, Teoh, desbloqueá-la. E então eu vou estender isso assim. Então, se dermos uma olhada no original, podemos ver que para ouvir a comida er é dividido em duas partes. Primeiro, temos essas colunas com links, mas também temos agora o Chapeleiro que está sendo repetido aqui no rodapé. Quero dizer, é o conceito para o cabeçalho é repetido aqui no rodapé. Então o que podemos fazer é simplesmente pegar o cabeçalho. Quero dizer, todos os seus elementos, assim como assim e certifique-se de que temos a camada certa criado alguns simplesmente vai rapidamente criar um rodapé mais tarde. E eu vou movê-lo para baixo assim. E assim que eu passeei Ah, esses elementos copiados em você pode ver que eles se baseiam exatamente em seu lugar anterior . Mas o que podemos fazer é simplesmente definir este 0.20 original assim, e podemos deixar Stipe em algo como 2600 e enfraquecer rapidamente imprimi-lo. Como pode ver, é aqui em baixo. Então vamos adicionar talvez, tipo, 2000 pixels para ele, e ele vai para baixo aqui exatamente assim. E claro, esse cara tem que ser menor, então vamos torná-lo mais pequeno. Então eu vou mudar este fundo de 42 Eu vou definir o ponto original devido a este ponto meio esquerdo de 42. Vamos ver 20 para ser capaz de pequeno 26 deve ser bom. E agora, já que este tipo está definido para 2026, deixa-me bloquear rapidamente a grelha e talvez até desliguemos a visibilidade. Agora que criamos esse cara, temos que fazer esses caras menores também, então eu vou pegá-los com esse dedo eleitoral, e eu vou torná-los menores, então eu vou bloquear a proporção e trazer eles, traga sua altura para baixo ou digamos 2 12 pixels. Talvez isto deva ficar bem. E lá vamos nós. Este seria o nosso que este seria o nosso poço se ela repetisse no rodapé . Talvez até queiramos fazer esse cara mais pequeno, assim mesmo. E vamos nos certificar de que tudo está sendo bem alinhado com o centro assim. E deixe-me apenas diminuir o zoom rapidamente, desligar a visibilidade dos painéis, e este seria o primeiro elemento do nosso rodapé. O próximo elemento seria este. Basta voltar para o original, esta grande parte fora do rodapé com estas colunas e links e, a propósito, notar que estes fundos a cor das cores destes fundos são diferentes. Este é mais escuro, e este é mais leve, e na verdade, este é apenas um caminho para fora, criando como rodapés combinados. Vamos chamá-los assim. Claro, esse cara pode ser mais escuro e esse cara pode ser mais leve se quiser, ou ambos podem ter a mesma cor, e podem ser divididos com uma linha. Por exemplo, se essa for a sua escolha de design. Portanto, existem diferentes maneiras de criar, como rodapés combinados. Eso Vamos dar uma olhada rapidamente em ambos. Bem, na verdade, três designers descrevem como podemos criar um como um rodapé combinado, em camadas, rodapé em camadas. Mas vamos começar a fazer isso no próximo vídeo. 77. 24Vamos explorar diferentes conceitos de 24Let's: Então, uma maneira de criar um alimento combinado seria dar a esses caras a mesma cor que essa . Quanto maior a primeira parte na segunda parte. A mesma cor de fundo. Então vamos fazer isso rapidamente agora para que pudéssemos criar o mesmo retângulo bem com o mesmo plano de fundo. Assim como assim. No entanto, poderíamos adivinhar esses caras com alguns com algumas linhas, então podemos simplesmente pegar emprestado este retângulo e torná-lo muito, muito, muito, muito, muito menor e fazê-lo dizer um vermelho assim. Mas não vamos fazer isso tão grosso. Vamos manter isso simples. Vamos para talvez dois pixels. Mas é claro que queríamos ser Você queria ser bem gasto em todo o quadro de arte. Então vamos desmarcar a proporção de bloqueio. E agora é apenas ah, digite dois. Então, agora, deixe-me apenas rapidamente, talvez emprestar esses caras. Só para veres do que estou a falar, vamos criá-los dentro de um segundo. Então, se agora estamos apenas baseados esses caras em algo assim você pode ver que agora nós temos esses caras, esses caras vão colocar no mesmo fundo. Mas essas partes estavam sendo bem separadas com isso com esta linha. Então este fora criando esse tipo de rodapé, nós também poderíamos pegar, hum, este fundo e torná-lo mais escuro. Vamos com talvez não com preto, mas algo muito, muito escuro. Algo assim. E vamos nos livrar disso fora do curso. Se você quiser, você pode deixar assim, mas eu vou me livrar dele. Então este é o nosso design original original. E, claro, se você quiser, você pode talvez fazer esse cara dar a esse cara uma cor mais clara, ótima e talvez possamos torná-lo um cara mais escuro, assim mesmo. Então, é realmente, realmente até você até a sua escolha de design com o qual ah, qual esquema de cores que você vai para ou se você decidiu apenas ir com uma cor. Mas para dividir esses elementos com um com uma linha simples de qualquer maneira funciona. Eu só queria mostrar diferentes idéias sobre como criar esse tipo fora. Vamos projetar um site, um elemento de site. Então, no próximo vídeo, vamos acabar com esses elementos. Não se preocupe, eu não vou embora. Eu não vou deixar assim. Vamos dar uma olhada em como criar esses caras, e então é realmente começar a criá-los no próximo vídeo. 78. 25vamos terminar o projeto e explorar o próximo: Então eu vou começar com a trazer de volta da grade assim e eu vou pedir emprestado 11 rótulo. Então eu vou talvez pegar este meu rótulo de sangue assim. E, claro, vou me certificar de que estou no jogador certo. Isto para o lote de camada bem aqui que eu vou colá-lo, derramado contra a minha grade. Eu vou adicionar 50 para criar a lacuna, assim como agora eu posso diminuir o zoom, e agora podemos criar alguns Bem, alguns links, alguns impostos. Então eu vou pegar a próxima ferramenta de quadro, e eu vou criar rapidamente um amigo de texto que vai se espalhar por apenas essas três colunas, e eu vou inserir texto de preenchimento e eu vou mudar sua cor Dois liso branco. E, claro, vamos torná-lo maior 16 22 para a altura da linha. E se você quiser, você pode simplesmente deixá-lo assim ou nós poderíamos apenas fazer apenas um pouco menor e notar que se nós apenas voltar para o original, essas linhas são muito, muito bem, por que eles são apenas três colunas. Na verdade, eles estão se espalhando por quatro colunas, mas o imposto nunca excede essas quatro colunas. Na verdade, eu queria manter esses caras um pequeno lago curto porque, você sabe, você sabe, já que diz links aqui em cima do que eu queria que parecesse com links. Mas não tem que ser assim. Quero dizer, tipo, à esquerda, você pode ter uma coluna com mais algum texto, que seria, digamos, tipo, eu não sei, talvez algum mawr importante informações que ela gostaria de compartilhar com os usuários. Então ele não tem que ser links para apenas para o bem deste design, eu apenas decidi fazê-lo para torná-lo links. Mas, novamente, podemos simplesmente fazer um pouco de texto simples, assim. No entanto, o que eu definitivamente gostaria de fazer é que eu gostaria de espalhar esta linha em quatro colunas , então ele precisa ir todo o caminho para a direita. Bem, aqui mesmo. Então, deixe-me apenas estender rapidamente. Eu vou segurar no turno e pressionar a seta para cima para que ele envie para este para nesta quarta chamada. Agora vou mudar o texto. Vamos ver, vamos talvez digitar algo como, bem, mais texto, assim. E vamos estender este, uh, este fundo, talvez não tanto. Isso deve ser bom e não o que poderíamos simplesmente didio é Nós poderíamos apenas pegar este, uh, este rótulo, este texto e este texto bem e simplesmente colá-lo para a direita apenas assim e, em seguida, pressionar o controle J para cloná-lo cloná-lo mais uma vez. Vou livrar-me da grelha. Vou desligar a visibilidade dele. E agora, é claro, podemos simplesmente mudar esse texto para links e, claro, mudar o tamanho um pouco assim. mudar esse texto para links e, claro, E como podem ver, temos de o fazer novamente. É do tamanho deste bar, por isso vou torná-lo maior. E, claro, poderíamos simplesmente nos livrar desse texto de fundo sobre talvez vamos apenas estender esse cara, cortá-lo, livrar desse básico na frente e talvez fazer isso menor. Então, na verdade, parece algum tipo de links assim. E vamos deixar como mais texto aqui. Tenho certeza de que você já sabe que tipo de efeito estamos fazendo aqui mesmo. Então, como essa lacuna é de 50 pixels, queremos que essa lacuna seja de 50 pixels também, certo? Queremos ter um design coerente e consistente. Então eu vou fazer isso e fazer este fundo menor, assim como isso. Talvez só mais. E agora eu vou, a partir de seu anúncio stop 50 pixels para sua altura, exatamente assim. E agora parabenizamos todos esses elementos e os movemos assim. E agora podemos selecionar esse rodapé inteiro, colocar essa camada inteira de quatro, movê-la para o texto de postagens mais antigas, e agora movê-la novamente para baixo por 50 exatamente assim. E, claro, a última coisa a fazer seria pegar o Artigo 2 e fazer com que esse cara fosse significativamente menor assim. E lá vamos nós. Não temos isto. Bem, esta página de armas que esta primeira página da web criou. Então é assim que você pode criar uma primeira página para um blawg moderno. Então começamos com a criação de um logotipo e uma navegação com alguns ícones de mídia social. Criamos o cabeçalho, em seguida, criamos o que enquanto a seção herói com o controle deslizante de carrossel, os contêineres de imagem, navegação e os títulos de postagem de sangue. E abaixo disso, adicionamos ao poço a principal característica para bloquear ostenta eso com a imagem e o recipiente de texto abaixo dele. E então nós adicionamos na grade de postagem do bloco e à direita, nós adicionamos, Ah, um lado bastante intrincado onde eu acho que com a caixa de pesquisa sobre a seção de texto da seção, sangue mais popular se orgulha e na seção de anúncios. E, claro, terminamos com o rodapé, uma seção que seria dividida em duas partes. Agora, nos próximos vídeos, vamos criar a única postagem dentro da página de postagem única do designer de afinidade porque queremos mostrar ao usuário e ao desenvolvedor o que achamos que o site deve parecer quando um deseja ler uma postagem de bloqueio. Então nós estamos indo para em um recipiente de imagem. Nós vamos adicionar um monte de texto. Vamos adicionar uma navegação simples, permitindo que o usuário vá para o próximo e o post anterior, e então vamos adicionar a seção Commons. Mas também vamos reutilizar muitos dos outros fora dos elementos que já criamos que como o cabeçalho, o rodapé e a barra lateral. Então, se isso é algo em que você está interessado, apenas continue assistindo. 79. 26Vamos explorar o design de post: nos próximos vídeos, vamos criar uma única página de postagem para o nosso design de blocos e que vamos fazer algumas coisas diferentes. Nós vamos adicionar alguns elementos diferentes, e nós também vamos deixar alguns elementos que já são projetados e já são partes fora do nosso design. Então, algo geralmente está em uma única mudança de postagem de bloco, mas uma única publicação de bloco muda. E algumas coisas permanecem as mesmas. Por exemplo, o cabeçalho como este, a Guerra Secundária, porque esta foi a minha escolha de design. Então decidiu o site de nossos estados o mesmo e o er comida permanece o mesmo. Mas todas as outras coisas são diferentes, começando com a seção de heróis. Como você pode ver, não temos o controle deslizante aqui. Eu decidi colocar a imagem em destaque aqui em vez do controle deslizante. E então, claro, temos um número. Bem, todo o poste do quarteirão à esquerda. Então, nosso projeto principal é dividido em duas colunas novamente. Então este bloco gabar-se está se estendendo por nove colunas. E, claro, a barra lateral está se estendendo por três colunas. E aqui nós chegamos aos dados o título do post do bloco, alguns links o texto. E então estamos mostrando, Ah, o desenvolvedor ou o usuário como a imagem vai se parecer. E então nós estávamos mostrando como algumas citações em bloco o pedaço de texto vai parecer que nós, é claro, temos alguns. Obter alguns links aqui, algumas etiquetas, redes sociais. Eu vem aqui e, em seguida, chegamos a uma navegação simples para Post anterior ea próxima gabar-se, juntamente com uma imagem e um título post bloco. Em seguida, temos alguns cartões para bloco relacionado, ambos para que estes podem ser bloqueados gabaritos que para a frente na mesma categoria que têm as mesmas tags e coisas assim. E, em seguida, temos a seção de comentários aqui com que bem manequim Commons avatares fictícios e alguns Post vai comentar é caixas como o nome do comentário, e-mail post botão comum aqui em baixo, No entanto, com a seção comum ouro, há uma coisa que você tem que enterrar mente, porque quando você está criando um blawg, as chances são de que o desenvolvedor é muitas vezes vai usar algum pronto feito a partir dos plugins para a seção comum. Por exemplo, discutir ou Facebook comentários plugging, e esses dois são os plugins mais comuns usados para criar um bloco gabar-se Commons sob as mensagens de bloco em que ist seção. Mas neste vídeo, eu só queria mostrar como você pode criar completamente, completamente personalizado, completamente personalizado, a aparência de uma seção de comentários dentro de uma postagem em blog. Então vamos realmente começar com a criação da nossa imagem de herói. E então nós vamos criar um alguns caras visuais que vão nos ajudar a criar todas essas peças fora. Bem, pedaços de texto, títulos de imagem, todas as coisas que são necessárias dentro de uma postagem de bloco. Um contêiner de postagem de bloco único. 80. 27Vamos criar a imagem de destaque e o container: Como você pode ver, eu não tenho direito aqui. Eu não tenho nenhuma imagem. E o controle deslizante? Eu não tenho nenhum bloco gabar-se bem aqui. Só tenho a barra lateral, o cabeçalho. E, claro, o rodapé. Deixe-me descer rapidamente pelo pé ou aqui embaixo. Então, vamos começar com a adição dessa imagem em destaque em vez do nosso controle deslizante. Agora, eu já tenho um retângulo aqui em baixo. Este é esse cara bem aqui. E eu simplesmente criei rapidamente porque eu acho que você já sabe o que fazer. Sabe o que vai acontecer em um segundo? Esse é esse cara bem aqui. Eu só tinha criado muito, muito rapidamente para torná-lo o recipiente para a nossa imagem em destaque. Então, novamente, eu vou me certificar de que esta opção de seleção inserida dentro está ativada e eu vou navegar para o local onde eu mantenho minhas imagens. Deixe-me ver. Eu acho que foi a grande invenção ruim, esse cara aqui e eu vou simplesmente colá-lo assim. E, claro, torná-lo significativamente maior. Mova-o para algum lugar aqui. Eu acho que isso deve ser bom, como você pode ver aqui. Há uma diferença de 50 pixels entre a minha imagem e esta caixa de pesquisa bem aqui. Então, a fim de criar um recipiente de postagem de bloco, eu acho que seria bom ter alguns dos guias visuais para nós mesmos. Então eu acho que nós poderíamos começar criando o fundo principal, este fundo, este cara aqui mesmo para o nosso posto de bloqueio. Então, primeiro eu vou Teoh, eu acho que nós podemos apenas olhar esta camada. Não vamos trabalhar mais nisso. Então vamos criar uma nova camada e vamos chamá-la de Ah, single post, assim como assim. E eu vou e pode estar acima da barra lateral assim. Então o que eu vou fazer agora é eu vou criar um retângulo estendendo-se por todas essas nove colunas, exatamente assim. Então agora que eu tenho este recipiente criado, eu simplesmente não posso trazê-lo apenas um pouco. Então, Duquesa, nossa imagem em destaque. E nós podemos talvez rapidamente apenas dar-lhe uma cor diferente para que possamos ver apenas um pouco melhor . Então agora podemos apenas adicionar 50 ao valor do eixo Y para derrubá-lo assim. Agora combina com o nosso poço, a altura da barra lateral. Mas é claro, ele precisa ser branco, exatamente assim. E agora podemos simplesmente rezar para algum lugar aqui. Não muito longe. Eu acho que isso deveria ser luta. Talvez um pouco mais, assim. Então agora nós gostaríamos de simplesmente saber como padeiro, este tapinha interior esta extremidade interna e deve ser e quanto espaço temos que trabalhar com. Quero dizer, nós queremos saber quão amplo o texto para este texto este título do bloco de postagem precisa ser. Como é que este texto e na parte inferior tem que ser Então tudo parece bem e é para seguir nossa idéia fora em 50 ou 25 pixels, lacunas dentro do nosso design. Então, como podemos fazer isso? Bem, primeiro fim de semana simplesmente pegue nosso retângulo. Esse cara aqui, copie. E acho que podemos trancá-lo agora para não estragarmos tudo acidentalmente. Então vamos trancá-lo rapidamente. E agora podemos apenas baseá-lo de volta. Então agora temos dois deles e vamos mudar rapidamente sua cor. Então agora vamos estabelecer o ponto de origem de transformação para o centro e vamos rapidamente subtrair 100 do chicoteado fora do nosso retângulo, assim como E agora é fazer o mesmo para a altura. Agora estou subtraindo 100 porque 50 mais 50 é 100. E desde que queremos ter um 50 grande espaço alma no topo 50 pixel gap na parte inferior e 50 pixel gap na esquerda e direita, Quando eu adicionar 50 mais 50 em ambos os lados, eu recebo 100. Então agora eu posso usar este guia como minha referência para que pudéssemos soltar sua opacidade para dizer 25% e talvez bloqueá-lo e, em seguida, apenas trabalhar contra o poço neste fundo. Mas eu quero que eu quero ver o que o meu vai tributar o conteúdo para o post bloco vai olhar como contra este fundo amplo. Quero saber o que estou fazendo aqui. Não sabemos o que estou projetando, então vou trazer alguns guias rapidamente. Então eu vou para ver vai mostrar as réguas e eu vou rapidamente apenas pegar um guia, um guia horizontal e um guia vertical. Isso vai ser bem aqui. Deixe-me ver rapidamente se eu sim, agora é não, ele está sentado onde ele precisa sentar. Eu vou apenas esconder as regras pelo controle atual são. E agora eu posso me livrar realmente deste contêiner que eu não preciso para este retângulo Então agora eu tenho Agora eu sei quão largo meus recipientes de impostos podem ser e nós podemos começar no primeiro contêiner de texto no próximo vídeo. 81. 28! Vamos adicionar o post do blog: Então neste vídeo vamos começar a adicionar o texto e vamos começar com a postagem de bloco intitulada. Então, se dermos uma olhada nesse cara aqui, podemos ver que temos a data do posto de bloqueio. Bem, título. E chegamos ao nome do autor e o número de comentários que são, que são links simples. Então agora eu vou me certificar de que eu estou na camada direita a camada de postagem única bem aqui. Vou pegar a ferramenta de texto artístico, clicar e arrastar e digitar tipo seguro na data. Diga isso, que talvez 15 Julho 2017. Assim como assim. E eu vou, é claro, mudar sua cor e seu tamanho para salvar talvez uns 14. E eu não quero que ele seja escrito em todas as maiúsculas, assim como mudar a cor assim. Deixe-me apenas consultar rapidamente com o original. Acho que é para esta noite, Alec. Sim, é, eu tálico. Então eu vou mudar de regular para itálico. Por que não? E vamos apenas digitar em julho assim e agora eu posso simplesmente mover esse cara Mover este recipiente de texto vai para. Claro, ele precisa estar na camada direita e eu posso movê-lo agora mesmo aqui para o ponto superior esquerdo para combiná-lo com essas guias bem aqui. Então agora podemos criar o título da postagem do bloco. Então eu vou Gramp o dedo do quadro de texto desta vez e eu vou criar eu vou criar a caixa de texto. Talvez assim fosse mais fácil. Deixe-me apenas diminuir o zoom e eu vou espalhá-lo em todas as colunas, apenas assim. E agora podemos imprimi-lo. Ainda assim, ele toca o 15 fora do julho 2017 e agora podemos derrubá-lo. E no original, eu acho que é eu acho que é 25 mas vamos apenas verificar rapidamente Vamos verificar a distância. Então, com a ferramenta de retângulo, eu vou para Sim, será 25. Então, agora podemos pegar este, uh, este disco vai moldar o dedo do pé, e podemos apenas deixá-lo cair de cima. Largue por 25 assim. E, claro, será roboto condensado ousado. Mas a frente vai ser muito maior. Nós vamos ver em apenas um segundo quão grande, quão grande é suposto ser. Se apenas inserirmos algum texto de preenchimento, alinhá-lo à esquerda, torná-lo maior, digamos, vamos ver 46 é claro, vamos fazer com que a linha se esconda muito maior. Vamos verificar 46 e vamos fazer este quadro um pouco menor, assim vamos ver como ele se parece. Deixe-me apenas movê-lo para a direita assim e vamos apenas esconder rapidamente os caras. Mas o presidente controlava a semi coluna e talvez escondamos rapidamente a grade também para que ele possa ver tudo mais claro. Eu acho que parece legal, eu acho, vamos deixar assim de novo. Se você quiser alterar o texto para ocultar a altura da linha ou talvez a família de fundos também, você pode, claro, fazer isso. Mas eu só quero mostrar a vocês as técnicas e a maneira de pensar ao criar esse tipo de design. Então agora, o que podemos fazer é pegar esse texto de 15 de julho, colocá-lo aqui e mudar o texto para comprar e depois digitar o nome do autor. E agora podemos trazer esse cara para a direita e então talvez vamos movê-lo por 25 pixels, exatamente assim. E vamos mudar esse texto para o número fora dos comentários. Eu vou me livrar disso por palavra, mas eu vou digitar e o número de comentários exatamente assim. Então agora podemos simplesmente derrubar esses caras em 25 pixels assim. E, claro, se você quiser, você pode talvez acertar esse cara um pouco mais perto de 15 pixels. Isso é que cabe a você. Então vamos dar uma olhada no original. Então ele chegou ao nome do autor, o número de comentários, a data e o título da postagem do bloco. Claro, se você quiser, talvez você possa fazer essas lacunas um pouco menores também, também, como 12 pixels ou 15 pixels. Vou deixar isso com você. Eu quero manter o design inconsistente, então qualquer coisa, eu tenho 50 pixels, e se eu quiser torná-lo como significativamente menor, uma diferença diferente, eu vou apenas ir com a metade desse valor, que é 25 como Bem, como aqui, como neste caso, porque eu tenho que te dizer que eu sou um pouco de um como um lustre de simetria e números iguais. Aquele Z é só isso era apenas meu jeans, você sabe, é claro. Ah, nós designer. Você pode ficar um pouco louco se quiser, e vamos fazer as coisas um pouco diferente. Então eu vou trazer de volta os meus guias apenas para que possamos ver que tudo está tocando bem. E se você quiser, você pode mudar o imposto para ver como ele vai preencher o quadro. Se você quiser jogar com esse curso diferentes, palavras diferentes, nós vamos preencher este quadro um pouco diferente. Então a próxima peça que vamos criar aqui é Bem, na verdade, são todos esses parágrafos, incluindo esta citação de bloco E, claro, vamos adicionar à imagem e essas tags aqui embaixo. Mas vamos realmente fazer isso no próximo vídeo 82. 29Vamos adicionar os parágrafos e imagens: Então, agora que chegamos ao título coberto, vamos criar o texto principal para o nosso blog, e eu vou rapidamente pegar emprestado este pedaço de texto. Este título aqui porque é um quadro têxtil vai ser mais rápido para nós mudarmos algumas coisas sobre ele. Em vez de criar um novo quadro de texto, vou torná-lo um pouco maior para algum lugar aqui. E, claro, vamos mudar o fundo de Roberto e vir Dentista para Roboto. E vamos mudar o tamanho da fonte 16 e a linha se esconder de 46 para algo menosimpressionante. E vamos mudar o tamanho da fonte 16 e a linha se esconder de 46 para algo menosimpressionante. E vamos mudar o tamanho da fonte 16 e a linha se esconder de 46 para algo menos Vamos tentar 26 talvez não seis meses, 26. Assim como assim. Claro, você pode brincar com isso com a liderança com a altura da linha, se você quiser. Na verdade, em muitos blocos modernos, você pode ver que o esconderijo de linha é realmente bastante grande. Bastante extenso, devo dizer. Eu acho que faz com que seja um pouco mais fácil de ler, especialmente em um dispositivos menores, Então, se você quiser ir com algo maior, você pode fazer isso. Você também pode talvez fazer. Claro, isso depende da frente, mas fundos como Roboto ou areias abertas são especiais, especificamente projetados para ser exibido em telas menores ou, você sabe, para ser bem visível nas telas em quando eles são exibidos, o digitalmente para que você possa talvez torná-lo ainda menor se você quiser, e ainda jogar ao redor com que com a maior altura de linha para torná-lo ainda mais bonito. Ou digamos visível, se é isso que você quer ir com. Mas eu vou ficar com os 16 regulares e eu vou para ir com uma altura de linha menor, talvez 28. Vamos deixar assim. Então agora vamos movê-lo para baixo novamente por 50 grande fonte, Assim como assim e notei que algo interessante está acontecendo com os parágrafos no meu quadro de texto. Quero dizer, se você quiser, você pode apenas fazer o quadro menor e, em seguida, trazê-lo para baixo para criar um parágrafo diferente , e então você teria que adicionar os 50 pixels padrão se você quisesse fazer 50 pixels. Mas há uma maneira mais fácil de criar parágrafos dentro de quadros de texto, então vamos derrubar esse cara. Talvez, assim E agora vamos não para o painel de caracteres, mas para o painel de parágrafo aqui e aqui você tem diferentes opções de espaçamento para que você possa terminar na primeira linha. Você pode, de fato, e tratará este espaço antes do parágrafo. Mas o que queremos é criar um espaço depois desse parágrafo. Então, se eu apenas ir com zero aqui, você pode ver que os parágrafos Bem, na verdade, não há distinção entre parágrafos. Mas se eu for com algo louco como 100 você pode ver que a lacuna está ficando extremamente, extremamente grande. E, claro, ele vai parecer diferente se ele apenas mudou o texto de preenchimento. Você pode ver que para os parágrafos ainda manter este espaço de 100 pixels após parágrafo, certo? Mas, claro, não queremos que seja tão grande. Vamos com 25 assim e de novo. Podemos talvez mudar um pouco do texto de preenchimento para criar um visual completamente, completamente diferente, e poderíamos brincar com ele a tarde toda para fazer com que pareça diferente. Acho que não vou gastar muito tempo nisso. Só queria mostrar como usar as opções de parágrafo para criar esse tipo de Ah, esse tipo de efeito. Então, agora acho que podemos. Então podemos adicionar a imagem, esse cara aqui. Então, talvez me deixe rapidamente o cara da Brenda só um pouco acima de algum lugar aqui e eu vou pegar o retângulo para, e eu vou criar um retângulo que vai ser algo assim. Na verdade, estou criando um quadrado perfeito. Claro, pode ser um ângulo direto como este que é simplesmente a sua escolha de design. Eu só queria ir com um quadrado para fazer com que ele pareça um pouco diferente, já que é seguro para fotografia. Sangue, vamos buscá-lo. Mas vamos ser um pouco criativos. Então vamos com talvez 200 por 200 e vamos mover esse cara para baixo por 25 pixels assim. Então não o que podemos fazer é criar um texto de parágrafo à direita fora de nossa imagem para que possamos pegar emprestado este quadro de texto, trazê-lo para baixo e, em seguida, movê-lo para a direita. E agora eu quero ter exatamente a mesma lacuna que a diferença entre parágrafos. Então eu quero. Quero ter 25 pixels, certo? Então o que eu vou fazer é simplesmente fazer este quadro de texto menor. Então eu vou me certificar de que para o meu ponto de origem de transformação está definido para a direita. E eu vou subtrair 25 desses quadros de texto com Just like so novamente, eu posso trazer esse cara para baixo até que ele corresponda à minha imagem, apenas assim novamente torná-lo um pouco maior. Talvez pão um pouco para cima e novamente Adicionar 25 assim. Então agora podemos. Vamos mudar rapidamente o texto, o texto de preenchimento. Então temos que pegá-lo. Você sabe, nós fazemos parecer que é realmente um pouco, Tex. Se é mesmo que seja apenas uma simples Lauren Epsom, assim e talvez seja um pouco demais. Então agora podemos simplesmente pegar o retângulo e inserir novamente uma imagem. Talvez esta imagem de cerâmica desta vez vamos torná-la menor, assim como assim, e lá vamos nós. Nós temos a imagem Bem, nós inserimos na imagem dentro do nosso bloco. gabar-se. Claro, se você quiser novamente, você pode fazer a imagem maior. Você pode fazê-lo gastar em todo o poço, nossa vontade de texto para o recipiente. Eso É realmente talvez fazer isso muito rápido, então eu vou trazê-lo para baixo assim de novo. Adicione 25 assim e eu vou. Teoh, pegue essa imagem de cerâmica e exclua. Eu não vou fazer o retângulo se estender em nosso contêiner do mundo. E talvez vamos torná-lo um pouco maior para algo como 400. Bem, isso pode ser um pouco demais. Vamos fazer 300 e vamos deixar assim. Então, novamente, vamos inserir alguma imagem, talvez a imagem da cidade. Vamos torná-lo maior assim. Agora podemos novamente trazer este texto para baixo em 25 e agora podemos realmente adicionar o bloco. Citar este pedaço de texto aqui, e a citação de sangue é geralmente você sabe, algo importante que está dentro do texto. Se eles estão bem, se o autor quer enfatizar uma coisa, então ele ou ela geralmente usará a citação em bloco para fazer este pedaço de texto se destacar. Então, vamos fazer isso agora mesmo. Deixa-me só dar um zoom. Talvez seja só um pouco menor. Assim como um guia horrível para baixo de novo. Vamos almofada 25 e vamos mudar algumas coisas sobre isso. Primeiro de tudo, vamos fazer com que seja ousado assim. Vamos fazer isso. Vamos alinhá-lo ao centro e torná-lo um pouco menor. Vamos talvez torná-lo um pouco maior para algo como 24 exatamente assim. Vamos talvez adicionar alguma altura de linha para 32 Vamos fazer isso um pouco maior e vamos fazer todo o quadro de texto menor. Quero dizer, mais estreito, porque geralmente essas citações de sangue não são para se espalhar para os sites. Então vamos colocar assim. Ok, então nós criamos a citação de bloco, então as últimas partes do próximo ano seriam apenas... Bem, talvez vamos apenas adicionar um pedaço de texto aqui, e vamos adicionar essas etiquetas. Talvez eu simplesmente mudá-lo rapidamente deste texto de preenchimento para algum imposto de enchimento diferente, assim como e enfraquecer simplesmente, apenas rapidamente emprestar esses comentários, texto assim. Vamos descer e vamos nos basear novamente. Vou movê-lo até que se encaixe com o nosso que temos com nossos guias, e eu vou adicionar 25. E vamos mudar este texto de comentários para alguns impostos ou que foi recortado. Basta digitar algo como fotografia de estilo de vida em viagens, sabe, coisas assim. Ok, então o texto é criado, e a última peça da última peça do quebra-cabeça seria adicionar esses ícones de mídia social aqui em baixo e essas linhas simples para que o usuário possa compartilhar nosso conteúdo. Então vamos realmente fazer isso no próximo vídeo. 83. 30vamos adicionar os ícones de redes sociais: Então eu vou começar com o empréstimo e os ícones das mídias sociais. Talvez da barra lateral. Vou chegar rapidamente a eles. Vou copiá-los. Deixe-me só ampliar e eu vou baseá-los aqui mesmo. E, claro, preciso ter certeza de que estou na camada certa. Então deixe-me apenas obter em uma única camada de post e baseado em apenas assim E claro, eu quero que eles sejam muito, muito maiores. Então, vou ver o 32. 32 deve estar bem. E eu vou agrupá-los porque agora eu quero não só mudar sua cor, mas também adicionar este fundo elíptico bem aqui. O que vou fazer primeiro é criar nos lábios assim. Eu vou colocar, claro, o ícone contra este, este fundo e para isso, os lábios. Quero dizer, eu quero que esta elipse seja para indicar que sempre que alguém está pairando sobre esta elipse, este link e está bem, ele está realmente indicando que ele foi destacado para que possamos apenas girar. É uma cor assim e agora podemos mudar a cor do nosso ícone. Então, já que é um documento incorporado, vou editá-lo. Nós já sabemos o procedimento, assim como, e a imagem fica boa. Recebe uma chamada diferente. Deixe-me fazer a Ellipse um pouco maior. Vamos fazer isso. Vamos dobrar o seu fazer um duplo do tamanho do ícone. Então, se o ícone é terceiro a fazer o Ellipse 64 assim e agora podemos simplesmente mover esses caras para decidir. Agora podemos pegar a Ellipse emprestada. Vamos nos certificar de que tudo está bem alinhado. Pegue a elipse emprestada, coloque-a abaixo do ícone. Essa é uma linha desses caras corretamente. E, claro, esta elipse seria apenas verde simples. E eu quero que este ícone do Facebook seja branco. Agora vou colônia mais uma vez e vamos alinhar este ícone do instagram corretamente e vamos adicionar o documento. Como você pode vê-lo sempre que fechamos o documento incorporado, ele continua voltando para o nosso 1º documento aqui. Então deixe-me voltar ao que estávamos trabalhando e novamente em Colônia. Esse cara, mas embaixo dela eu vim selecionar tudo de novo, adicionou o documento. Ok. E temos os ícones Creed. E, claro, agora podemos simplesmente agrupar todos esses caras primeiro os ícones e seus antecedentes como dizer com esses caras. E agora podemos simplesmente, senhor, distribuí-los corretamente. Então eu vou para a opção de alinhamento e distribuição e distribuí-los. Claro, se você quiser distribuí-los por um número específico, podemos fazer isso. Claro, pode ser, digamos, 16 pontos. Não se esqueça de bater. Certo, agora podemos diminuir o zoom e ver como é. E acho que pode parecer um pouco grande demais, não acha? Talvez muito grande. Então podemos simplesmente pegar todos esses caras agora. E em vez de 64 vamos com algo como talvez 48 talvez até menor do que isso. Talvez uns 36, eu acho que 36 deve estar bem. Vamos lá. Não vamos ser menores que isso. Agora podemos apenas agrupá-los, e agora, desde que eu quero alinhá-los em relação ao meu recipiente de fundo. Preciso do Teoh. Destranque isso. Então primeiro. Claro que preciso encontrá-lo. Este é esse cara bem aqui. Então eu vou pegar esses dois caras alinhados e agora eu posso saber que eu posso apenas olhar este fundo novamente. Então a última coisa a fazer aqui seria colocá-lo onde ele precisa ir. Quero dizer, em termos desligados em termos de alinhamento, apenas, apenas, hum, para cima. E agora é apenas colocá-lo, Vamos apenas adicionar Vamos apenas ter 25 para ele. E agora podemos simplesmente adicionar alguns retângulos simples que serão muito pequenos. Quero que ele seja, talvez, tão baixo quanto um pixel. Mas eu quero que eles sejam apenas um pouco mais largos, por exemplo, 38 ou talvez 42. E eu quero que eles sejam negros ou isso fora deste colarinho muito, muito escuro e ótimo. E eu vou colocá-los colocar bem aqui. Agora podemos simplesmente clonar esse cara aqui, e eu vou transformar esses dois elementos em um grupo. Então agora eu posso simplesmente pegar ambos os retângulos e nos ícones de mídia social e eu posso simplesmente alinhá-los ao centro em relação um ao outro. E, claro, se você quiser que esses retângulos fiquem mais próximos um do outro, você pode selecionar um, assim impresso um pouco à esquerda, talvez um pouco mais. Mas como estes eles ainda são um grupo, eu posso apenas selecionar um. Se eu pudesse vender um, assim e eu pudesse selecionar o grupo, quero dizer os ícones das redes sociais. E novamente, se eu apenas levá-los para o centro, você pode ver que eles estão bem alinhados em relação um ao outro. Mas é claro, agora eu tenho que agrupá-los e alinhá-los em relação ao meu retângulo, exatamente assim. Então, agora, se eu diminuir o zoom e talvez desligar os painéis, você pode ver como ele se parece agora. Claro, a última coisa a fazer aqui será apenas pegar este recipiente coisa, adicionar 50 pixels em sua fazer sua altura. Vamos ter 15 assim, e basicamente temos nosso contêiner principal criado. Então nós adicionamos a essas peças fora do texto. Adicionamos que o post de bloco intitulado Estas peças Off Parágrafos as imagens, citação de sangue e os ciclos de mídia social. Então, a próxima coisa a fazer ah seria deixar-me apenas voltar seria adicionar estes post anterior e próximo gabar item de navegação porque queremos que o com o usuário para leitor para ser capaz ir rapidamente para o post anterior e próximo post para mantê-los em nosso site. Então vamos fazer isso no próximo vídeo. 84. 31Vamos adicionar a navegação pré-: neste vídeo, vamos criar um sistema de navegação para as postagens anteriores e seguintes. Então a primeira coisa que eu vou fazer é pegar a ferramenta de retângulo e criar um retângulo estendendo-se a partir deste fundo e quarto esquerdo do meu recipiente que eu vou fazer suas dimensões. Alguém específico. Eu queria ter, digamos, 300 pixels de largura, e eu queria ter 75 pixels até que eu queria ser bastante, bastante largo. Porque lembre-se que temos que ter uma imagem em uma imagem à esquerda e algum texto à direita. Então nós temos que ter um pouco mais de espaço para trabalhar. Então eu vou mudar o seu fundo ah. Bem, está cheio, Dwight, e eu vou Teoh, derrubá-lo em 25 pixels. Então, a próxima coisa que eu vou fazer é copiar esse cara e colá-lo na frente, e eu vou ter certeza de que ele é realmente um quadrado. Então eu queria ter 25 pixels com e 75 pixels dentro de 75 pixels de altura. Então agora nós temos esta imagem bem este retângulo e um retângulo abaixo dela. Então agora podemos pegar os dois e simplesmente dividi-los. Então ficamos com apenas este quadrado, este retângulo terminar este quadrado. Claro, este quadrado vai ser o nosso poço, imagem um espaço reservado. Então, novamente, eu estou simplesmente indo dedo rapidamente colocar uma imagem. Talvez este cais. Espero que você esteja bem que você não é premiado com essas imagens. Eu realmente queria ter muitos deles, mas, mas, você sabe, eu acho que é inevitável que alguns deles simplesmente se repitam. Então deixe-me apenas rapidamente fazer esta imagem é menor. Então, os pedaços de texto do Onley que vamos precisar serão na verdade os links para o final do post anterior do título do post do bloco em si. Então eu vou pegar o clique têxtil artístico e arrastar e digitar no tipo e post anterior . E, claro, vamos mudar algumas coisas sobre isso. Primeiro de tudo, eu não quero que seja itálico, e eu não quero que seja tão grande talvez vamos com 12 e vamos apenas ter certeza que essas letras Elise são escritas usando todas as maiúsculas assim. E talvez seja ainda menor para dizer 10 assim e então eu vou trazer esse cara, mas talvez não. Talvez eu use o quadro têxtil. Deixe-me fechar este e criar um quadro de texto. Vamos ajustá-lo só um segundo. Vou inserir um texto de preenchimento, e esse cara tem que ser roboto condensado, roboto condensado, negrito. E vamos talvez torná-lo um pouco menor, tipo 18. Vamos alinhá-lo para a esquerda e vamos mudar a altura da linha para algo como 24 talvez braço de até 20. E vamos derrubar esse cara. Claro, se você quiser, você pode ter duas linhas fora do texto aqui, ou podemos até mesmo ir para uma linha de texto, assim como para que você simplesmente simplesmente zoom out rapidamente. Eu acho que a única linha de texto vai realmente olhar um pouco melhor, então agora vamos apenas ter certeza de que temos tudo isso bem. A distância entre a borda é boa, certo, então vamos ver rapidamente como 25 ele vai se parecer se não for demais. Acho que o 25 vai ser um pouco demais. Então vamos com 12 para o movimento do eixo Y e para o movimento do eixo X também. Agora vamos pegar este texto do quadro e vamos movê-lo para o gabar-se anterior assim. E agora vamos movê-lo para baixo, digamos, 12. Assim e vamos ver como é. Claro, poderíamos tentar com as diferentes medidas, diferentes maneiras de posicionar esses caras. Talvez vamos realmente derrubar esse cara um pouco, como tanta coisa que pode ser de novo um pouco demais. Eso Vamos tentar, vamos tentar na verdade menos 12. Mas vamos adicionar algo como algo como 20 e vamos ver agora como é. Acho que isto deve ficar bem. Podemos sempre sugerir, em vez disso, tentar descobrir o que é certo. A gerência é a distância certa entre todos esses caras. Vá em frente e pegue esses dois caras e apenas certifique-se de que esses pedaços de texto estão exatamente no centro deste recipiente bem aqui, porque lembre-se que talvez se tivermos isso um pouco. Bem, o texto é um pouco maior ou um pouco maior. Se nós apenas mudar o texto de preenchimento, algumas coisas podem parecer diferentes, mas se nós temos ambos esses caras exatamente no centro, eles devem se acomodar para o recipiente e ainda permanecer no centro fora do nosso sobre onde irá recipiente. Então agora podemos apenas crescer rampa Esta, uh, esta navegação vai. Bem, caixa. Vamos chamá-lo assim e podemos movê-lo para a direita. Claro que não cloná-lo, mas movê-lo para a direita. Eu acho que isso deve ser bom. Então, para facilitar nosso trabalho, podemos pegar todos esses elementos. E podemos simplesmente usar a barra de ferramentas para inverter tudo horizontalmente. Mas é claro, como podem ver, nós também invertemos esse texto de certa forma. Bem, isso é, você sabe, bem, isso torna o texto ilegível. Mas antes de cuidar do texto, vou pegar essa imagem e vou excluí-la. Vou adicionar um diferente. Então vamos cabeça talvez a imagem do bolo e novamente torná-la significativamente menor. Talvez um pouco para a esquerda assim. E agora se pegarmos esses caras de novo e os virarmos para a esquerda, teremos o texto certo. O imposto vai ser escrito corretamente, certo? Mas ainda há uma coisa que precisamos fazer. Quero dizer, se nós apenas pegamos um amigo têxtil e pegamos este pedaço de texto, nós podemos alinhá-lo à direita e nós podemos apenas pegar este texto de post anterior assim, e nós podemos movê-lo para a direita e também alinhando para a direita, porque agora, quando mudarmos este texto, isso irá mudá-lo de pré-visualizações para o próximo. Notei que o texto está se acomodando à suaâncora direita, âncora direita, por assim dizer. Então não temos que mudar nada agora. Mas é claro que poderíamos talvez mudar este texto de preenchimento para fazer para vinculá-lo a um bloco diferente . A maioria assim. E lá vamos nós. Chegamos à navegação criada, por isso é simplesmente vamos usar os retângulos simples, adicionamos algumas fotos, fotos quadradas e depois adicionamos algum texto. E então nós simplesmente viramos a colônia bola e viramos esta caixa de navegação para a direita e então apenas fizemos alguns truques para torná-lo Luca corretamente. Então, a próxima peça de design que vamos criar são esses gabaritos relacionados, como uma exibição de postagens aqui embaixo. Então vamos fazer isso no próximo vídeo. 85. 32Vamos adicionar a seção de posts relacionados: a seção de postagens relacionadas fora de nossa página. Então, primeiro, deixe-me apenas talvez rapidamente emprestar alguns dos ativos que já temos, alguns vão pegar este rótulo e esta primeira imagem, e então eu vou e então eu vou tentar colá-lo na camada certa, assim e eu vou treiná-lo. Deixe-me só ampliar. Isto deve lutar. E é claro que vou derrubá-lo em 50 pixels. E, claro, nós não queremos que ele diga anúncios que queríamos salvar os gabaritos relacionados, alguns vão mudar isso rapidamente a seguir. E então eu vou pegar esse retângulo e trazê-lo para a direita assim, você já sabe e como fazer isso. Então talvez eu verifique primeiro. Se essa distância entre esses caras é 50 ou 25 deve ser 25 então estamos prontos para ir. Então vamos verificar com o original como é suposto ser. Bem, como você pode ver isso Ah, esta imagem aqui é mais de um quadrado, mais de um retângulo, então é um quadrado, mas é claro, é apenas a minha preferência de design. Apenas a minha escolha de design. Se você quiser , pode ser um poço, um retângulo. Então eu vou remover rapidamente esta imagem apenas assim para que eu possa apenas ajustar este retângulo bem aqui. Então eu estou indo para ir com 270 talvez por 200 apenas assim e eu vou adicionar uma imagem. Vamos ver, talvez esta imagem de Natal, por que não? E vamos torná-lo menor. Tornou a imagem menor. Lembre-se que se você quiser apenas a imagem do ponto central. Segure a tecla de controle assim. Então, agora podemos adicionar ao título do post bloco de texto e a leitura Mais táxi de Não enganado? Sim, exatamente. Esse cara aqui. Então eu entendi que eu vou pegar a ferramenta retângulo, encontrar o ponto direito inferior esquerdo bem aqui e criar um retângulo para 70 por 100. Isto deve ficar bem. Claro que sim. Eu quero mudar a cor do dedo do pé branco e novamente e pegar o banco de texto do quadro. Criar um quadro que vai ser preenchido com algum texto de preenchimento alinhado à esquerda Roboto condensado negrito é totalmente bom. Vamos com duas linhas de texto e vamos mover esse cara para a esquerda e colocá-lo aqui. E agora vamos verificar realmente o que ele faria, como seria com o se ele tivesse 25 pixels, lacunas ao redor dele. Então, primeiro, eu vou fazer a sua vai estabelecer o ponto de origem da transformação da origem da transferência no centro, e eu vou fazê-lo. Eu vou torná-lo menor por 50 pixels, então menos 15 assim, e eu vou empurrá-lo para baixo por 25 também. Lá vamos nós. Então agora podemos pegar o têxtil artístico e digitar ler mais assim. Então vamos mudar de normal muito ousado. E vamos torná-lo menor. Vamos tentar 14 e vamos com esta cor verde assim, e vamos ver como seria se pudéssemos movê-lo por 25 pixels de baixo e da escola certa que realmente começou a transformação de baixo. Então vamos movê-lo para a esquerda por 25 e vamos movê-lo para cima por 25 assim pode ser apenas um pouco grande demais e também poderia talvez torná-lo apenas um pouco menor. Que C 10 pode realmente ser. Pode estar bem. Mas vamos mover esse cara para baixo então e vamos movê-lo para cima. 25 pode ser um pouco demais. Eu acho que isso. Acho que é demais. Então vamos movê-lo para baixo. Vamos subtrair dois, digamos 10. Bem, é acrescenta, feito assim Isso deve ser bom. Vamos deixar isso. Vamos deixar assim. Agora eu vou pegar, é claro, todo esse fragmento aqui. E talvez vamos rapidamente ligar a grelha assim. Agora podemos mover esse cara para a direita uma vez e então pressionar o controle J para movê-lo para a direita ou cloná-lo para a direita mais uma vez. Agora podemos mudar essa imagem assim. Talvez o vamos ver, talvez a imagem do gato. Vamos torná-lo menor. Vamos mudar este texto de preenchimento assim, e vamos mudar esta imagem vai durar do Natal para outra coisa, é claro. Tenho certeza de seleção interna. Sim, vamos com o sanduíche assim e lá vamos nós. Claro, se você quiser, você pode talvez fazer este recipiente um pouco maior. Então, na verdade, este tamanho esta lacuna aqui é bem também é 25. Então temos a mesma lacuna aqui e a mesma lacuna bem aqui. Então talvez vamos realmente fazer isso. E vamos fazer isso em um lote. Então eu vou trazer todos esses caras para cima, e então apenas e depois apenas anúncio aqui. 52 sua altura, 25 não 50. Isso seria um pouco demais. 25. Assim como assim. Então é assim que podemos criar este tipo de uma seção que você relacionar gabou-se. Deixe-me desligar a rede. Desligue os painéis. Então lá vamos nós. Isto é o que parece agora. Então temos a imagem em destaque. Chegamos à mensagem do bloco. Temos essa navegação anterior no próximo post. Temos os postos relacionados. E a última coisa que ainda precisamos fazer é esta seção de comentários aqui. Então vamos realmente verificar como criar esta seção no próximo vídeo 86. 33Vamos começar a criar a seção de comentários: Então vamos começar a criar a seção comum, tornando este trabalho de arte um pouco maior, porque eu acho que em breve nós vamos ficar sem espaço bem aqui. Então eu vou para a arte abortar, agarrar a arte das tábuas para e trazer este cara para baixo bastante significativamente para algum lugar aqui . Então podemos pegar nossa comida ou me deixar encontrá-la rapidamente em algum lugar aqui. Este é este tipo aqui e nós podemos apenas deixar-me agarrá-lo correctamente e enfraquecê-lo. Trazê-lo para baixo para ouvir, assim mesmo. Então agora vamos voltar para o jogador certo e pegar emprestado este rótulo. Este relacionado possui rótulos. Vou copiar bases na frente, trazê-lo para baixo e adicionar novamente ao padrão 50 pixels como o próximo. O que eu vou fazer é pegar a ferramenta de retângulo e criar um contêiner para nossos comentários. Mas eu vou voltar a visibilidade fora da grade e apenas criar um contêiner que vai ser bastante grande, bastante dito, e eu vou movê-lo para baixo por 25 assim. Então, se você der uma olhada no original. A primeira coisa que precisamos fazer é, é claro, claro, mudar o rótulo aqui e, em seguida, adicionar na imagem o avatar e, em seguida, algum texto. A data O nome da pessoa que comentou o botão de resposta aqui e depois enfraquecer só vai repetir o processo com esta, uh, bem, bem, com esta resposta e aqui em baixo. Então, primeiro eu vou mudar esse rótulo relacionado ostenta para comentários. Depois o guia da Brenda para a esquerda. Isto vai ficar bem. Então agora vamos criar seu primeiro avatar. Isto é um mendigo. Será que este retângulo este quadrado e esta pessoa aqui? Então, é claro, vamos começar pegando a loja da Ellipse assim, e vamos torná-la rosa. Então, a fim de criar o corpo fora do nosso avatar, vamos pegar essa ferramenta de retângulo arredondado. Este é esse cara bem aqui. E vamos criar rapidamente um retângulo arredondado que vai ser algo parecido com isso. Eu vou dar o pé fora. Clique na opção de raio único aqui, e eu vou inserir zero para o passeio inferior esquerdo e inferior. Certo. Valores bem aqui. Zero para este cara para assim, como você pode ver, nós apenas rapidamente criado transformado este em torno dele retângulo de como 1/2 retângulo arredondado . E tudo o que temos que fazer agora é que podemos ter que apenas brincar um pouco, também, com os outros valores, para fazer com que pareça exatamente do jeito que queremos. Então, talvez vamos trazer um pouco para cima. E, claro, ainda podemos fazer esse raio maior se quisermos. Vamos tentar 35. É McNish, Allders, até 35 lagos. Então eu acho que isso parece... Eu acho que isso parece certo. Claro que podemos sempre. Podemos sempre agrupar estes tipos, torná-los menores, torná-los maiores. Podemos fazer com esses caras, o que quiser e deixe-me dar uma olhada rapidamente no original. É colocado contra este quadrado escuro. Alguns vão embrulhar o quadrado escuro, e talvez eu só vou usar a opção inserida atrás de seleção para criar um quadrado assim e fazer um preto e torná-lo um pouco menor, algo assim E vamos saber, uma linha. Todos esses elementos juntos, assim. Então agora vamos apenas rapidamente talvez duplicar esse cara para que não tenhamos que fazer isso de novo em apenas um segundo. E vamos dar a esses caras cores apropriadas. Vamos deixá-los escuros. E vamos fazer este fundo rosa como salsa. E agora temos ambos os avatares criados. Então, no próximo vídeo, vamos realmente começar a criar essas peças fora do texto e esses pedaços de texto. O Aziz. Bem, então nossos comentários que parecem ser realmente vêm, então fique atento. 87. 34Vamos criar os textos para os comentários: Se você der uma olhada no original, você pode notar que o preenchimento aqui dentro esta seção comum é muito, muito maior do que as margens que normalmente criamos. Eu acho que é, hum, mais de 50 pixels, e isso é feito para, você sabe, não tornar tudo simétrico. Mas para adicionar alguma dinâmica ao design, você não tem que bem, na seção comum como esta, se você está criando, você sabe, se é um costume feito à mão, fez um você pode ficar um pouco mais louco do que o vento com todos os outros elementos. Então, neste caso, vamos dar uma olhada em como nossos comentários serão se eles tiverem mais espaço ao redor deles. Então a primeira coisa que eu vou fazer que apenas zoom para trás é que eu vou usar este avatar como meu tipo de como uma âncora para outras peças de design que eu vou criar em apenas um segundo. Mas acho que vou torná-lo um pouco menor. Vamos verificar 48 é claro, vamos nos certificar de que ligamos tudo o que este é um grupo e que ligamos seu tamanho assim. Então vamos com 48. Eu acho que 48 vai ficar bem e eu vou colocá-lo aqui no canto superior esquerdo, exatamente assim. E agora vou movê-lo para a direita por 100 pistas. Cheque 100 Eu vou movê-lo para baixo por 100 também. Assim como. Então agora eu vou simplesmente criar bem tributado vai texto fora do comentário. Então eu vou pegar o têxtil artístico e criar uma data. Vai ser costela Otto. Acho que costumamos usar metal. Vamos com 14. Vamos entrar na data e talvez vamos torná-la ainda menor. 10 deve estar bem. Você sabe o que? Talvez eu tranque este fundo bem aqui, para que não estraguemos tudo acidentalmente. Então agora nós podemos mover este outubro, Digamos por feito, e talvez apenas um pouco para baixo, como então vamos apenas dar uma olhada rápida no original, ele parece na versão original. É algo assim. Acho que podemos. Podemos deixá-lo assim, para que possamos apenas saber, imprimir esse cara para baixo e vamos derrubá-lo por 10. E vamos mudar essa data para um nome e esse cara ficará verde em todas as maiúsculas e vamos torná-la um pouco maior. E agora vamos adicionar o próximo quadro como esse, e o que podemos fazer é que podemos Grã-Bretanha este texto de todo o caminho para a direita, como costumamos fazer, e podemos torná-lo menor. Então vamos rastrear 100 assim, e vamos preenchê-lo com alguns com algum texto de preenchimento que é que vai ser Roboto regular 16. Claro, como você pode ver as vezes você só tem que clicar mais uma vez para realmente selecionar o imposto porque se encaixam em designers às vezes simplesmente não quer cooperar quando se trata de mudar no texto para você bem, aparentemente tem que ter o texto específico selecionado. Você pode apenas manipular o quadro de texto, que é um pouco de vergonha, então talvez seja apenas um pouco acima. Deixe-me apenas dar uma olhada rápida e vamos mover este grupo para algum lugar aqui porque ainda precisamos digitar as palavras rippled word reply. Vamos movê-lo para baixo por Vamos ver 15 e deixa fora clique nesta opção Caps antigo. Vamos fazer isso, mas menor para 10. E vamos digitar a resposta. E eu acho que podemos querer movê-lo para a direita porque eu acho que seria mais fácil para as pessoas clicarem se ele fosse bem colocado à direita. Então é só uma pequena modificação. Então vamos supor que alguém realmente respondeu e vamos colocar esse menino mau para baixo. Vamos ver 15 e podemos simplesmente pegar este pedaço de texto, este pedaço de texto, este pedaço de texto e este pedaço de texto cloná-lo para baixo e movê-lo para a direita. Eu acredito que foram 10 e não o faça. E lá vamos nós. Talvez mudemos o nome dessa pessoa também, também, John. E, claro, vamos fazer esta moldura do Texas menor, mesmo uma menor como essa. E vamos trazer este texto respondido para a esquerda, assim como assim. Então, a próxima coisa que faríamos é apenas criar esse formulário para os comentários, esta seção de resposta de licença aqui em baixo, Então vamos fazer isso no próximo vídeo 88. 35Vamos criar os formulários de post: então antes de criarmos o formulário para os Comuns. Então vamos resolver rapidamente um problema que temos aqui. Só não mudei o tamanho deste avatar. Esse cara é menor é 48 pixels com a largura, mas esse cara não é então é rápido consertar este, então é tipo 48. E, claro, temos que trazer esses caras para a direita e tornar esse quadro inteiro menor em 10 pixels. Bem, vamos com menos 10. Assim como assim. Então agora eu estou indo apenas para criar um os comentários que o formulário para os Comuns. Mas deixe-me apenas rapidamente fazer esta coisa este recipiente apenas um pouco mais, apenas um pouco maior. Então eu vou começar com a adição do texto que vai dizer, Deixe uma resposta. Alguns vão pegar a ferramenta de texto artístico, começar em algum lugar aqui e digitar o deixar uma resposta, ou talvez deixar um comentário e vamos torná-lo rosa. Vamos fazer isso. Vamos torná-lo ousado, não itálico, e vamos torná-lo menor. Talvez não tão pequeno. Isto deve ficar bem. Vamos falar disso e é claro que podemos. Poderíamos tentar mover esse cara para a direita para combiná-lo com o texto de resposta aqui e agora poderíamos movê-lo para baixo por 50 como então movido esse cara para a esquerda e movê-lo para a direita por 50 como alguns. Então, agora, se dermos uma olhada no original, podemos ver que temos esta caixa de comentários bem aqui. Este é o lugar onde as pessoas digitariam o comentário real. Temos o nome para as pessoas, para a pessoa comentando seu e-mail e, claro, o fundo aqui embaixo. Poderíamos indicar dois estados quando as pessoas estão pairando sobre o botão. Então é um estado normal. É estado ocioso, e é claro, é Ah, estados pairando. Então nós poderíamos criar um botão verde e, em seguida, criar este fundo rosa para indicar e o que este fundo, como seu plano de fundo deve parecer quando as pessoas estão pairando sobre ele. Mas vamos começar com a arena das caixas, os elementos fora da nossa forma. Então, com a ferramenta de retângulo, eu vou criar um retângulo. Eu vou esticá-lo através deste recipiente e então eu vou simplesmente subtrair 50 exatamente assim, e eu vou movê-lo para baixo. Vamos ver 50. Eu acho que isso seria bom e eu vou torná-lo branco. Ou talvez Grace. Podemos realmente vê-lo. E então eu vou pegar a ferramenta de imposto artístico. Basta ampliar e eu vou digitar um comentário. E eu queria ser um regular, talvez 10. Vamos dar este grande carro, eu vou trazê-lo para baixo e então eu vou trazê-lo para cima por, digamos, 10 pixels como esse. Podemos simplesmente deixar-me criar este tipo, tua cama para baixo. E agora podemos pegar esses dois elementos, movê-los para baixo e depois derrubá-los. Vamos verificar 25. Ter 25 deve estar bem. E vamos mudar o comentário para Eu acredito que era o nome e vamos rezar para esse cara. Vamos fazer 50. Bixel está alto e vamos nos espalhar para a esquerda. Agora vamos trazer esse cara para a direita. Claro, estou mantendo pressionada a tecla Control para cloná-lo. E vamos mudar o nome para e-mail, É claro, Precisamos de algum espaço entre esses dois retângulos, então eu vou criar rapidamente um retângulo que vai ser 25 pixels de largura. Vamos mudar sua cor. E não podíamos unir rapidamente esses elementos. cara da Brenda levantou-se. Vamos colocá-lo na frente. Vamos nos certificar de que eles estão alinhados corretamente ao dissidente, e nós podemos agora, usando a barra de ferramentas. Podemos subtrair assim, a menos que traga esse cara para a direita. Isto vai ficar bem. Então, a única coisa a aderir é, como eu disse, este post comentário post dedo comum Bem, botão. Então, vamos voltar. E pelo que me lembro, isto foi de 50 pixels. Sim, era 50 pixels tão rapidamente apenas agarrou a ferramenta de retângulo e criar retângulo que vai ter 50 pixels de altura, exatamente assim. E eu vou movê-lo para baixo por 25. Então eu quero que este seja meu botão principal, aquele que as pessoas vêem quando eles estão prestes a postar um comentário, alguns vão torná-lo verde assim. E eu vou pegar o têxtil artístico novamente e digitar o post comentário. Vou mudá-lo de normal muito ousado, e vou torná-lo menor, talvez até menor, e vou torná-lo branco. Pão para cima. Vamos descer para 18 e eu vou alinhá-los corretamente. E agora eu vou pegar esses dois elementos e trazê-los para baixo e depois trazê-los para baixo novamente por 25. Agora posso transformar esse cara em um botão vermelho. Então eu posso apenas indicar para aquele desenvolvedor que quando alguém está pairando sobre este botão eu queria virar para ficar vermelho. E se você não quiser, se você não precisa dessa grande lacuna, você pode simplesmente torná-la menor. Então talvez apenas vamos apenas em vez de 25 vamos apenas ir com 10 apenas assim e vamos diminuir o zoom . Então agora podemos trazer esse cara para cima assim e adicionar nossos 50 pixels padrão à sua altura assim. Então, realmente, a última coisa a fazer seria apenas trazer o rodapé de volta para cima, alguns indo para selecioná-lo, marcá-lo para cima e, em seguida, adicionar, Vamos ver, 25 ou 15 talvez 50. Não vamos precisar deste quadro de arte para ser tão grande assim. E, claro, vamos desligar o Big Red. Então lá vamos nós. Criamos uma única página de postagens de bloco, então adicionamos ao destaque um muito em vez do controle deslizante. E então nós adicionamos que bem, o conteúdo principal para nossos arcos de bloco, que era o texto. Adicionamos algumas imagens também. Em seguida, adicionamos aos seus ícones de mídia social a navegação de postagem anterior e seguinte. Eles são seção de postagem relacionada e, em seguida, na seção Commons. E, claro, mantemos algumas partes fora da nossa imagem principal. Bem, onde nosso projeto principal, que era o cabeçalho, o Cyber e o Rodapé. Então eu espero que você goste deste design e que você vai compartilhar seus próprios projetos. Talvez inspirado por este design com a nossa comunidade e definitivamente se eles bem, eu encorajo você a criar seus próprios projetos quando você vir acima com eles não necessariamente inspirado por este design. Mas talvez você não esteja usando nada para projetar uma arma vai site para um cliente. Isso seria ótimo se você compartilhasse com a gente, então eu bem, até a próxima vez, tenha um bom design