Henrique-HB

O que é CSS?

CSS(Cascating Style Sheets) é uma tecnologia que apareceu em 1996 e padronizada pela W3. O CSS permite que sejam adicionados atributos especiais as tradicionais tags do HTML além de permitir uma formatação muito mais precisa nos elementos no layout da pagina.

Um exemplo que todos já conhecem é esse efeito de quando se passa o mouse acima de um link ele muda de cor ou faz qualquer alteração na font. Claro que isso é o mais basico de tudo, com CSS você pode posicionar elementos, definir font/cor/fundo para os textos e links, bordas e até alguns efeitos especiais como sombra.

Você pode usar 4 diferentes modos de usar CSS em uma pagina HTML:

Leia o resto deste post »

Quando você cria ou abre uma imagem no photoshop a layer background vai estar bloqueada, apenas de dois cliques sobre ela e depois clique em OK.
Fazer isso é necessário pq com a layer bloqueada você não poderá usar muitas funções que envolvem transformações e recortes.

Obs: Algumas imagens não poderão ser desbloqueadas(como as .gif).

Abra uma imagem qualquer e desbloqueie o background. Vá em Edit-Transform-Warp. Você terá vários pontos nos lados da imagem, clique em algum dele e arraste, com isso você pode modelar suas imagens e até dar um efeito de dobra.
Ex:

Os modos de blendagem podem dar alguns efeitos muito legais em suas imagens, para mudar o blend mode de uma camada, use o seguinte campo:

Para fazer um teste, abra uma imagem qualquer, duplique a layer(ctrl+j ou botão direito- duplicate layer) e então mude o blend mode dessa layer.

Criando feixes claros

Para criar um efeito de um feixe claro, vamos usar o blend modo overlay. Abra uma imagem qualquer e crie uma nova camada(shift+ctrl+N) acima do background e então, com a ferramenta de seleção(M), faça um retângulo (ou qualquer outra forma que preferir). Pinte essa seleção de branco com a ferramenta do balde de tinta(G). Para terminar apenas mude o blend mode para Overlay.

Você pode obter muitos resultado interessantes fazendo isso. Exemplo:

Em textos
Crie um texto qualquer, na lista de layers, clique com o botão direito sobre a layer do texto e então selecione Blending options…
Na nova janela que irá aparecer, selecione Stroke e então você pode definir a cor, tamanho, transparência e posição do contorno. Após configurar isso, apenas clique em OK.

Em camadas
Mesmo processo usado para textos, mas se você quer usar o contorno para criar um borda na imagem terá que, nas propriedades do stroke, definir a posição como center. Feito isso você ja terá uma borda em sua imagem.

Deixar uma foto real como um desenho em preto e branco é bem fácil no fireworks. Esse efeito também pode ser feito no photoshop, mostrarei isso em outro post.

Download do fireworks
http://www.soft32.com/download/63-58277/fw…wmx_2004_en.exe

Obs: Esta é a versão trial.

Começando

Primeiro precisamos de uma foto para transformar. No tutorial estarei usando essa da Kylie Minogue:

—-
Após abrir a imagem no fireworks iremos apenas fazer três pequenos passos.

Leia o resto deste post »

“Ei! Esse monstro está muito difícil, a fase muito curta… Que gráficos horríveis. Eu com toda certeza faria melhor!”

Creio que todos os amantes de jogos já pensaram algum dia em como seria criar seu próprio game. Definir uma história, inimigos e um bom modo de jogo.

Hoje em dia é fácil achar recursos na internet para realizar esse sonho, claro que criar um novo Final Fantasy, GTA, Zelda ou qualquer outra obra de arte gamistica é para poucos e provavelmente você não irá realizar essa façanha tão cedo(talvez nunca). Mas como todo conhecimento é lucro, que tal aprender o básico da área e se tornar um desenvolvedor amador? Algo que pode lhe render alguns tostões mais tarde além de ser uma área bem interessante… Leia o resto deste post »

O primeiro tutorial que escrevi, mal explicado e cheio de erros, mas acho que apesar dos apesares ele ainda pode ser uma pequena e util referência a quem está começando a brincar de criar páginas.

—
Começando

Bom, como já devem saber, a unica coisa que você precisa pra criar páginas em HTML um um editor de texto qualquer, vamos usar o bloco de notas do windows.
Lembrando, que para o arquivo ser executado como uma página web, é preciso salva-lo com a extensão .html ou .htm
A estrutura básica de uma página HTML é a seguinte:

Entre as tags <head></head>, também podem ser adicionados efeitos em CSS ou funções em JavaScript.

Propriedades do Corpo

É possível configurar várias opções de uma página utilizando a tag <body>, como a cor do texto ou background.
Para definir a cor do background use:

Leia o resto deste post »

Graças a preguiça de programar um sistema próprio de blog e a pressa para encontrar um modo de exibir minhas coisinhas, estou criando esse blog. Nele irei publicar todas as minhas criações, seja uma imagem feita por pura diversão, um tutorial ou trabalhos realizados profissionalmente.

Ainda tenho que fazer o layout dessa birosca, criar um logo bacana e outras frescurinhas, mas enquanto meu tempo e força de vontade não colaboram, usemos essa belezinha padronizada.

—

Até o próximo post.