raone

Posts na tag raone

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!

25. Mar. 2013

Brinde: Actions são sempre uma boa ideia!

Arquivado em: Dicas, Fotografia

Quando a Mel me pediu para preparar um post com algumas actions para vocês eu pensei: “ah, que ideia bacana! já faz algum tempo que não uso actions no Photoshop”, então pedi para que ela selecionasse algumas fotos aleatórias SOOC (direto da câmera — sem nenhuma edição) e me enviasse. Logo que o e-mail chegou e abri as imagens do anexo fiquei perplexo e com um único pensamento gritante: “what i’m doing!?“.

Acontece que as fotos da nossa exímia blogueira Melina não precisam necessariamente de edição! E acho que esse é o mais encantador do seu trabalho, porque ela consegue transparecer essa simplicidade e pureza das pequenas coisas através de seus clicks sem adicionar nenhum super ingrediente extra no final.

E sabe de uma coisa? Eu não sou um fotógrafo ou um editor de imagens profissional. E também não trabalho com edição ou qualquer área ligada a esse universo. Mas em contrapartida sou entusiasta, amo o que faço na blogosfera e acredito que tenho um bom “olho” para escrever sobre o visual das coisas.

O que eu mais gosto sobre actions é que ao escolher a correta é tiro dado e bugio deitado (como diz o povo aqui do meu Sul). Você tem o domínio de transformar uma mera imagem num registro fotográfico memorável. Mas nem sempre uma action pode ser a solução dos seus problemas, é preciso que esse efeito se adeque a sua foto. E é aí que está o problema. Geralmente uma ação é criada com base numa imagem específica, e as configurações utilizadas para sua criação, obviamente são adaptações para essa imagem. É por isso que trabalhar com actions pode ser uma tarefa frustrante, porque muitas vezes é preciso desfazer e reverter essas edições até que você encontre o resultado (ou a combinação) perfeita.

Para a criação dessa postagem eu desenvolvi cinco actions aleatórias no Photoshop que aperfeiçoasse as fotos da Mel, mas ao mesmo tempo, que não as descaracterizasse. No fim desse post vocês encontrarão uma imagem com um link direcionável para o download do arquivo (.ATN) do Photoshop. E se você é novo por aqui e não sabe como usar/instalar actions, leia esse post e tire suas dúvidas. Quem quiser também pode deixar perguntas nos comentários dessa publicação, que irei respondê-las o mais rápido possível!

Exemplos:

antes | depois

antes | depois

antes | depois

antes | depois

antes | depois

Minha ideia era descrever brevemente cada action para vocês entenderem a minha ideia de criação, mas para o post não ficar muito técnico e extenso, escolhi só demonstrar visualmente o antes e depois das imagens. Na sua maioria foram ajustes de iluminação, brilho, contraste, saturação, curvas, níveis, balanço de cores e etc. (ainda quero fazer um post explicando tudo o que eu sei a respeito desses fatores). E como disse no início do post, as fotos da Mel são quase impossíveis de editar porque, sinceramente, elas não precisam de ajustes. Mas tentei diferenciar um pouco do que vocês estão acostumados a ver por aqui, sem perder muito as características do blog.

Espero que vocês tenham gostado e façam bom uso! See ya!

P.S.: Sim, o nome das actions são títulos das minhas músicas favoritas da cantora Lana Del Rey, err. Pouco criativo? Pois é, esse post foi o que deu mais trabalho para ser feito porque eu ando num período “procrastinador” e com bloqueios criativos constantes (hã!?). Mas no fim das contas acho que combinou com a ideia que pretendia transmitir. Enfim.

20. Fev. 2013

Brinde: Calendários 2013

Arquivado em: Organização

Olá pessoal, como estão? Aqui é o Raone e esse é o meu primeiro post do ano no A Series of Serendipity. Pra quem não sabe, no ano passado desenvolvi um projeto no meu blog pessoal sobre a criação de calendários mensais. O objetivo era o seguinte: todo mês eu me inspirava em algum tema, cenário ou alguma ideia, e criava no Photoshop um layout de calendário digital. Nesse ano de 2013, visando  a praticidade e objetividade, optei por desenvolver um conjunto dos calendários digitais com todos os meses do ano num mesmo layout. Ou seja, selecionei um dos temas que fiz no ano passado e com base nele criei esse set de 2013. Assim, ao invés de planejar esse estilo de postagem no início de cada mês durante o ano, será publicado somente esse post origem.

