Photoshop para empreendedores: modelo de web design

1. Photoshop para empreendedores: modelo de design na web: Ei, pessoal, meu nome é Jeremy Deegan, e hoje vamos construir uma simulação de web design. Basicamente, este é um esboço ou um modelo simples que enviaremos para um designer gráfico ou desenvolvedor Web para criar nosso site para nós, como um empreendedor , não deveríamos gastar muito tempo em coisas que deveríamos estar fazendo. Então, se você não tem habilidades especiais e design gráfico ou desenvolvimento Web, você provavelmente quer deixar alguém que tem essas habilidades lidar com isso para você. Agora queremos criar uma simulação básica e Photoshopped para mostrar a essas pessoas para que quando eles começam a desenvolver o site, eles têm uma compreensão básica do que você está tentando ir para. E quanto mais informações você puder fornecer a eles, mais fácil será. Então vamos em frente e imaginar por um segundo que você tem um restaurante de sorvete, e eu sou um cliente que vem até o balcão, e eu digo a você, eu gostaria de um sorvete sundae. Depois de ter muitos anos de experiência no negócio de sorvetes, você sabe que todos gostam de seus sundaes de sorvete de forma diferente. Então você me perguntou, o que você quer? Baunilha ou chocolate? E eu digo: “ Bem, Bem, baunilha, é claro. E você diz que quer bananas? E eu digo, claro que há bananas em um sundae de sorvete e você diz, OK, bem, que tal nozes? Gostaria de algumas nozes no topo do sundae? E eu digo: Não, eu não quero nozes. Sou alérgico a nozes. Ou apenas fazendo algumas perguntas simples, você descobre imediatamente o que essa pessoa quer e não quer. E quanto mais informações você fornecer ao artista de design gráfico ou ao desenvolvedor do site ,mais fácil será para eles acertar na 1ª ou 3ª vez, , em vez de ter que ir e voltar constantemente e tentar Adivinhe o que você está procurando. Então, de volta ao nosso exemplo, se eu for ao seu restaurante de sorvete e eu for ao balcão e disser: “ Ei, Ei, eu gostaria de um sorvete de sundae, baunilha com bananas e chicote fresco e uma cereja no topo. Talvez xarope de chocolate, mas nada de nozes, porque sou alérgico a eles. Bem, você não precisava me fazer perguntas e sabe exatamente o que eu quero. Você pode voltar e começar a fazer isso imediatamente, e é isso que estamos fazendo aqui. Vamos fazer um design muito básico de um site e apenas colocar algumas informações cruas para que possamos dar isso aos artistas de design gráfico ou ao desenvolvedor do site e deixá-los saber o que estamos procurando. Então a primeira coisa que vamos fazer neste curso é escrever algumas idéias do que queremos em nosso site. Então vamos fazer um esboço áspero à mão apenas para obter alguns layouts básicos. E geralmente é mais fácil fazer isso à mão porque você pode rapidamente lápis ou colorir e ou escrever em um guardanapo. O que você acha que isso deve parecer, e se não parecer bom, você pode jogá-lo fora e começar de novo. Então, uma vez que você tenha uma boa idéia disso, vamos entrar na loja de fotos e vamos em frente e criar alguns elementos muito básicos e agrupá-los juntos para que possamos movê-los e ver como ele iria se alinhar a um design do site. Então vamos em frente e começar neste curso 2. Como pesquisar sites para ideias de design: Sempre que eu começo a fazer qualquer trabalho de design, a primeira coisa que eu gosto de fazer é pesquisar, e isso me permite ir lá fora e ver o que está funcionando para as pessoas e o que não está funcionando para as pessoas e ajudar a obter os sucos criativos fluindo de como eu pode dizer, quer colocar para fora algumas dessas informações no meu próprio Web design simular. Então eu trouxe o site inteligente e passivo de renda, e este é de propriedade de Pat Flynn, e ele gosta de ser o rosto por trás desta empresa. Então você muitas vezes vê um monte de fotos e imagens dele no site. E se você for a este site, a primeira coisa que você vai ver é uma imagem muito gigante dele, e isso só ajuda a reforçar sua marca pessoal. Mas eu fui em frente e eu rolou para baixo, e nós vamos olhar para a metade inferior de sua visão para que nós possamos tipo de separar o que ele fez aqui e dar-lhe algumas idéias de algumas coisas diferentes que você pode fazer isso no muito top. A primeira coisa que você vai ver é uma barra de menu e eu vou apenas fazer um destaque básico aqui. Isto vai ser um pouco grosseiro, mas vai ajudar-te a dar-te uma ideia do que se está a passar. Então nós temos esta barra de menu no topo que eu realcei em um vermelho, e essa barra de menu é dividida em três seções. A primeira coisa que temos é o logotipo, e então temos os links para o site, o que é muito comum em todos os sites. Desculpe-me, e então a próxima coisa que você vai ver são os relatórios de renda dele. Isso é algo que vem fazendo há muito tempo, e isso só mostra quanto dinheiro ele ganhou ao longo dos anos. Mas basicamente, esta barra de menu fica sempre que rolamos para cima e para baixo no site. Então, uma coisa é, você está sempre vendo esse logotipo, e isso está ajudando a reforçar a marca. E então nós sempre temos esses links para que você possa ir e clicar em qualquer um desses links. Não importa onde você esteja no site, você sempre pode se afastar desta página para outra página. Agora, a próxima seção que você vai notar como nós temos este grande fundo desvanecendo branco para azul acontecendo. E tudo isso parece um tipo de grande seção por causa do fundo comum que está compartilhando. Mesmo que tenhamos coisas diferentes acontecendo aqui agora, tudo isso é conteúdo de sua visão. Então nós temos algum post no topo do recurso afiliado é que ele tem e, em seguida, seus ímãs magros , e vamos em frente e dar uma olhada em todos estes agora. Mas no topo desta imagem de fundo, ela é dividida em duas metades. Então nós temos essa grande metade no topo, e então isso é dividido em mais duas metades aqui. Então, essas são suas postagens, e elas podem ser bloqueadas, YouTube, postagens YouTube, ou podcasts que ele realmente colocou para fora. E ele tem três imagens bonitas, muito uniformes aqui, dadas com um olhar muito bonito e legível e muito fácil de ver com um pouco de estofamento à esquerda. E agora, você verá esse preenchimento todo o lado da página porque você nunca quer colocar nada completamente em cima porque ele pode ser cortado agora. Ele colocou o dele em relatórios de renda todo o caminho para que pudesse ser cortado fora. Talvez ele não esteja tão preocupado com isso. E hoje, com designs de sites responsivos, não é um fator tão grande. Mas é bom ter um pouco de estofamento à esquerda e à direita. Então temos estes três post e layout agradável e até mesmo acontecendo aqui e, em seguida, abaixo que temos este recurso confiável é seção. Então isso é dividido novamente em mais três imagens. Temos este lado esquerdo neste lado direito, e então temos esses três botões que você pode clicar. Agora você vai notar que ele não colocou os três botões em linha com os três no topo. Então essa foi uma jogada muito inteligente, porque o que faz é ajudar. Ajuda a quebrar a página um pouco. Então, se ele tivesse enfiado os três botões abaixo destes três pães, pareceria um pouco sem graça e aborrecido. Então ele tem esses três posts, e então ele compensa esses três com um título e subtítulo, e você realmente começa a ler a página que bem, dessa forma você vê as três postagens e então você lê este título, e então você pode olhar para esses três botões que ele quer que você clique agora, abaixo disso, temos a seção de ímãs de chumbo, e isso é dividido em uma seção superior e inferior. E, na verdade, se você olhar para esta página da Web ao vivo, esta é uma imagem que rola para dentro e para fora. Então isso muda. Você verá diferentes ímãs de chumbo aparecendo dependendo de qual ele está mostrando a você. Então, nesta parte superior, temos a imagem do livro que ele está dando. E então temos outro título legenda com um botão para clicar. Então ele está quebrado que Nice, fácil de ler e permite que você veja esse botão agradável e ousado para que você possa clicar sobre isso . Então temos a seção inferior, que são os quatro produtos que ele está tentando fazer você se inscrever nos quatro ímãs de chumbo , e, e, hum, agora ele poderia usar quatro por algumas razões diferentes. Um que é porque esse é o número de produtos que ele tem. Mas também colocar quatro em vez de três desta vez também ajuda a quebrar a página um pouco mais . Então você está começando a ver como esta página é definida e você apenas tipo de ler para baixo a página desta maneira, e isso é tipo do que você quer fazer quando você está projetando seu site. Você quer tornar mais fácil para as pessoas lerem este tipo de livro onde seus olhos apenas lentamente seguem ao longo da página e não está pulando por todo o lado. Então agora temos quatro imagens e ajuda a dividi-las um pouco mais. E como eu disse, cada um desses, um, ele entra e sai da imagem acima bem aqui, agora abaixo. Isso parece uma seção diferente porque não está usando o mesmo fundo branco e azul desvanecimento . E isso é porque agora ele está falando sobre sua comunidade, o que é um pouco diferente. Não é produtos ou conteúdo que ele está vendendo. Ele está tentando construir uma comunidade, e eu acredito que este é um grupo do Facebook que você uniu. E no lado esquerdo vemos uma foto dele, por isso reforça essa marca e sua confiabilidade. E então, no lado direito, vemos apenas um título muito básico e um botão com muito espaço em branco, por isso é muito fácil de ver e clicar. Se isso é algo que você quer fazer parte, então abaixo disso, temos um botão de menu inferior. Ah, isso é apenas para adicionar mais alguns botões na parte inferior para que quando você chegar ao final da página, você pode clicar em um desses links para continuar com a página. Se eles não estivessem aqui, você pode ler tudo isso. Seus olhos seguiram a página. Mas então você pode simplesmente deixar a página ou não clicar em qualquer uma dessas coisas porque não era atraente para você por ter esses botões de compra na parte inferior aqui. Quando seus olhos descerem a página, você pode dizer, OK, o que eu faço agora? Posso clicar no blawg dele. Posso aprender mais sobre ele ou há um começo aqui, mas talvez eu queira clicar nisso e ver onde isso me leva. Então muito inteligente para colocar botões na parte inferior da sua página para que quando as pessoas chegar ao final de qualquer um de seu conteúdo, eles podem continuar com o seu site e tentar não sair de sua vista. Em seguida, na parte inferior, temos nossas informações básicas de rodapé. Então você vai ver no lado esquerdo termos de serviço e diferentes informações que você pode descobrir sobre o site no blog da empresa. E, no lado direito, você verá alguns ícones de mídia social. Então você pode querer ir clicar em você sabe, aquela página do Twitter, hum, hum, Twitter e ir segui-lo até lá. Então esta é uma maneira muito básica de entrar e ver como uma página é definida. E como eu disse, isso é muito bruto. Quero dizer, você sabe, eu só estava meio que destacando rápido aqui, mas eu posso facilmente ver como ele colocou para fora este site, como ele tem esta boa uniformidade indo para ele e apenas fornece uma maneira fácil para o para ver essas informações e lê-las. E também lhe dá uma idéia de algumas coisas que você pode querer fazer dentro de seu próprio site. Quando você começou a criar seu próprio Web design, simular 3. Como escrever ideias para o seu design para seu site: a primeira coisa que vamos querer fazer antes de começarmos a simular o nosso site é vamos querer tomar algumas notas sobre o que realmente queremos nesse site como links e layouts faras e a forma como ele se parece e assim por diante. Agora você pode fazer isso com uma caneta e papel. Você pode fazê-lo com um documento do Word ou sem documento do pad. Mas basicamente tudo o que vamos fazer é escrever algumas notas do que achamos que queremos ter neste site. Agora, já que este é um curso de loja de fotos, eu vou apenas ir em frente e fazer isso dentro de uma loja de fotos com um tablet gráfico. E este é um comprimido de bambu que eu tenho. E basicamente é apenas um tablet com uma caneta onde quando eu movo a caneta ao redor da superfície do tablet, ele move o cursor ao redor, e isso é ótimo para mim fazer todos os tipos de coisas dentro de uma loja de fotos. Mas aqui eu posso usar isso para fazer algumas anotações, colocá-lo na camada, esconder a camada e depois, se eu realmente quiser lembrar essa informação. Eu posso muito facilmente, hum agora. Então, se você está acompanhando, você tem um tablet. Você pode fazer assim. Caso contrário, basta seguir com um pedaço de papel e uma caneta. E este é um processo muito simples. Isso não vai demorar muito, mas eu só quero te mostrar como fazer isso. Então vá em frente e certifique-se de que você tenha seu pincel selecionado. Suba aqui e escolha um pincel. Eu fui com a rodada dura em um tamanho de pixel pequeno, então parece que caligrafia contra um monte de bagunça sangrenta acontecendo aqui. E certifique-se de que você é uma passividade está definida como 100% nos fluxos para 100%. E basicamente, eu posso desenhar aqui. E onde quer que eu desenhe, tenho muito mais controle do que um rato. E quanto mais pressiono, mais escuro fica na luz ou reprime o isqueiro fica e assim por diante. Então vou desfazer isso. E nós só queremos responder algumas perguntas básicas que você encontraria dentro de um site. E você apenas pensa em, um, qualquer site que você já viu antes, ou até mesmo o exemplo que vimos anteriormente. E você pensa sobre o que você quer ter nisso. Então, por exemplo, no topo, geralmente temos uma barra de menu, e precisamos ter alguns links. Então, que tipo de links vamos ter naquela barra de menu? Bem, vamos ter Ah, casa, casa, Homelink. Talvez eu seja um blogueiro. E então eu quero ter um pouco sobre mim página, porque isso é sobre meu, hum, site que eu blogei e monetizar. Talvez tenhamos ou do blog. Temos o sangue de que falamos. Talvez eu seja um podcast ou dois. Então eu quero ter a informação do podcast, e então eu quero ter talvez uma seção de contato onde as pessoas podem me contatar e me fazer perguntas. Agora, eu também vou ter alguns links de mídia social. Então, Então, coloque links de mídia social e pense no quê? Em que plataformas de mídia social estou. Então eu tenho um canal no YouTube. Tenho um canal no Facebook. Eu tenho Twitter eu tenho ligado e, ah, ah, vamos apenas dizer que você sabe, o que é outro Google mais OK, então vamos apenas dizer. OK, então agora sabemos que tipo de links queremos ter aqui. E depois tentamos pensar sobre talvez o quê? O que queremos ter nesta página inicial? Como queremos parecer? Então eu sei que eu quero Ah, eu quero ser a marca por trás desta página inicial e por trás deste site. Então eu quero dizer, um, um, uma foto de perfil minha no topo para que as pessoas possam me ver. E o que mais vamos ter aqui? Eu quero mostrar minhas postagens blawg mais recentes porque eu blogei muito, e eu faço podcast. Hum, então eu quero ter certeza que eu tenho blawg e podcasts recentes, hum, postar lá para que as pessoas possam ver isso na página inicial. Talvez eu tenha um daqueles ímãs de chumbo onde dou um livro grátis e quero ter essa informação. Hum, então eu quero ter certeza que eu tenho meu ímã de chumbo lá dentro. Talvez eu faça anúncios do Google anúncios no meu site, e eu quero ter um anúncio na primeira página. Só para que eu possa pegar algumas pessoas de vez em quando e clique no anúncio e gerar um pouco de receita lateral para mim, também. Então eu vou colocar um anúncio do Google nessa página, e então você pode passar e apenas pensar sobre o que você realmente gostaria de ter nesta página e nesta. Como eu disse, isso pode ficar mais em profundidade. Você pode fazer deste um grande documento e você pode realmente dizer Ok, quando as pessoas clicam na página de bloqueio, ele leva para esta página e você pode nomeá-lo e dizer, ok, eu quero ter, hum, Você conhece esse tipo de informação no blog ou esse tipo de layout? Você pode fazer esses diferentes simulações de Web design, mas normalmente a primeira coisa que você quer fazer depois de ter feito alguma pesquisa e você olhou ao redor em diferentes sites, é para ter uma idéia do que você quer em sua página, e a melhor maneira de fazer isso é escrever isso. E como eu disse, você pode fazer isso em uma folha de papel de forma muito simples, ou se você preferir um documento de palavra, você pode fazê-lo lá. Mas comece a escrever informações sobre o que você quer ver naquele site. Então, à medida que começamos a projetar, você não precisa realmente pensar sobre isso. Você já tem essa informação pronta para ir. 4. Como Formatar seu documento no Photoshop: agora que escrevemos algumas ideias que queremos em nosso site, precisamos falar sobre como vamos configurar nosso arquivo Photoshopped para que possamos pelo menos obter o básico de nossa simulação de design para nosso designer gráfico ou desenvolvedor Web. Agora, todos os sites vêm em diferentes dimensões, e com telefones e tablets e diferentes tamanhos de monitor, é difícil escolher o tamanho perfeito para um site. E isso é melhor deixar para o designer gráfico ou para o desenvolvedor Web enquanto você começa a trabalhar no site, porque há muitas variáveis que entram em jogo na escolha perfeita das dimensões perfeitas . Então vamos em frente e falar sobre dimensões bem rápido. Eu vou pegar meu pincel aqui, e eu só vou desenhar um monitor básico, e este é como um novo monitor que eu uso. E este é um formato bastante padrão, e a resolução do meu monitor é 1920 por 10 80. Então isso é o que eu posso ver na tela agora. Ah, muitas pessoas não estão usando alta definição e monitores maiores. Muitas pessoas ainda têm monitores mais antigos que estão usando, e esses monitores mais antigos são comumente encontrados em uma resolução de 10 24 por 7 68. Então sabemos que se pelo menos fizermos nosso site com essas especificações, isso funcionará muito melhor para nós. Pelo menos as pessoas que usam motores odores podem ver nossas imagens. Se adiarmos as coisas para aqui no 1920 por volta de 10 84 nos conhecemos, então alguém em um monitor mais velho e mais velho pode não ver, ou pode ser cortado. Ou talvez tenham de redimensionar ou monitorizar. E não vai parecer certo. Portanto, normalmente é melhor se você realmente construir para uma versão menor. Então, pelo menos todos podem ver isso agora, mais tarde, Se o seu desenvolvedor da Web disser que você sabe, vamos apenas ir em frente, fazê-lo para o tamanho maior do que, em seguida, ir com o que eles estão dizendo e conversar com eles. Mas para o bem deste curso, vamos usar um tamanho menor para que saibamos que todos podem pelo menos ver essa informação. Então vamos construí-lo para este tamanho, e então você sabe que teremos nossa barra de menus e nossas informações e tudo o que escrevemos aqui. Agora, é claro, quais sites não são 768? Porque eles realmente prosseguem para ir mais do que isso, onde você realmente rola para baixo. Esta é apenas a imagem visível, então podemos sempre adicionar a isso mais tarde. E então você teria uma barra de rolagem e você caminhava para cima e para baixo pelo site para ver isso todo o resto desta informação aqui em baixo. Agora, isso também funciona muito bem, esses números, porque seus, hum seus poderes de dois ou divisíveis por dois. Então podemos dividi-los em pedaços que funcionam muito bem para nós. Então eles todos esses números vão realmente para ambas essas dimensões muito facilmente, então torna muito fácil subdividir as informações. Então vamos em frente e dar uma olhada agora, bem rápido em algumas das coisas que queremos fazer no Photoshopped. Vou desenhar um círculo rápido só para dar um exemplo de uma coisa que queremos estar cientes. Então deixe-me apenas colocá-lo bem ali e preencha bem rápido para que possamos ver isso. Ok, agora, a primeira coisa que queremos falar é sobre imagem, tamanho e tamanho da tela. Agora, se olharmos para o tamanho da imagem e eu for para pixels, estamos em uma resolução de 1920 por 10 80. Então, se eu olhasse para esta tela cheia, iria cobrir meu monitor completamente. Agora, se mudarmos isso para um tamanho de dimensão menor e estamos trabalhando com o tamanho da imagem aqui , o que isso realmente vai fazer é escalar a imagem e você pode ver que ela comprime tudo e faz tudo esmagar. Então, à medida que começamos a trabalhar, isso não é algo que queremos fazer. Em vez disso, queremos alterar o tamanho da tela. Então, se eu for para o tamanho da tela e eu mudar para pixels, já que é nisso que estamos trabalhando. E eu realmente mudei o tamanho da tela, a mesma quantidade que você vê, o que ele vai fazer é cortar a imagem, mas não vai dimensioná-la para baixo e torná-la espremida. Então, à medida que começamos a trabalhar, se você precisar de mais espaço, você vai querer alterar o tamanho da tela, não o tamanho da imagem, porque não queremos dimensionar isso. Então, em nosso exemplo, podemos fazer este 10 24 e normalmente dizer que seria 7 68 Mas vamos apenas dizer que queremos um pouco mais de espaço porque sabemos que este vai ser um longo site de documentos. Então ela colocou 2000 e o que isso faz é que isso nos abre em um documento mais longo, como um site, e você pode ver ao ver isso 50% agora. Então, se eu ampliado em 100% isso é realmente o que o site seria parecido no meu monitor e nós podemos realmente ver este, hum, hum, tela e modo de tela cheia. E isso é o que o site ficaria na minha mente Earner e eu não colocaria nenhuma informação importante fora para os lados aqui. Toda a minha informação importante iria para este lugar. Então eu sei que até mesmo as pessoas em monitores menores podem pelo menos ver meu site à medida que começam a passear por ele. Então eu vou escapar disso. Vou diminuir o zoom para que possamos ver tudo. Agora, é claro, minha informação foi cortada aqui e estamos perdendo muita informação. E ainda tenho minhas anotações nesta camada. Então, Então, só para ver essas coisas, eu quero ir em frente e reduzir tudo isso. Então deixe-me selecionar tudo aqui. Não, si de controle de seleção. Ficar bem. Lá vai você. E deixe-me escalar minhas anotações aqui, Sam. Agora, só tenho isto para mais tarde. Se eu quiser voltar e dar uma olhada nele, posso fazer isso. As dimensões com as quais não me importo, estão bem. Eu só vou vazar isso porque eu acho que você entende o que eu estou tentando dizer aqui que nós só queremos usar esta resolução em particular. Mas eu quero manter essas notas para que eu possa sempre ativar esta camada e olhar para ela mais tarde, e eu vou apenas adicionar um novo fundo mais tarde, camada e apenas torná-lo branco para que eu não tenha essa transparência acontecendo. Ok, então agora temos apenas ah, tenho meu terminal de anotações. Está desligado agora. Acabei de ter um layout básico branco que posso usar aqui. Certo, então a próxima coisa que vamos querer fazer é ir em frente e mudar o tamanho da tela para 10 24. Então sabemos que temos um bom com e eu fiz 2000. Então é extra longo, então eu posso apenas tipo de trabalhar dessa maneira e então sempre pode vir aqui e cortar isso ou torná-lo mais longo baseado em como este site começa a se tornar. Agora, próxima coisa que vamos querer usar é uma grade, porque queremos ter certeza de que tudo está se encaixando em uma grade. , vez, isto não tem de ser uma ciência perfeita porque estamos a fazer uma simulação. Mas quanto mais perto podemos fazer as coisas, , como queremos que elas pareçam tão longe quanto as alturas e a inteligência e o que você tem, melhor será. Então, em vez de simplesmente esbofetear coisas arbitrariamente, seria melhor usar uma grade, então pelo menos faz um pouco mais de sentido, especialmente quando a entregamos a outra pessoa. E a grande coisa sobre isso é, se você está trabalhando com um artista de design gráfico que fez photoshop, você pode dar a eles este arquivo PSD, e então pelo menos eles podem puxá-lo para cima e dizer, OK, você fez isso tantos pixels e o que você tem e pode tipo de ir de lá? Então eu só vou para ver e eu vou para mostrar e, em seguida, selecionar grade, e isso vai criar uma grande força. Agora eu quero ajustar esta grade porque você pode ver que não está realmente alinhando muito bem aqui. É meio que ir para os lados e não bater perfeitamente onde queremos. Vá em frente e amplie aqui para que possamos ver isso. Então veja como esse tipo foi cortado aqui e isso. Esta não é uma boa grade uniforme. É porque ele está usando dimensões diferentes do que estamos usando aqui. Então, clique em editar cabra, vá até as preferências e selecione guias, grades e fatias. E isso vai nos permitir mudar a grade, como entendermos. Então, se formos até onde diz grade, temos uma linha de grade a cada centímetro com oito subdivisões. O que nem estamos usando ferimentos era usar pixels, então isso é orgulhoso do problema e temos oito subdivisões. Vamos em frente. Basta fazer uma subdivisão agora para que você possa ver que eu não queria bater em Enter, mas você vê o que isso faz. Agora temos uma linha de grade a cada centímetro e nenhuma subdivisão. Então são apenas linhas regulares sem quaisquer subdivisões. Então volte aqui, para que eu não queira fechar isso. Então vamos mudar são dois pixels e agora temos uma linha de grade. Cada pixel. Bem, isso é um pouco demais. Não precisamos disso. E como eu disse antes, tudo isso é divisível por dois. Podemos usar qualquer um dos números que te mostrei antes. 24 8 16 32 64 Então vamos tentar 64. Então 64 parece bom. Tem algumas caixas de bom tamanho e nos divide. Realmente bom. Agora eu poderia fazer, digamos, oito. Hum, isso é um pouco demais. 16 16 16 é muito bom, mas se fizermos 64 um número maior para obter essas caixas maiores e então usamos subdivisões. Então, digamos que quatro subdivisões agora podemos ver que temos linhas bonitas, grossas, cada 64 pixels, e então é dividido por quatro. Então, se você pegar quatro em 64 é 16. Então cada uma dessas linhas de luz tem 16 e cada uma dessas linhas escuras é 64 você pode configurar isso o que sentir melhor para você, mas eu acho que isso é muito bom. Isso nos dará um bom tamanho de dimensão. E agora, quando vamos para ver, certifique-se de que temos snap on snap to grid. Então, sempre que fizermos algo como, digamos, se eu pegar essa caixa aqui, vai encaixá-la nos pontos da grade, e isso só vai torná-la agradável e uniforme força. E como eu disse, esta não é uma ciência perfeita, mas pelo menos isso vai nos mostrar algumas coisas agradáveis e fáceis com que o dedo trabalhou. Então, se eu estou fazendo minha barra de menu aparecer e eu tenho isso selecionado bem, agora sabemos que minha barra de menu é exatamente 64 pixels altura lei sábia e 10 24 com sábio. Então essa é uma ótima ferramenta. E então uma outra coisa que você pode querer ligar são os governantes. Então, se você tem uma vista e você clicar em réguas aqui, você vai ver essas réguas no topo e estes ar grande para um alinhando as coisas novamente. Está em duas polegadas e não queremos polegadas. Então clique duas vezes sobre isso. E quando você clicar duas vezes, isso também vai trazer as mesmas preferências. Você pode ver grandes guias e fatias aqui e acima que unidades e réguas. Então agora podemos ajustar a propriedade réguas. Então vamos aos governantes. Mude esses dois pixels e agora você pode ver que ele está mostrando nossos pixels do nosso documento. Podemos acertar OK, e isso é ótimo porque agora podemos ver onde queremos dividir essa informação se quisermos usar as réguas como guias. E outra grande coisa sobre as réguas é se você ir para onde a régua está e você clica e arrasta, você obtém essas linhas e essas excelentes ferramentas de medição de ar. Então, é muito fácil deixar cair uma linha aqui e meio que ver Ok, esse é o centro do meu documento, e eu posso alinhar as coisas dessa maneira, e eu posso cortar isso como eu quiser, então nós vamos estar usando isso para tipo de apenas colocar algumas coisas básicas antes de começarmos a deixar as coisas lá para que possamos, pelo menos, começar a separar isto e ver como queremos que este website pareça. Então é assim que configuramos nosso documento novamente. Temos 10 24 de largura, pelo menos sabemos que as pessoas em monitores mais antigos podem ver isso. E como eu disse, você começou a trabalhar com o designer gráfico, o desenvolvedor Web ou quem está projetando seu site para você quando você ele esta simulação fora para eles, pelo menos eles têm um bom ponto de referência geral . E então todos vocês podem trabalhar juntos nesse ponto e mudar o que quiserem. Mas pelo menos temos um senso geral de algo que parece um pouco mais coeso e vai funcionar um pouco melhor do que apenas alguns números aleatórios. coeso e vai funcionar um pouco melhor do que apenas alguns números aleatórios. 5. Como criar seu modelo do site: Certo, então temos nossos documentos configurados de como queremos ir em frente e criar essa simulação de web design . E vou mostrar-vos algumas maneiras diferentes de fazerem isto. Agora, lembre-se de que tudo o que você está tentando fazer é apenas mostrar o básico do que você quer procurar em seu site e o que você está procurando quando você está entregando isso para um artista de design gráfico ou um desenvolvedor da Web. Então a primeira coisa que fazemos é olhar para nossa grade aqui e podemos começar a dividir essa grade. Ah, e nosso documento sobre o que acreditamos que seria bom em uma maneira de fazer isso é usar esses guias com as réguas para que eu possa clicar e arrastar isso para baixo. E eu posso dizer, um desses ar de antes deixe-me tirar isso. Você está certo. O centro 1. Então podemos dizer que sabemos que queremos nossa barra de menu no topo aqui, e sabemos que queremos ah, seção de rodapé na parte inferior e vamos querer um lince na parte inferior também. Então talvez tenhamos um topo acima da seção de dobra de uma foto minha ou foto de você ou da sua marca ou o que quer que você esteja fazendo abaixo. Isso pode ser o que queremos ter alguns postos de bloqueio. Hum, então nós queremos ter nossos ímãs de chumbo e assim por diante, e você pode descer cortando isso e dividindo isso e então uma das primeiras coisas que você pode fazer a partir disso é criar uma nova camada e então você pode entrar aqui, pegue a caixa de ferramentas do retângulo. Ah, e então escolha uma cor. Eu costumo usar cinza ao fazer simulações, mas se você tem uma cor de conhaque, você pode fazer isso e eu vou entrar aqui e eu vou começar a criar imagens grosseiras muito básicas do que é que eu estou indo para. Então um pool no texto ou e eu sei que esta é a seção de link. Então eu vou entrar aqui, e eu vou escrever para casa sobre log podcasts contato e o que você tem e então, você sabe, mudar isso de tamanho aqui, e esta é uma maneira de lidar com isso. É bem simples. E tudo o que estás a fazer é que estás a recriar o que achas que isto seria ? Então você, você sabe, ou seus links aqui Você o quer no centro? E você não tem que ser um especialista. E como você projetou o site, você vai perceber isso. As coisas iam mudar e você vai querer ... Eu queria parecer diferente. Talvez algo não pareça certo. Você não é um artista, mas pode, pelo menos, obter o seu ponto de vista para o artista de design gráfico ou desenvolvedor web para ajudar a criar isso para você. Então esta é uma maneira de fazer isso. E então o que você pode fazer com isso também é que você pode selecionar essas camadas, apertar o controle G e agrupá-las, e então você pode movê-las ao redor. Então, se isso foi, digamos , ah, posto de bloqueio e você não fez, você não tinha certeza onde queria. Ah, você não sabe. Se você quisesse no topo, você poderia querer no meio do caminho, no fundo. Esta é uma ótima maneira de agrupar essas coisas e movê-las e ver o que funciona ou não para você. Agora deixe-me mostrar-lhe outra maneira de fazer isso e isso eu acho que é mais fácil e ah, parece um pouco melhor. Então é um pouco mais visualmente atraente. Então, logo de cara, você começa a ter uma idéia muito boa do que você quer. E o que digo às pessoas é que a Adobe Creative Cloud Suite permite que você tenha acesso a uma tonelada de ativos que você pode usar em seus projetos e em todos os cursos que você me vê fazer. Você vai me ver usar isso muitas vezes porque é uma ferramenta tão poderosa. Eu acho que é uma espécie de sob uso e você pode sair e você pode encontrar essas coisas na Web. Você pode encontrar os gratuitos que você pode encontrar aqueles que você paga e coisas que vão melhor atender às suas necessidades. Mas você não precisa procurar mais longe do que o próprio software. Então, se você abrir o aplicativo Creative Suite e clicar nele, ele vai puxar esta caixa aqui. E se entrarmos em ativos e escrevermos em você, por que você vai encontrar um monte de ativos de interface de usuário que você pode usar? Alguns deles são ativos únicos como você vê aqui a calculadora no calendário e você pode desenhar arrastar aqueles em Alguns deles são formatos de página inteira como thes trovão. Você eu kits estes ar praticamente já colocado para fora. E você pode gostar de alguns desses. Você poderia arrastar um desses. E se você encontrou um que você gosta e nem tem que fazer mais do que, digamos, aqui, isso é o que eu quero. Alguns deles são kits de ativos, então são agrupamentos. E deixe-me encontrar alguns desses como este aqui, esta combinação você AIPAC, este é um grupo juntos que você pode usar, e ele tem um monte de coisas diferentes. Se eu clicar nisso, você pode ver que tem uma foto de perfil. Tem um gráfico. Tem botões de calendário, barras de busca. E então você arrastou isso para dentro e então você apenas puxa para fora os elementos que você quer usar, modo que isso funciona muito bem. E eu puxei um par desses ativos e já que eu vou usá-los neste curso. Isso só para dar uma visão rápida de como você poderia usar alguns desses ativos e, hum, eu vou em frente e fornecê-los na seção de recursos deste curso. Então, se você olhar para a minha biblioteca, você pode ver os três que eu estou usando. A Avia, você, você, eu kit iniciador, os elementos de tijolos. Você eu criança e uma vista que eu kit para navegação. E eu só vou abrir estes individualmente, são clique direito e bater nele e o que vai fazer? Ele vai abrir um novo arquivo PSD Photoshopped com aqueles com esse arquivo, e então você pode ver todos os layouts diferentes que temos dentro deles. Então deixe-me ir em frente, abrir tudo isso. Isto quebra o Elemento um é um pouco maior. Tem um monte de coisas nele, mas realmente alta qualidade parece muito bom. Agora, isso é apenas dizer que ele está usando fontes que eu não tenho instalado no meu computador. Eu sempre posso entrar e instalar essas fontes. Eu não vou me preocupar com isso agora porque tudo o que estamos tentando fazer é apenas dar-lhe uma idéia de como você criaria sua própria simulação e mesmo você não tem que trabalhar muito sobre o texto porque você está apenas tentando obter o que o layout Parece que sim. Nós não nos importamos com o texto ou as imagens estavam apenas tentando levar nosso ponto para o designer gráfico ou desenvolvedor da Web. Então, hum, eu vou ter apenas para cancelar e não resolver esses, e então eu vou abrir este último aqui, e isso não resolve sobre cuidados sobre resolver isso. Então eu vou para o 1º 1 aqui, e eu vou ampliar. E estes são layouts pré feitos para sites que você pode simplesmente ir em frente e você pode encontrar um desses que você gosta, e então você pode apenas dizer, Ei, isso é isso é isso que eu estou indo para em vez disso imagem colocar isso e assim por diante. Mas o que vamos fazer é arrancar alguns dos elementos destas coisas e usá-los na nossa simulação de design. Então o primeiro 1 que vou usar é este aqui. E a única coisa sobre essas pausas Photoshopped, Eles às vezes têm um monte de elementos, e a parte mais difícil é encontrar o que é o quê? Então o que eu faço é começar a desligar camadas até encontrar a que eu quero. Ok, então isso é chamado de dois quarteirões. Vou clicar duas vezes sobre isso porque esta é uma camada inteligente. Como você pode ver, não há uma pasta de informações. Tem este ícone aqui na camada. Eu clique duas vezes que ele está indo para cima, abrir uma camada inteligente com todas as camadas lá dentro, e ele está falando sobre camadas de texto novamente. Não quero actualizar isso. Então, quando eu abri a camada inteligente, agora você pode ver aqui todas as minhas pastas e informações que podemos arrastar para fora e puxar ao redor. Então é isso que estou procurando. Então eu vou voltar. Vou fechar esse documento. Não preciso mais dele, então não vamos usar isso. Ok, então nós entramos em dois quarteirões e o que está acontecendo aqui é que eu gosto deste top. Gosto da forma como fizeram este título. O subtítulo. Talvez alguns botões onde eu possa colocar começar aqui ou algo que eu quero que a pessoa para clicar , ter uma imagem de mim ou da minha marca e ah, talvez esses links de navegação. Talvez eu goste desses links de navegação, então vamos em frente e arrastar isso de novo. Vou começar a clicar através dos globos oculares e das camadas até encontrar o que procuro , que é ali mesmo e chamam este herói. Então eu vou clicar com o botão esquerdo e arrastar isso para o meu documento e simplesmente soltá-lo lá dentro. Agora, uma coisa que eu definitivamente recomendo que você faça como você começar a rotular coisas que ou vai fazer sentido para você ou para o designer gráfico ou desenvolvedor Web mais tarde. Porque se você der a eles o arquivo PSD e eles olharem para isso e virem aqui, eles não vão saber o que é isso. Então podemos chamar isso de seção superior ou algo assim. Pelo menos sabemos que é a parte superior, e essa é a pasta em que estamos trabalhando. Então eu vou clicar, e eu vou arrastar isso e eu preciso escalar isso e de novo. Queremos estar próximos de dimensões e tamanhos. Mas outra vez, vamos ter outra pessoa a trabalhar nisto para nós. Então, não temos que ser perfeitos. Hum, mas, você sabe, nós queremos olhar um pouco de perto. Então nós gostamos de como isso parece. Isso parece ótimo. Exceto que tem uma foto de uma garota olhando para baixo. Eu realmente não me importo com isso. Prefiro ter uma foto minha e da minha marca aqui, pelo menos para poder ter alguma coesão. Eu poderia tirá-lo e simplesmente deixar um bloco de texto lá e dizer imagem de mim ou imagem da marca ou imagem do nosso caminhão ou algo que você gostaria de usar. Então vou abrir aquela pasta de novo. Eu posso meio que clicar em torno dessas coisas e ver o que está acontecendo aqui. Temos o título que temos, valete. Tivemos uma briga. A flecha. Eu nem me importo com isso. Eu só vou deixar isso. Então é uma coisa a menos que você tem que olhar. Temos a base. Está bem, então está na base. Então algumas dessas coisas podem não fazer muito sentido, então você pode ver quando ligamos e desligamos isso, ele tem alguns efeitos coloridos e coisas diferentes acontecendo enquanto nós não nos importamos com isso novamente. Não estamos tentando ser perfeitos aqui. Só estamos tentando obter um layout básico, então vou desligar esse retângulo. Eu poderia até apagá-lo se eu quisesse. Na verdade, parece que não pode apagá-lo. Vou desligá-lo e escondê-lo. E então eu sou apenas Ah, talvez eu traga uma foto minha. Vou abrir um arquivo. Este é um projeto em que trabalhei antes. Imagem de mim toda mostrando um pouco antes e depois imagem de alguma cor tocando, corrigindo que eu fiz. Mas eu só vou escolher este que diz ajustes. Esta é a minha foto bem aqui. Isso parece bom. E vou arrastar isso para o meu documento. Coloque isso aí e veja, às vezes você tem que mover essas coisas para cima até vê-lo. Então ele estava sendo escondido por algumas dessas camadas. Eu só continuei movendo-o para cima desta pilha até que ele veio à vista. Então agora eu só vou escalar isso para baixo nessa linha lá, redimensioná-lo para trás e movê-lo para cima. Tudo bem, então isso está bom. Quero dizer, eu gosto disso. Já tenho algumas ligações. Tenho esta pequena secção de título. Talvez eu queira mudar a seção do título. Então eu gosto que ele tipo de vir comigo, e aqui vamos nós. Já estamos começando a ver o básico deste design simulado. Então este é o básico de como este processo funciona. Vamos em frente e fazer uma pausa aqui, e vamos voltar e dar uma olhada em como podemos adicionar mais algumas coisas na próxima seção . 6. Como adicionar gráficos de UI ao seu modelo de design: Certo, vamos em frente e terminar essa simulação de Web design. Você já viu que há duas maneiras de fazer isso. Podemos usar os governantes, grades e guias para entrar e bloquear algumas maneiras muito básicas de fazer as coisas. Ou podemos usar ativos do Photoshopped para rapidamente despejados em nosso site e movê-los para ter uma idéia do que queremos que nosso site seja muito rapidamente. Então eu só vou adicionar mais algumas coisas aqui só para que você possa ver o processo à medida que avançamos . E vai ser o mesmo processo em todo o Web design. Muck up, você apenas solta as coisas e ajusta-las, movê-las e ver o que funciona melhor para você. Então deixe-me ir em frente e minimizar. Temos a parte superior dela. Temos esta camada de ajustes que temos aqui. Veja se deixo cair atrás dessa linha. Eu ainda tenho a minha camada de notas para que eu possa sempre ir e ler o que eu queria adicionar. Então eu queria minha barra de menu e eu posso ir para o topo aqui e outros para a barra de menu aqui em cima , mas isso vai nos dar uma idéia básica. E então eu tenho minha foto de perfil. Então eu queria algumas postagens recentes do Blawg e postagens de podcasts e um ímã principal em um anúncio do Google. Então vamos em frente e adicionar mais algumas dessas coisas. Eu vou para este. Este é o elemento BRICS. E se eu ampliar aqui, este é um documento legal. É longo, e tem um monte de coisas nele. E novamente, parte do problema com este documento é apenas tentar descobrir o que é o que aqui. Então nós temos um monte de coisas diferentes para escolher, e eu vou rolar por aqui, e eu estou procurando por algo que funcionaria para nossas postagens de bloco e nossa postagem de podcast. Algo assim pode ser bom. Isto pode ser algo fixe. Esta pode ser uma imagem de postagem de bloco que poderíamos usar. E isso é tudo que estou fazendo é passar por aqui e tentando descobrir o que refletirá algo que realmente se parece com um poste de bloco de ah. Gosto deste aqui. um Pareceumpost onde eu teria uma imagem lá dentro. O nome, o título dos posts, as informações como eu começar a falar sobre o post quando eu postei e quaisquer comentários foram deixados. E talvez eu possa ter este coração favorito aqui. Ou talvez eu possa tirar isso para que, como eu disse, tenhamos que descobrir qual deles. Isso é porque esses nomes não significam necessariamente nada para nós. Então eu só vou por aqui e eu apenas começar a clicar fora dessas camadas. Oh, ok. Aqui está. Galeria de Imagens três. Vou clicar com o botão esquerdo. Vou arrastá-lo para o meu documento. Vou deixar cair, está bem? E então este é Ah, lugar. Onde agora, quando eu estava projetando um site, você pode fazer algumas coisas diferentes. Eu poderia realmente colocar algum tipo de título ou cabeçalho aqui, e eu poderia preencher isso mais tarde, ou eu poderia ir direto para a seção de postes do pântano. Hum, por enquanto, nós vamos para a seção de postes do pântano e você vai ter a idéia. Mas, claro, eu quero que isso fique bem. Eu poderia realmente ter um pequeno ditado aqui, uma pequena citação ou títulos que diz post blawg recente e, em seguida, deixar cair estes em. Mas basicamente, posso pegar essa camada e ver o que temos aqui. Ok? Conseguimos a imagem dela. Certo, vamos nos livrar do ícone. Nós não vamos. Use esse ícone e eu posso deixar a imagem. Eu poderia tirar a imagem que eu poderia também, se eu quisesse. Eu poderia pegar a ferramenta de retângulo e, hum, apenas passar por cima da imagem em uma nova camada. Então, dependendo do que eu queria mostrar ao designer gráfico, eles provavelmente poderiam descobrir que isso não é uma imagem, você sabe que esta é apenas uma imagem de espaço reservado para o que queremos, mas eu poderia apenas preencher isso, e eu poderia até escrever um bloco de texto sobre ele que diz imagem. Ou eu poderia mesmo se quisesse, eu poderia trazer uma imagem para ele, apenas uma foto rápida ou algo assim e ter três diferentes aqui. Mas basicamente, esta é apenas uma maneira rápida de eu ver isso. Ok, este é um posto de bloqueio, e nós sabemos o que está acontecendo aqui. Ah, e então eu vou chamar este blawg post um. Vou deixar o Click. Arraste isso para a nova camada. Faça uma cópia dele. Blawg Post, também. E agarra a minha jogada. Ferramenta. Clique nisso. Mova e copie. Um monte de postes três. Clique nisso. Ok? E vocês podem ver que estes não se alinham para que eu possa escalá-los, só por causa do bem. Por causa do tempo. Aqui. Eu só vou movê-lo para cima e meio que centrá-los para fora. Ok, então agora, estamos fazendo alguma margem de manobra. Hum, agora eu quero dividir isso e talvez eu precise do meu post no podcast. Então, Então, preciso dividir isso. Gosto desta linha azul. Talvez eu queira continuar usando essa linha azul para baixo. Isso estava na seção de cima, então vamos encontrá-lo. Acho que é este ano. Sim. Então é este pequeno marcador aqui. Vou clicar nisso, não clicar duas vezes. Eu vou clicar e arrastá-lo para o, hum, sob a nova camada bunting para fazer uma cópia. Eu vou arrastá-lo para fora dessa pasta para que ele fique fora por si só. Vou renomear quebras de linha. Eu sei o que é. Mova-se, ferramenta. Clique nele. Então, ok, lá vamos nós. Ok, então nós temos que quebrar a linha lá. Isso é legal. E agora eu só quero duplicar isso, porque talvez eu faça a mesma coisa para o poste do pântano. Talvez eu decida que quero compensá-los como vimos com o site inteligente e passivo de renda. você quiser fazer isso. Mas, você sabe, isso é novamente apenas para mostrar o processo. Então eu vou fazer isso para outra quebra de linha e muito rapidamente, apenas usando coisas que já temos, hum, ativos que já temos na loja de fotos. Você pode ver que este é um processo muito fácil. E você pode simplesmente cortar essas coisas em pedaços e usar apenas as seções. Você quer ter uma idéia de como você quer que seu site se pareça. E novamente, eu provavelmente colocaria em alguns títulos e coisas aqui e diria que este é Ah, este é um bloco de mensagens recentes. Deixe-me fazer isso. E, claro, eu passaria algum tempo e faria isso parecer bom, uniforme e bonito , mas por enquanto, vamos mostrar o básico para não ter que ser muito bonito. Vamos tentar passar o ponto que estou tentando fazer aqui. Podcasts. Podcast. O que são eles? Episódios, ok. E então Ah, então o que mais queríamos aqui? Vamos voltar às nossas anotações. Dê uma olhada nele. Notas que queríamos. Temos nossa foto de perfil. Temos o nosso poste de pântano. Queríamos liderar ímã em um anúncio. Então vamos ver como podemos fazer isso. Vou dizer isto bem rápido. Ok? Eu vou voltar. Preciso de alguma coisa. Parece um ímã de chumbo. Eu estava olhando para isso mais cedo, e esta seria uma boa imagem de ímã de chumbo no lado esquerdo. Título fala sobre o ímã principal, e talvez eu tenha um botão de inscrição e eu provavelmente mudar-nos para fora do pé o que parece uma caixa de texto usando alguns desses ativos, mas precisamos descobrir o que é isso. São os dois quarteirões. Então vamos pegar isso Arraste isso para o nosso documento aqui em, hum, nós também podemos mudar as cores dessas coisas. Então, hum, se você tem uma cor de marca que você está trabalhando com e você sabe o que você quer que a cor seja. Você pode fazer isso muito facilmente. Hum, divertido. Eles usam este azul muito tipicamente, e isso é uma coisa boa porque todos usam sempre o mesmo azul, que funciona bem. Então vamos descobrir quais caixas é o nosso este em um. Aquele. Certo, vamos deletar isso. Eu não quero isso. Vamos chamar isto de ímã de chumbo. Ok, então isso é legal. Pegamos o ímã de chumbo dela. Ah, nós queremos em propagandas. Vamos voltar aqui. Ver se conseguimos encontrar algo que se pareça com um anúncio. Oh, diz anúncio. Perfeito. Certo, temos que descobrir o que é esse. Há muitos destes, por isso começo a esconder-me até que desapareça. E então eu sei o que é o quê. Ok, aqui vamos nós para as imagens. Aperte isso. Largue isso. Não precisamos de um deles. Então não queremos caixa também. Esconda isso. Está bem, Legal. E então chamaremos isso de anúncio que você não pode soletrar nunca. Gravatas significavam e vamos mover essa liderança. Homem para baixo. Então era apenas uma espécie de olhar centrado. Tudo bem, isso parece bom. E, ah, vamos ver suas anotações. Então, praticamente conseguimos tudo o que queríamos ter. E nós fizemos isso e, você sabe, cerca de 20 minutos ou assim muito rapidamente, nós podemos começar a juntar como isso parece. , Claro, queremos o rodapé na navegação na parte inferior. Vá em frente e arraste isso bem rápido. Hum, nós vamos usar Sim, este aqui. Então nós temos este rodapé e sub rodapé na parte inferior. Então arraste os links de rodapé para obter e, uh, encaixar nosso documento. Não nos importamos com as mensagens. Acabei de passar por isso de novo. Este é apenas o design. Lindo. E rodapé estendido. Sim, eu gosto dessa também. E nós realmente vamos ter esses toques. Serão todas essas ligações e informações diversas que talvez queiramos colocar aqui . Provavelmente faço a ligação. A acima, um pouco mais escura. Veja, você sabe, e eu poderia mexer com todas essas coisas. Tire o logotipo. Eu não me importo com o logotipo lá. Talvez eu centrar e re escalá-lo para que pareça um pouco melhor aqui. - Tudo bem. Está bem. E vamos ver, você sabe, se digamos, nós queríamos a cor do Teoh naquele rodapé que está acima dela. Como faríamos isso? Podemos cair sobre isso, encontrar a cor de fundo, e neste eu posso realmente clicar duas vezes nele. E ele vai realmente trazer ah, seletor de cores para mim porque é uma camada inteligente e eu poderia escurecer isso, então isso é legal. Hum, eu também poderia fazer em efeitos sobreposição de cor naquela seção e mudá-lo para qualquer cor que eu quiser. Desde que eu tenha selecionado normal em 100% de opacidade, eu poderia entrar aqui e mudar a cor, mas porque é uma camada inteligente me dá a opção de usar apenas um seletor de cores. Então vamos com isso. Isso parece bom. Ok, vamos dar uma olhada. Então, aqui vamos nós. Temos um site muito rápido e facilmente definido. Talvez eu não goste dessa ligação no topo. E eu sou como, uh, espécie de ligação um pouco melhor. Vamos então este link aqui, este é o menu de navegação. Coloque isso em, uh oh. Parece que deixei cair na pasta por acidente, então certifique-se de não fazer isso. Vou tirar isso do caminho. Traga para o topo. Gosto de manter as coisas na pilha de camadas. Na verdade, como eles são vistos na página. Só faz um pouco mais de sentido. Então, aqui vamos nós. Escala isto. E eu não preciso ver tudo isso. menu suspenso de informações da Srta. Alina e os resultados da pesquisa. E agora tudo o resto está tocando o topo. Talvez eu goste disso. Eu não gosto disso, então vou clicar em tudo, certeza que tenho minha jogada. Ferramenta selecionada. E eu poderia mover tudo isso juntos. E agora o outro problema é que temos dois links. Temos estas coberturas e ligações a sangrar da parte superior. Então eu vou para a seção superior e vou desligar o valete para eu não vê-lo. E então nós só temos um pouco de espaço em branco porque nós não preenchemos todo o documento. Já vimos como fazer isso antes com o tamanho da tela. Então vamos descobrir onde estamos, olha o que isso diz? 17 10 17 20. Então o tamanho da tela faz este 17 20 recorte Wilker. Prossiga. Certo, agora precisamos pegar tudo porque ele corta do centro, não de onde queríamos. Então pegue tudo e mova para baixo. O que? A ferramenta de movimento. E lá vamos nós. Temos um layout básico do nosso site, e temos tudo o que queríamos. Temos o nosso logotipo ah aqui. Parece que o logótipo de navegação voltou difícil. Se eu não usar querer coisas, hum, navegação. A seção superior naff. Se eu não quiser coisas, eu normalmente vou apagá-las. Então vamos pegar aquele valete e nos livrar dele. Certo, então lá vamos nós. Agora temos que mover isso um pouco mais. OK, temos as nossas ligações. Tenho a minha foto de perfil, talvez uns botões e a falar sobre o site. Eu tenho meus posts de bloco recentes e alguns espaços reservados grandes quadrados aqui para mostrá-los . Tenho meus episódios recentes de podcasts. Tenho o meu ímã de chumbo. Eu provavelmente colocaria uma imagem diferente ou cobriria isso com um quadrado cinza. Tenho o meu anúncio, meus vazamentos de fundo. Então tudo o que queríamos sob notas exceto ícones de mídia social, mas você pode ver como é fácil consertar isso e trazê-los para dentro. E essas são as duas maneiras que você pode fazer sobre projetar isso. Você pode fazer isso com as grades e réguas e criar esses quadrados e coisas você mesmo como eu poderia realmente fazer esses quadrados neste texto, mas é um processo um pouco mais longo. Por que não usar apenas os ativos que já estão disponíveis para você a partir da adobe e criar este site? Como você acha apropriado? Então lá vai você um mercado de design de site muito rápido, simples e fácil. 7. Use o Photoshop para criar um modelo de design de web: Agora você sabe como fazer uma simulação de Web design simples, e esta é uma informação valiosa para um designer gráfico ou um desenvolvedor Web porque ele dá eles algumas informações na frente que eles podem usar para começar a fazer seu site imediatamente. E eles não têm que fazer um monte de adivinhação tentando descobrir exatamente o que você está procurando. Neste curso, você aprende a fazer alguma pesquisa, olhar para outros sites e separá-los e descobrir o que está funcionando bem para eles. Você aprende a escrever algumas idéias antes do que você quer no design do seu site , que você não tenha que fazer essa adivinhação enquanto está projetando. Então você aprende a fazer um esboço áspero para tipo de estabelecer algumas idéias básicas. E então fomos para a loja de fotos e usamos grades e camadas e várias ferramentas para que você pudesse se mover em torno dos diferentes elementos e ver como eles se encaixariam em seu próprio design de site . Esperemos que você tenha achado essas informações muito valiosas, e agora você pode usá-las para ajudar a acelerar o processo sempre que tiver um site criado para sua empresa ou marca. Agora, o que eu quero que você faça é ir em frente e salvar uma imagem dessa simulação de design que você criou e loja de fotos e enviá-lo para a área de discussões ou projetos deste curso. Adoraria ver no que está trabalhando. Sempre me interessa ver o que os alunos criam. E se você tiver alguma dúvida ou quiser feedback sobre seu design, eu definitivamente posso fornecer isso para você, mesmo que você queira apenas tirar uma foto ou, você sabe, usar seu telefone e tirar uma foto do que você desenhou por mão e fazer upload que seria ótimo, porque eu só quero ver o que é que você está criando agora. Se você tiver alguma dúvida, você sempre pode entrar em contato comigo. Você pode fazer a pergunta na área de discussões, ou você pode me enviar uma mensagem diretamente, e eu entrarei em contato com você assim que eu puder. Normalmente estou sempre disponível para os alunos, e eu só quero fornecer qualquer informação para você que eu possa. Se você quiser saber mais sobre mim, você pode ir www dot jeremy deegan dot com e descobrir o que é que eu estou trabalhando e entrar em contato comigo através desse site também. Então estou ansioso para ver o seu projeto. Vá em frente e faça o upload agora e eu vou te ver em algumas lições futuras.