Albert Einstein College of Medicine - Olá gente! Bem-vindos a mais um vídeo do canal Clube do Design. Eu sou Liute Cristian. E você sabe o que é um mockup? Eu já mostrei como criar mockups em alguns vídeos anteriores aqui no Clube do Design, utilizando o Adobe Photoshop e camadas de objetos inteligentes. Você já deve ter reparado em alguns sites de download, principalmente em sites estrangeiros, que os mockups são produzidos com fotos muito bonitas, são aplicações de materiais em telas de computador, em tela de celular, em cartões de visita, com imagens de altíssima qualidade. Isso porque, eles são baseados: Ou em modelagem 3D, ou em fotografias digitais de alta definição. Se você não está entendendo muito o que eu estou falando, eu vou primeiro introduzir para você o que é um mockup. Imagine que você precisa apresentar um cartão de visita para o seu cliente. Você foi contratado, produziu o material e aí você quer apresentar a sua arte. Você fez o seu projeto, e quer enviar isso para o seu cliente aprovar. A maneira com que você apresenta esse projeto, não só na questão de conceito, mas também na percepção que o seu cliente terá com a imagem que você vai mandar pra ele, ao invés de mandar apenas um JPEG com fundo branco, você pode aplicar esse seu projeto em um mockup, que nada mais é do que uma imagem bem produzida de um cartão de visitas real, onde você aplica a sua arte, e você transmite, dar a entender a ideia de que você imprimiu o cartão de visitas do cliente, e tirou uma foto, utilizando um equipamento profissional. Então, um mockup, nada mais é do que um arquivo de modelo, um arquivo que serve para você apresentar o seu trabalho para o seu cliente, causando uma boa impressão, utilizando recursos foto realísticos. E no vídeo de hoje, eu vou te mostrar como você pode criar os seus próprios mockups, de qualquer coisa, utilizando a câmera digital do seu celular, e o objeto que você quer transformar em mockup. Nesse vídeo, eu vou te mostrar como criar o mockup do meu tablet LG, aquele que está lá atrás, utilizando a foto que eu vou tirar com o meu celular, eu vou mostrar para você já, já, como a gente vai fazer esse material. Mas, antes de começar, eu quero falar para vocês de uma promoção que eu vou desenvolver aqui, em parceria com a editora Blucher. Eu recebi dois exemplares do livro: Do material ao digital, do Gui Bonsiepe, eu espero que eu esteja certo com o nome dele. Então, é um livro que fala sobre design gráfico, que fala sobre o design de interfaces. É um material muito legal, se você trabalha com produção digital, ou produção gráfica, com design gráfico, ou design digital. Então, se você quiser saber como você pode participar do sorteio do livro: Do material ao digital, é só clicar no link aqui na descrição do vídeo. Eu recebi dois exemplares, um deles é meu, e o outro eu vou sortear para quem está assistindo esse vídeo. Clica no link aqui embaixo na descrição, para que você saiba como participar. Então, vamos lá para o nosso vídeo?! Para a gente criar o nosso mockup, utilizando o que a gente tem em casa, tudo o que você vai precisar é: De um aparelho celular, no meu caso, eu tenho um ZenPhone 5, e do aparelho, do dispositivo que você vai utilizar para criar o seu mockup. No meu caso aqui, é o meu tablet LG, que inclusive já está posicionado aqui numa pequena base, num suportezinho de tablet. Eu poderia utilizar o próprio livro: Do material ao digital, por exemplo, aqui do Gui Bonsiepe. Eu poderia tirar a foto da capa do livro, e depois aplicar um material, uma capa de outro livro que eu tenha desenvolvido, mas eu vou mostrar para vocês como fazer isso, utilizando o meu tablet LG. O primeiro passo, claro, é tirar a minha foto. Eu vou tirar uma foto bonita aqui, de um ângulo bem legal do meu tablet, depois eu vou editar essa foto no Photoshop, e mostrar para vocês na tela do computador, como você pode aplicar a sua arte, desenvolvendo um material bem mais legal, bem mais bacana, utilizando só o que você tem em casa. Então, eu vou ligar aqui a câmera do meu celular, vou tirar sem flash, eu gosto de tirar foto sem flash. E vou tirar aqui, uma foto do meu tablet. Pronto! Você vai ver a foto aí na sua tela. Tirei aqui duas fotos. E, a gente vai editar essa foto a partir de agora, na tela do Photoshop. Vamos lá?! E depois de tirar a foto e conectar o celular no meu computador, eu vou selecionar, eu tirei aqui algumas fotos, foram 4, 5 fotos. Eu já selecionei essa aqui, que vai ser a fotografia que a gente vai trabalhar para criar o nosso mockup. É muito importante lembrar, que o resultado, a aparência geral do seu trabalho, do seu mockup, do seu exemplo de aplicação, vai depender muito da qualidade da sua câmera. Se você tiver uma câmera boa, e conseguir tirar uma foto com uma profundidade de campo legal, como por exemplo: Eu tirei aqui algumas fotos do tablet, utilizando a minha Canon T5I. Então, eu utilizei uma lente com uma profundidade de campo legal aqui, onde a gente tem um fundo desfocado. A gente vai aprender a criar esse efeito no Photoshop, mas se você conseguir tirar uma foto com maior qualidade, o seu resultado sem dúvidas será bem melhor. Então, você tira a fotografia de vários ângulos diferentes. Eu tirei aqui, várias fotos do tablet, e claro, dependendo do ângulo, você também pode criar uma apresentação bem mais realista, segurando o tablet com a mão, virando ele em ângulos diferentes. Então, a gente vai aprender a criar, utilizando o recurso que a gente tem. E, como eu acredito que a maioria de vocês tenha um celular disponível, eu vou criar o mockup utilizando a foto do celular, que assim, você fica mais familiarizado com os problemas, ou com os recursos que a gente precisa usar, para concertar esse tipo de imagem. Eu vou abrir essa imagem aqui no Photoshop, clicando com o botão direito: Abrir com Adobe Photoshop CC 2015. E, você observa que, pela câmera do meu celular não ter uma qualidade excepcional, a gente acaba ganhando aqui, uma espécie de ruído. São esses pontinhos meio esquisitinhos aqui na nossa imagem. A gente vai tentar amenizar essa situação, fazendo um pequeno tratamento nessa imagem. Para isso, eu vou adicionar aqui a essa imagem, uma nova camada de ajuste de níveis, e vou utilizar a tecla Alt, e arrastar aqui do ladinho, esse controle do lado direito. Segurando a tecla Alt, a minha tela vai ficar toda preta, ao deslocar o meu cursor para dentro, eu preciso identificar o primeiro ponto branco que aparece. Eu já identifiquei que é ali dentro da minha lâmpada. Então, eu vou voltar ele para a posição original, depois, soltar o Alt. Em seguida, o que eu vou fazer é: Clicar nesse conta-gotas aqui de baixo, que é o conta-gotas branco, o conta-gotas da cor branca, e vou dar um zoom ali na área que eu percebi que foi o primeiro branco que apareceu, que é esse brilho aqui. Claro que isso depende muito da sua fotografia. Pode ser em outro lugar por exemplo. Vamos supor que ele tenha aparecido ali em cima na área da parede. Se eu clicar aqui em cima, o resultado da minha foto vai ser muito mais intenso, justamente porque essa área é mais escura. Vamos deixar esse resultado. O segundo passo, é identificar o ponto preto. Vou segurar o Alt novamente, clicar nesse triangulozinho aqui do lado esquerdo, e arrastar ele para dentro. O primeiro ponto preto que apareceu, foi ali da área do meu No-Break que está ali atrás, bem aqui, próximo ao bonequinho. Vou clicar aqui então no conta-gotas preto, que é o de cima, e clicar aqui atrás, nessa área bem aqui, a pontinha do conta-gotas é o que vale. Então, a gente tem uma espécie de correção na nossa imagem, melhorando o que é preto e o que é branco. Olha só o antes e o depois, ela fica com um contraste muito melhor. Em seguida, você pode clicar no conta-gotas do meio, esse não dá para usar o Alt, e você pode clicar numa área neutra. Pode ser uma área branca, pode ser uma área que não tenha invasão de cores, afim justamente, de corrigir a invasão de cores, na sua imagem. Como aqui, a minha foto está com um ruído muito grande, se eu utilizar o conta-gotas do meio, você observa que ele acaba bagunçando tudo, então, eu não vou utilizar. Vou apenas deslocar ele um pouquinho mais para dentro, para a esquerda, para que ele tenha uma aparência um pouco mais clara. E claro, depois você pode ajustar os controles manualmente, para encontrar um contraste legal. Em seguida, vou adicionar uma nova camada de ajustes de curvas, e fazer aquela nossa famosa curva em S, apenas para aumentar o contraste da minha imagem. Olha só o resultado que bacana. A gente tem aqui então, o antes o depois, segurando o Alt e clicando no olhinho aqui embaixo. A gente tem um contraste legal. Não é o ideal, a nossa foto não é muito bonita, não é lá essas Coca-Cola toda, mas a gente vai trabalhando com o que a gente pode. Em seguida, eu preciso remover o máximo que eu puder desse ruído. Para isso, eu vou utilizar a camada de baixo da minha camada original, clicando no menu Filter, Noise, Dust & Scratches. Se você usa o Photoshop em inglês, em português aliás, você vai acessar o menu Filtro, Ruído, Poeira e Rabiscos. E aqui, nesse pequeno filtro, a gente vai utilizar aqui um raio de apenas 1. Esse Threshold aqui, eu vou deixar em 0 (zero). Apenas para a gente ter a remoção de ruído bem de leve, porque senão, a gente acaba perdendo a definição da nossa imagem. Olha o antes e o depois. Você observa que a gente acaba perdendo um pouco da definição ali, das molas da luminária. Vou clicar no OK, pronto! Reduzi o ruído. Dá um Ctrl+0 (zero), para visualizar a imagem de longe. Você pode tratar a imagem como achar conveniente. Adicionar por exemplo, uma camada de ajuste de balanço de cores, e tirar um pouco aqui do vermelho que está invadindo demais a minha imagem, e também, um pouquinho do azul, deixar um pouquinho mais amarelada a imagem, justamente para corrigir essa invasão azulada. Olha só o que a gente tem aqui: O antes e o depois. Ainda tem muito verde na minha imagem, vou reduzir um pouquinho mais. Prontinho! Então, a gente tem esse resultado aqui, com um contraste legal, e isso vai ficar muito melhor, à medida que a gente for trabalhando. Em seguida, a gente vai começar a trabalhar com objetos inteligentes, que vão nos permitir obter resultados muito melhores, do que a gente teria se trabalhasse com apenas a camada original do nosso projeto. O que a gente vai fazer em um primeiro momento, é converter a camada original da nossa fotografia, em objeto inteligente. Para isso, é só você clicar com o botão direito, e clicar na opção Convert to Smart Object, ou Converter para Objeto Inteligente. Clicando nessa opção, a sua camada principal, que seria o seu background, acaba virando uma camada desbloqueada, e você tem aqui um novo objeto lá dentro. De você der dois cliques nessa camada, você acessa a edição da sua imagem em uma guia separada, a gente vai entender isso já, já. Deixa eu fechar aqui, e voltamos para a nossa imagem original. Antes de a gente continuar, é muito importante eu mencionar o seguinte: O resultado que eu estou mostrando para vocês aqui, é uma das maneiras com que eu faria esse projeto. Você pode alcançar o mesmo resultado, de diversas maneiras diferentes. Então, o que eu estou mostrando para você aqui, é como eu faria. Como atingir o resultado esperado, utilizando as técnicas que o Liute do Clube do Design usaria. Você pode desenvolver esse material, produzir um mockup de diversas maneiras diferentes. A gente vai desenvolvendo as nossas técnicas a medida com que a gente vai se familiarizando com as ferramentas. Depois então, de converter a minha camada em um objeto inteligente, a gente vai dar dois cliques nela, clicando duas vezes aqui na camada de objeto inteligente, e a gente volta para a nossa imagem original, que é editada aqui, em uma guia separada. Observe que qualquer alteração que eu fizer a partir de agora, nesse meu objeto inteligente, nessa minha imagem, ao salvar, essa alteração se reflete automaticamente na minha imagem que já foi editada, na minha imagem original. Observem que há uma diferença na tonalidade, justamente porque a edição que eu fiz na imagem original, foi utilizando camadas de ajuste. Então, eu posso desabilitá-las, para ter a imagem original de volta. Ao habilitá-las, eu tenho os ajustes novamente. Ao clicar aqui na minha Layer 0 (zero), que é o meu objeto inteligente, o que está dentro do meu objeto inteligente, eu tenho apenas a imagem original, justamente porque as camadas de ajuste ficam lá fora do objeto original. Então, editando o meu objeto inteligente, eu vou começar agora, a adicionar os elementos do meu mockup, que seria a área da tela do meu tablet, onde eu vou aplicar a arte da minha interface de aplicativo, da minha interface de website, enfim, o que quer que seja que eu queira mostrar dentro da tela deste meu tablet. Como eu vou fazer isso? Eu vou utilizar aqui, um pequeno retângulo. Vou selecionar aqui a Ferramenta Retângulo, dentro do Photoshop, que é uma ferramenta de desenho. Eu vou mudar aqui o preenchimento para um azulzinho clarinho. Eu gosto de trabalhar com azul, deixa eu ver se eu pego um azulzinho mais clarinho aqui fora. E, o meu contorno vai ficar zerado, sem nenhum tipo de contorno. E aqui, a opção vai ficar em Shape, que seria Forma. Em seguida, eu já tirei a medida da minha tela do meu tablet, usando uma régua normal. O que eu vou fazer? Eu vou desenhar aqui um retângulo na tela, e depois, eu vou alterar essas medidas, para o tamanho da tela do meu tablet, o tamanho real da tela. Então, ela é 11,4 cm, você pode digitar o cm para identificar que seriam centímetros, e não pixels, que é o que o Photoshop está configurado para trabalhar. Por 18,4 cm. Então, esse é o tamanho da minha tela, 18,1 desculpa. Deixa eu editar aqui. 18,1X11,4 pronto! Esse é o tamanho da tela do meu tablet original. Depois de fazer essa edição, e criar aqui o meu retângulo exatamente com o tamanho da tela real do meu tablet, da tela física do meu tablet, você observa que em relação à foto, essa imagem vai ficar diferente. Mas, não tem problema. O próximo passo, e também o segredo para que isso tudo dê certo, é transformar esse nosso retângulo, em um objeto inteligente, antes de começar as próximas transformações. Então, eu já deixei no tamanho real, a partir de agora, eu vou converter esse outro retângulo em objeto inteligente, clicando com o botão direito aqui do ladinho, e selecionando a opção: Convert to Smart Object. Pronto! Esse objeto se transforma em um objeto inteligente também. Então, vamos acompanhar o raciocínio: Nós temos aqui, o nosso projeto principal, onde nós temos um objeto inteligente da imagem original. Ao editar esse objeto inteligente, nós abrimos a imagem original, para que a gente possa trabalhar ela separadamente, dentro das possibilidades do objeto inteligente, e depois eu desenhei um retângulo, e converti esse retângulo em um novo objeto inteligente. Se eu quiser editar ele separadamente novamente, eu posso dar dois cliques, e eu tenho aqui o meu retângulo novamente. Deixa eu fechar aqui, para a gente voltar para o passo anterior. Depois que eu converti esse meu retângulo em objeto inteligente, todas as alterações que eu fizer nele a partir de agora, serão uma transformação, alterarão apenas a aparência desse meu objeto inteligente. Não necessariamente o objeto em si, já que ele já foi convertido. Então, eu vou fazer o seguinte, vou pressionar o Ctrl+T, para entrar na edição de forma, na edição de escala desse meu objeto, e depois nós vamos clicar com o botão direito, e selecionar a opção: Distort. Ctrl+T, depois botão direito, Distort. A opção Distort, vai me permitir distorcer esse objeto livremente. Eu posso utilizar aqui os controles dos cantos, para posicionar cada um dos cantos, exatamente no canto físico da minha fotografia. Eu vou posicionar então, cada um dos cantos da minha forma clicando e arrastando, até eu ter mais ou menos o tamanho da minha tela. Para eu ver o tamanho exato dessa minha tela, eu posso diminuir a opacidade dessa camada, utilizando esse controle aqui do lado ou clicando aqui do ladinho, e diminuindo aqui manualmente. E vou dar um zoom, segurando o Ctrl+Espaço e clicando na tela, para aumentar o meu zoom. Vou posicionar ela aqui, um pouquinho além da área da minha tela, para que eu não deixe bordas sobressalentes, que acabem atrapalhando o meu resultado. Segurando o Espaço, eu vou deslocando, clicando na tela e arrastando, para eu deslocar utilizando a Ferramenta Hand, que é a Ferramenta Mão. E olha só! Vou posicionando em cada um dos cantos da minha tela, da minha fotografia, utilizando a ferramenta Transform, no modo Distorção. Depois então de posicionar onde eu quero, vou dar um Ctrl+0 (zero), e depois apertar o Enter, olha só que bacana! Eu já tenho a minha tela quase pronta. Deixa eu devolver a opacidade aqui para 100%, para a gente ter a nossa tela original. Só que a gente tem aqui os cantos da nossa tela, muito duros. Vamos dar uma ajeitadinha nisso? Vou selecionar aqui o meu objeto inteligente, vou adicionar uma máscara, clicando nesse botão aqui embaixo, adicionei uma máscara na minha camada onde eu tenho a minha tela, onde eu tenho o retângulo azul. Vou selecionar aqui a varinha mágica, pode ser pressionando o W, e vou dar um clique aqui do lado de fora, para selecionar toda a área transparente da minha camada. Observem que a camada de cima está selecionada. E aí, eu selecionei aqui na minha máscara, toda a área transparente. Ele vai deixar apenas a minha tela, selecionada. Sem seleção aliás. Depois, vou pressionar aqui, o Ctrl+Delete, para que ele preencha essa camada com preto, ou seja, ele vai preencher com o plano de fundo, pressionei o Ctrl+Delete. Se você não tiver com o plano de fundo preto, você pode pressionar a letra D do seu teclado para resetar as cores, e depois apertar o Ctrl+Delete, para preencher essa nossa máscara com a cor preta. Depois, eu vou pressionar o Ctrl+D para retirar a seleção. Para que eu coloquei essa máscara? Ela vai servir para eu suavizar os cantos do meu objeto. O que eu vou fazer agora? Vou selecionar essa camada da máscara, e pressionar o Ctrl+I, para inverter a seleção. Quando eu inverto a seleção, a área do meu retângulo azul, acaba sendo pintada de preto. Ou seja, ela acaba sendo escondida, porque é para isso que serve a máscara, para esconder áreas que são pintadas de preto na minha imagem. Depois, eu vou dar dois cliques sobre essa máscara, para abrir o painel Properties, se não estiver aberto na sua tela, e vou clicar na opção: Mask Edge. Eu vou exibir aqui, a minha janelinha de Refine Mask, que é muito semelhante ao Refine Edge, que a gente aprendeu em aulas anteriores. E vou selecionar aqui a opção Feather, um pouquinho maior para suavizar os cantos dessa minha máscara. E na opção Smooth, eu vou aumentar um pouquinho, para arredondar os cantinhos da minha máscara. Depois, eu posso utilizar o Shift Edge, para expandir um pouquinho mais essa minha máscara, deixando ela com +8 por exemplo. Observe aqui em cima, eu estou utilizando um modo de visualização On Black. Então, você pode selecionar essa opção, para que você possa ver exatamente como eu estou vendo aqui. Depois, eu vou selecionar aqui a opção de Output, de Saída no caso, vai ficar: Layer Mask. E vou clicar no OK, para eu ter o resultado, olha só! Apareceu umas rebarbazinhas azuis. Tudo o que eu preciso fazer agora, é selecionar novamente a minha máscara, e pressionar o Ctrl+I, para inverter a seleção. E eu tenho um resultado com os cantos suaves. Se o resultado ficar muito diferente, exibindo muitas áreas aqui do meu fundo, eu posso selecionar novamente a máscara, dar um Mask Edge, e depois contrair um pouco mais, ou melhor, expandir um pouco mais aqui a minha seleção, para suavizar o resultado e dando OK aqui. O resultado final é esse aqui. A gente tem a nossa tela, aplicada ao nosso tablet. Depois que eu finalizar a adição do meu retângulo azul, e transformá-lo da maneira que eu quiser, vou dar um Ctrl+S para salvar, e olha o resultado aqui na nossa imagem original: A nossa tela acaba aparecendo. Você pode refinar um pouco mais esse resultado. A gente tem aqui embaixo, aparecendo demais um pouquinho aqui a tela. Você pode então, aumentar um pouco mais para baixo aqui, a sua área azul, um pouco mais para o ladinho, justamente para evitar que a tela de fundo acabe aparecendo no seu tablet. Pronto! Vou dar um Enter aqui. E olha só, o resultado final, é um retângulo azul sobre a sua tela. E quando você salva, deixa eu salvar aqui no Ctrl+S, voltando aqui para a sua imagem original, olha o que você tem! Claro que como você tem aqui apenas um retângulo azul, o resultado não fica tão legal assim. Agora é que vem a mágica do processo. A gente vai voltar aqui para o nosso objeto inteligente, vamos dar dois cliques no objeto inteligente que representa a nossa tela, e a partir daí, a gente pode inserir a nossa arte nessa tela, para que a gente possa representar essa arte na tela original do nosso tablet. Para isso, eu já baixei algumas imagens de interface de usuário. Eu baixei aqui algumas fotos da internet mesmo, pesquisei no Google. Eu vou deixar o link aqui embaixo, para você baixar algumas interfaces se você quiser treinar logo diretamente no seu novo mockup. E vou ampliar essa interface de usuário, para que ela ocupe toda a minha tela. Eu vou aumentar um pouquinho mais aqui, e vou baixar ela, para que eu exiba a parte de cima exatamente alinhada ali. Vou apertar o Enter. Depois de inserir a minha arte, utilizando a opção File, Place Embedded, seria Inserir Incorporado, alguma coisa nesse sentido, eu vou salvar no Ctrl+S, e olha só! Voltando para a minha imagem anterior, para o meu nível anterior, eu já tenho a minha arte aplicada no meu tablet. Eu vou salvar de novo no Ctrl+S, voltando para a minha imagem anterior, olha só o resultado final! Eu tenho o meu mockup editado, com a minha interface de usuário. Se eu quiser, eu posso remover aqui, algumas das camadas de ajuste, e deixar apenas uma ou outra, se eu achar conveniente. Eu posso ainda, como são camadas de ajuste, editá-las facilmente, utilizando as camadas, clicando nelas e voltando aqui, a minha edição a partir do ponto em que eu parei. O que é legal nisso, é que você pode utilizar o objeto inteligente da sua camada principal aqui embaixo, para adicionar profundidade de campo. Como assim? Depois de selecionar a camada de objeto inteligente principal, que é essa aqui de baixo, e clicar no menu Filter, Blur, e na opção Gaussian Blur, você pode adicionar um pequeno desfoque, não tão grande assim, deixa eu aumentar. Pronto! 10. Um raio de 10 pixels de desfoque. E você tem um desfoque na sua imagem total. E, utilizando essa máscara que acaba sendo adicionada à sua camada inteligente, todo filtro inteligente aplicado a uma camada de objeto inteligente, acaba recebendo uma máscara. Você pode selecionar essa máscara, e utilizando a ferramenta Gradiente, e um gradiente de preto para branco, utilizando a opção Radial aqui do ladinho, eu marquei também a opção Reverse, olha só o que você pode fazer: Clicar e arrastar, para criar uma profundidade de campo na sua imagem, olha que bacana! Então, utilizando o gradiente de preto para branco, na opção Radial, e com a opção Reverse marcada, se tiver ao contrário de branco para preto, é só você desmarcar. Ao clicar e arrastar, para desenhar um oval de gradiente, que você pode ver aqui na minha máscara, eu acabo criando a profundidade de campo, que acaba dando aí, um toque bem interessante, bem legal à minha imagem. Claro que quanto menor for o raio do seu gradiente, maior será o desfoque. Então, se você puxar bastante o seu gradiente, o desfoque vai ser menor em algumas áreas. Isso depende de como você aplica o efeito na sua máscara. Então, se você esconder e exibir aqui o efeito, olha que legal! Você consegue ver o antes e o depois do resultado de profundidade de campo. Como eu disse no começo desse vídeo: O resultado depende das suas técnicas de edição, e depende diretamente da qualidade da sua imagem. Eu fechei aqui, todos os outros objetos inteligentes, para que você veja o resultado final apenas na minha imagem principal. Eu vou salvar essa imagem, vou dar um Ctrl+S aqui. Deixa eu salvar aqui na pastinha do vídeo. Pronto! Mockup Tablet 2. Vou salvar aqui. E no final, o que você vai ter aqui, é o arquivo em Photoshop, que pode ser editado facilmente. Aqui, eu estou com a proporção original da imagem. Se eu der aqui a letrinha C, e utilizar um corte diferente, um cortezinho com um ângulo diferente, eu tenho um resultado bem bacana, bem legal, sem aquela imagem muito comprida. Deixa eu dar um Ctrl+Z aqui, só para mostrar as configurações da ferramenta de corte. Eu utilizei aqui, a ferramenta de corte com a opção Delete Cropped Pixels, desabilitada. Para ela não apagar os pixels da imagem. Depois, eu selecionei aqui a opção: 5x7, e aí, eu ajustei um pouco mais para baixo, para aparecer aqui a lente, para aparecer uma parte ali do meu abajur, da minha luminária, dando dois cliques para confirmar o corte. Como eu desmarquei a opção Delete Cropped Pixels, se eu quiser ajustar esse corte de novo, é só dar um clique na tela, e como os pixels da imagem não foram apagados, eu posso reajustá- lo, e cortar novamente. E olha o resultado final, que legal, que interessante! Você tem um mockup, que pode ser facilmente editado. E se eu quiser trocar essa arte, Liute? O que é que eu faço? Eu vou dar um Salvar aqui, só para salvar a minha arte já com o corte configurado. E para você trocar a arte da sua interface de usuário, eu quero botar uma outra arte, eu quero botar uma outra tela? Você pode simplesmente, ir editando os seus objetos inteligentes. Vou clicar aqui na ferramenta Mover, não precisa selecionar, é só uma mania que eu tenho. Depois, eu vou dar dois cliques sobre o objeto inteligente da minha camada principal, para abri-la em uma nova tela. Aqui, como eu quero mudar a minha tela, e não a minha imagem de fundo, eu quero mudar apenas a minha arte, eu vou dar dois cliques novamente no objeto inteligente da tela. Dando dois cliques nesse objeto inteligente, eu volto para a edição da minha telinha retangular. Vou clicar em File, Place Embedded, e vou selecionar uma segunda tela aqui, e ajustá-la a tela aqui do meu tablet. Olha só que bacana! Pronto. Vou dar um Enter para confirmar a edição, dar um Ctrl+S para salvar, e posso fechar. Pronto! A alteração já é refletida na minha segunda camada inteligente. Dando um Ctrl+S para salvar, depois, fechar. E olha o resultado final: Uma nova tela do meu projeto. Eu posso dar um Ctrl+Shift+S e ir salvando aqui os JPEGs. Tela 1. Salvei aqui a tela 1. Vou alterar a minha arte, dando dois cliques. Depois de novo, dois cliques no próximo objeto inteligente, vou só esconder a camada de cima, e ir fechando e salvando. Nem preciso fechar, posso só salvar. Eu estou fechando aqui, só para facilitar a sua vida no entendimento de como funciona. A tela é atualizada, e vou salvar aqui como Tela 2, em JPEG. Vou salvar. Então, se com uma foto de celular, a gente conseguiu esse resultado de mockup, imagine você utilizando uma foto assim! Uma foto com uma câmera profissional. Uma foto com pelo menos uma resolução melhor, de câmera de celular que te dê uma profundidade de campo, por exemplo. Que também nem é tão importante, porque você viu que a gente pode criar uma profundidade de campo, utilizando desfoque Gaussiano. Imagine aplicar uma arte num mockup, com um ângulo desse por exemplo. Então, você apresenta o seu trabalho, de uma maneira muito legal. E você pode criar isso, a partir de qualquer fotografia. Ah, eu quero criar um mockup de sandália. Quero criar um mockup daquela latinha ali atrás. Quero criar um mockup da tela do meu computador. Quero criar o mockup de uma geladeira. Eu posso tirar uma foto da geladeira aqui de casa, e fazer um mockup também. Então, você pode criar mockups da maneira que você quiser, utilizando essas técnicas, e o resultado final, deixa eu abrir aqui para vocês verem as imagens que a gente salvou. Eu salvei aqui nas imagens do vídeo, olha só! Tela 1. Você manda isso aqui para o seu cliente. E Tela 2, você tem aí, a sua tela de aplicativo, a sua tela de site, enfim, o que você quiser apresentar para o seu cliente, você tem um resultado através de uma aplicação profissional, que você criou em casa, utilizando fotografias domésticas, fotografias dos objetos que você tem em casa. Espero que você tenha gostado do resultado. Desculpa se ele não ficou tão profissional, mas a câmera do meu celular não é tão boa assim para criar um resultado muito bacana. Mas, o objetivo desse vídeo, é mostrar o norte de como você pode criar esses projetos com facilidade, para você ver que não é nenhum bicho de sete cabeças, você criar os seus próprios mockups, para apresentar os seus trabalhos. Se você gostou desse vídeo, clica no gostei, compartilha o vídeo com seus amigos no Facebook, no Twitter, no Instagram, leva o link lá para o WhatsApp, compartilha com toda a sua galera. E não se esquece de clicar no link aqui embaixo na descrição do vídeo, para saber como você pode concorrer ao livro do material digital, do Gui Bonsiepe, da editora Blucher. A gente se vê no próximo vídeo. Um forte abraço! Tchau, tchau!.
Normas da abnt de artigos cientificos material para piscina em jundiai Alagoas cursos de informatica no centro do rj. Arapiraca curso de gerenciamento de obras em manaus Monografia, art 197 ii do ctn Código, curso de guitarra en valencia Estudo de Casos, mensalidade do curso de engenharia civil na puc Revisão. Curso de cuidador de idosos rj furnas cursos gratuitos trackid sp 006 normas da abnt de artigos cientificos Coronel Fabriciano chevrolet revisao onix preco. Curso excel gratis 2020 Proposta de Pesquisa Ibirité curso auditor fiscal rj, curso de informatica senai campo grande ms.
Novo Hamburgo:
Denise Bond, Tompkins County: Manhattan College, The Bronx. Campos dos Goytacazes: CUNY Graduate Center; 2018.
Maureen Roberts, Jefferson. Porto Alegre: Tribeca; 2009.
Gordon Young, F D R Drive zip 10021. Sete Lagoas: Lutheran; 2020.