Bootcamp: conceitos básicos de layout e fluxo de trabalho | Shawn Barry | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Bootcamp: conceitos básicos de layout e fluxo de trabalho

teacher avatar Shawn Barry, Creative Director, and Educator

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

9 aulas (1 h 24 min)
    • 1. Vídeo 01 Introdução e objetivos de curso Habilidade

      2:27
    • 2. Vídeo 02 Descrever o projeto

      3:31
    • 3. Vídeo 03 Revendo os ativos

      8:58
    • 4. Vídeo 04 Configurando nossa página para o processo de layout começar

      16:48
    • 5. Vídeo 05 cartaz e design de cartão postal

      13:20
    • 6. Vídeo 06 Área de trabalho de site

      21:12
    • 7. Vídeo 07 Site Telefone inteligente

      13:35
    • 8. Vídeo 08 recover e conclusão

      1:34
    • 9. Vídeo 09 o que vem ao lado

      2:32
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

1.349

Estudantes

--

Sobre este curso

Neste curso, você vai inserir um bootcamp para layout de página e fluxo de trabalho profissional básico, usado por profissionais da indústria criativa. Como designer gráfico, é igualmente importante trabalhar com arquivos, ativos e criativo de forma organizada, pois é criativo. Cada designer, diretor de arte e diretor criativo sabe a importância de arquivos bons e fluxo de trabalho. É o ingrediente chave que separa os profissionais dos entusiastas. O talento não vai conseguir esse próximo show, se você não trabalha como um profissional. Este curso vai colocá-lo no caminho certo.

429461b9

Conheça seu professor

Teacher Profile Image

Shawn Barry

Creative Director, and Educator

Professor

