Tutorial

Posts na categoria Tutorial

31. Mai. 2013

Tutorial: Caption Me

Arquivado em: Dicas, Fotografia, Tutorial

Olha só quem resolveu aparecer por aqui? O colaborador mais esquecido do A Series of Serendipity. Olá! Aqui é o Raone e hoje trago comigo um tutorial fresquinho para blogueiros e blogueiras principiantes. Hoje vocês irão aprender como adicionar legendas sobre as suas fotos através do Photoshop.

Antes de iniciar o conteúdo do post, gostaria de contar a vocês que, finalmente, minha vida de adulto e independente começou. E é por isso que eu acabei “sumindo” da internet e das redes sociais. Agora sou um trabalhador de carteira assinada que por mais que não esteja fazendo o que ama, aprendeu a admirar as pequenas coisas da vida. Porque no fundo de todo baú empoeirado, sempre há um grande tesouro escondido!

Se você que está aí do outro lado pensa em criar um blog, saiba que um dos conceitos mais importantes ao meu ver é o cuidado com o design geral, não só da página como o conjunto do blog em si. Com a expansão da blogosfera e o crescente avanço das mídias digitais, criar um blog se tornou algo trivial entre as pessoas do nosso século. O problema é que com tantas url’s desperdiçadas por aí, as coisas começaram a ficar um pouco similares entre si. Hoje em dia não é moleza ser exclusivo; visitar um blog e presenciar um conteúdo inédito é algo quase que impossível.

Ter um layout bem cuidado é um diferencial. E quando eu digo layout não me refiro somente ao layout da página, e sim dos seus posts. Isso mesmo. Considerando que cada post do seu blog ocupa pelo menos metade da sua tela, podemos dizer que é o conjunto de posts dessa página  que vai causar reações em seus leitores. O cuidado com o alinhamento, dimensões de imagens e tipografia, são detalhes que devem ser levados em consideração ao projetar e organizar o layout de seus posts.

Um blog bem cuidado com imagens memoráveis e contagiantes, vai ter o “fator x” que vai me fazer imediatamente querer ler mais! Como aqui no A Series of Serendipity: mesmo quando não estou conectado, fico por horas e horas pensando sobre o processo de produção das fotos.

Quando estou com pouco tempo e conheço um blog novo, uma das coisas que faço é dar uma olhada geral no corpo do post, nas imagens e automaticamente — em suas legendas. Quase como um quebra-cabeça, as legendas podem “resumir” o conteúdo do post, ou seja, elas conseguem contar uma história curta rapidamente. No início da blogosfera, o padrão entre blogueiros era utilizar a legenda convencional: uma linha de texto no rodapé da foto em uma fonte um pouco menor. Hoje, com os aplicativos de edição de imagem, é possível aplicar legendas (ou palavras soltas) diretamente em suas fotos. E é isso que iremos aprender (ou se você já sabe — ver) no post de hoje!

Para o desenvolvimento desse post, utilizei o Photoshop CS3 como exemplo (por ser mais objetivo do que as versões atuais), mas tudo que for visto aqui funciona em qualquer edição do Photoshop, como também, para outros programas, entre eles: PhotoScape e PhotoFiltre Studio (dos mais conhecidos).

O primeiro passo do nosso tutorial é a abertura dos arquivos que iremos trabalhar. Nesse exemplo, irei utilizar uma foto do Sr. Bilbo.

1. Ao iniciar o Photoshop, geralmente as ferramentas já são acionadas automaticamente. Mas, caso não esteja aparecendo essa janelinha na lateral esquerda pra você, vá até o menu superior e clique em Janela (Window) > Ferramentas (Tools);

2. Com a janela de ferramentas ativa, vamos abrir a imagem que iremos trabalhar. Para isso, procure no canto superior esquerdo por Arquivo (File) > Abrir (Open…) > e procure sua imagem no diretório do seu computador. Você também pode usar o comando Ctrl + O ou Cmd + O (se você estiver num Mac);

3. Com a sua imagem aberta, certifique-se de que a janela de Camadas (Layers) está ativa. Para isso, vá até o menu superior e procure por Janela (Window) > Camadas (Layers) ou digite a tecla de comando F7;

