Tutorial Transparencia no CSS

Olá gente! Como eu prometi! Trouxe o tutorial de transparencia! *joga flores*

Pois é demorei, mas cheguei õ/

Então vamos ao que interessa afinal u.u

#Tutorial de Transparencia CSS#

1° coisa a se fazer! Precisa saber mexer em um editor de fotos, mas não qualquer um como o Photoscape e Paint..

Recomendo Photoshop ou Photofiltre Studio pois sei que eles dois podem usar o efeito de transparecia. logo vam entender

o que quero dizer.

Eu uso Photoshop e não Photofiltre  então são sei mexer nele *apanha* então farei com o Photoshop. *novidade ¬¬*

Lição 1 - Abra um novo arquivo no Photoshop com a largura e altura de 1000x 1000 alguns fundobase's tem problemas com esta largura pois tem "estampas" como fundos transparentes não tem estampas não ha problema se ele repetir a imagem.

com seu novo arquivo aberto...

PS: para fazer a transaparecia sempre quando abrir novo arquivo deixe a opção transparente ok? se não nunca funcionaria.

okay novo arquivo feito, mas e agora?

agora vem a parte super fácil! pois é u.u nunca pensaram que era tão fácil fazer isso né? pois vejam:

Escolha a cor que você quer! eu escolhi "Branco" então é só usar a lata de tinta e já estaremos completando 70% da 1°

Lição õ/

agora a parte mais "mixuruca" por a transparencia"

É só regular a transparencia por essa opção aqui: 

Mas olhe bem não digo um número  exato, pois depende de como você quer a transparencia escura/forte ou fraca/clara entende? e o fundo que você ta usando no css, e claro você  terá que fazer vários testes ate achar um perfeito, você terá que salvar hospedar no site colocar no CSS, vizualizar o perfil como ficou.

Se não ficou bom vai refazer a tragetoria tudo de novo ate achar que ficou a seu gosto xD é assim mesmo

não tem pra onde fugir.

Então lembre-se de mais uma coisa! salve em PNG! Não em PSD , JPG , GIF u.u PNG é especialmente para arquivos que tem trasparencia na minha opniao -q PSD são arquivos que só abrem no photoshop ou no nero, pois é o nero abre imagem PSD

E quem usa o nero para imagens? o-o eu acho que ninguém e.e bom JPG bom... a maioria das imagens é JPG  não gosto dele. Algumas imagens ficam aparecendo uns quadrinhos u.u por isso todas minhas imagens são em PNG. GIF é especial para animações

não tenho nada a falar sobre ele u.u

Ah! uma dica e informação ->

Eu sempre hospedava no photobucket, mas quando passou de 400 imagens hospedadas ele alto maticamente fez com que minhas imagens não fossem mais encontradas! imaginem perdi css, assinaturas, avatares u.u sorte que eu podia baixar para meu computador  õ/ ai procurei outro site para hospedar, assim não aconteceria isso novamente e encontrei este maravilhoso site chamado IMGUR *_* gente estou só avisando para que vocês não tenham este problema chato. as imagens só voltariam se eu pagasse acredita? 

Pois é, bom se quiserem aqui está o link do IMGUR:

imgur.com

 pronto hospedou sua imagem??

Mas espera? onde coloco no modelo?? '-'

Não sabe? '-' Te explico na Próxima lição companheiros õ/ Até mais!

Voltei -

Olá galera! Faz muito tempo mesmo que não posto nada aqui e deixei o blog super vazio.

 Só apenas um único motivo. Eu esqueci completamente a senha. '-'

Gomen!! Demorei para achar a senha do blog e do meu e-mail então dificulta as coisas.

Mas para compensar o tempo perdido postarei alguns videos de tutoriais feitos por mim. *u*

Espero que gostem! Ah e claro Feliz Natal mega atrasado e Ano novo também Queridos!

Ah mais um! Feliz volta as aulas!! ./apanha xD

 E vamos ao que interessa os tutoriais ^^ 

 Tutoriais:  (ps veja em Full ok? )

Tutorial - Gif Efeito Desfoque

Tutorial - Splash como um selo grudado

Link Quebrado.(Esperem o concerto ok?)

Tutorial - Render

Espero que gostem ^^

Tutorial: Photoshop para Iniciantes - Lição 2 -

Vamos a Lição 2 õ/ -Clic nas Imagens para Ampliar-

Com,  Barras, Janelas e da Baixa de ferramentas poderá aplicar efeitos

e fazer outros tipos de melhoramentos e uma imagem.

A Barra de Menus contém uma grande quantidade de recursos.

A Barra Opções se adapta à ferramenta que está sendo utilizada no momento,

é nela que encontrará muitos recursos que dinamizarão a ferramenta escolhida.

As propriedades da Barra Opções se alteram de acordo com a ferramenta seleccionada.

Todas as ferramentas disponíveis no Photoshop estão na Caixa de Ferramentas.

Na Caixa de ferramentas existem algumas divisões,

isso porque as ferramentas nela contida estão classificados por categoria.