Resolvi adotar essa ideia porque pretendo me dedicar em outras propostas de postagem, estou preparando uma lista com alguns assuntos que planejo compartilhar aqui no blog e espero conseguir falar sobre todos até o final do ano. E também, como estarei trabalhando e estudando, quero aproveitar o máximo de tempo disponível para me dedicar a blogosfera, e como esse estilo de post consome muito do meu tempo, acredito que seja mais relevante falar sobre ele uma unica vez no ano.

Abaixo vocês podem conferir uma animação em GIF com alguns previews mensais dos calendários:

Diferentemente do calendário de dezembro (que foi o último publicado por aqui), não me apeguei muito a detalhes. Eu precisava de um calendário clean, minimalista e que se adaptasse em diferentes resoluções e plataformas. Escolhi como cor base a Pantone Emerald 17-5641 que foi eleita a cor do ano de 2013 pela Pantone, e como um opcional disponibilizei também os calendários com o plano de fundo cinza suave (soft gray) e branco (white).

No final desse post vocês encontrarão os links específicos para download na versão de Desktop; com as resoluções de 1680 x 1050 pixels e 1280 x 800 pixels (para ambos os tamanhos há dois links de download, um deles com os calendários no rodapé direito e outro no rodapé esquerdo). A versão para iPhone; nas resoluções de 640 x 960 pixels e 320 x 480 pixels (medida padrão para iPhones 3GS). E também uma versão Mobile (utilizada pelo meu aparelho telefônico — imagem abaixo), nas medidas de 240 x 320 pixels.

Para não haver qualquer mal-entendido resolvi criar alguns tópicos listando o que vocês podem ou não fazer com o download dos calendários. Eu sei que preciso criar urgentemente um manual de usuário com os Termos de Uso, mas com tantas coisas para me preocupar sempre acabo esquecendo…

VOCÊ PODE:

  • Usar esses arquivos para uso pessoal ou empresarial, como proteção de tela para o seu Desktop, Tablet, iPhone, iPad, Mobile (dispositivos móveis), entre outros. Como também para decorar seus sites e blogs, mas não use esses arquivos para criar projetos pré-fabricados de blog ou templates para websites;
  • Usar esses recursos para desenvolver um produto físico (imprimir os calendários para utilizá-los no seu dia-a-dia);
  • Divulgar o link dessa postagem em seu blog, mas não pode redistribuir, revender ou re-embalar esses recursos denominando-se o proprietário;
VOCÊ NÃO PODE:
  • Você não pode usar esses arquivos como parte de qualquer tipo de download digital em seus sites ou blogs, seja disponibilizando-os gratuitamente ou vendendo;
  • Você não pode baixar, modificar esses arquivos e criar o seu trabalho em cima deles (vendê-los);
  • Você não pode vincular esses recursos para qualquer material prejudicial, ou sites e blogs que estejam relacionados ao bullying, pornografia e racismo;

Deixadas todas essas formalidades de lado, eu realmente espero que vocês gostem e façam bom uso dos calendários! Os melhores votos para 2013 — continue fazendo as coisas que você ama! ♡

D O W N L O A D | D E S K T O P
1680 x 1050 px | calendários no rodapé direito (493 kb)
1680 x 1050 px | calendários no rodapé esquerdo (529 kb)
1280 x 800 px | calendários no rodapé direito (652 kb)
1280 x 800 px | calendários no rodapé esquerdo (653 kb)
D O W N L O A D | i P H O N E
640 x 960 px (971 kb)
320 x 480 px (683 kb)
D O W N L O A D | M O B I L E
240 x 320 px (590 kb)
 
Créditos:
Monitor by AllexDA via deviantART
Keyboard by AllexDA via deviantART
Mouse by AllexDA via deviantART
Icons by Myssynen via deviantART
Label Shapes via Pugly Pixel
Font Futurist fixed-width via Dafont
Font Pea Miss Priss via Kevin & Amanda
Font Pea Ruth via Kevin & Amanda