Agora vamos conhecer um pouco as ferramentas de texto que iremos trabalhar:

Ao clicar no “T”  que está localizado no “centro” da paleta de ferramentas do Photoshop, vamos abrir as opções da ferramenta de Texto. Nesse tutorial vamos trabalhar somente com o Texto Horizontal (Horizontal Type Tool), mas sinta-se a vontade para experimentar e conhecer os outros comandos. Você pode acionar esse comando utilizando o atalho  pela tecla T do seu teclado.

Automaticamente ao abrir as ferramentas de texto, o Photoshop aciona um menu de ferramentas superior (que tem tudo o que você precisa, mas hoje vamos aprender a trabalhar com a Paleta de Texto). Como demonstrado na imagem ilustrativa acima, ao clicar no ícone localizado no canto superior direito, abriremos a Paleta de Texto, com as janelas de Parágrafo e Caractere. Caso você não esteja visualizando o ícone, não se preocupe, ele pode ser acessado através do menu superior, clicando em: Janela (Window) > Caractere (Character). Os comandos da janela de Parágrafo não vão ser utilizados no post, mas você pode deixar aberta como na imagem. 

Antes de irmos para o terceiro (e último) passo, gostaria de fazer uma “pausa” para esclarecer algumas opções de comandos da ferramenta Caractere.

Como vocês podem observar pela imagem ilustrativa acima, tentei ser o mais objetivo e didático possível (espero não deixar ninguém confuso, hein?). O Photoshop nos proporciona uma variedade de possibilidades para a formatação de textos, começando pela parte posterior da janela: temos a opção de selecionar o texto como Negrito (Shift + Ctrl + B), Itálico (Shift + Ctrl + I), deixar todas as letras Maiúsculas (Shift + Ctrl + K), todas em Minúsculas (Shift + Ctrl + H), como Texto Sobrescrito (Shift + Ctrl + +), como Texto Subscrito (Alt + Shift + Ctrl + +), como Texto Sublinhado (Shift + Ctrl + U) e por último, como Texto Tachado (Shift + Ctrl + /). Algumas opções são mais utilizadas do que outras, e isso vocês vão acabar vendo através da prática. Tudo depende da sua ideia e da proposta do post.

Na parte superior da janela, temos a caixa da família de fontes (aqui você vai selecionar a fonte da sua biblioteca que vai ser utilizada em sua legenda). Nesse tutorial, usei como exemplo a fonte Brain Flower que está disponível para download gratuito na internet. Logo abaixo, temos a opção de configurar o tamanho da fonte. Ao lado, vemos a opção de configurar o espaçamento entre uma linha e outra do seu texto. E embaixo, temos a opção de configurar o espaçamento entre as letras (eu uso muito esse comando!). Depois temos as escalas (que não são utilizadas com muita frequência), depois o deslocamento da linha de base, que é um comando útil mas pouco utilizado. E ao lado, temos a caixa de seleção de cor. Ao clicar sobre ela você poderá escolher qualquer cor do seu painel e personalizar a sua fonte.

Depois tem o comando de Kerning (ajuste de espaço) que eu não destaquei pra vocês na imagem (a caixinha onde diz Medida), mas ele é mais visto em trabalhos profissionais com tipografia. Ou seja, não iremos trabalhar com ele nesse post.

E por fim, vamos ao terceiro e último passo que é… escrever a legenda! No exemplo acima, resolvi colocar o nome do Bilbo no canto superior esquerdo da foto, como um enfeite digital (já que a imagem fala por si só).

1. Primeiramente, iremos criar uma nova camada de texto, clicando no ícone circulado na paleta de Camadas (Layers);

2. Com a nova camada criada, vamos selecionar o ícone da ferramenta de Texto Horizontal (Horizontal Type Tool – T) e clicar sobre algum canto da foto para criar o nosso texto;

3. É muito importante verificar sempre se a camada de texto que estamos trabalhando está selecionada. Porque acontece muito (comigo, pelo menos) de estar digitando um texto/legenda sobre uma camada errada: de foto, ou de um clip-art e etc;

