Efeito em Texto: Realista

Efeito simples mas util, viu?

Tutorial:
01. Abra o PhotoScape, vá em editor e abra a foto que voce deseja colocar o texto.
02. Mude para a aba Objeto e clique na ferramenta de texto, digite o que deseja e escolha a cor do texto (recomendo uma cor neutra que será o fundo da fonte) e o tamanho do texto, após ajustar tudo dê ok e posicione na foto como deseja.
Clique novamente na ferramenta de texto, agora mude somente a cor, que será a cor em destaque.
Coloque o texto em cima do texto anterior, e depois coloque só um pouco para a esquerda para criar o efeito realista, assim:

Pronto!

Duvidas estou a disposição para esclarecer, em breve no nosso canal vai ter video explicando direitinho viu?
Bisous!

Colocando Mapa de Visitantes Online no Blog

Sobre o Gadget
Este Gadget é desenvolvido pelo Who's Amung, é um mapa online onde você visualiza quantos visitantes e de quais paises está visitando o seu blog no momento. É interessante porque você tem acesso a qual post eles estão visitando:

Criando e Personalizando o Mapa
Acesse o site http://whos.amung.us/showcase/, clique em O Widget de Mapa, em seguida vai abrir o mapa e as opções de personalização:

Entendo melhor:

01. Escolha o modelo de mapa que você deseja (conforme mostra o print acima) você tem 8 opções para colocar.
02. Em baixo nos temos um painel de opções, escolha um deles para representar o visitante no mapa.
03. Esta é uma barra para ajustar o tamanho do mapa no blog, eu recomendo deixar pequeno já que vai ficar na sidebar do blog. Para ajustar é subir ou descer o ponto.
Depois de personalizar, acima do mapa tem uma caixa com codigos, este é o HTML que vai ativar o mapa funcionar no blog, copie-o e siga o proximo passo.

Como ativar o mapa do blog:
Abra o blog e no painel de controle clique em Layout, escolha onde voce quer colocar o mapa (recomendo colocar na lateral mas é uma escolha pessoal), depois clique em Adicionar um Gadget > HTML/JavaScript e cole o codigo que copiamos na caixa e salve.

Pronto!

Já sabem né, qualquer duvidas é só deixar o comentário aqui que eu ajudo direitinho.
Bisous!

Tamanho ideal para redes sociais

 

 

Obrigado ao Agenda dos Blogs por essa dica :)

O que é Flat Design? Porque a Tendencia?

Essa tendência do web design é a pura simplicidade dos elementos, da clareza do layout. Cada elemento ou caixa é nítido. Nada realista é adicionado. Vamos dar alguns exemplos de Flat design:

01. Simplicidade dos elementos

02. Simplicidade dos elementos

Usa-se muitos elementos de interface de usuário simples, como botões e ícones. Muitas vezes são formas simples, como retângulos, círculos ou quadrados. Se jogue no negrito com cor em botões clicáveis para incentivar o uso, talvez uma sombra diferenciada. Mas não confunda elementos simples com um design simples. Os conceitos de Flat Design podem ser tão complexos quanto qualquer outro tipo de esquema de design.

03.Foco na Tipografia

Nesse caso a tipografia é extremamente importante.

O tom das fontes deve corresponder ao esquema do resto do layout. Uma fonte muito produzida pode parecer estranho em um projeto super simples. Podem também ser ousadas, mas de forma simples e eficiente.

04.Foco na  Cor

A cor pode ser o grande desafio. No Flat Design a paletas de cores, na maioria da vezes, são muito mais brilhante e mais colorido do que os de outros sites. Mas lembre-se que pra toda regra há exceções.

Os tons tendem a ser vibrante, sem matizes e tonalidades. Cores primárias e secundárias são populares. Além disso, certos tipos de cores também são usadas com freqüência. Nesta interação da tendência, cores retros – incluindo salmão, roxo, verde e azul – são especialmente populares.

05.Abordagem minimalista

Evite muita frescura na concepção geral do site. Cor e texto simples podem ser o suficiente. Se você quiser adicionar efeitos visuais, opte pela fotografia simples.

E você? Vai aderir essa nova tendência?

Obrigada des1gnon por esclarecer sobre Flat Design! :D

Entendendo o Photoshop

Hey guys!

Vamos acabar com o medo de usar o photoshop? O Photoshop é um editor mundialmente conhecido mas ainda muitos temem em usar por achar complexo, acompanhe o post e tire suas duvidas conosco!