Algumas ferramentas possue em seu canto direito uma pequena seta,

quando isso ocorre, ela está indicando que existem outras ferramentas ocultas dentro dela.

Assim que aperta uma das ferramentas aparece um menu Desdobrável que amostra os demais ferramentas.

Um trabalho com o Photoshop começa a partir do menu do Arquivo pois

é ele quem permite que uma nova imagem seja criada ou mesmo aberta.

As opções: Abri...Procurar...Abrir Como...

são referentes à abertura de arquivos porem cada uma delas tem uma função diferente.

A opção Novo lhe permite Criar um documento de imagem em branco.

Na caixa de Diálogo Novo você irá definir as propriedades da nova imagem:

Nome, Tamanho, Padrão de Cores, entre outras.

Os 3 Botões no final da Caixa de Ferramentas são responsáveis pelo
modo de exibição da imagem na tela do Photoshop.

O Modo de Tela Padrão mantém a forma de uma Janela.

O Modo de Tela Cheia com Barra de Menus exibe a imagem em tela inteira e oculta a Barra de Títulos e a Barra de Status.

O Modo de Tela Cheia exibe a imagem em tela cheia e oculta a Barra de Títulos,
a barra de status e a barra opções.

Apertando "F" aciona cada opção citada.

No lado direito do Photoshop estão localizadas as janelas do Photoshop, estas são distribuidas em três categorias.

Categoria 1: estão janelas, navegador e informações:

A Janela que está sendo exibida é a "Navegador".
Esta janela tem as finalidades de exibir a imagem que está sendo trabalhada,
controlar o nível de Zoom e direcionar seu foco.

O Histograma é um gráfico onde as Informações de cor da imagem estão
representadas através de barras verticais. Ele é um guia muito importante
para a utilização dos comandos de ajuste de cor e tonalidade.

A Janela "Informações" lhe fornece dados de cores em relação à posição do ponteiro na imagem e as exibe nos padrões RGB e CMYK, posição do cursor e tamanho da área selecionada.

Categoria 2: estão as janelas responsáveis pela aplicação de cores e

definição do esquema de cor utilizado, são eles: Cor, Amostras e Estilos.

Categoria 3: É responsável pelo trabalho e controle das camadas de uma imagem,

como você verá em lições vindouras.

Na base da tela encontra-se a barra de status, ela fornece ao usuário dicas sobre a ferramenta que está sendo utilizada, o nível de Zoom aplicado, etc.

Estes são os Botões de Controle: 

Eles são responsáveis pelo Modo de Exibição do programa,

e a janela da imagem também as possuem. Após aperta o botão Maximizar a janela se expandir e passou a ocupar toda área vazia do Photoshop.

Note que a barra de Título do Photoshop estão mescladas, as informações do aplicativo da Imagem, note também que os Botões de controle da imagem assumiram uma nova Posição.

Espero que Gostem desta Lição. Até!

Tutorial: Photoshop para Iniciantes - Lição 1 -

Antes de qualquer coisa é necessário você saber como é formada uma imagem.

Principalmente se você quiser ser um bom Design Gráfico ou Web Design.

Não importa onde fizer curso ou Faculdade você sempre irá ter uma aula de como a imagem é formada

e claro, eu vou lhes mostrar neste tutorial.

Lição 1

Uma arte gráfica é baseada em dois aspectos: cores e resolução, estes são

essência de uma imagem.

Os pontos coloridos que são observadas de uma tela de televisão, ou em um monitor são feitos de um elemento químico, o fósforo e emitem luz quando estimulado por feixes de elétrons. cada ponto formado na tela é chamado de pixel.

Toda imagem é formada por uma determinada quantidade de Pixel, e este pode ser de três tipos:

Vermelho, Verde ou Azul.

Tríade é um conjunto de três pixels, e elas são organizadas na tela de um monitor

em linhas e colunas, dando origem a uma Matriz.

As telas de Monitores variam muito de tamanho, por isso quem determina

a quantidade de pixel para a resolução do computador é o sistema operacional.

A sigla RGB é um padrão de cores que vem do inglês: Red (vermelho), Green (verde) e Blue (azul).

Estas três cores são responsáveis pelo surgimento de milhões de cores.Como?

De acordo com a intensidade de luz emitida por cada um dos pixels, suas cores irão variar,

criando uma infinidade de novas cores.

Quando um pixel recebe um raio de luz mais forte sua cor tem mais intensidade,

se o raio da luz for baixo ele terá uma cor mais escura.

O pixel varia de zero, totalmente apagado, a 255 que geralmente é o seu brilho máximo.

O monitor utiliza o sistema de cores RGB, enquanto que o sistema de cores para impressão é o CMYK.

Seu significado é a combinação das cores, Ciano (azul), Magenta (vermelho), Yellow e Black.

Com base nestas Quatro cores é que são formadas todas as cores em uma impressão,

por mais complexas que sejam.

Mesmo que achem isso insignificante...não é. é sempre bom saber um pouco mais,

e não mata ninguém não é?

Próxima parte começará conhecendo o Photoshop. Até!