Particularmente, eu prefiro trabalhar no Photoshop com todos os meus arquivos separados por camadas (layers) individuais. Além de ser mais prático é uma forma de manter o arquivo final sempre organizado!

E aí, entenderam? Bem pessoal, o post de hoje infelizmente vai chegando ao fim. Pode ter sido bobo para algumas pessoas (principalmente pra quem já trabalha com o Photoshop ou algum outro programa de edição), mas para aqueles que estão começando agora, acredito que a dica de hoje foi muito valiosa! Lembrando sempre que, não vai ser uma legenda que irá definir a sua foto. É importante pensar sempre no conjunto: uma imagem visualmente bonita nem sempre necessita de uma legenda (a imagem já fala por si só). Mas as vezes, uma imagem visualmente “o.k.” pode se transformar numa foto memorável e contagiante. E é nisso que vocês precisam pensar!

Espero que vocês tenham aprendido algo novo hoje e que eu tenha esclarecido as dúvidas de todos os leitores que perguntaram a Mel como ela escrevia sobre as fotos dos posts. Não quero terminar essa postagem com uma despedida e falando “até mais!”, então irei deixar o videoclipe de uma música que ouvi muito durante essas duas últimas semanas e que muda o meu humor (pra melhor) toda vez que ouço!

13. Set. 2012

Brinde: Calendários Setembro 2012

Arquivado em: Tutorial

Olá pessoal! Aqui é o Raone e no post de hoje resolvi compartilhar alguns modelos de calendários digitais do mês de Setembro que desenvolvi para o meu blog pessoal. A ideia de criação desse projeto já habitava a minha mente há um bom tempo, na verdade, logo depois que passei a me interessar por Web Design, comecei a pesquisar e visitar blogs nacionais e internacionais que disponibilizavam calendários mensais para download (dentre outros acessórios digitais), e foi através da inspiração e influência desses blogs que inaugurei o meu projeto no início do mês passado, com os calendários e wallpapers para Desktop do mês de Agosto (vocês podem conferir o post original, clicando aqui).

Para o mês de Setembro (que por sinal, está voando!), fiz algumas modificações no layout do arquivo original e criei esses três modelos que vocês podem conferir acima.  As cores que selecionei, ao contrário do mês passado, foram mais cleans: no primeiro modelo, um fundo branco (essencial), no terceiro; um fundo cinza suave, e no segundo, escolhi esse tom de  marrom desbotado que eu aprecio bastante.

No final desse post, vocês encontraram todos os links para download com algumas opções de resolução.  E para  o pessoal que usa iPhone ou Celular, também criei alguns modelos. Na imagem ilustrativa abaixo, vocês podem observar o visor do meu Samsung Yellow com o calendário brown.

A resolução do meu visor é 240 x 320px.  E as resoluções dos calendários para iPhone estão no tamanho 320 x 480px, que é o padrão para iPhones 3GD. Se você usa iPad, Tablet ou outro aparelho com uma resolução inferior e gostou dos calendários, me escreva nos comentários desse post, que em breve poderei atualizá-lo com o tamanho que você solicitou.

No mês passado, eu desenvolvi um pequeno screencast ensinando como modificar as cores do background dos calendários. E também, como aplicar patterns, texturas, como plano de fundo. Caso você tenha alguma cor de sua preferência e queira personalizar o calendário, baixe o arquivo .PSD (para Photoshop) no final do post e confira algumas dicas no tutorial abaixo:

Demonstração: Colorindo e texturizando backgrounds no Photoshop from Design of Monsters on Vimeo.

Para o pessoal que curte cores neons e vibrantes, na figura abaixo eu personalizei algumas amostras dos calendários com cores que achei bacana! Coloquei também o código hexadecimal (se você não faz ideia do que é isso, leia o final desse post) para o Photoshop.

DOWNLOAD – CALENDÁRIOS PARA DESKTOP
PSD (43 Kb)
 DOWNLOAD – CALENDÁRIOS  PARA iPHONE
320 x 480 px (36 Kb)
DOWNLOAD – CALENDÁRIOS PARA CELULAR 
240 x 320 px (42 Kb)