O que são Layers de ajuste?
Layer nada mais é do que as camadas da foto, as camadas se localizam no painel direito:

Acima podemos ver que há somente uma camada, que é a foto que está sendo editada antes de você editar sua foto é aconselhável você duplicar a camada da foto antes de fazer qualquer alteração.

Para duplicar, clique com o botão direito do mouse em cima da Camada e clique em "Duplicar Camada".

Após editar clique com o botão direito em cima da camada que foi criada e clique em "Mesclar camadas visíveis" e salve clicando em Arquivo > Salvar Como... e salve-a.
Dica: Não é recomendado salvar a foto somente na opção "Salvar" se for uma foto pessoal porque ela será substituída pela foto editada.

Ferramentas de Efeitos no Photoshop
Abra sua foto e abaixo da camada tem uma barra com varias opções, clique na opção que está em destaque:

Clicando nesta opção você abrirá varias opções para editar:

Como podem observar há muitas opções como Curvas (o sistema é o mesmo do PhotoScape), Matiz,Saturação e etc.

Atalhos do Photoshop

Atalhos da Barra de Ferramentas

A – Seleção de Demarcador
B – Pincel
C – Corte Demarcado
D – Reseta as “Cores de Primeiro Plano” e “Plano de Fundo Padrão” para Preto e Branco (Reset “Foreground Color” and “Background Color” To Black and White);
E – Borracha
G – Degradê
H – Mão
I – Conta-gotas 
J – Pincel Para Recuperação de Manchas
K – Fatia
L – Laço
M – Letreiro Retangular
N – Observações
O – Subexposição
P – Opções da Ferramenta Caneta
R – Desfoque
S – Carimbo
T – Texto Horizontal
V – Mover
X – Alternar “Cores de Primeiro Plano” e “Plano de Fundo” (Change “Foregroud Color” to “Background Color”);
W – Varinha Mágica
Y – Pincel do Histórico
Z – Zoom
F – Alternar para o “Modo de Tela Padrão” (“Pattern Screen”); “Modo de Tela Cheia com Barra de Menus” (“Fullscreen w/ Menu Bars”); “Modo de Tela Cheia” (“Fullscreen”).

Atalhos do menu "Arquivo"

Ctrl+N
 – “Novo…”
Ctrl+O – ”Abrir…”
Ctrl+Alt+O
 – Procurar…”
Ctrl+Alt+Shift+O – "Abrir Como…”
Ctrl+Shift+M – "Editar no Image Ready”
Ctrl+W – "Fechar” (“Close”);
Ctrl+Alt+W
 – "Fechar Todas” (“Close All”);
Ctrl+Shift+W
 – "Fechar e Ir para o Bridge…”
Ctrl+S – "Salvar”
Ctrl+Shift+S – "Salvar Como”
Ctrl+Alt+Shift+S
 – "Salvar para Web”
F12 – "Reverter”
Ctrl+Alt+Shift+I – "Info Sobre Arquivo”
Ctrl+Shift+P – "Configurar Página”
Ctrl+Alt+P
 – "Imprimir com Visualização”
Ctrl+P – "Imprimir”
Ctrl+Alt+Shift+P
 – "Imprimir uma Cópia”
Ctrl+Q – "Sair”

Atalhos da aba "Editar"

Ctrl+Z – “Desfazer” 

Ctrl+Shift+Z – “Avançar uma Etapa”

Ctrl+Alt+Z – “Retroceder uma Etapa”

Ctrl+Shift+F – “Atenuar…”

Ctrl+X ou F2 – “Recortar” 

Ctrl+C ou F3 – “Copiar” 

Ctrl+Shift+C – “Copiar Mesclado” 

Ctrl+V ou F4 – “Colar” 

Ctrl+Shift+V – “Colar em” 

Ctrl+T – “Transformação Livre” 

Ctrl+Shift+T – “Transformar Novamente” 

Ctrl+Shift+K – “Configuração de Cores” 

Ctrl+Alt+Shift+K – “Atalhos de Teclado” 

Ctrl+K – “Mudar Preferências” 

That's all folks!

Copyright (2015) Cantinho do PhotoScape.

Tirando imperfeições no Photoshop

Tutorial:

01. Abra seu Photoshop, clique em Arquivo > Abrir e abra a foto que deseja editar.

Feito isso, clique na ferramenta Pincel de Recuperação de Manchas ou aperte a tecla J.