My name is Shawn Barry, and I'm a creative professional with over 30 years experience. I'm also partner and Creative Director at a small boutique agency in Toronto Ontario Canada, called Booster Rocket Media.

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Vídeo 01 Introdução e objetivos de curso Habilidade: uma participação de habilidades. Meu nome é Shawn Berry, e eu sou um profissional criativo com 30 anos de experiência, e eu também sou um parceiro e diretor criativo em uma pequena agência boutique aqui em Toronto, Ontário, Canadá chamado Booster Rocket Media, onde fazemos todos os tipos de coisas legais, como design e desenvolvimento de sites. Fazemos vídeos. Fazemos animação e publicidade, tradicional e digital. Então eu fiz de tudo, desde artistas de estúdio até diretor criativo em algumas grandes agências aqui no Canadá também. Então eu vou tentar trazer um pouco dessa experiência para vocês neste primeiro curso, que é chamado de Layout Basics. Então, o Layout Basics vai ser uma espécie de campo de treinamento para um fluxo de trabalho profissional. Não vai ser muito sobre design e tipografia, embora vamos criar um pouco disso. Mas eu vou me concentrar principalmente em como preparar seu trabalho para que faça sentido quando você realmente vê-lo, seja na Web ou na impressão, porque são todos os tipos de pequenos truques que você precisa saber para criar corretamente seu design. Porque tantos iniciantes e até mesmo profissionais que têm feito isso por como 5 10 anos vão se deparar com o mesmo problema onde você projetar em sua tela e algo olha para cima de perto. Parece longe, mas não é relativo. Você não está pensando onde ele vai estar em uma parede, a 3 metros de você ou, você sabe, em um outdoor do outro lado da rodovia ou em um pequeno dispositivo que você está olhando. Então, essas coisas têm um efeito sobre o processo de design bastante significativamente em um bom fluxo de trabalho profissional pode ajudá-lo a evitar os problemas de ter um cartaz com ah lutou tão grande. Por alguma razão, isso não faz qualquer sentido visual ou estar em um smartphone, mas não ser capaz de ler nada porque é muito pequeno. Vou mostrar-te todas as formas que precisas para contornar esse problema. Mas também vamos fazer um design legal no processo, então esse seria o ponto. Agora. Eu não vou te ensinar nada sobre ilustrador ou Photoshopped aqueles dos aplicativos que eu usei para criar este material, mas você pode usar gam pobre CorelDRAW ou qualquer outra coisa que você pode usar que você pode realmente criar porque vamos nos concentrar no fluxo de trabalho em si, não no software ou nas técnicas. O que quer que tenha sobre o que quer que esteja confortável, é isso que pode fazer. E eu também criei alguns trabalhos de design para você. Então vamos trabalhar com coisas que eu criei, que eu vou mostrar a vocês. Mas você pode me acompanhar ou criar o seu próprio. E eu vou te dizer como você pode fazer isso, porque estou muito animado para começar meu primeiro curso, então vamos começar. 2. Vídeo 02 Descrever o projeto: Certo, vamos ao que interessa. Acontece que é uma bela tarde de sábado aqui em Toronto, Ontário, Canadá. O sol está fora, e isso sempre me faz pensar em música. E, uh, também me faz pensar em trânsito como você vai ocasionalmente aqui, um bonde à distância gritando muito dolorosamente em uma cidade de milhões. Como Toronto. Temos um enorme sistema de trânsito, que, aliás, dá a volta ao meu prédio e volta para o outro lado. Então não há nada que eu possa fazer para parar o barulho. Então, ocasionalmente, você ouve um grito louco no fundo como o trânsito. Nada que eu pudesse fazer sobre isso. Vamos continuar com isso. Então, música. Todo mundo adora música. Adoro música. Você ama música. Então vamos usar a música como assunto, porque isso é realmente ótimo. E falando em música, meu sobrinho tem uma banda, que se chama Gracie talvez não. Meu sobrinho e seus colegas de banda estão lá. Eles são punks, mas eles são bons caras e eles fazem boa música. Bom canadense, Anna, rock alternativo. E eu vou te mostrar onde você pode ouvir isso no próximo vídeo. Mas eles são nossos clientes por hoje. Agora, antes de eu entrar nisso, se você preferir seguir sozinho e encontrar uma banda diferente, talvez seja sua banda favorita. Não importa quem seja. Você pode encontrar algumas imagens online, e você pode acompanhar o meu material, mas projetar suas próprias coisas. Se você quer fazer isso, isso é sólido. Mas se você quiser me acompanhar pela primeira vez, eu criei todos os recursos que você precisa, e você poderia apenas seguir junto com os vídeos e seguir meu processo, e você ainda será capaz de criar algumas coisas legais que você vai se orgulhar de. Mas se você quer fazer sua própria coisa, a do incrível. Então o objetivo do nosso curso é Gracie Mei vai ter um show. Agora é uma banda de verdade. Eles realmente fazem shows, mas esse show é falso. Nós fizemos as pazes para o propósito deste curso, então o concerto vai acontecer e eles precisam de um cartaz e de alguns cartões postais. E aqui está como esse ar vai se parecer. Então o cartaz tem 11 por 17 polegadas, e o cartão postal tem 5 por 7 polegadas, então o cartaz pode estar em uma parede em algum lugar. E o cartão postal que vão distribuir. Eles jogam um pouco de sua mochila quando eles estão fora da porta, e eles os entregam para seus fãs quando eles os vêem. E então eles vão promover o show dessa forma. Mas isso não é suficiente. Vamos supor que não há nenhum site porque eles nunca precisaram de um antes. Mas agora eles estão ficando populares e nós precisamos construir algo para que as pessoas possam realmente ver quem eles são e eles podem ver a promoção do show chegando, que é Ah, coisa realmente útil para ter em seu site, claro. Então vamos construir o cartaz e o carro postal, mas também vamos fazer um site totalmente responsivo. Agora vamos focar apenas na área de trabalho de tamanho completo e, em seguida, a menor visualização do smartphone. Então vamos nos concentrar nessas duas coisas e na resposta do mundo. Há várias etapas que um site pode ir para baixo, e você tem que considerar essas coisas no design. Mas não vamos fazer isso. Vamos nos concentrar apenas naqueles dois e nas duas peças criativas que falamos para imprimir. Então eu vou primeiro te mostrar como configurar suas páginas e então como todas essas coisas funcionam para mantê-los juntos e na linha quando você está projetando seu trabalho e você vai evitar todas as armadilhas que falamos, como as coisas sendo muito grande em um cartaz muito pequeno no site, todo esse tipo de coisas boas. Então a próxima coisa que vamos fazer é passar por todos os ativos e dividir o que temos em nossa pasta do projeto, que está disponível na página do projeto para você baixar e usar. E nós vamos fazer sentido com essas coisas e realmente fazer algum trabalho de design. Então vamos sentar-nos, preparar-nos para começar a trabalhar. 3. Vídeo 03 Revendo os ativos: Certo, vamos começar agora, então a primeira coisa que queremos fazer é rever os bens. Agora, dependendo de como seu cliente enviar os ativos em qualquer projeto ou se você está fazendo seu próprio projeto coletando seus próprios ativos, você pode obtê-los por e-mail. Você pode fazê-los passar, nós transferimos, você pode fazê-los passar. Ah, você sabe, algum tipo de bastão ou um disco ou sabe-se lá o quê. Então eu criei essas pastas para você, então eu vou te mostrar minha estrutura. Quero que use essa estrutura e duplique isso em seus projetos futuros. Você tem isso, por enquanto, nos arquivos do curso. Mas, Mas, apenas preste atenção. Vamos passar e você verá do que estou falando. Mas vamos rever como todos os ativos estão organizados e o que isso significa. E eso, eu tenho material que eu projetei para você. Claro que sim. Agora você pode usar meu material, e você pode projetar exatamente o que eu criei usando os ativos que criei e seguir o processo. E não faça nenhum novo criativo você mesmo, se quiser. Você também pode recriar os ativos da banda que eu construí. Talvez você queira fazê-lo um pouco diferente com cores ligeiramente diferentes. Você pode se sentir livre para, claro, fazer isso também. Toda a matéria-prima está lá para você. E se você é experiente em loja de fotos, você quer dar uma chance. Você pode ir em frente e fazer isso, e eu vou te mostrar quando entrarmos nisso. Algumas dessas técnicas que eu uso para construí-la. A outra opção, claro, como falamos, é que você poderia apenas encontrar sua própria banda. Você poderia pegar suas imagens da rede, pegar seu logotipo e substituir Gracie May por qualquer coisa. E isso é totalmente legal. E apenas se você fizer isso, apenas organizá-lo da maneira que eu organizei e você verá como nós entramos nele, como tudo isso funciona. Então, vamos ao que interessa. Então aqui estamos nós, o localizador na pasta Project Dash. Isso está disponível para você através da página do curso. Você será capaz de baixar isso e obter todos os recursos aqui tão rapidamente. Esta é uma estrutura de pastas que você deve seguir esta estrutura, a propósito, para seus projetos Algo semelhante a isso. Talvez não exatamente. Palavra por palavra, mas cópia. Imagens, layout, Photoshop, Russos é algo um pouco diferente. Vou explicar em um momento. Normalmente você não teria isso. E provas, que também podem ser chamadas de pdf Sore renderiza se você estiver trabalhando em vídeo. Então, dentro da pasta de cópia, você vai ver três decks diferentes. Acontece que tenho esses abertos nas docas do Google. Mas você pode apenas olhar para os arquivos e eles ficarão exatamente assim. Temos o contorno do curso, layout da página, contorno do traço é o nome desse arquivo. E este não é um arquivo que você precisa. Não há cópias aqui que você precise. É apenas um pouco de um colapso no próprio curso. Um pequeno lembrete aqui. Se você ler isso novamente mais tarde, daqui a seis meses, você quer revisitar este material. Só um lembrete de como nos aproximamos. Então, primeiro lugar, temos um deck de cópias para os elementos impressos, então este será o cartaz e o cartão promocional. Então nós temos uma cópia de detalhes de título, pequena cópia e visuais, e vamos passar por isso quando atingirmos os layouts, e da mesma forma, temos o deck de Web design, que tem um pouco mais de informações sobre ele, porque há mais para se comunicar na Web. E, uh, isso não é um recurso nas pastas que você vai encontrar, mas eu queria mostrar muito rapidamente alguns sites que você vai querer usar, e nós vamos para a pasta com imagens em um momento. Mas você quer fazer uma pesquisa rápida do Google para fonte folha de fraude impressionante. Você verá que há esta página cheia de todos esses pequenos ícones e símbolos, e o ponto disso é que este é um fundo da Web. Assim, seu desenvolvedor, quando você trabalha em um projeto da Web, pode realmente incorporar todas essas grandes formas, especialmente se você chegar ao fundo. Você verá que há o pássaro do Twitter aqui no pássaro do Twitter. Dentro do ícone do copo da caixa. Há um ícone do Facebook no EFS. Isso é tudo alfabético, então se você estiver em F em, você verá taxa. Aqui. Há FAA, que significa fonte impressionante Facebook Dash F, e que está ao lado do símbolo do logotipo real do Facebook. Portanto, esta é uma pequena ferramenta útil para ter quando você está fazendo coisas de desenvolvimento da Web porque esses ícones são úteis, você verá como nós os usamos em nosso Web design. Eu também quero mostrar esta página, que é gracie mei dot band camp dot com barra de música. Esta é a página do acampamento da banda dos meus sobrinhos. Gracie May. Agora vamos representá-los em nosso design como álbuns completos, mas é claro que não são. Se você clicar no afundamento, você terá uma faixa, que é o afundamento. E, E, ao clicar nos outros, verá que havia uma faixa. Uma ou duas delas têm duas faixas, mas eu encorajaria você a vir aqui, ouvir a música, ter uma noção do que elas são, e isso vai ajudá-lo com o processo de design para imaginar o que você quer. E também é divertido. Teoh apoiar a banda por um par de faixas, se você gosta, mas de qualquer maneira, é onde você pode ouvir a música. O outro recurso da Web. Nós vamos usar suas fontes triplas w dot google dot com barra. Existem alguns fundos do Google que você precisará aqui. Nós estamos indo. Teoh, use alguns deles, que eu identifico quando entrarmos no trabalho de design e você virá aqui e você pode realmente adicioná-los à sua coleção e clicar em usado para baixá-los e instalá-los em seu sistema. Se você fizer uma pesquisa rápida do Google no Google Fonts tutorial, você verá como são fáceis estes para usar essas fontes Air Web savvy, que é importante para o que vamos fazer. E estes também são gratuitos e totalmente disponíveis para você usar de qualquer maneira que você gosta. Você pode usá-los na Web, e você pode usá-los em sua impressão e design em sua área de trabalho, e eles são um ótimo recurso. Então é isso que vamos usar na Web Now. Vou até o localizador e voltar para a pasta do projeto. Aqui estão os decks de cópia ou o que começamos com dentro da pasta Imagens. Quero mostrar-te isto rapidamente. Temos imagens de banda. Estas são uma variedade de estacas J de ah, a banda e várias fotos de concertos que vamos usar e, uh, explorar em nosso design. Um pouco de S. Então temos algumas coisas legais lá. Nós temos o que eu chamo de CDs, e estes essencialmente vão representar nossas capas completas do álbum. Quando entrarmos no design do nosso site, você verá como isso funciona, e ocasionalmente verá aqui que incluí um arquivo psd ponto. Sempre que você vê isso, é porque eu incluí um arquivo em camadas que você pode usar se quiser. Se você tiver Photoshopped, caso contrário, você pode usar essas estacas J planas. Aqui temos o logotipo da Gracie Mei, que é a nossa marca de palavras, essencialmente, que vamos chegar no vídeo de design. Temos imagens promocionais ao vivo, então essas são as imagens que estão associadas ao próximo show ao vivo, e temos AH, Safari Browser Window aqui, que mostrarei como isso funciona. Assim que chegarmos às imagens do tema do design do site, a imagem principal da banda, vamos chamá-lo. Isto é o que vamos usar para representar a banda, não especificamente um álbum ou uma performance. Just Hey, este é Gracie Mei, e é um pouco de um tiro criativo e algumas miniaturas vlogs que usarão no Web design você quer ver uma pasta Layouts aqui, que vamos obter Teoh dentro do tutorial si e Photoshopped rushes. A razão pela qual eu incluí isso é que há realmente um pincel de respingos, que é uma corrida Photoshopped que você pode instalar. Você poderia fazer uma pesquisa rápida no Google sobre como instalar um pincel na loja de fotos, e é um pincel de efeitos especiais que vai nos dar esse padrão de respingos. Vou te mostrar como funciona assim que entrarmos nisso. E provas é onde nós realmente vamos salvar nossos pegs J ou provas PDF que queremos mostrar ao cliente mais tarde que queremos lembrar. Estas são as versões que fizemos na terça, e talvez tenhamos outra pasta que diz quarta-feira, e se tivéssemos alguma revisão. Estas são as versões que fizemos na terça, e talvez tenhamos outra pasta que diz quarta-feira, e Então esses são os ativos nas pastas que vamos usar para criar todas as nossas coisas boas , e, uh, uh, eu só quero orientá-los através dessa estrutura para que você tipo de saber o que temos que trabalhar com. Ok, então agora que temos todos os ativos, meio que podemos realmente começar a construir arquivos, mas não vamos fazer nenhum trabalho de design ainda. Nós não vamos realmente começar a construir criativo, mas vamos preparar o criativo para que possamos realmente construí-lo inteligente e em contexto para a porta View e a View Port é na verdade um termo que se relaciona especificamente com o num dispositivo portátil ou no monitor do computador. Essa é a definição real de uma porta de visualização. Mas eu vou usar Vieux Port em um sentido mais amplo, porque e se você estiver olhando para aquele cartaz naquela parede a 10 metros de distância? Há uma consideração de porta de visão lá, também. Quando entrarmos nisso, mostrarei como tudo isso funciona. Mas o primeiro trabalho é construir arquivos adequados em preparação para isso. E há outras pequenas armadilhas. Nós vamos andar por aí em preparação adequada também. Eu vou discutir esses dois, então eu vou ver quando o próximo vídeo e nós vamos começar a construir arquivos 4. Vídeo 04 Configurando nossa página para o processo de layout começar: Agora que todos os nossos recursos estão organizados, vamos começar a construir arquivos porque temos arquivos impressos. Agora que todos os nossos recursos estão organizados, Há certos problemas em torno da impressão, tanto no corte quanto na visualização que precisamos saber. Vou falar brevemente sobre essas coisas, e assim que tivermos o design, vamos, você começará a ver como elas funcionam. Mas por agora, vamos construir os arquivos em preparação para isso e para o site. As considerações são um pouco diferentes, mas ainda estão relacionadas com o mesmo tipo de coisa. O cartaz, que está a uma distância muito grande, tem desafios de design diferentes do que olhar para algo em uma tela de desktop versus um smartphone. Então vamos construir arquivos inteligentes e preparados que nos dão diretrizes para que possamos entender como as coisas foram consumidas e como podemos ter certeza de que enquanto olhamos para elas na tela, não importa se é um smartphone, se é um site de tela em tamanho real ou se é um cartaz na parede, vamos garantir que é todo o tamanho adequado e contexto adequado para qualquer que seja a peça acabada . Então, vamos entrar no assunto. Vou te mostrar o que quero dizer, então vamos começar com um cartaz. Este cartaz é de 11 por 17 polegadas impresso, então alguns cartazes podem ser de 24 por 36 em tamanho real. Normalmente, existem alguns cartazes que são muito maiores, é claro, dependendo do local e do que você precisa. Pôsteres de filmes, coisas assim. Mas 11 por 17 seria um tamanho padrão para uma banda independente. Eles não querem gastar uma tonelada em barras de impressão, e locais de música geralmente não lhes dão muito espaço para exibir. Então, 11 por 17 é o tamanho que funciona para nós. Então, como esta é uma peça impressa, há algumas coisas no processo de design que queremos estar cientes. Então vamos configurar nossa página com essas coisas em mente. Então eu quero que você comece um novo arquivo no que quer que seja um programa que você escolher usar. Estou usando o Illustrator CC 2014, então vou selecionar polegadas. Vamos usar tablóide, que é de fato, 11 por 17. Então eu quero que você vá em frente e arrume isso. Agora o que vamos fazer é adicionar Sangramento. Sangrar, se você não sabe, é a área ao redor da borda externa do seu layout e eu vou te mostrar por que isso é importante. Em apenas um momento, a guia avançada lhe dará algumas opções de modo de cor. Nós vamos escolher C M y que para o cartaz, e isso é porque é impressão versus Web, e eu não vou entrar nas diferenças lá em nenhum grande detalhe. Mas saiba que C. N Y. K significa ciano, magenta, amarelo e preto, que são as tintas que são usadas em uma prensa de impressão para recriar cores com tinta. Mas RGB é vermelho, verde e azul, que é um Wilmore fotográfico, com precisão de cor baseada em luz. Assim, no mundo C m y que todas as cores combinam para criar preto no RGB, todas as cores combinadas para criar branco. Como a luz em combinação se torna muito mais forte, Inc em combinação se torna muito mais escura, então precisamos tipo de saber que é o caminho que estamos trabalhando. Não é o fim do mundo se você fizer uma paz de impressão e RGB, mas vamos ficar com C M. Y Que porque essa é a maneira correta de fazê-lo. Estávamos sangrando montamos nosso tablóide e clicamos. OK, agora a outra coisa que eu vou fazer é ligar minhas réguas, o que você pode fazer no Adobe Illustrator com Command plus R for Ruler. E o que eu vou fazer é ampliar a página apenas um pouco o suficiente para que eu possa ver meus números de régua um pouco mais de perto e você verá que isso é obviamente zero dedo um, que significa que é 1/2 o que significa que isso é 1/4. Então vamos arrastar uma diretriz para 1/4 dentro da borda da mesma forma na régua do lado . Aqui, vamos pegar nossa aerodinâmica também. Você verá que estavam em 1/4 de polegada. Eu vou fazer o mesmo deste lado e o mesmo ou duvido do fundo do meu layout. A razão pela qual eu fiz isso é porque as bordas externas desta página eu acontece de saber porque a impressão é um processo onde a tinta é colocada na página e, em seguida, as páginas cortadas com grandes cortadores. Você os vende, imprime algo em uma folha de papel, 11 por 17. Isso será em uma folha de papel patrono muito maior, e eles colocariam vários desses todos alinhados de uma certa maneira para torná-los mais eficientes impressão. Então vamos usar o que é chamado de Sangramento para estender a tinta além da guarnição, que nos permite evitar os erros. Se o cortador não for 100% preciso, não queremos um pedaço de página sem tinta, então usamos sangria agora. Da mesma forma , Teu lado da página. Eu tenho uma margem definida para 1/4 de polegada. Isso pode ser meio de polegada, mas eu sei que 1/4 é suficiente, mas eu realmente sinto que eu quero jogar pelo seguro. Vou passar para 1/2 por hoje. Vamos movê-lo para 1/4 e viver perigosamente S. Então vamos usar isso como uma diretriz para nos avisar. Não coloque nada importante fora de 1/4 polegada. Agora isso pode parecer muito simples quando você considera todo o espaço dentro daqui. Mas dependendo do seu design, pode não ser tão cortado e seco e você verá como começamos a construir nossa página. quão perto chegaremos agora vamos salvar isso. Então, em nossos layouts, temos nossos arquivos originais, que não vamos sobrescrever. Mas vamos chamar de concerto da Gracie May. Eu não posso apertar hoje. Então agora vamos começar o nosso cartão promocional. Porque se você se lembra de nossos arquivos do Photoshop, se eu virar para o cartão promocional, nós temos agora Ah, peça horizontal, que é cinco polegadas por sete. Na verdade, você diria corretamente que sete por cinco. Você sempre descreve as dimensões de impressão e com a primeira altura Em segundo lugar, isso é apenas uma coisa padrão que evita que você recupere o tamanho errado e seus materiais impressos. Se você pedir um cinco por sete, você pode ter um choque. Então é um cartão promocional de sete por cinco. Então vamos voltar para o Illustrator. Vamos dizer sete polegadas de largura por cinco polegadas de altura. Mais uma vez, sangramos. Meus ilustradores já preencheram a hemorragia da minha última entrada. Já está ajustado 2 polegadas. Você vai querer verificar essas coisas em seus respectivos programas de layout. Se você não estiver no ilustrador mais uma vez, queremos C M Y K. Podemos ir em frente e pré-preencher o nome do arquivo, que faremos agora, vamos chamá-lo assim. Você poderia dar outro nome semanticamente similar, se quiser, mas eu vou aceitar isso. Então, Então, agora vamos fazer a mesma coisa. Queremos mostrar a nossa régua e vamos ajustar nossa segurança mais uma vez para 1/4 polegada, todo o caminho e você pode ver que nosso sangramento está lá também, que é o que nós queremos. Então agora eu vou apertar salvar porque nós pré-preenchemos o nome do arquivo, mas nós não salvamos ainda. Então, vamos salvar esse arquivo agora para nossa página web. Vamos montar um arquivo agora também, mas vamos fazer isso um pouco diferente. Então vamos começar um novo espaço de cores RGB do documento, e vamos definir nossa medida dois pixels e assim com pixels foram realmente definir uma dimensão de 1900 e 20. Então vamos definir 3000 pixels para a altura. Agora, não precisamos de nenhuma hemorragia, um espaço de cor RGB, o que é bom. Vamos pré-preencher o nome do arquivo com todas as nossas dimensões no lugar, vamos acertar. Está bem. Agora, mesmo que não tenhamos corte e sangramento, ainda precisamos conectar alguns números aqui para nos ajudar. Então eu vou rever a régua, que agora está em pixels, não em polegadas mais. Mas também vamos montar uma grade. Então, o que eu quero que você faça é entrar em suas preferências no Illustrator. Isso se você estiver usando o Illustrator. Este é o ilustrador de novo. Então, no seu lado esquerdo, em configurações gerais de sincronização, etc, eu quero que você vá para guias e grade. Agora eu defini esta cor está acostumada. Cor verde. Isso é basicamente só para que eu possa vê-lo mais facilmente porque você quer ter certeza de que suas cores não se fundem com suas cores criativas porque então fica muito difícil ver o que você está fazendo. Então ah, linha de grade a cada 160 pixels com base em nossas dimensões é o que queremos e subdivisões não é importante para agora. Mas esta é a matemática básica que você quer e você acerta OK e eu quero que você faça é você pode revelar a grade. Se você olhar abaixo da exibição, você terá ocultar e mostrar a grade assim em exibição novamente. Se eu mostrar a grade que eu posso ver a grade agora, a próxima coisa que vamos fazer no particularmente neste arquivo é eu quero que você vá para o local do arquivo. Nós vamos pegar os padrões de safári dot j Peg e eu vou colocar no canto superior . Agora você vai notar que é. É o com que definimos 1920. Então, se eu clicar nisso e usar ilustradores, ferramentas de alinhamento, eu posso ver que ele está em zero e zero pixels, que é aconchegado no canto, que é o que eu quero. Agora vamos criar várias camadas aqui, então vamos começar clicando em um monte de camadas e vamos preencher essas camadas apropriadamente. Então vamos mover esta camada para o topo. Vamos chamar-lhe Browser Top. O que você vai fazer é trancar essa, que isso não vá a lugar nenhum. Isso vai ficar lá o tempo todo. Agora, a próxima camada que eu quero que você crie é chamada Vieux Port, e eu vou te mostrar o que isso significa em um momento. Você essencialmente quer identificar suas camadas e isso vai nos ajudar no processo de layup uma vez que começar rolando. Então agora temos os Browns ou top na porta de visão. Vou mostrar-te um truque e vamos entrar nisto à medida que fazemos o layout também. Vou trazer a minha ferramenta de retângulo. Vou trazê-lo para a borda do canto. Vou clicar nele uma vez, o que vai me dar uma caixa de diálogo. Vou datilografar 1920 por 10. 80. E isso a temaver com o tamanho deste padrão. Enquanto monitores de corrente padrão de um 16 por nove proporção e eso um monitor HD uma televisão HD é formatado corretamente para caber em filme HD, que é 1920 pixels e com por 1000 e 80 pixels de altura. Então não há nada preenchendo essa imagem. Mas eu vou agora e criar este tipo de verde realmente impressionante, e eu vou dar-lhe um golpe de Vamos fazer dois pontos em vez de um ponto. Agora, se eu clicar fora em de Select e eu esconder minhas grades. Quero que percebas que consegues ver a caixa verde. Agora o que eu vou fazer é pegar o topo da caixa verde e deslizá-lo para baixo para onde o fundo do navegador aparece. Agora, vai fazer sentido assim que entrarmos nisso. Mas o propósito que isso serve é nos mostrar como o design vai ficar em um navegador de desktop , e isso é muito importante. Então eu vou clicar em uma opção, arrastar e obter um 2º 1 que eu vou alinhar com o 1º 1 novamente. Esta parede faz sentido à medida que entramos nela. Mas eu quero você, Teoh. Apenas me acompanhe por um momento e faça isso. Agora. O que eu vou fazer é pegar minha ferramenta de arte. Eu só vou arrastar o quadro de arte para que ele combine com o terceiro quadrado. Agora, essas dimensões novamente podem mudar um pouco à medida que entramos no layout uma vez que vemos quanto espaço precisamos. Não, se aumentarmos um pouco, vocês notarão aqui no canto inferior que estamos em 50% de visão que é importante notar, e eu vou chegar a isso novamente quando o processo de layup começa. Mas basicamente o que fizemos aqui e eu vou bloquear esta camada de porta Vieux é que nós estamos projetando agora com propósito, porque essas caixas verdes representam se eu virar para minha janela de safari, você pode ver que todo este incluindo o menu aqui em cima. Então, tudo o que vemos em qualquer site que visitamos é menos essa informação no topo. Bem, nós queremos explicar isso em nosso design dependendo de qual site eu estou olhando. Por exemplo, este, o fundo ocupa um pouco desse espaço. Se eu nos moveu todo o caminho, uh, a imagem do cabeçalho ocupa um pouco disso, mas você pode ver, assim como o navegador. Assim como o menu no topo. Todas estas coisas têm de ser contabilizadas. Então, se nós projetamos para o tamanho total deste navegador, mas nós vamos acabar com esses pixels que não são contabilizados e de repente nosso design é empurrado para fora de você na parte inferior. Não queremos que o topo deste verde até o fundo do verde. Esta é a área do porto de visão que eu sei que todas as coisas do meu site estarão dentro. Então, se eu puder projetar cada um dos meus elementos para caber neste espaço que eu projetei de forma ideal para a Web, essa seria a idéia. Então, enquanto eu me movia para baixo, estes só se tornarão lembretes visuais. E eu vou explicar que Maura nós entramos no processo de layup, mas isso é muito importante para fazer. Então agora nosso site, uh, arquivo está pronto para salvar, então nós pré-preenchemos esse nome. Então nós só precisamos salvá-lo em nossa pasta layouts, que vamos fazer e o último que vamos criar um celular, este que vamos fazer Vamos começar com 2000 pixels de largura por 1000 pixels de altura. Agora o que vamos fazer aqui é realmente colocar uma imagem da nossa pasta Imagens , que é o nosso smartphone dot PNG. Então eu quero que você coloque isso no seu documento. No entanto, não é aí que a história vai acabar, porque agora temos que criar uma dimensão que faça sentido porque estamos apenas supondo que isso não é desenvolvimento. Não estamos escrevendo código neste momento, mas estamos simplesmente tentando dar ao desenvolvedor uma idéia básica de quão grande isso vai ser. E também nos dá algo para ser projetado, o que faz sentido. E vou explicar que quando entrarmos no processo de layup, você verá como isso funciona. Mas se eu virar para a loja de fotos e clicar neste guia do smartphone, quero que você perceba que a dimensão aqui é 4,7 polegadas em uma diagonal. Então vamos pegar nossa ferramenta de linha. Primeiro temos que virar duas polegadas. Então eu quero que você transforme sua régua dois centímetros por um momento. Clique em sua linha para uma vez e você vai digitar 4,7 polegadas de comprimento. É aqui que as coisas ficam um pouco complicadas. A ideia é que queremos duplicar este tamanho de 4,7 polegadas o mais próximo possível com esta imagem do iPhone aqui, e então podemos excluir isso agora. Então, basicamente, agora temos uma imagem que representa corretamente o tamanho de um smartphone. Então o que eu vou fazer é colocar isso no canto. Vou optar por arrastar um e depois duplicar o 2345 6 com o qual nos daremos seis dedos do pé . Eu acho que é muito o que precisamos e então eu vou ajustar o meu quadro de arte agora o que é novamente vai criar um monte de camadas? Vou deixar este do fundo. Vou trancá-lo. Então temos o nosso smartphone, nossas imagens de fundo e os leitores de tipo. Já preenchemos os nomes dos arquivos. Nós poderíamos ir em frente e salvar isso mais uma vez em nossa pasta layouts. Clique. OK, e nós verificamos que isso é realmente RGB. Isso é Ah RGB para o nosso site C m y que para o nosso cartão postal impresso e vê-lo y que para o nosso cartaz. Ok, então isso foi o material não financiado, mas ainda assim coisas importantes. Então nós temos isso pronto agora. Agora é hora de entrar e ser criativo, e nós vamos ser capazes de ser criativos agora porque nós colocamos essas apostas no chão e isso é super importante. Então agora podemos pensar sobre as coisas um pouco mais como eu gosto da maneira que isso parece através cor é legal, mas nós vamos ser lembrados através do processo por essas diretrizes por esses pequenos smartphones. Eles vão nos ajudar a manter nosso design preciso para o consumo de riel. Então, no próximo vídeo, nós realmente descemos para as coisas divertidas e vamos para isso. Vejo você no próximo vídeo. 5. Vídeo 05 cartaz e design de cartão postal: Certo, agora que nossos arquivos preparados estamos prontos para ser criativos, então vamos para nossa pasta de ativos e começar a pegar elementos. Ou se você quiser construir seus próprios elementos, você pode fazer isso primeiro antes de iniciar este vídeo. E, E, qualquer forma, quaisquer bens que você vai usar, tê-los prontos. E agora que temos nossas diretrizes estabelecidas em nossa opinião, portos estabelecidos e sabemos como nos manter verdadeiros. Quando estivermos a trabalhar, vou mostrar-te como todas essas coisas começam a ficar juntas. E então apenas um lembrete de que eu não vou necessariamente mostrar a vocês como copiar e colar ou colocar cada elemento. Eu vou pular algumas dessas coisas, mas você será capaz de me acompanhar. Deve fazer muito sentido, mas vou mostrar-te as coisas importantes que precisas de saber. E vamos entrar nisso e começar a construir um pouco criativo. Ok, então aqui estamos nós com o nosso cartaz e vamos começar a trabalhar. Vou rapidamente agora. Basta abrir a pasta de imagens em promoção ao vivo. Vou ao pôster colado PST. Então este é o ativo de imagem que temos, e você pode ver as várias camadas aqui. Eu tenho, ah, camada para o vermelho. Há uma camada para alguns dos respingos de fundo muito claros. Também tenho os respingos mais escuros. Eu tenho cada um dos membros da banda como um grupo. Então eu tenho os salpicos brancos e eu tenho um pouco de respingos vermelhos em primeiro plano,o primeiro plano, que é realmente difícil de ver, mas o que ele faz, meio que quebra alguns desses outros padrões. É só um truque, mas você pode encontrar maneiras diferentes de fazer isso, se quiser. Então, se você quiser recriar isso, você pode obviamente olhar para essas camadas e tipo de ter uma idéia do que está acontecendo. Mas é aqui que entra a corrida do Photoshop. Então, se eu selecionar minha ferramenta de pincel agora, eu adicionei esses pincéis em minhas predefinições de pincel, e eu vou clicar em qualquer um deles lá, o tipo inferior de rolo em nome aqui de pincéis. Então, se eu clicar neste outro pincel, você vê que a forma vai mudar. Eu posso colocar uma forma para baixo. Se eu for para um pincel diferente e eu descer aqui, a forma é ligeiramente diferente. Então foi assim que eu o criei com uma combinação de preto, branco e vermelho e construindo as camadas acima. Então, se você quiser passar pelo processo de re criar isso, você pode olhar para esses arquivos e ir em frente e fazer isso se desejar. Então agora nossas diretrizes e nosso sangramento vai começar a fazer algum sentido. Então eu vou para o lugar, e a primeira coisa que eu vou fazer é colocar a imagem de fundo, e eu vou apenas colocá-lo na página lá. Mas agora o que eu quero fazer é realmente alinhar essa forma ao meu sangramento para que eu possa fazer isso olhando como eu fiz lá. Mas vamos fazê-lo de verdade. Então vamos escolher o canto superior esquerdo em nossa opção de alinhamento no Illustrator, e vamos digitar menos 0,1 a 5, e vamos fazer o mesmo para o outro eixo. Então menos 50,1 a 5. E agora o nosso passado está perfeitamente alinhado ao nosso sangramento. Então, se eu aumentar o zoom no canto, esta linha preta aqui é a borda externa real. Você pode ver as linhas com zero marca em ambas as réguas. É aí que a página é cortada. Então é aqui que o cortador corta. Então, se o cortador corta e um pouco fora aqui, é um pouco fora ali. Nós ainda temos tinta, e nós não temos um erro onde possivelmente algo é cortado de tal forma que nós temos o pedaço de papel branco sobrando. Então é isso que o sangramento está fazendo por nós. Então isso é muito importante. Agora o que vamos fazer é abrir o arquivo dentro de imagens chamadas GM Gracie Mei dash logo dot ai. Agora, se você não tem ilustrador, tudo bem. Eu vou te mostrar. Ah, rápido o que isso realmente é. É o nosso logótipo. E é um logotipo da palavra Mark. Se você se lembra de nossas fontes do Google, tudo que você vai fazer é digitar Gracie Mei e você vai escrever isso para abrir uma, que é o pensamento que nós pegamos de fontes do Google. E você só vai aumentar isso e você vai ver magicamente que essa é a palavra de letra para Gracie Mei. Então, se você tiver a antiga rua ou arquivo, no entanto, você economiza alguns segundos e apenas copie diretamente de lá. Vou reduzir isso. Vou mover isso para a área de cima. Então, agora que está no layout, não vou mostrar meus guias porque vamos voltar para os guias que configuramos mais cedo , eu vou ampliar o dedo do pé, olho na distância, porque realmente, essa distância foi uma escolha criativa. Não era Não havia nenhum outro princípio orientador por trás de quão grande, quão próximo e exatamente a relação entre esses dois. Só que estava perto o suficiente para ver a relação entre estes dois “E”. Acho que isso é muito americano. Eu poderia ter sido no processo criativo tentado a fundi-los, mas eu acho que isso apenas meio que quebra tudo um pouco. Não gosto tanto assim. Essa é a minha decisão criativa. Você pode decidir encontrar dois, como quiser. Então agora eu tenho esses dois caras juntos. O que vou fazer é aumentar o tamanho deles, e agora posso dar-lhes uma rotação. Mas eu quero ter certeza de que eu não quebrei nenhuma borda, o que eu acho que eu provavelmente fiz. O que significa que temos de afinar isto um pouco e trazê-lo para ter a certeza de que está dentro do guia de segurança. E isso obviamente não é assim que é trazer isso no olho bola que para o meio. Então, novamente, não é um processo super preciso, mas isso nos deixa muito perto. Então agora olhamos para trás para o layout da nossa loja de fotos, e temos algum tipo ao longo da parte inferior aqui que tem alguns ângulos funky para ele e esse tipo de coisas divertidas. Então, uh, está tudo bem. Isso vai estar na nossa fonte Roboto, e nós vamos voltar para o nosso deck de cópias aqui. Vamos pegar todos esses direitos autorais aqui. Esta outra coisa visual dos logotipos da banda. Nós não precisamos copiar aquela cópia onde ele vai pegar essa cópia e apenas do lado, eu vou criar um bloco de texto no qual eu vou apenas colar toda aquela cópia, e eu vou dimensioná-la para baixo para que eu possa tipo de ver o que está acontecendo aqui. Normalmente, eu vou apenas fazer isso para me dar algum trabalho de cópia do dedo do pé com sem ter que saltar para trás e para frente através de várias janelas para obter coisas. Então, de qualquer maneira, o vivo nós não precisamos disso porque nós já o temos no topo e nós não precisamos de uma cópia pequena para realmente estar lá. Só precisamos saber que isso copia menos importante, precisamos fazer isso menor, então tudo bem. Então vamos dar uma olhada no nosso Leo rapidamente novamente. Então sabemos que temos alguns ângulos aqui. O local, Toronto, 15 de agosto, 8 PM, são alguns ângulos funky aqui, então vamos começar com o local. Então copie isso, e nós vamos apenas pegar nossa ferramenta de texto e colar isso no que vamos fazer que branco. Nós também vamos fazer isso tudo em maiúsculas, então vamos começar com isso. Então temos Toronto. Poderíamos simplesmente duplicar isso, mas é claro, não trará o “Nós vamos trazer todas as coisas divertidas”. Vamos fazer isso nós mesmos. Então vamos dar uma olhada rápida novamente para nos lembrar onde isso está indo. Então Toronto era um pouco maior, e então eu estou indo para o dedo do pé. Isto é criativo. Não é técnico. Então, basicamente, vou dar um tiro. E sei que me confinei a mais tarde. Agora, isso tudo é um tipo de ajuste fino de tipografia que eu não vou gastar muito tempo fazendo. Mas eu só quero que você, Ah, Ah, obter essa camada onde ele precisa ser mais ou menos empurrando e dobrando, empurrando para se acostumar com essas coisas em sua carreira como designer gráfico. Na Jin conversa. É para isso que te pagam. Agora isso parece certo. Eu vou continuar e salvar isso, e esse é o nosso design de pôster. E agora vamos passar por este cartão promocional, vamos pegar a nossa colagem de cartões. Vamos clicar nessa taxa. Onde estão os sangramentos? O marcador é cair essa taxa em menos 1,25, por favor. E menos 0,1 a 5. Coloque-o alinhado com o nosso sangramento corretamente agora porque nós já fomos em frente e fizemos este bom trabalho de finalização. Vamos pegar todo esse bloco de cópias do cartaz. Vamos colá-lo no lugar. Dito isto, é claro, o ângulo agora está errado. Se olharmos para o nosso cartão Photoshopped, podemos ver que nós realmente fez foi apenas conformar tudo a um arranjo de tipo muito mais horizontal para que tudo se encaixe dentro do espaço que o cartão permite. Então esse é um conjunto relativamente fácil de mudanças a serem feitas. Pegue nossa manchete. Vamos largar isso em escala real para baixo. Claro que sim. Mais uma vez, vamos usar nossos guias de 25 cm para nos manter longe de problemas. Então eu vou igualar esses caras. Você pode ver que eu já tinha preparado a imagem para que ela se encaixasse porque eu passei por este processo no início, é claro, e fiz todo o tipo de trabalho realmente lento, curmudgeonly fazendo todas essas coisas, Em algum lugar onde ele precisava estar, então foi assim que eu fiz isso. Em algum lugar onde ele precisava estar, Então o que eu vou fazer é eu vou trazer o local, e eu vou girar que eu vou combinar o ângulo com o meu cabeçalho. Vou trazer isso de volta para baixo. O que vou fazer agora é me livrar de Toronto. Vou acrescentar isso a esta linha porque olho para trás, para o meu projeto, vejo o local. Toronto, 18 de agosto 15 de agosto, em vez de 8 da noite. Todos estavam em suas próprias linhas juntos agora, então há muito menos desse tipo de coisas extravagantes acontecendo, então não precisamos mais das oito horas da noite. Não precisamos do dia 15 de agosto. Vamos recriar essas coisas, e também vamos recriar essas coisas. Preços, por favor. Lá vamos nós. Vamos verificar no Photoshopped exatamente o quão grande era essa coisa. Então, foi provavelmente muito maior do que nós temos. Mas podemos facilmente pegar essa coisa toda e aumentar a escala. Mas novamente, vou ver os meus guias garantir que eu não os revise. Traga-o para baixo. Para que esse cara da Ticketmaster aqui, na verdade, nós provavelmente podemos ir um pouco mais para a direita, direto para a borda. Na verdade, então você vê que há ruído suficiente aqui que nós não interferimos com o Ticketmaster, mas nós ainda meio que, você sabe, complementar as imagens e nós dobramos para a margem inferior agora. Então este é um layout sólido. Outra coisa que vamos fazer é 236%. Veja se você olhar aqui no canto inferior esquerdo em 236%. Não estamos a ter uma verdadeira noção deste cartão postal do tamanho. Então, se escrevermos o comando um, obtemos o tamanho real. Esse é o tipo de como esse cartão postal seria. Na realidade. Acontece que eu sei isso sobre ilustrador e resolução de tela. Se eu digitar 125% que na verdade é muito mais próximo do que eu estaria segurando na minha mão se eu tivesse minha mão contra minha tela como eu estava segurando este cartão, isso seria mais preciso. Posso verificar se o tipo é legível. Tudo é claro, não é tão pequeno que você não pode lê-lo. E isso é tudo bom. Eu vou bater. Salvar. Ok, então agora nós construímos o nosso material de impressão e parece muito bom. Temos um bom cartaz 11 por 17 e temos um grande carro procurando que encontrar por sete essas peças de ar que agora são projetadas bem o suficiente para que se você está olhando para esse cartaz a poucos metros distância, o tipo não é muito pequeno. Mas também não é muito grande porque nós nos certificamos de que Nós olhamos para as coisas que as porcentagens certas em nossa tela e todas essas coisas boas. Então agora nós poderíamos passar para o criativo da Web, que é meio o mesmo, mas tem algumas reviravoltas diferentes para ele. Nós vamos entrar nisso assim que começarmos a rolar, então eu vou vê-lo no próximo vídeo, e vamos começar o processo de Web design para desktop primeiro. 6. Vídeo 06 Área de trabalho de site: Ok, agora que temos um ótimo material impresso projetado e eu acho que parece muito bom agora nós vamos nos mudar para o espaço web. Então vamos usar os guias Vieux Port que configuramos para nos lembrar como essas coisas vão ficar na tela foram também nós nos demos essa matemática para a janela do navegador no topo, e nós subtraímos isso da nossa visão portas no meio. Então não se esqueça que quando você está projetando para a Web, às vezes você tem que projetar coisas planas para imaginar a página se movendo por baixo dela. Então eu vou mostrar a vocês tipo de como nós configuramos isso e tipo de por que nós meio que colocar um menu no meio da página, mesmo que isso não é onde o menu realmente estaria. São simplesmente lembretes visuais, e é disso que se trata. Eles nos lembram da matemática do que estamos projetando, e nos lembra do contexto sob o qual vemos as coisas, e isso é realmente importante porque então você não comete os erros que o ar tão básico que você sabe, uma vez Você faz isso uma vez e você vai. Eu nem verifiquei. Não sei como sinto falta disso. Bem, eu vou pegar seu passado todas essas coisas, então nós vamos cavar fundo nisso, e mais uma vez, eu vou pular algumas partes do processo de layout. Mas você será capaz de me acompanhar e criar alguns arquivos bons. Então, vamos ao que interessa. Ok, então aqui está o design do nosso site. E mais uma vez, esta é a página inicial completa tipo de exibição de cima para baixo, mas nós realmente não consumimos sites dessa maneira. Então, como um lembrete, eu vou ampliar um pouco. Mas eu só vou ampliar 66,67% da minha loja de fotos só para te dar a idéia muito rapidamente e eu vou te mostrar o que isso significa. Então, se eu fosse para esconder a parte inferior todo o caminho até a sua aproximadamente, este é o nosso objetivo , basicamente, é criar um site que será visto praticamente como este à primeira vista. E vai haver uma maneira de lidarmos com isso. Então você não vai ver essa parte vermelha do fundo que começa antes de você ter que descer . Então nós vamos preencher a tela um monitor de proporção de 16 por 9 com 1920 pixels de largura por 10 80 pixels de altura é a idéia. Mas temos que levar em conta esta janela do navegador em nossos cálculos, bem como falamos antes. Então nós temos que ter certeza de que nós projetamos para que todas essas coisas se encaixem bem e funciona da maneira que queremos são projetados para funcionar. Vou ser o exemplo rapidamente do que quero dizer. Se eu voltar, Teoh minha página cromada aqui, Eu estou indo para ir, realmente uma navegação para o meu site. Então meu site é Sean Berry criativo Sean Berry traço criativo ponto com, na verdade, e isso é o que eu quero dizer com a experiência em tela cheia. Então, quando eu estou no meu computador desktop e eu olho para este site, minha imagem vai todo o caminho da esquerda, direita para a direita, preenche a tela, e se eu rolar para baixo para obter o resto da informação, Está tudo lá muito bem apresentado. Então esse design de tela cheia é o que queremos fazer. Agora. No caso do meu site, eu não fiz um cabeçalho completo de cima para baixo porque este é um lado blawg. Quero que veja o material do bloco, mas vamos lidar com o site da Gracie Mei um pouco diferente. Então vamos voltar para a loja de fotos apenas para nos lembrar que o que acontece aqui é que nós temos este menu agradável e isso vai ser um controle deslizante que você pode realmente mover com estes pequenos botões esquerda e direita aqui, você vai realmente ser capaz de rolar entre diferentes álbuns e o cabeçalho se você quiser, e você poderia clicar na amostra agora e você iria ouvir um pequeno trecho de seu último lançamento, Shipping Harbor, que seria um recurso muito legal, e você pode segui-los nas redes sociais. Então, se você clicar neste pequeno botão Gracie Mei, essa coisa, Jake cansado, desliza para baixo e basicamente sobe a tela até um ponto onde a promoção da turnê Gracie Mei começa. Mas olha, ainda temos um cardápio aqui, e vou mostrar-te como explicamos isso. Agora, este menu não estaria literalmente sentado aqui no design, vez de homens que você estaria sempre presente no topo. Mas a melhor maneira que podemos mostrar que em um design plano é simplesmente continuar repetindo esse menu para nos lembrar visualmente que vai estar lá enquanto nos movemos pelo site. Então, mais uma vez, estamos em nosso arquivo ilustrador com nossa parte superior do navegador e portas de visualização bloqueadas. E mais uma vez, apenas para recapitular que navegadores lá em cima para nos lembrar que isso ocupa espaço, você realmente vai ver essa janela do navegador. Você sabe, quando você está navegando e quando você rola para cima e para baixo essa janela do navegador não desaparece como acontece em nosso arquivo ilustrador. E essas portas de visualização, essas pequenas linhas verdes indicam cada ponto em que ficamos sem tela. Então, se rolarmos um pouco para baixo, vemos que essas duas linhas são um pouco mais estreitas. Mas eles levam em conta a matemática do topo do navegador para que saibamos aproximadamente quanto espaço projetado temos enquanto nos movemos através da camada. Então vamos começar olhando para o nosso layout novamente. Então sabemos que temos um menu de navegação, esse menu de navegação, todas as cópias, é claro, em nosso deck de cópias para o site. Então eu estava indo para vir aqui e eu vou pegar tudo isso vai aparecer de volta para o meu arquivo ilustrador e eu vou realmente criar uma nova camada porque eu acabei de perceber agora que este menu vai se mover um pouco, então talvez eu realmente quer uma camada de navegação de traço de menu separada. Então vamos usar isso porque vamos duplicar algumas coisas e movê-las por aí. Então vamos realmente trabalhar nessa camada. Então eu vou criar um bloco de texto rápido. Eu só vou acompanhar essa cópia. Vou selecionar tudo e estamos usando a fonte Roboto. Então, quando você visitar fontes do Google, você vai querer que Roboto para começar, e você também precisa abrir uma. Na verdade, acho que é chamado, então você vai precisar dessas duas fazendas do Google, mas vamos começar com Roboto e vamos torná-lo normal por enquanto. Podemos mudar isso, dependendo de como é o design. Então eu sei que não preciso do Facebook e Twitter e colchetes porque são apenas para me lembrar sobre o compartilhamento social, mas eu vou excluir isso e, claro, vou colocar meu tipo em forma aqui. Eu vou colocar quatro espaços 1234 entre cada um porque eu acabei de descobrir que quatro espaços é sobre bom para representar que você quer alguma separação entre seus itens de menu e geralmente é uma boa medida. Certo, então agora vamos ao Font Awesome. E você vai ver por que é tão incrível. Fonte incrível. Bem aqui. Vamos descer e pegar o Facebook primeiro colado e selecioná-lo e mudar a fonte para fonte. Incrível! E há o meu ícone do Facebook tão simples. Vou buscar o Twitter e vou adicionar o instagram. Um layout do czar indica, embora não tenha colocado isso no deck de cópias, tudo bem, então vou pegar o Twitter primeiro. Está bem aqui. Uma cópia vai voltar e pegar o Instagram. Então agora nós temos compartilhar no Facebook, Twitter e Instagram e nós vamos agora pegar uma caixa quadrada e nós vamos apenas fazer uma forma. Mas antes de fazermos isso, vamos realmente dar uma olhada em nossa grade novamente e vamos entrar aqui e fazer algumas contas reais . Livre-se dos holofotes Então parece que nós realmente temos Estamos muito perto de quatro painéis, então vamos apenas fazer quatro painéis, quatro painéis da grade. Como você pode ver, certifique-se de que estamos no limite, que estamos. Precisamos consertar isso e enviaremos isso para trás. Vamos conseguir 50%. A opacidade também disse para se multiplicar. Agora, vamos centrar um cardápio aqui um pouco, e vamos torná-lo branco. No entanto, devemos mudar o nosso paladar agora. Vamos mudar o nosso Palito rgb porque estamos trabalhando em um arquivo RGB porque isso é web, então nós queríamos ser RGB. Agora, também precisamos do logotipo da Gracie Mei novamente. Se você não tem este logotipo, você pode, é claro, recriar isso usando apenas o tope na fonte que lhe dará o cinza parecer uma palavra de logotipo. O Mark. Escala isso para baixo e leva-o para o menu. Nós vamos basicamente usar três blocos de menu cruzados, e eu acho que nós estávamos quase a altura quase a altura do bloco de menu. Vamos verificar e fotografar. Sim, foi assim que fizemos. E, uh nosso menu parece muito bom, mas vamos ter certeza de que temos a mesma quantidade de espaço três quarteirões do lado direito , que agora temos. E, uh, eu acho que nós provavelmente poderíamos apenas fazer que um toque maior estava de volta. E isso parece muito bom. Então esse é o nosso menu, camada. Vamos voltar para as nossas camadas e vamos apenas bloquear essa camada por um momento e voltar para as imagens. E agora vamos colocar nossa imagem tema, que está dentro da nossa pasta de projeto Inside Images dentro Theme image select no lugar. Vamos colocá-lo debaixo desse logotipo também. Agora, a resolução desta imagem não é tecnicamente grande o suficiente, mas tudo bem. Nós vamos apenas ir em frente e escalá-lo para cima e então nós vamos fazer é movê-lo apenas um pouco . Então é onde gostamos. E então eu vou usar a técnica de mascaramento e ilustrador onde eu desenhar caixa sobre a imagem. E eu queria estar tão alto. Então eu vou desenhar esta caixa vazia. É o Phil. Então, é uma caixa limpa sem qualquer traço ou Phil, Selecione a imagem Comando sete na parte de trás, e agora é mascarado no lugar. Você vê isso? Na verdade, estamos usando essa porta de exibição para nos lembrar que é aqui que está a parte inferior da tela. Então, se nós estamos projetando tudo dentro desta janela, nós vamos ter um bom design de tela cheia, você percebe que o tamanho da tela em 75,99%. Então não estamos 100%. Mas se aumentarmos até 100% agora, podemos ver as dimensões reais, mesmo que tenhamos que rolar para passar por todas as ferramentas do ilustrador. Mas se não tivéssemos essas ferramentas, veríamos essa tela cheia com exceção da janela do navegador na parte superior, para que possamos olhar para o nosso tipo, relativamente falando e ver o tamanho é muito bom e o tamanho do logotipo é bom. As imagens agradáveis e ousadas em primeiro plano. Então estamos indo muito bem lá. Então vamos colocar o resto dos elementos no cabeçalho. E, uh, eu vou te ver em um momento. Então aqui está o cabeçalho concluído. Eu só quero pular em frente. Então você não me viu ter que fazer todas essas coisas. Mas eu só quero te mostrar que eu fui até a fonte incrível. E você verá essas várias setas pequenas, flechas simples e duplas para cima e para baixo, esquerda e direita. Você pode realmente escolher qualquer um daqueles que você quiser. Se você quiser adiar o design um pouco ou escolher o mesmo que eu fiz é perfeitamente bom. E você vai usá-los para criar esses caras aqui usando a mesma fonte que você encontra um ilustrador agora. E isso é claro, esse texto é Roboto, nossa fonte da Web. E acabamos de usar uma caixa de canto de raio para criar a amostra. Agora botão e outro ícone incrível fonte e esta pequena caixa de canto raio preto para criar a nossa navegação para baixo novamente. Nós não estamos focados em criatividade e projetado especificamente tanto quanto estamos focando na técnica de layout, então você pode ter que brincar um pouco com seu ilustrador ou qualquer aplicativo em que você está para criar esse pequeno raio Caixas de canto. Há uma abundância de tutoriais on-line o que, como fazer essas coisas. E eu quero que você realmente se concentre nesta estratégia de porta de exibição para garantir que você tenha projetado bem dentro do espaço para que você saiba, este é um site de tela cheia até aquela caixa verde, e eu quero que você amplie seu design em 100% e apenas verifique se todos os seus elementos estão cantando do jeito que você quer, e tudo parece que é um bom tamanho de fonte. Não é muito grande, nem muito pequeno. É fácil de ler. A navegação é fácil de encontrar, etcetera, etc. Então esse é realmente o ponto aqui. Então vamos voltar a 66,67%, o que é apenas um tipo de ilustradores. Próximo nível abaixo e vamos começar a trabalhar em nossa seção promocional. Então vamos voltar para nossas camadas novamente, camada de imagens, e vamos começar colocando nossa imagem para a promoção musical. Então temos nossas imagens, promoções ao vivo e colagens na Web. O arquivo que você está procurando Isso não vai ser exatamente o tamanho porque nós acabamos criar esses ativos do cartão e do pôster. Mas podemos colocar isso no lugar. Vamos movê-lo um pouco para cima porque eu sei que eu vou querer, uh, ele para cima por baixo daquele menu um pouco. Mais uma vez, vou pegar minha ferramenta quadrada, minha ferramenta retangular. Em vez disso, eu vou desenhá-lo para fora do tamanho da minha porta de visão com zero Phil para que eu possa usá-lo como uma máscara. E eu vou apertar o comando sete para mascará-lo e talvez eu tenha que verificar minha máscara e certeza de que tudo está bem. Eu vou consertar minhas bordas aqui, e eu vou consertar meu mascaramento. Vou continuar colocando os elementos que vão entrar no deck de cópias e descer para o conteúdo da Seção um, que é os próximos shows. Gracie pode viver e colocar todos os detalhes. Eles vão copiar e colar isso e começar a construir nossos elementos de acordo com nosso arquivo Photoshopped como este. E verei você em um momento. Ok, então eu coloquei todos os meus elementos na página. De acordo com o projeto da loja de fotos, eu me certifiquei de que eu alinhava as coisas. Então, assumindo que você também me pegou aqui e colou toda essa cópia em datilografá-lo como roboto. Todas essas coisas boas. Copie e cole o menu. Traga-o para baixo. Vou te mostrar por que fazemos isso. Essencialmente, medida que você se move através deste site, há algum javascript que nós vamos propor que o desenvolvedor nos ajude com, modo que não importa onde estamos aqui, este menu será fixado no topo do página. Então, quando eu rolar e você vê aquele menu fixo lá, o que realmente aconteceria é que esse menu ficaria onde ele está e o site iria rolar por baixo dele. É por isso que eu continuo copiando e colando na minha porta de visualização para cada seção de design para me lembrar de deixar espaço suficiente para esse menu porque ele sempre estará lá. Então eu não quero colocar nada muito perto do topo porque no menu vai interferir com isso e nossos ingressos. Botão é apenas uma caixa branca de canto raio agradável, e que é a nossa seção de promoção de concerto do site. Então eu quero rever rapidamente. O ponto inteiro disso é colocar para fora básico. Então vamos fazer uma pequena revisão rápida, ligar minhas grades, e o que eu quero que você note é que os três blocos do lado esquerdo, e os três blocos da nossa grade no lado direito são realmente consistentes todo o caminho para baixo . Nosso logotipo do Twitter termina onde esses três blocos e por isso se alinha agora são imagens, flutuam embaixo das coisas e vão em tela cheia. Mas essa é uma escolha de design maravilhosa que podemos fazer. Mas o conteúdo em si, que está acima das imagens, está tudo em conformidade com esta grade para que tenhamos espaço igual em ambos os lados. Ele ajuda o design a ter uma boa aparência, e ajuda a manter-nos no caminho certo com a nossa experiência em tela cheia, porque sabemos que se ampliarmos todo o caminho em 100% como este tipo é o nosso tipo é um bom tamanho legível. E se rolarmos para a esquerda para que possamos ver a borda direita, sabemos que nossos logotipos e nosso espaçamento geral do site vai ser agradável e confortável vai ter muito espaço. Então nós não estamos recebendo, você sabe, algo assim onde ele está sendo cortado na borda e parece desconfortável vai ser, ah, ah, um bom elemento de design. E é por isso que estamos usando todas essas portas de visualização e grades para nos ajudar a manter o controle dessas coisas. Então, agora, a próxima parte do nosso site, vamos ampliar um pouco. A próxima parte do nosso site de desktop é agora as seções de mídia e discografia. Então terminamos com a promoção. Terminamos com o cabeçalho e o estilo do site. Agora estamos entrando em algum conteúdo real que é servido dinamicamente pelo servidor, e vamos trabalhar com nosso desenvolvedor para fazer isso acontecer. Então vamos construir esta seção usando a mesma abordagem que temos usado, que novamente, eu não vou ser design de trabalho. Eu não vou. Teoh te ensina, ilustrador, eu vou pular essas coisas, mas eu quero que você construa comigo para que possamos resolver isso juntos. Ok, então eu completei minha seção de mídia e discografia minha seção de vlog, como eu imagino que você é, eu corrigi. Meu erro de digitação é agora diz vlog, não mídia copiado e colado meu menu. Eu criei minhas miniaturas e as mascarei para que elas tenham as mesmas dimensões na mesma posição que meus outros três vídeos, o que faz muito sentido no design. Então, queremos fazer isso. Copiamos e colamos nossos títulos do nosso deck de cópias e vamos embora, mas também foi construído no contexto. Então nós nos lembramos, e eu vou continuar batendo isso em você por todo o curso. Se nada mais, nós projetamos com contexto. Então, temos estado a observar. Nossa relação de visão foi de 66,66 por cento, 66,67%. Se eu ampliar mais uma vez, Eu conheci agora 100% visualização. Eu posso olhar para o meu tipo e verificar se ele é o tamanho certo e esta imagem é um bom tamanho dinâmico tela cheia e meu navegador e meu menu são contabilizados. Então nós construímos um design sólido que é desenvolver um ble e executar um touro muito facilmente da maneira que queremos que ele seja feito. Certo, perfeito. Agora temos um ótimo layout de área de trabalho em tela cheia e parece realmente incrível. Eu acho que qualquer um que viu isso on-line seria como, Uau, este site é ótimo porque é realmente funcional, mas também é muito inteligente. Dá-lhes um gostinho da música. Dá-lhes alguma grande fotografia adiantada. E enquanto eu descia o site, a experiência continua e eles sempre recebem muitos comentários ricos da mídia do site, e eu acho que isso é muito importante. Então agora entramos no espaço móvel tanto como usamos as portas de visualização aqui para nos manter honestos em termos de área de trabalho. Agora temos que pensar sobre o que acontece quando você está olhando para esta coisinha aqui e aqueles pequenos smartphones que configuramos em nosso arquivo há muito tempo. Eles vão nos ajudar muito mantendo-nos honestos. E nós vamos criar uma experiência muito agradável, rica e móvel que qualquer pessoa com um smartphone que vá a este site não vai ser como. Não consigo ler isto. Eles vão ter uma incrível, incrível experiência de smartphone. Então vamos falar sobre isso no próximo vídeo e eu vou te ver então. 7. Vídeo 07 Site Telefone inteligente: Ok, então agora é hora de começar este design de site responsivo smartphone. Agora, como eu tinha dito antes, há vários estágios de design responsivo que você pode passar. Você pode ter um tamanho para tablet ou para uma pequena tela de desktop , depois tablet, tablet, vertical e smartphone. Smartphone horizontal, vertical. Às vezes você pode ter que levar em conta para tantos níveis, mas nós vamos apenas levar em conta para o smartphone tipo vertical da versão mais pequena sob a qual nós veríamos este site porque enfraquecemos. Compare isso com a versão maior, que nos dá soluções de design para todas as etapas entre elas. Então, quando você faz o projeto sozinho, você pode querer realmente ir e encontrar essas dimensões on-line. Você pode descobrir a largura de um tablet e o que você sabe, quais são as dimensões da tela. E talvez você possa pegar esse projeto e fazer outra versão. Se você quiser obter algum ou projetar fora do seu sistema, você não sente que isso foi suficiente. De qualquer forma, vamos entrar no smartphone agora, e vamos descobrir tudo isso. Então vamos ao que interessa. Então, vamos nos lembrar rapidamente sobre nosso site de versão completa para desktop. Se eu ampliar, temos um controle deslizante dinâmico na primeira página, que mostra todos os álbuns um após o outro e podemos clicar em uma pequena amostra. Alguns JavaScript lá vai nos ajudar. Poderíamos deslizar para o próximo painel. Desta forma, podemos ver o show ao vivo deles chegando. Claro, nos lembramos do menu, que está sempre lá, e temos nossa discografia de mídia. E, claro, este ainda era são Photoshopped, Typo, Isso deve salvar log e nós temos nosso rodapé. Então, o que acontece quando você descer muito pequeno? Então, se voltarmos ao meu site no meu navegador aqui, você pode ver que meu site está em tela cheia. Mas o que acontece quando? Ah, isso acontece. Então você está em um telefone e fecha todo o caminho até o fundo. Você pode ver o menu aqui colapsa em um menu que irá deslizar para baixo, o que é bom. Ainda temos nosso login. Nós ainda temos a nossa imagem, embora eu saiba que esta imagem está orientada para a esquerda, então eu me certifiquei de que eu desenhei minha imagem de acordo. E, ah, agora todos os nossos artigos blawg, que costumavam ser em fileiras de três ou agora empilhados e você vai até o fim e tudo está meio em cima um do outro, que você poderia imaginar seria da maneira que você precisaria fazer isso em um smartphone. Então nós vamos voltar para tela cheia sobre isso e zíper de volta para o topo. Mas você vai notar que é exatamente o mesmo design, apenas as mudanças C.S . E este é um truque de desenvolvedor chamado design responsivo ou fluido. E então vamos duplicar esse processo no layout. Mas é claro, não estamos desenvolvendo. Estamos apenas fazendo arquivos simples, mas ainda precisamos saber que vamos criar um design responsivo e fluido. E precisamos saber como fazer isso e nos preparar corretamente para usar todos os nossos bons conceitos básicos de layout para garantir que projetamos algo que funcione bem em dispositivos móveis. Então esta é a nossa versão desktop, e então vamos dar uma olhada em nossa versão móvel. Tudo ainda está lá, mas está lá em uma forma muito mais compacta e vamos converter nossas três miniaturas de vídeo horizontais em uma miniatura de vídeo. Vamos ter uma navegação extra que entra em ação. E vamos um pergaminho para a esquerda e para a direita através da nossa discografia através da nossa mídia através nosso vlog e nosso rodapé vai ser apenas um painel sobre e assim por diante, todo o caminho na parte inferior. Então, quando aterrissarmos na página inicial do, eu só amplio em um nível, vai ser uma má resolução, mas tudo bem. Isso é um pouco maior do que o telefone que você seguraria na mão. Você poderia realmente segurar seu próprio telefone na tela. E se você tem um smartphone e você literalmente colocá-lo ao lado dele, você verá que isso provavelmente é cerca de 25 a 30% maior do que o que realmente é. Mas se eu reduzir mais um nível, é muito menor. Então estamos algures entre esta vista. Mas tudo bem, porque se você se lembra do nosso arquivo ilustrador, nós nos demos uma matemática adequada para resolver esse problema. Então, mais uma vez, estes são os nossos smartphones todos alinhados, e acontece que sabemos pelo nosso teste de 4,7 polegadas que fizemos quando iniciamos este incêndio. Sabemos que estes são bastante precisos. Eles podem não ser 150% o que na verdade é exatamente o quanto eu estou ampliado. Eles são muito precisos, e eles nos dão uma boa representação. Vou dizer-te como abordo isto. Vou selecionar minha visão inferior aqui, e vou digitar 125%. Então, na visão de 125%, eu também tenho um smartphone Apple. E quando eu mantenho meu smartphone na tela com essa resolução, ele é exatamente o tamanho do meu próprio telefone. Então, quando criamos esse diâmetro de quatro por sete com esse truque que usamos para centralizar o arquivo quando você coloca seu telefone ao lado da tela, ele deve ter praticamente o mesmo tamanho. E isso vai ajudá-lo a lembrar que você não está olhando para algo que vai ser duas vezes maior, duas vezes tão pequeno. Este é o lado real. Então, com o propósito disso, eu vou deixar minha visão em 125% dessa maneira, eu sempre posso ser lembrado de exatamente como meus elementos devem ser grandes. Então vamos voltar e dar uma olhada. Vou ampliar só um pouco com o propósito de olhar para os detalhes aqui na minha loja de fotos Mock up e nós temos o nosso menu. Temos a Gracie Mei, mas o nosso menu desmoronou, por isso vai ser muito fácil de criar. Gracie Mei ainda está lá, mas é negra. Vamos usar apenas um pouco de preto, porque não? Costumávamos ter uma imagem completa, mas a imagem completa caberia de uma maneira estranha. Então vamos usar Ah, um pouco de tratamento diferente. Há agora uma amostra da nossa versão mais recente. Ainda está tudo lá porque esta é a página inicial. Achei que seria bom ter cinco pontinhos aqui embaixo que representam você poderia clicar no 23 e deslizar. Mas se você preferir manter tudo consistente, você pode usar a mesma navegação que depende de você. Você pode fazer sua própria escolha de design lá, e ah, usar nossa pequena seta dupla para baixo que sabemos Se clicarmos que vamos deslizar para cima e para baixo para nossa próxima seção. Então vamos nos concentrar na página inicial e vamos começar. Então, em minhas camadas eu vou selecionar imagem porque isso vai ser a primeira coisa que eu colocar para baixo é uma imagem. Vou colocar minha imagem de tema da pasta de imagem de tema em seus ativos. Eu vou apenas criar vagamente, uh, isso em tamanho e então eu vou ter, é claro, aconchegar isso e tipo de encontrar onde ele quer estar. E isso parece realmente quase certo. Acho que foi um bom palpite. Então eu vou voltar para o meu arquivo de logotipo. Agora, mais uma vez, vou pegar a Gracie May branca. Vou voltar à minha página móvel. Vou clicar no meu tipo de jogador e colar isso. Mas agora, claro, é claro,está chegando muito grande, e eu vou escalar isso. E então eu vou apenas criar rapidamente o meu menu. Vou pegar um desses Chevron duplo assim. Isso é exatamente o que eu estou decidindo. Acho que parece bom. Então, vou voltar para a minha página ilustradora e você pode usar qualquer um desses que você acha legal. Encorajo-te a mudar um pouco as coisas e tentar a tua própria coisa. Acompanhe isso, selecione-o e vá para a minha fonte. Incrível. E eu recebo uma seta dupla para baixo. Agora vou usar as ferramentas do Illustrator aqui, e vou selecionar o logotipo, a imagem e o menu. E eu vou usar minha ferramenta de alinhamento e centralizá-los todos e depois trazê-los de volta para o meio. Às vezes você tem que lutar um pouco com o ilustrador. Ele vai querer encaixar as coisas e meio que irritá-lo. Mas você vai superar isso muito rápido. Então, há o nosso menu. Agora vamos colocar uma caixa preta atrás disso sempre que aparecer em algo que não é preto. Mas chegaremos a isso em alguns instantes. Então eu vou cortar e colar e criar o resto dos elementos para a minha home page, e eu vou vê-lo de volta em um momento. Ok, então nós criamos nossa exibição de página inicial, e eu coloquei um pouco de uma caixa de depósito atrás desse tipo e sobre a imagem. Se você notar que apenas para ajudar a legibilidade do tipo, e estas são todas as coisas que podem ser desenvolvidas. Você vai querer falar com o seu desenvolvedor ao longo do caminho e certificar-se de que todas as suas coisas são facilmente feitas e semânticas e todas essas coisas boas. Então é assim que o desenvolvimento funciona. Eu também incluí o título Gracie Mei Responsive Design Little aqui com Smartphone, com tela de 4,7 polegadas no tamanho real como um lembrete no caso de mostrarmos o cliente da loja e eles dizem, Ei, este tamanho real ou Peso? Sim, é. Eu agradeço-te. Você usou as dimensões corretas. Isso ajuda o Teoh a ser um lembrete. Então, mais uma vez, estamos nos certificando de que podemos ler tudo e que estamos vendo isso exatamente do tamanho. Nosso telefone estaria a esta distância de nossos olhos, e essa é uma maneira muito útil de trabalhar. Então vamos para a próxima seção, que sabemos que é a nossa que sabemos que é a nossa promoção. Isso é o que é Ah, isso é o que está acontecendo. Em seguida, vamos construir isso da mesma maneira que vamos selecionar nossa camada de imagens. Agora vamos entrar, pegar nossa imagem a menos que você queira criar a sua própria como falamos. Você pode se sentir livre para fazer isso e mudar o design e fazer algo mais legal do que eu fiz , e isso seria ótimo. Então, Então, promocional ao vivo. Vamos procurar o nosso smartphone de concerto, PSD e lugar de sucesso. Não devia dizer que telefono na Internet ou alguém virá buscar-me, mas agora vou trazer o meu menu. Então, eu só uso minhas ferramentas ilustradoras para indicar que quando meus parceiros de desenvolvedores virem isso, ele ou ela saberão exatamente o que estamos tentando fazer. Então, mais uma vez, nós vamos fazer algumas cópias e colar do nosso deck de cópias de volta aqui para o nosso site. Vá para a seção de conteúdo um, pegue todos os nossos detalhes e copie, e nós vamos continuar construindo nossa página promocional do concerto e eu te vejo de volta em um momento. O que? Então, terminamos o resto de nossos projetos e nossas portas de visualização parecem muito boas. Temos esses painéis de fundo cinza bem projetados, mas dinâmicos de conteúdo dentro de nossos visualizadores móveis. Deslizamos pela porta de visão. Vemos todos esses pedaços realmente bem consumíveis de informação, até mesmo nosso rodapé parece interessante, o que é uma espécie de boa realização. E assim é dinâmico e também é projetado em contexto. E isso é uma enorme vantagem quando você pode projetar assim porque você evita todas essas armadilhas quando você não tem contexto. E assim estes parecem muito bons. Nós temos uma navegação simples que é fácil de entender em um site realmente interessante que nós poderíamos ter orgulho de mostrar ao nosso cliente que você está pronto. Você acabou de terminar um design responsivo desktop smartphone para um site de música muito legal . Quão incrível é isso? E agora temos algum material impresso para apoiar seu show, e eles têm alguns cartões que podem distribuir para seus amigos e fãs. E todas essas coisas estão trabalhando juntas. Criamos um design incrível, mas não nos concentramos no design. Nós pulamos todas essas coisas. Isso é um curso totalmente diferente em si mesmo. Mas garantimos que tudo o que projetamos se encaixasse na porta de visualização. E essa porta de vista significa um cartaz para que eu estou usando esse termo mawr amplamente do que foi planejado . Mas está tudo bem porque quando você vir algo na parede, vai ser do tamanho certo. Quando você distribuir esse cartão para seus fãs, ele será perfeito para segurar em sua mão e ver todos os detalhes do show. Vai ser incrível. E, em seguida, o site vai dar-lhes uma grande experiência, se eles são desktop de tela cheia ou se eles estão no smartphone como nós acabamos . Parece lindo. Funciona bem, enquanto esperamos que funcione. Embora o desenvolvedor possa nos dar algum feedback sobre isso, as coisas podem mudar ligeiramente, você sabe, como acontece com frequência no processo. Mas isso é totalmente legal. Este trabalho parece muito bom, e você poderia estar muito orgulhoso dele e sinta-se livre para colocar isso em seu portfólio se você quiser e mostrar às pessoas Ei, olhe para essas coisas que eu construí. Estou literalmente em vídeo dando permissão para usar isso e chamá-lo de alguma especificação criativa. Absolutamente Faça isso. E espero que esteja orgulhoso disso. Estou orgulhoso do que projetamos juntos. E então eu vou te ver no próximo vídeo para uma breve recapitulação e vamos falar sobre o que acabamos de aprender. Então eu vou te ver em breve 8. Vídeo 08 recover e conclusão: Ei, escute, foi muito trabalho, mas valeu a pena. Espero que tenha se divertido tanto quanto eu. Adoro o trabalho de design que criamos. Provavelmente até tentar vendê-lo ao meu sobrinho e à sua banda . Mas eu espero que você esteja orgulhoso do trabalho que você foi capaz de criar. E se você fez este trabalho, se você seguiu o meu projeto ou se você fez o seu próprio projeto, eu adoraria vê-lo. Então, se você puder deixá-lo nos comentários para este curso, por favor, faça isso. Se não, você pode vir ao meu site, que está aqui. Sean Berry traço criativo ponto com. Vá para o formulário de contato e você pode anexar seus arquivos. Você pode me enviar um e-mail diretamente e eu estarei ativo em responder aos e-mails. Eso, por favor. Eu adoraria ver o que você fez e ouvir seus comentários sobre este curso. Você também pode me pegar um YouTube youtube dot com barra ultraman. Toronto. Eu sei que é um nome terrível. Não posso me livrar dele agora, mas de qualquer maneira, vir para o YouTube e eu tenho toneladas de vídeos menores, não cais em profundidade é este curso, mas eles vão te dar todos os tipos de pepitas de diferentes princípios de design, teorias e dicas rápidas sobre como fazer coisas para melhorar seu trabalho e seu fluxo de trabalho. Então eu realmente espero agora que seu fluxo de trabalho vai se tornar um bom sólido fluxo de trabalho profissional. Não importa se você está fazendo isso por si mesmo. Você está fazendo isso por clientes? É tudo a mesma coisa. Você bloqueia esse processo e seu trabalho melhorará. Não parece que vai, mas honestamente vai. Eu prometo a você. Espero que tenha se divertido tanto quanto eu. Então, junte-se a mim no próximo vídeo para concluir este curso onde eu vou apenas dar-lhe alguns pensamentos finais e o que vem a seguir para você como designer gráfico. 9. Vídeo 09 o que vem ao lado: Sabe, uma das minhas coisas favoritas sobre design gráfico é o quão imediato ele é e como a resposta de um médium é quando temos esses impulsos criativos. De repente eu sou um artista e eu sou um músico. Fui ambos a minha vida toda. Então a música e a arte se tornam ótimas saídas para mim, tipo, você sabe, saciar essa sede criativa quando algo vem sobre mim. Mas há momentos em que você se sentar e tocar música ou pintar um quadro são muito tipo de esforço demorado, suas dedicações à arte. Mas o design gráfico me dá um meio rápido onde eu poderia fazer algo como um cartaz de banda legal onde eu poderia fazer uma capa de livro. Ou eu poderia fazer um anúncio falso ou um site falso ou apenas redesenhar meu próprio site, pensando, o que eu faria com ele se eu simplesmente não me importasse mais? E você sabe, é realmente uma ótima maneira de colocar toda essa energia fora em algo que parece legal de que você pode se orgulhar e mostrar aos seus amigos e eles gostam disso. E então quem sabe? Você pode obter trabalho de cliente fora dessas coisas que você faz apenas por conta própria. Já fiz isso muitas vezes. Consegui o trabalho do cliente a partir de especificações projetadas que fiz apenas por diversão. Então, por favor continue projetando. Sempre projetado, sempre criar, nunca parar porque é muito divertido e não importa quem gosta ou não gosta. Eu sou criticado no meu projeto o tempo todo, e, uh, e eu sou um profissional e eu sei o que estou fazendo. Então não se preocupe com esses caras, mas divirta-se criando coisas para você mesmo para sua família. Seus amigos criam um folheto da igreja local, se é isso que você gosta, mas apenas divirta-se fazendo isso. Então, o que vem a seguir? Eu realmente amo que você pegue esses princípios e faça outras coisas. Faça o cartaz da banda e o site como conversamos com sua própria banda favorita. Adoraria ver isso, mas adoraria ver você tentar algo completamente diferente. Tome esta idéia e talvez fazer o mesmo material para um evento que você quer um realmente um ou um. Você faz as pazes e brinca com coisas que você não tem um prazo. Você sabe, ter um cliente, você poderia fazer isso por si mesmo e se divertir. Eu acho que seria incrível e eu adoraria ver e ouvir de você. Então eu espero que você aproveite este curso e eu estou aqui para ajudá-lo a qualquer momento. Estarei ativamente envolvido na leitura de comentários e envie-me um e-mail no meu site sempre que você quiser conversar. E obrigado por se juntar a mim neste curso e eu estarei de volta com mais. Por isso, até lá, mantenha-se elegante e eu apanho a próxima vez Adeus.