EDITADO:

Download pra iPhone: Brown//Soft Gray//White

Download pra celular: Brown//Soft Gray//White

Bem pessoal, o post de hoje vai ficando por aqui! Espero que tenham gostado dos calendários e até a próxima! (:

21. Ago. 2012

Tutorial: Como usar Actions

Arquivado em: Dicas, Fotografia, Tutorial

Olá pessoal! No post de hoje resolvi abordar um assunto muito procurado pelos blogueiros, usuários do Photoshop e muitas pessoas entusiastas que se interessam por edição de imagem. Hoje vou ensiná-los(as) como utilizar  as curiosas actions no Photoshop.

Para aqueles que são iniciantes, vou explicar um pouquinho sobre o que são actions (ou ações) e onde encontrá-las.

O QUE SÃO ACTIONS OU AÇÕES?

Bem, actions são basicamente um efeito de edição de imagem instantâneo. Por exemplo, imaginem um fotógrafo que precisa editar uma sessão de fotos com efeitos padronizados para todas as suas fotografias. Ao invés de editar imagem por imagem, ele grava/cria uma action com as edições padrão que ele irá usar em todas as fotos de sua sessão, e depois só irá abrir as suas imagens no Photoshop (ou em outro software de edição que ele utilize) e aplicar as actions nas imagens.

Um exemplo bem prático seria para o pessoal que possui blogs na internet. Ao preparar um novo post, antes de fazer o upload das fotografias que você vai utilizar, é interessante aplicar um tamanho padrão para as suas imagens (normalmente em torno 640 x 480px). Então, ao invés de abrir foto por foto e aplicar as configurações de tamanho, é mais fácil criar uma action para isso. Aí você irá abrir as suas fotos, aplicar a action e pronto! Sua foto estará no tamanho padrão para ser importada para o seu blog!

ONDE EU ENCONTRO ACTIONS NA INTERNET?

Hoje em dia, as actions estão por todo lado! Basta você saber onde e como procurar. Um local que eu uso e recomendo é o Pinterest. Lá você pode pesquisar combinações como: actions download, actions free ou simplesmente actions. Outro local que eu indico é o DeviantART, que possui uma coleção de actions gratuitas que são disponibilizadas pelos próprios internautas e usuários do site.  Além desses dois locais, no próprio Google você encontra links com endereços de sites, blogs e páginas de redes sociais que divulgam actions para o Photoshop.

COMO USAR ACTIONS?

Agora que vocês já sabem o que são actions e como encontrá-las na internet, vou ensiná-los(as) como usar esse recurso no Photoshop. Para esse tutorial em específico, desenvolvi  um conjunto com três actions no Photoshop e disponibilizei no final desse post para download gratuito. Mas lembrem-se: nem sempre uma action que combinou perfeitamente com uma fotografia que você viu na internet poderá funcionar para você.

É importante lembrar que o Photoshop possui várias ferramentas que possibilitam fazer ajustes de cores e tonalidades, corrigir imperfeições e ajustar a nitidez de uma imagem (assuntos para futuros posts). Ou seja, às vezes você até pode usar uma action que você adorou, basta fazer algumas modificações anteriormente em sua imagem.

Mas vamos ao tutorial:

1. Primeiramente, comece abrindo a fotografia que você  irá utilizar para aplicar a action. Para fazer isso, vá até o menu superior do Photoshop e procure pela primeira opção: Arquivo (File) >> Abrir… (Open…) >> Vai abrir uma janelinha para você procurar o seu arquivo em algum diretório do seu computador. Procure pela imagem que você irá usar e depois dê um duplo clique sobre ela. Se você preferir poderá simplesmente digitar o comando Ctrl + O (Windows) ou Cmd + O (Mac) em seu teclado.

2. Depois de abrir a sua imagem, verifique se a janela de Camadas (Layers) está aberta. Caso ela não esteja, vá até o menu superior do Photoshop e procure pela opção Janela (Window) >> Camadas (Layers). Ou aperte a tecla F7.

3. Agora abra a janela de Ações (Actions). No menu superior do Photoshop,  procure por Janela (Window) >> Ações (Actions). Ou aperte F9 que ela irá abrir automaticamente.

1. Click: Agora que você já abriu o seu arquivo e as janelas do Photoshop que você irá usar, vamos carregar as actions (ações). Se você for utilizar o arquivo que disponibilizei no final do post, depois de realizar o download e descompactá-lo, salve-o em algum local no seu computador. Após isso, na janela de Ações (Actions) clique no ícone indicado pela rodinha especificada na imagem ilustrativa acima que irá abrir uma sub-aba…

2. Click: Na sub-aba que abriu, procure pela opção Carregar Ações… (Load Actions…) localizada mais abaixo, e na janelinha que abrir, procure pelo arquivo de actions (.ATN) que você baixou. Dê um duplo clique sobre ele.

3. Click: Pronto! O seu conjunto de actions já foi carregado. Agora, clique na flechinha ao lado do ícone da pasta “A Series of Serendipity (Set 1)” e escolha uma das ações disponíveis: Fwooper, Puffskein ou Kneazle e clique no botão de play (ícone indicado pela rodinha laranja) e pronto! Automaticamente você visualizará o efeito da action na sua fotografia. Você também pode interromper uma ação no meio dela, clicando no botão de stop. A action que usei nessa imagem foi a Fwooper.

1. Click: Na imagem acima, vocês podem observar a fotografia que usei com o efeito da action já aplicada. Caso você ache o efeito muito forte ou contrastante, poderá alterar a estrutura da ação, indo  até a janela de Camadas (Layers) e clicando em (selecionado)  uma das camadas…

2. Click: Com a camada selecionada, vá até o botão Opacidade (Opacity) indicado acima, e ao clicar sobre ele, você poderá alterar a opacidade de 100% para 80 ou 60%, até conseguir um resultado satisfatório.

Para vocês visualizarem melhor os efeitos das ações, criei alguns modelos como exemplos que vocês podem observar abaixo, primeiro com a fotografia SOOC (original, sem nenhuma edição) e depois com a action aplicada:


Como vocês perceberam, os efeitos que usei  na composição dessas actions foram muito simples. Algumas pequenas modificações que fiz foi na saturação, brilho e contraste (até porque as fotos da Mel nem precisam de edição, né? ^-^). O restante foram camadas que eu criei com cores sólidas e modifiquei o estilo da blending (mistura).  Talvez isso tenha sido reflexo de uma fase “minimalista” que estou passando, ando tentando evitar  exageros.

Abaixo, vocês poderão fazer o download gratuito do arquivo (.ATN) com o conjunto “A Series of Serendipity (Set 1)“. Nomeei esse conjunto como Set 1, porque futuramente posso desenvolver outros modelos de ações e postar aqui no blog para vocês. Ao realizar o download do arquivo (.RAR), vocês deverão descompactá-lo (recomendo o programa WinRAR) e extrair o arquivo para algum local no diretório do seu computador. Para vocês não terem problemas como no post anterior, eu compactei somente o arquivo (.ATN) sem nenhuma sub-pasta. É só baixar o arquivo, extrair e instalar no Photoshop.  O arquivo tem 1Kb, baixa em menos de 1 segundo. (:

Bem pessoal, o post de hoje vai chegando ao fim! Espero que vocês tenham gostado e aprendido um pouquinho mais sobre actions. Lembrando que a intenção desse post foi apenas a de ensinar como usar actions. Futuramente posso criar um novo post ensinando vocês como criar suas próprias actions, ok? (:

PS.1: Antes que vocês se perguntem, os nomes que eu dei para as ações que desenvolvi (Fwooper, Puffskein e Kneazle) foram inspirado no mundo mágico do livro Animais Fantásticos & Onde Habitam, de autoria da J. K. Rowling.

PS.2: Pessoal, sintam-se livres para deixar nos comentários qualquer dúvida em relação ao post. Quem quiser também, pode deixar indicações de assuntos que vocês tenham curiosidade e queiram que eu aborde no próximo ou em algum futuro post. Ficarei feliz em ler, responder e solucionar todas as suas dúvidas!

Vejo vocês em breve! (: