Transcrições
1. Introdução: Todo mundo. A mineração é de ólia. Sou designer. Você é designer de UX que eu venho projetando há mais de 10 anos. Tive o privilégio de trabalhar com várias empresas diferentes, desde pequenas empresas locais ,
empresas multibilionárias. Nesta aula, eu vou começar com um quadro em branco e mostrar-lhe como projetar um site pessoal e colocar um monte de designers fazer parecer fácil porque eles têm feito isso por um tempo. Mas também quero mostrar como é fácil, e quero mostrar passo a passo, como faço isso. Esta aula é ideal para iniciantes e quem está interessado em design, então eu espero que vocês gostem. Vamos entrar nisso.
2. Primeiros passos: Certo. Então, antes de começar com anti um para baixar figo, MMA, figo MMA é grátis. Funciona no Mac no Windows. Eu escolhi figura Mark porque funciona em Mac e Windows eso que eu não estou tipo de limitar as pessoas a um sistema operacional. Eu sou realmente novo para me imaginar, então eu estou aprendendo como eu ir, mas é muito fácil de pegar o seu fácil de usar. Você sabe, se você está preso em algo ou quer aprender uma ferramenta específica, eles são como se o recurso é a ajuda se centrar, isso é tudo. As coisas são muito úteis. Eu costumo baixar lá. Onde é que está? Eu costumo baixar sua área de trabalho para cima, mesmo que você transmitir é ein no navegador. Eu geralmente gosto de usar o aplicativo de desktop de qualquer maneira, então ,
você sabe, uma vez que tenhamos feito figo carregado MMA, nós podemos abri-lo. Então aqui estamos com a figura minha aberta. Eu tenho um novo documento aberto aqui está bem em. Você só quer se familiarizar com o que você tem na sua frente. Então, você sabe, nós apenas temos tipo de como as suas opções e tal. Aqui temos a escala móvel. Temos quadros, mentiras apenas suas ferramentas suaves regulares que você precisa Teoh para obter design. Basicamente. Então, para começar, vamos fazer um quadro. Um quadro é basicamente um espaço onde você vai estar fazendo o seu design,
fazendo o seu design uma vez que você realmente selecionou um quadro. Então, quando você clicar neste botão aqui em cima, você pode escolher tamanhos diferentes à direita. É à direita, você sabe, podemos escolher encontrar tablet desktop. Nós vamos fazer isso. Paro 14 40 por 10. 24. E isso é o que temos na nossa frente quando escolhemos um desses amigos. Agora, as
primeiras coisas primeiro. Eu quero criar uma grade para que eu possa basicamente alinhar meu conteúdo. Alarme meu design para um ótimo para fazer isso, nós simplesmente ir para aqui onde você vê grade de layout no lado direito. Pressione e teremos uma nova demissão. No entanto, nós realmente não queremos. Isso é fora da grade. Queremos colunas. Então aqui temos um monte de colunas. Agora, agora eu vou dar minhas colunas 12. Diga o número 12 que eu vou dizer, vai ter isso centrado, e eu vou dar a cada coluna uma semana de folga em 65 em uma sarjeta com off 30. É com isso que gosto de trabalhar. Sabe, você pode escolher a nota que quiser, mas é disso que eu gosto. Isto é o que funciona para mim. E isso basicamente me dá uma área de conteúdo de sal para trabalhar. E eu tenho 30 pixels entre cada coluna, que eu gosto também, eu deveria pressionar Enter o cara. Então ele pixels entre cada coluna e ainda me dá bom espaçamento para o meu conteúdo. No entanto, antes de começarmos com o que estamos projetando hoje é uma boa idéia ter uma
armação de arame , uma espécie de idéia do que você gostaria de projetar uma idéia de como a página deve ser. Então eu rapidamente fiz uma armação de arame aqui que você pode ver porque estamos fazendo um site
pessoal muito simples . Sabe, eu tenho uma espécie de barra de soneca no topo com os links de navegação do logotipo. Tenho a descrição do cabeçalho da imagem do perfil. Então eu tenho,
tipo, tipo, uma seção de portfólio da seção de serviços e, em seguida, um ajustador onde eu vou ter mais altos meus botões de contato de descrição
curta, então sim, muito rapidamente. Juntar isso eu geralmente tenho uma boa idéia. Vou começar na minha cabeça. Eu não costumo fazer armações de arame, mas se molduras de arame ajudar você,
por favor, faça isso. Tendo uma armação de arame para ilustrar, vamos projetar antes que você realmente comece a projetar. A versão de alta fidelidade vem realmente ajudar. Pode resolver seus pensamentos suaves e ter certeza de que tem algo no papel. Então é isso para este. E o próximo vai. Na
verdade, começou com um projeto e levando uma esposa para ele em um projeto de alta fidelidade.
3. Nav e Herói: Então, bem-vindo de volta. Agora que vamos realmente começar no design, vamos voltar ao nosso quadro de arame e dar uma olhada no que estamos trabalhando. Então vamos começar com o cabeçalho na seção de cabeçalho dis off a seção de heróis aqui. Então o que eu costumo gostar é de eu porque isso é obviamente no meu protesto. Meu projeto, você sabe, é o que eu gosto de fazer. Você não tem que segui-lo exatamente. Mas o que eu gosto de fazer é que eu tenho um design baseado em cartão que eu gosto de usar bastante, então nós vamos realmente dar ao fundo uma cor. Então, quando se trata da cor, eu estou realmente indo para usar uma das cores padrão que você encontrar na Fig. MMA. Sabe, eu tenho um sistema de cores, mas eu só quero tornar isso muito simples, muito fácil para vocês. Então nós não estávamos indo para o sistema de cores ou ir Teoh a seção de cores aqui, escolher cores pessoais em iria apenas usar esta cor como nossa cor de fundo, e então vamos criar um retângulo. Então eu pressiono estão no teclado. Você também pode pressionar aqui, então você pode realmente ver os atalhos aqui para as formas, retângulo,
linha, linha, seta Você sabe, o que você precisa. Basicamente. Então criaria um retângulo esticando todo o caminho. E o que eu gosto de fazer é que eu gosto de tirar a cor do retângulo do branco. Você cara Andi também deu uma sombra? Então vamos dar uma gota muito sutil. Shadow vai dar um golpe de dois. Dê-lhe uma distância Y de um e, em seguida, dar-lhe uma capacidade. Bem, sim, eu passo, er cinco, cada cara. Nós também vamos realmente esconder a grade de layout. Veja se há seção de cabeçalho Powersoft. Então, em seguida, vamos adicionar o nosso logotipo. Na verdade, só vou adicionar um texto. Lego Teoh, foodie texto
secreto apenas pressionou o botão de texto na parte superior e nós não vamos realmente ter certeza que isso está dentro da nossa grade. Então, se nós rapidamente apenas colocar em nosso como eu swoop dentro, nós vamos usar figo, o meu site. Apenas faça com que seja mais fácil. Só uma simples perna de texto. Vamos ver a nossa grelha de novo. Hope ficando camada errada em seu cara em. Sim, lá vamos nós. Podemos ver que agora está alinhado com a grade, de modo que a maior parte do conteúdo será alinhada dentro desta grade. Esta grade de layout que eles vêem. Mas não vejo a grade de layout como regra. É apenas um cara, nenhuma regra, então você pode sair dela como eu tenho com o cabeçalho com o cabeçalho de fundo com um cabeçalho. Até fundo. E você pode sair dela quando se trata de luz, chicote
cheio coisas, imagens e coisas assim. Mas é apenas uma boa maneira de garantir que, você sabe, tem margens e espaçamento e tal. É por isso que gosto de usar uma grade de layout. Então vamos esconder a quadra inferior novamente, selecionar nossa moldura e então apenas pressionamos isso para escondê-la. Quando se trata de fontes. Um dos meus fundos favoritos que eu gosto de usar seu Inter se no reboque, Eu acho que só parece fantástico. É um telefone gratuito também, e é projetado especificamente para Web design. Você eu projetar APs como design de interface ou que classificar coisas, e eu acho que ele só parece ótimo. Então vamos mudar o tamanho dele para ser um pouco maior. Tenho que pegar minha grade de layout de novo, , para que eu possa ter certeza que está dentro do layout. Lá vamos nós. Talvez lhe dê algum peso. Semi barco vai fazer com que ele tenha um cara bonito já. Quando de novo? Quando se trata da cor, eu acho que é um pouco escuro demais. Talvez dar um pouco mais de uma cor ótima. Sim, eu gosto desta cor aqui. Eu acho que esse tipo de parece quebrado. Na verdade, pode torná-lo mais escuro. Dê um código hexadecimal de um. A próxima coisa que vamos fazer é adicionar nossa navegação para que nós vamos criar um texto novamente, e então vamos adicionar casa é um deles. Bem, uh, portfólio como o outro, hum, e então também contato. Então eu estou simplesmente copiando e colando estes, você sabe, controle, cópia, cópia comando. E, em seguida, comando V controle V. Apenas Teoh. Crie vários textos, textos ou caixas. Mudaria o tamanho da frente. Então eu estou selecionando todas as camadas. Turno sagrado. E eu estou ajustando as camadas porque eu acho que a frente é um pouco leve demais. Vai fazer com que seja 14. Sim, 40. Nada parece muito bom. Também mudaremos a cor. Teoh Um cinza mais claro. Sim, acho que isso parece muito bom. Então, uma das ferramentas úteis com uma figura projetada para gostar é que você pode realmente alinhar
automaticamente todos os seus itens. Você nunca é itens para ter a mesma distância para estar alinhado verticalmente ou que classificar coisas. Então vamos selecionar todas essas camadas, e vamos usar esta ferramenta aqui para alinhar os centros verticais. Agora estão alinhados. Nós também vamos usar esta ferramenta aqui. Toe arrumado sobre isso dará a cada um desses itens e espaçamento de montagem igual a quantidade igual . Espaçamento é realmente aqui o número 54 pixels entre cada um deles. Mas eu acho que isso é um pouco demais. Vamos descer para 30. E agora ele vai dar 30 pixels entre todos eles e nós podemos alinhá-lo ao nosso layout. Ótima. E lá estamos nós. Esse é o cabeçalho de navegação. Praticamente feito. Então, obviamente, é uma boa idéia. Teoh organizou todas as suas camadas. É o que vamos fazer hoje. Vamos agrupar esta seleção. Vou chamá-lo agora. Bar. Lá vamos nós. E sim, acho que fizemos um bom começo até agora. Parecendo muito bom. A próxima coisa é, vamos arrastar Teoh em uma imagem. Então, uma imagem de perfil ou o que quer que seja. Então aqui eu comprei em uma imagem de mim mesmo. Muito pouca ideia. mídia eu mesmo mudará a largura dela. Então algo como 500 rapidamente, apenas naquele fim de semana. Então, avalie o tamanho com e o resto da página em vez de tê-lo assumir. Toda a página vai ter a grade de layout novamente sobre o que vamos fazer é re tamanho este de modo que ele ocupa um número específico de colunas. Então eu vou segurar o turno que eu vou pegar o canto da imagem e arrastá-lo,
Teoh, Teoh, eu acho que 5 40 anos o que deveria ser. Sim, perfeito. Agora está ocupando seis colunas. Estou deste lado. Você terá o nosso texto. Então, enquanto o meu também fazer é realmente fazer os cantos em torno dele, que você pode fazer muito simplesmente usando o tipo circular Icahn em qualquer quadrado, qualquer imagem, o que quer que seja, nós também podemos rapidamente esconder e mostrar um menor usando o controle. G. Esse é o controle G no Mac. Na verdade, não estou completa. Certamente está nas janelas, mas tenho certeza que é muito, muito semelhante. Então agora vamos pegar nossa imagem e trazer para o topo que nós alinhá-lo. E vamos nos certificar de que o espaçamento é mesmo assim. Por exemplo, vou derrubá-lo em 100 pixels. O que? Eu costumo ter um turno de espera, e então eu pressiono o iraquiano 10 vezes. Então 123456789 10. Agora temos 100 pixels de espaço entre a imagem na barra de navegação. Em seguida, vamos adicionar algum texto. Então vamos obter grade de layout novamente que podemos ver nosso texto para onde o texto vai. Então eu acho que o texto pode realmente ser um pouco próximo demais. Se eu colocá-lo, qualquer coisa escolher o caminho dele, eu realmente vou colocá-lo um pouco mais longe. Então eu vou adicionar texto aqui vai fazer caixa de texto, e então eu vou colocar algo como, hum, hey, na verdade, vamos olhar, você
vai? Um designer criativo da Inglaterra? Vamos fazer algo assim. Muito simples, muito fácil. Vamos mudar o lado disso porque está indo. Queria ser grande e proeminente para o meu povo para Big 36. Parece muito bom. Doce. Vamos esconder a grade de novo. Acho que isso já parece muito bom. Uh, vamos também adicionar um pouco de texto falso. Na verdade, vou controlar copiar e colar. Isso vai dar três pixels fora do espaçamento de cima. Então eu vou colocar um texto falso aqui agora. Um plug no qual eu vou usar para adicionar o texto fictício é um público chamado alarme. É, hum Agora eu vou mostrar rapidamente lá plugging que eu tenho instalado para figo MMA. Então, se você for Teoh lá, eu posso aparecer em ir para plugins e você pode ver qualquer plugue em sua figura que a humanidade tem disponível. Você pode ver os que foram armazenados. Eu tenho ícones de design material, ícones de
penas em mapas Laura naqueles dos únicos plugins têm instalado. Então, vamos voltar ao nosso design de documentos. Vamos usar o alarme. É colocar o cara deles, selecionar algumas camadas de texto. Aqui vamos nós. , Comece,mas feche o bolso. Sim. Gerar todos os caras. Legal. Vamos nos certificar que nosso imposto obviamente não é muito grande porque ele meio que é maior. Vamos mudar o tamanho da frente, Teoh. Vamos mudar para 16. Acho que 16 seria melhor lá também. Sabe, não
parece certo. Texto, geralmente o corpo do texto simplesmente não parece certo quando não é elegante. Então vamos mudar esse Teoh regularmente. E então vamos mudar a cor porque eu não quero. Então seja tão sombrio quanto o título. Então vamos dar-lhe um tom mais claro de cinza, mas ainda parece um pouco fora na principal coisa que vive é a altura da linha. Então, para mudar a linha, eu vamos escolher um texto, e então nós vamos escolher quem temos a altura da linha. Então vamos mudar isso. Então, atualmente, a linha alta é 19. Vamos mudar para algo como 22. Já podemos ver. Parece quieto. Melhor talvez 24. Sim, lá vai você. Acho que isso parece muito mais fácil de ler. Obviamente, não
é em inglês, mas é muito mais fácil. Teoh ler muito mais legível parece mais limpo, bem, então nós poderíamos realmente levar isso até aqui e levar que pode haver ele. Vamos colocar alguns ícones de mídia social. Então aqui eu só arrastei e soltei algumas contas de mídia social que eu adiei da Web . Muito simples. Vamos mudar o tamanho deles. Vou mudar este 1 para 30 Jane que 1 para 30 também, muito bom e depois mudei para 32 Tricon. Lá vai você. Então vamos mudar o distanciamento entre eles. Mas eu acho que é um pouco demais um raspado para 20. Na verdade. Não pense que isso ainda é um pouco demais. Talvez 15. Sim, acho que parece um pouco melhor agora. Vamos arrastá-lo para mim sozinho. Eles não são os mesmos porque estofamento entre eles, vamos mudar a cor porque eu acho que é um pouco brilhante demais. Digamos que podemos mudar para algo como feito. Lá estamos nós. Então essa é a navegação suave por seção herói. É isso para este, e o próximo começará com a seção de serviços
4. Serviços: Então, bem-vindos de volta agora que temos nosso bar em heróis fora da seção terminar, vamos fazer a seção de serviços. Mas também queremos ter certeza de que nossos itens são realmente dobrados e agrupados. Então vamos fazer isso rápido. Vamos chamar isso de seção. Na verdade, só podemos remover a seção. Não precisamos de uma seção que poderíamos chamar aqui. Sei que ficamos legais. Então nós realmente queremos fazer nosso quadro maior para que possamos selecionar nosso quadro clicando aqui ou chutando aqui. E então nós simplesmente dirigimos para baixo e tornamos maior. Vamos torná-lo um pouco maior nós que podemos sentir fora do nosso conteúdo. Lá vamos nós. Legal. Então agora vamos fazer nossa seção de serviços. Então, quando voltamos para a esposa e pudemos ver que temos uma breve descrição dos serviços. Estes círculos são destinados a ser ícones e, em seguida, o serviço sempre que está em uma breve descrição fora desse serviço. Então vamos colocar os serviços de cabeçalho. Vamos trazê-lo para o meio e vamos derrubá-lo 100 pixels. 123456789 10 Você tem apenas de modo que é uma quantidade uniforme em comparação com o herói na
barra de nozes . Além disso, acho que esta diversão é talvez um pouco grande
demais, também. Então vamos mudar o tamanho disso. Mude, Teoh 24 na verdade, 24 eu acho que pode ser um pouco pequeno demais. Vamos mudar isso, Teoh. 30. Sim, eu gosto disso. Acho que já está melhor. O tribunal centrou-o. E, em seguida, abaixo, adicionará uma descrição de serviços. Então vamos mudar o tamanho da frente disso também. Para 16? Sim, o cara. Mude para regular mudar a cor para um isqueiro. Cinza. Algo assim. Todos os caras. Agora, eu poderia apenas colocar em uma descrição rápida, algo assim. Agora vamos colocar um ícone, então eu vou estar usando um dos plugins de figments. Vou usar a ferramenta de ícones de penas. Então aqui estamos nós, com o plugue na minha lagoa vai colocar talvez algo como então eu não vou ser muito bom para resolver. Exigente sobre ter certeza de que eu não posso combinar com o serviço porque, honestamente, eu só estou fazendo isso. Isso é uma demonstração por esse ícone. Então vamos trazer isso. Aqui estamos. Nós o temos aqui. Certifique-se de que esse ícone está no nosso quadro. Eles têm um cara. Vamos torná-lo um pouco maior. Acho que é um pouco pequeno demais. Vamos trazê-lo para cima. Teoh, 48 e com o caminho, quero manter o tamanho da mesma esperança. Sim, queremos restringir as propriedades dele, diz aqui proporções restritas noite mesmo não propriedades e alterar o tamanho do ícone esperança chegou a pequeno 48. Eu ainda acho que o ícone é um pouco pequeno demais em geralmente com ícones como este, porque não é muito detalhado. Você não deveria torná-los muito grandes. Então a melhor maneira de resolver fazê-los ocupar um pouco mais de espaço é adicionar um círculo ou uma forma ou o que quer que seja. Pode estar por trás disso. Então eu vou adicionar um círculo atrás dele como estas camadas Muda para que ele esteja no meio acima mesmo e, em seguida, alinhá-lo e nós já podemos dizer que está fazendo uma enorme diferença. Agora vamos tirar esse círculo uma sombra muito leve, ótimo, algo assim. E então vamos dar uma cor. Talvez devêssemos escolher uma das cores que eles têm aqui. Na verdade, o que costumava começar voou do que vamos fazer é dar o fundo do círculo. Ah, cor azul
claro é, bem, algo assim. Acho que parece muito bom. Bom, rápido que, hum, chamá-lo apenas ícone, algo assim. E então vamos adicionar um serviço. Então, colocamos algo como Web design. Tenha um cara. Eu quero dar 20 fotos fora, banindo do topo. Torná-lo um pouco maior. Talvez seja 24, não 24. Muito grande. Vamos mantê-lo em 18. Também queremos aumentar a nossa grelha de novo porque queremos ter a certeza de que temos tudo aliar correctamente. Então, porque falamos 12 colunas e estamos fazendo três serviços diferentes, então dormir cada coluna vai matar. Cada seção de serviços vai ocupar quatro colunas. Eu digo. Vamos mudar a largura disso para que ele ocupe quatro colunas, cada cara e então isso é o centro. O ícone para isso fará com que o ícone fará o cabeçalho do serviço semi negrito, e então daremos ao nosso serviço uma descrição. Então mude o tamanho da frente, também. 14. Rami é o peso e, em seguida, dar-lhe um isqueiro. Ótimo. Hum e então nós podemos dar em qualquer tipo de descrição com mais de 10 anos de folga quando
experiência em design , eu posso projetar um site antes da sua empresa. Minhas habilidades de direitos autorais não são as melhores, mas estou tentando fazer isso o mais rápido possível. Realmente? Não gaste muito tempo a certificar-se de que é perfeito. Então nós queremos ter certeza é, bem, que a altura da linha novamente parece correta, porque agora o texto parece um pouco compacto demais. Então vamos subir a linha. Eu é um padrão off 17 vai torná-lo 20. Nunca vá ou o que ele parece muito, muito melhor. Então essa é a nossa primeira seção de serviços. Vai agrupar. Ele vai chamá-lo de serviço, e então vamos copiá-lo e colá-lo e, em seguida, trazer o próximo para o meio assim , uh, muito bom. Certifique-se de que está alinhado doce. Em seguida, poderíamos fazer algo como desenvolvimento Web, e então comparamos algo como eu uso hace e-mail CSS bibliotecas de script Java para criar
mais do que e sites funcionais. O que seria anos vai mudar este ícone assim novamente. Vamos ligar os ícones de penas, e então vamos encontrar talvez um ícone relevante, algo que deve parecer legal. Uh, o que poderia parecer bom? Oh, eu gosto deste. Isso é perfeito, na verdade. Site, vamos trazê-lo. Parece muito bom. Legal. Uh, vamos mover as camadas ao redor. Então nossa vida anterior, quase 48 quando eu me certifico que este também é 48 proporções de restrição mudar o tamanho para 48 como, digamos, e então enviado para ele. Bem, na verdade use uma cor diferente para este ícone. Talvez vai usar verde que ela é verde e, em seguida, nós também vamos dar-lhe diferente sombra como tão legal Cu u u Cu Cu próxima seção de serviços deve fazer que cópia agradável e colar lá nós somos enviados para ele e, em seguida, vamos chamá-lo de algo como mídia tão certeza. E então colocamos algo como usar as mídias sociais como em levar sua marca insistente. Posso ajudá-lo a alcançar milhões de marcas em todo o mundo. Estou mesmo a inventar coisas por aqui. Parece ridículo, mas
funciona, então, de novo, vamos adicionar outro ícone. Usados os ícones de penas conectam. Então acharemos relevante. Posso saber o que está bem? Só usamos este. Cada cara que colocaremos no ícone do mundo vê aqui ou globo. Nem consigo Onda. Vamos pegar este ícone do Globo. Envie para ele. Lembre-se do layout uma restrição proporções redimensionar 48. Qualquer cara mudará a cor. Claro, vamos dar este laranja,
vermelho,laranja vermelho, Vamos dar-lhe
laranja e, em seguida, dar-lhe um fundo muito claro como então pode realmente ter que torná-lo um pouco mais escuro porque é um pouco brilhante lá nós temos. Sim, acho que parece muito bom. Agora vamos trazer nossa seção de serviços para cima do meu serviço fora dos vasos, trazê-los para cima e então nós vamos dar-lhes 50 pixels. Um Teoh 345 50 Fotos de preenchimento entre a seção de descrição do título e lá estamos . Ou seja, nossa seção de serviços é boa. Todos juntos rapidamente. Sanders é doce. Então é isso para a nossa seção de serviços. Isso é tudo para este. Em nosso próximo, vamos estar lidando com a seção de portfólio
5. Portfólio: Eu digo, vamos criar nosso primeiro item de portfólio. Então uma coisa que eu notei com o que com o meu quadro de arame é que eu tenho o item de portfólio, mas não há nenhum tipo de descrição de título do que ele é, então eu estou realmente indo para projetá-lo em um tipo de cartão antigo como eu fiz com o Navajo. O topo. Então, bem, primeiro uma cópia. Ou o texto, o título e a descrição dos serviços, e traremos isso aqui. Lá vai você. Certifique-se de que tem 100 pixels. Acolchoamento de ar do topo. 123456789 10. Legal. E então veremos. Nós nomeá-lo colocar para o I outro vai selecionar descrição. Sinto peças selecionadas nas costas. Legal. Quem? Minha ortografia está correta. Sempre me engano às vezes, só uma daquelas palavras em que você não sabe se eu vou primeiro com vocês primeiro. Então vamos fazer o nosso primeiro cartão. Então, indo para bater o nosso para fazer um retângulo mais vai mostrar ocorreu novamente para ter certeza que estamos dentro do criar sobre ele parece nos Andes. Pegue seis colunas por isso vai ser 540 com a altura, um, vamos realmente começar com a nossa imagem. Então, se nós fizermos a altura dele 300 muito cara, eu acho que está parecendo muito bom. E então damos um fundo branco. Na verdade, tenho apenas o fundo. Não importa, porque vamos colocar uma imagem aqui. Então eu só vou pegar algumas imagens do meu próprio portfólio de drible. Vamos puxar este, por exemplo. Isso é apenas copiar esta imagem em colá-lo em tão automaticamente Fig Maher guerra. Basicamente sentir que o retângulo com sua imagem, que pode ser muito, muito útil. Então eu basicamente apenas mascara que é fácil ir imediatamente. Fácil para você imediatamente. Então essa é a imagem do nosso portfólio, mas queremos adicionar uma descrição do título na parte inferior. Então, hum, eu deveria adicionar outro retângulo. Certifique-se de que está alinhado com a imagem de um cara, e eu vou colocá-lo debaixo da imagem, dar-lhe um fundo branco, e então novamente, eu vou realmente dar-lhe uma sombra. Então, uma sombra solta desiste, permite a um Y eixos um e depois dá-lhe um I passar ity de 5%. Lá vamos nós. Eu gosto muito do olhar quadrado fora, mas não combina com a minha imagem de perfil. Então eu vou voltar para a minha imagem de perfil e remover o raio. Só para você combinar melhor, acho que fica mais nítido. E eu estou indo para um tipo mais. Olhe sério. Cantos arredondados definitivamente dar-lhe mais de nós são brincalhão. Olha, eu encontrei. Então agora vamos adicionar o título do item do portfólio. Vamos fazer um tipo de texto caixa de texto na camada de texto e vamos chamá-lo. Como é que eu lhe chamei? Meu trabalho por telefone. Eu só chamo de revista Block Template vai chamá-lo site Venice Prata. Sabe, só porque estou tirando o que vejo aqui. Então nós também vamos Teoh, certifique-se de que ele está alinhado corretamente. Então vamos dar um pouco de preenchimento, então vamos dar-lhe 30 pixels da esquerda. 123 e, em seguida, eles fotos do top 23. Na verdade, acho que poderia fazer com mais estofamento à esquerda, então vamos dar mais um. Bem, mais
10 pixels da esquerda. Muito bom. Vamos torná-lo maior porque eu acho que é um pouco pequeno demais. Vai fazer com que seja 18 ou o Texas realmente se aliando. Teoh estar no meio linha linha de textura centro linha textura linha esquerda. Lá vamos nós. E então isso é tentar ver a frente, porque qualquer um vai ficar onde está. Dê um pouco de peso e, em seguida, vamos copiar colar esta camada de texto. Estou dando a uma categoria algo como Web design, e então mudamos a diversão disso. 12. Removemos o peso. Mude a cor para algo como todos os caras. E depois vamos derrubá-lo. 10 seleções Fonte. Altere isso para que você o tenha alinhado. E lá vamos nós. Temos nosso primeiro portfólio mais branco. Agora vamos colocar tudo em um Greep porque queremos ter certeza de que nossas camadas estão todas ordenadas bem. Isso é legal e item do portfólio, e então nós podemos copiar e colar isso sobre. Traga-o e certifique-se de que está na linha. Toe concordou que é, e nós temos o nosso item de arquivamento do porto. Agora queremos alterar esta imagem para que possamos escolher a imagem provável tem aqui, ou poderíamos apenas obter outra imagem e copiar e colar. Então vamos fazer isso. Vamos pegar este pode ser baseado em imagem. Oh, isso não é o que Copy? Colar imagem. Lá vamos nós. Agora nós colamos nossa imagem em Realmente mudar a maneira, até mesmo recorta a imagem dentro do quadrado no retângulo. Aposto que vou deixar. Como é que é? Lá vamos nós, e então vamos renomear este também. Vamos chamá-lo de algo como Pion e Magazine. Vamos deixar a seção Web design e, em seguida, vamos terminá-lo criando feminino o que colocar mais 40 itens. 123 Certifique-se de que ele está sem forro e tem uma quantidade igual de preenchimento para este portfólio. Itens realmente colocarão em uma foto, então vamos colocar essa em. Lá vamos nós. Então vamos colocar em algo como iPad 30 uma capa renomear isso para fotografia Sweet e então vamos fazer mais um. Então, para mostrar rapidamente o quão poderoso mudar a imagem aqui, eu estou realmente selecionando este retângulo aqui. Você pode vê-lo selecionado em. Então eu comando copiou minha imagem da minha área de trabalho, e eu sou literalmente apenas colocar no comando V em ou controle V, e ele apenas substitui imagem. muito simples, Figuramuito simples,
muito fácil torna super fácil para suas imagens lugar estúpido sempre que você precisa de trabalhos. Base montada. Eu tenho um cara. Então é isso. Temos a ressecção do nosso portfólio feito desta forma principais alinhados provavelmente a partir do topo. Então 12345 Legal. Vamos fazer escolha dentro da nossa grelha. - É. E terminamos com nossa seção de portfólio. Vamos ter certeza que isso também está no centro de distância. Isso não estava no centro. Lá vamos nós. Então, para ter certeza que seu item está neste centro de estado de uma página, você pode simplesmente selecioná-lo e, em seguida, usar uma dessas ferramentas aqui em cima, alinhá-lo, rasgar a página ou alinhá-lo com outro item. Então é isso para o aeroporto para, na verdade, precisamos do Teoh. Este grupo nossos itens também colocar cinco e lá. Sim, temos nossa seção de portfólio feita. Então é isso para este. No próximo, vamos projetar o instalador
6. Rodapé: Ok, então bem-vindo de volta. Agora que temos uma boa parte do nosso site para baixo. A última coisa a fazer é aquele pé uma seção. Então o instalador tem o fundo grande. Tem exércitos Seção Jaime são título breve descrição e, em seguida, no botão de contato. Então vamos fazer nosso quadro muito maior. Vamos dar um retângulo. Agora temos o nosso montador. E então vamos ter certeza que não tem o mesmo espaço entre as outras seções. Na verdade, acabei de perceber que a exceção do portfólio não tem 100 tipos de fotos. Lá vai você. Isso é melhor. Então, sim, vamos ter certeza que tem 100 fotos com Phoenix Seção 123456789 10. Reduza 100 pixels e, em seguida, vamos dar-lhe uma cor de fundo escura. Está ainda mais escuro do que isso. Devem ir para algum lugar como se nunca fossem. Isso também é copiar nosso hexadecimal dos cabeçalhos das outras seções dizem que também precisamos ter certeza de que é legível, então vamos mudar a cor do texto como dizer que temos e então vamos trazê-lo para baixo pelo que ele fez. Eu nem sei. Na verdade, vamos acabar com isso. Eu acho que você deveria trazer para baixo em 50 dinheiro para trazê-lo para baixo por mais. Talvez 81 2345678 Sim, acho que parece melhor. Então vamos mudar isso. Miami. Muito bom. Eu por você. Próximo projeto. Nós legal. Agora queremos adicionar um site de botão novamente. Coloque em um retângulo como, digamos, não precisa Não precisa ser muito exigente sobre o tamanho e qualquer outra coisa que possa ser para Button . Mas vamos colocar uma cor para a manteiga. Sim, eu gosto dessa cor. Talvez. Deus, uma noite vamos entrar em contato comigo. Então tudo isso parece muito legível, então vamos torná-lo branco. Andi, torná-lo um semi-ousado como, digamos, isso também é tornar o botão um pouco mais largo. E então o texto central dentro de qualquer cara. Legal, eu acho. Sim, bem, mantenha o desenho quadrado. Eu acho que o design quadrado parece muito bom. O que também poderíamos fazer é mesmo que tenhamos um botão de contato comigo, mas também poderia colocar um silêncio. 123 Sim, nós também poderíamos colocar talvez algo como baixar meu regime por baixo. Suspiro. Lá estamos alterando o tamanho da fonte Teoh 12. Sim, talvez fazendo regularmente. Vamos mudar a cor também de algo assim. Eles somos, então lá estamos nós. Temos o pé de feito e isso é praticamente tudo para este site pessoal muito básico . Espero que lhe dê uma boa idéia fora do meu sal trabalhou processo tardio e como é fácil
fazer algo que você olhar, você sabe, muito simples. Minimalista, Também bom ao mesmo tempo. Você sabe, você não precisa fazer seu portfólio anúncios super chiques, todo tipo de animações. Você deve fazer o seu trabalho falar com certeza. Então eu seria caras apreciado este rápido sough guia de design site pessoal espero dar-lhe uma boa visão e excessivamente, você sabe, se você está interessado em obter um design, que é uma boa maneira de começar, porque eu acho a melhor maneira de aprender que ela faz algo Obrigado por assistir isso seria caras apreciado
Oliur, Designer and creator.
