segunda-feira, 11 de junho de 2012

E ai pessoal como vão?
bom eu estava dando uma olhada em vários templates para blogs e gostei de alguns
ai pensei em testar aqui no blog, adorei a maioria, mas fiquei na duvida x.x

Então resolvi abrir uma enquete e o melhor template é o escolhido õ/
o que acham? ^^

Aqui as imagens de amostra:

Bloggy

Compartidissimos

Linedy

Morning-Coffee

Mosaico

Pink-Blossoms

Slot Machine

São esses ^^ quero comentarios õ/
Até
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!
Muito obrigado aos comentários, faz muito tempo que não posto nada, porque minhas amigas desistiram do blog completamente .-. ai desanimei, mas que sabe um empurrãozinho né? ai possa ser que eu volte. Mesmo sem postar nada a séculos não vou excluir o blog porque a pessoas que precisam dele ainda ^^

as como uma suposta despedida do blog *postagens claro* Vou providenciar o Tutorial de transparência. Faz tempos que não faço um CSS gente e.e acho que esqueci algumas coisas, mas lembro rapidinho e faço o tão pedido tutorial o/


Ah a proposito se quiserem falar comigo me manda um e-mail ou me add no msn:
é rayra.sz@hotmail.com

Até!

domingo, 5 de fevereiro de 2012

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 ^^

sexta-feira, 22 de abril de 2011

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é!
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é!

quinta-feira, 21 de abril de 2011

Como algumas Pessoas já votaram em qual tipo de Tutorial começar...
Decidi que começarei com o Photoshop



Daqui alguns dias eu Postarei o Primeiro Tutorial de Iniciantes.

Obrigado pela participação. Até Logo!

terça-feira, 12 de abril de 2011

Oii
Voltei e com algumas dúvidas então eu estou precisando de:


Para os Breves Tutoriais que irei postar ^-^
será que poderiam me ajudar?
Eu estava pensando em por Tutoriais do Photoshop Para Iniciantes^^
Ou Tutoriais para Códigos de Css qual faço primeiro??

Agradeço desde já ^-^ 

terça-feira, 22 de março de 2011

Yo!
Vim trazer um Presentinho Para a minha parceira
Tínacriis
ela pediu em um comentário que queria edições
do anime Kuroshitsuji *-*
como eu AMO o Greil Fiz uma edição
dele ^^ é que to sem tempo Galera!
Mas esse foi especial pra a Tína *-*

Espero que gostem õ/

 -Clic na Imagem para Ampliar-



Beijos!

Olá!!!
voltei com a terceira parte do tutorial *-*

Vamos lá??!! *0*

Agora que você pegou o DirectLink do cimaLogo

Voltamos ao "Modelo" *-*

está vendo esta parte?:


#cima #logo {
        height: 350px;
background: url(img/cimaLogo.jpg);

você irá modificar esta parte :

background: url(img/cimaLogo.jpg);


ao invés de : img/cimaLogo.jpg

você vai apagar e colocar o DirectLink!

vocês talvez fiquem na duvida para que serve
colocar esse link la!

mas eu explico:

este link serve para aparecer a imagem do cimaLogo
*já que você pegou o link dele*
mas vocês se perguntam...mas o cimaLogo já apareceu no perfil...
sim! mas porque o nome do arquivo está colocado direito
ai o *( )* acha na pasta img porque esta assim: (img/cimaLogo.jpg)
entenderam?? *acho que eu compliquei e.e*

Bom vamos a próxima parte!

vá no site onde você hospedo e pegue o DirectLink
do fundoDegrade *-* *eu a-d-o-r-o ele õ/ *
e volte ao modelo e encontre esta parte:

#fundo {
background:url(img/fundoDegrade.jpg) repeat-X left top;

faça o mesmo que fez com o cimaLogo mude o que ta dentro do parentese
mas não o tire ok??

Muitos tem duvidas de como deixar o fundoDegrade
grande e que pegue na tela toda sem deixar nenhuma
parte branco né??

ta vendo isso no fundoDegrade?: 

repeat-X left top;

você faz o seguinte:

fixed;

Pronto! é só salvar e ir ver o resultado no perfil!
mas perceba que isso foi no fundoDegrade!
você tem que fazer isso no fundoBase ok?!

Agora vá no Site e pegue o DirectLink do fundoBase

e faça o mesmo que ensinei *-* após salvar é só
ir ver o resultado no perfil ^^
mas lembre! tem que actualizar ele

Agora Vamos para uma das partes que complicam Vocês

Os Códigos Das Cores \o/

Finalmente cheguei nele e.e õ/

Mas Vou Postar No outro poste...sabe porque??
To com preguiça u.ú ./apanha até a morte

Até mais ver pessoas!

Brinks

Vou fazer o tutorial õ/

Bom vamos lá!

antes de tudo vou da a vocês a paleta de cores
necessária para isso: Paleta De Cores

Agora vá ao modelo e Procure todos os lugares do
Modelos que tem isso :

#459055;

esses números entre o jogo da velha e o ponto e virgula
são os códigos das cores ^^

muitos acham essa parte difícil de lidar
mas depois você se acostuma e pega o pique como eu 8DD~ o/

Vamos a serviço!

primeiro escolha a cor que você quer e que combine com o Css
e não uma cor que deixe invisível ok?? seria mal para você
e as outras pessoas...porque imagina você deixar transparente!
ninguém iria conseguir ler! u.ú

Bom essa parte mesmo é mais com vocês é o seguinte!
você vai colocando os códigos desse jeito:
coloca o primeiro código salva actualiza o perfil e vê onde mudou
e vê se ta bom se ficou você  pro cegue para o proximo
e faz o mesmo! não estou explicando porque nem todos os lugares
eu sei onde muda! eu só vejo na hora que estou fazendo
sem contar que ia dar um trabalho por quase o modelo
todo neste tutorial u.ú pobre de mim Y.Y Bom entenderam não é??

Assim eu espero ^^ eu estava pensando em por um tutorial aqui
de como por transparências no CSS...mas talvez não...
Que acham??

Beijos!!!