Clique com o botão direito em cima da camada e clique em Duplicar Camada.

02. Em seguida dê zoom na foto e clique em cima da imperfeição que deseja remover, dê cliques em cima das manchas, espinhas mas não pressione ou arraste apenas clique.

Clique no olho que se encontra ao lado da camada:

Ao clicar você vai visualizar a foto sem editar, clicando novamente você vai visualizar a camada que você está editando.

Se achar que ainda não viu diferença edite até ficar da maneira que deseja, feito isso clique com o botão direito em cima da camada e clique em "Mesclar camadas visíveis".

Clique em Arquivo > Salvar Como.. e salve a foto.

Dica: Nunca clique somente em em "Salvar" porque vai substituir a foto original.

Copyright (2015) Cantinho do PhotoScape.

Todos os direitos reservados.

Paleta de Cores [Clear Coffe]

#e6aaad

#cf999b

#b8888a

#a17679

#8a6667

#735556

#5c4445

#5c4445

#523d3e

#493637

#402f30

#372829

#2e2222

#241b1b

#1b1414

#120d0d

#090606

#000000

O que é uma paleta de cores?

Bom o nome é auto explicativo, é uma paleta onde se encontra cores.

Para que serve? 

A paleta de cores te oferece cores diferentes da tradicional,a paleta de cores geralmente é usada em códigos HTML. Veja a diferença:

Todos créditos a Cantinho do PhotoScape.

não retire nada deste post sem a autorização da ADM deste blog.

Criando uma Polaroid no PhotoScape

01. Abra seu PhotoScape, vá em editor clique no botão Menu> Nova Foto>

Largura: 500

Altura: 500

Cor: Cinza

02. Mude para aba Objeto e clique na ferramenta Modo Caixa e ajuste assim:

E faça um retângulo no fundo,assim:

Mude a cor branca para a preta e faca um quadrado dentro do quadro branco, este quadro branco será o espaço para colocar a foto:

Clique no botão Foto+Objeto e em seguida corte a Polaroid assim:

Salve-a.

Colocando a foto dentro da Polaroid:

Corte sua foto da maneira correta antes de colocar na Polaroid:

Abra a Polaroid, mude para a aba Objeto e vá em:
Fotografia > Foto.. e abra a foto que deseja e ajuste dentro da polaroid:

Clique no botão Foto+Objeto e marque a primeira opção.

Resultado:

• Todos os créditos a Cantinho do PhotoScape.

Não retire sem a permissão da ADM deste blog.

Botões rosa para blog

REGRAS E TERMOS DE USO

01. Obrigada por fazer o download!
02. Materiais para uso pessoal,por favor não modifique e diga que você que criou.
03. Não poste nosso material em outro lugar.
04. Se usar em algum tutorial por favor coloque os créditos com o link do nosso blog
05. Não retire os créditos.
06. Todos os PNGs foram criados por Cantinho do PhotoScape.
07. Espero que tenham gostado!

Todos os créditos a Cantinho do PhotoScape.

[Instagram] Foto com bordas desfocadas para Instagram

Então, acharam que ficariam livres de mim? No way! Trouxe hoje um tutorial que está super em alta, que é a foto com fundo/borda desfocada no Instagram. Vamos lá!


01. Abra seu PhotoScape, vá em editor e abra sua foto.
02. Mude para a aba cortar e corte sua foto assim:

Edite sua foto, como prefirir, aplique efeito,curva ou brightness como preferir.

Eu editei minha foto usando o "Efeito Filme".

Após editar a foto, dê "Ctrl+C" para copiar a foto e clique no botão "Desfazer Todos" e mude para a aba 'Objeto' e clique em:

• Fotografia > Foto do Clipboard

Em seguida clique no botão Foto+Objeto.

Resultado:

• Todos os créditos a Cantinho do PhotoScape.

Não retire sem a permissão da ADM deste blog.

Blockquote personalizada no blog [simples]

O que é blockquote
Blockquote é uma citação, ou seja, quando você dá enfase ou destaque em alguma parte do seu post.

Como colocar blockquote
O próprio blog possui essa função, você seleciona a parte do seu post e clique em "Citação".

Como Personalizar o blockquote
 01. Acesse seu painel do blogger e vá em Modelo > Fazer Backup Restaurar e clique em "Fazer download do modelo completo"
* Fazemos esse backup antes de editar, se você quiser voltar com o layout antigo é só fazer o upload.

Clique no botão "Editar HTML",clique dentro do quadro de códigos e dê Ctrl+F e pesquise por ]]></b:skin> .
Em seguida cole o seguinte código acima:

blockquote {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;

Clique em salvar modelo, e pronto!

• Todos os créditos a Cantinho do PhotoScape.

Não retire sem a permissão da ADM deste blog.

Criando o logomarca no PhotoScape

Materiais Necessários:
Fundo Transparente - Créditos: Cantinho do PhotoScape

01. Abra seu PhotoScape, vá em editor e abra o fundo transparente.
02. Mude para a aba Objeto e siga:

Após escolher a cor, faça uma bola no meio e depois faça outras bolinhas menores, mais achatadas em volta da bola principal,assim:

Feito isso clique no botão Foto+Objeto.
Volte para a aba Inicio e vá em:
• Avivar > baixo
• Contra a Luz > (+/-) 200%
 Dica: Se você quiser mudar de cor, basta clicar no centro do botão "Brilho,Cor" e mudar a Matiz para a cor que deseja.
Finalize colocando dentro do logo algum simbolo ou siglas do seu site,pagina e etc.
Resultado:

FONTES USADAS:

Simbolo de Camera: Digital Camera Symbols

"Cantinho do PhotoScape": Caviar Dreams

• Todos os créditos a Cantinho do PhotoScape.

Não retire sem a permissão da ADM deste blog.

[BLOG] Cabeçalho com Menu no blog

Hey guys, neste tutorial irei ensinar como cria um cabeçalho com menu personalizado (exemplo na imagem acima), vou ensinar a fazer um parecido porque esse menu ele é de um Layout Free pronto, então não posso fazer o tutorial de um igual. Enfim, vamos lá?

1.  Criando o Cabeçalho
Abra seu PhotoScape,vá em editor e clique em Menu > Nova Imagem e ajuste assim:

Largura: 1273

Altura: 267

Cor: cor do fundo do blog

Mude para a aba Objeto e clique em:
• Fotografia > Foto.. e abra o background que deseja, cubra todo o fundo e em seguida clique no botão Foto+objeto e marque a primeira opção.
Mude para a aba Objeto e clique na ferramenta de Texto e escreva os botões do menu
Ex: "HOME,TUTORIAIS" com a fonte que desejar.
Enfeite seu menu cabeçalho como quiser
Clique em Menu > Salvar Como > e coloque o nome do arquivo de "menu".

2. Mapeando o Menu.

Antes de colocar a imagem no blog nós precisamos mapear a imagem,isto é,colocar os links para as pessoas clicarem nos botões da barra.

01. Acesse o site http://www.image-maps.com/

02. Assim que abrir,clique em Browse For File:

Procure e abra a menu e clique em Start Maping. Em seguida depois de carregar,vai aparecer o seu menu,clique em click to continue (está acima da imagem)
03. Vai aparecer o menu,clique com o botão direito sobre a imagem e clique em Create Rect:

E agora arraste o quadrado e ajuste ele no primeiro botão, o Inicio e ajuste assim:

Faça o mesmo com os outros botões "Menu,F.A.Q,.. e os botões das redes sociais".

Quando terminar de mapear,clique com o botão direito do seu mouse em cima da imagem e clique em Get Code. Vai abrir uma janela,clique em HTML Code:

Lá em baixo vai ter uma caixa escrito HTML Image Map Code,dê um clique na caixa e pressione Ctr+A para selecionar o código todo,pressione Ctrl+C para copiar o Código.

3. Colocando o Menu no blog
Abra seu blog, Modelo > Editar HTML.
dê ctrl+F e digite Header1 e dê enter, aparecerá algo assim:
<b:widget id='Header1' locked='true' title='NOME DO SEU BLOG (Cabeçalho)' type='Header'/>
Apague e salve-o.

Acesse seu painel e vá em Layout. Em seguida vai aparecer o Layout do seu blog, eu não sei como está o Layout de vocês, mas no lado esquerdo ou direito vai um quadrado escrito "Adicionar Gadget"

no meu caso está no lado esquerdo:

Depois de ter clicado em Adicionar Gadget  vai aparecer uma lista,desça e procure por "HTML/Javascript e clique nele. Após ter clicado, vai abrir uma pequena janela,deixe o titulo em branco e clique na caixa de Conteúdo e pressione Ctrl+V e clique em  Salvar.

Feito isso, clique em salvar.

Copyright (2015) Cantinho do PhotoScape.