Mostrando postagens com marcador Tutoriais. Mostrar todas as postagens
Mostrando postagens com marcador Tutoriais. Mostrar todas as postagens

Adicionando sombra projetada no Illustrator CS5



Olá. Temos aqui um tutorial bem simples do Adobe Illustrator CS5! Criando uma sombra projetada em um objeto ou texto.

é muito simples:

  1. Selecione um objeto ou grupo (ou direcione uma camada no painel Camadas).
  2. Escolha Efeito > Estilizar > Sombra.
  3. Defina opções para a sombra projetada e clique em OK.
     
    Modo Especifica um modo de mistura para a sombra projetada.
    Opacidade Especifica a porcentagem de opacidade desejada para a sombra projetada.
     
    Deslocamento X e Deslocamento Y Especifica a distância desejada para o deslocamento entre a sombra projetada e o objeto. 
     
    Desfoque Especifica a distância a partir da borda da sombra na qual o desfoque deve ocorrer. O Illustrator cria um objeto rasterizado transparente para simular o desfoque.
     
    Cor Especifica uma cor para a sombra.
     
    Escurecimento Especifica a porcentagem de preto a ser adicionada para a sombra projetada. Em um documento CMYK, um valor de 100%, usado com um objeto selecionado contendo uma cor de traçado ou preenchimento diferente de preto, cria uma sombra preta multicolor. Um valor de 100% usado com um objeto selecionado contendo apenas um preenchimento ou traçado preto cria uma sombra 100% preta. Um valor de 0% cria uma sombra projetada da cor do objeto selecionado. 
    Até a próxima! 

    Siga-me no Twitter: @junim_ramos



Dicas na utilização da Pen Toll do Illustrator



Se você usa o Adobe Illustrator, então é quase certo que você usa a ferramenta Pen na criação de seus caminhos.  Este guia abrangente visa introduzir ou lembrá-lo de recursos, atalhos e métodos para trabalhar com o que é provavelmente a ferramenta mais essencial da Adobe.


Ferramenta Pen (p): Clique em pontos da àrea de trabalho para criar segmentos de reta, clique e arraste para criar caminhos com Curva de Bézier.

Add Anchor point Tool (+): Clique em um segmento de caminho para adicionar pontos de ancoragem.


Delete Anchor point Tool (-): Clique no ponto de âncora para remover o caminho.


Convert Anchor point Tool (Shift+C): Clique no ponto de ancoragem e arraste para criar alças Bézier. clique em um ponto de ancoragem com alças para removê-lo.

 

Formulário de contato HTML estilizado com CSS



Olá pessoal!
Neste tutorial mostrarei um formulário simples de contato em HTML feito pelo blogueiro Diego Alex, que pode ser muito útil para vocês colocarem em seus sites.

Um formulário de boa aparência, onde você pode mudar de acordo com seu gosto:


Aí vai o código:

Crie um arquivo "contato.html" e cole o código:

<!– Div principal do site –>
<div id=“principal”>
  
    <hr />
  
 <!– titulo da página –>
    <h1>Formulário Estilizado</h1>
  
    <form action=“enviar.php”>
     <fieldset>
         <legend>
Fale Conosco</legend>
            <ol>
             <li>
                 <label for=“nome”>Nome</label>
                    <input type=“text” id=“nome” />
                </li>
                <li>
                 <label for=“email”>E-mail</label>
                    <input type=“text” id=“email” />
                </li>
                <li>
                 <label for=“mensagem”>Mensagem</label>
                    <textarea id=“mensagem” rows=“7″ cols=“30></textarea>
                </li>
            </ol>
            <button type=“submit” id=“enviar”><img src=“imgs/enviar.gif” /><br>Enviar</button>
        </fieldset>
    </form>

</div>

Depois disso crie um novo documento CSS com o nome de "estilo.css" ou o nome que você preferir:

@charset “utf-8″;
/* CSS Document */
form { width: 20em; font-size: 1.6em; }
form fieldset { border: 1px solid #666; padding: 0 0.5em; }
form legend { padding: 0 0.5em; border: 1px solid #333; }
form fieldset ol { list-style: none; margin: 0; padding: 0; }
form label { display: block; }
form ol li { margin: 0.8em 0; }
form input { width: 20em; }
form input#enviar { margin-bottom: 1em; width: auto; }
form textarea { width: 20em; }

Esse é o código de formatação de nosso formulário.

Até a próxima!!

Siga-me no Twitter: @junim_ramos

Photoshop: Alterando as fontes de várias camadas ao mesmo tempo



As vezes nós designers precisamos de economizar tempo para nossos trabalhos. Quando temos vários textos em camadas diferentes e precisamos mudá-las ao  mesmo tempo o photoshop nos ajuda nessa tarefa!

Basta selecionar qualquer camada que contenha texto. Depois vá ao menu Select e escolha a opção Similar Layers, com isso o phothoshop seleciona todos os layers com conteúdo similar ao que foi selecionado, no caso, texto.

Em seguida selecione a ferramente de texto e escolha a família de fontes pela barra superior e beleza!!

Posicionamento de div em CSS


As propriedades de posicionamento CSS permitem a posição de um elemento. Também podemos colocar um elemento atrás do outro, e especificar o que deve acontecer quando o conteúdo de um elemento é muito grande.

Os elementos podem ser posicionados com as propriedades top, bottom, left e right. No entanto, essas propriedades não funcionaram a menos que a propriedade position seja definida em primeiro lugar. Eles também funcionam de forma diferente dependendo do método de posicionamento.

quatro diferentes métodos de posicionamento:


Static Position

Elementos HTML são estáticos posicionados por padrão. Um elemento estático posicionado sempre é posicionado de acordo com o fluxo normal da página.
Elementos estáticos posicionados não são afetados por cima (top), em baixo (bottom), esquerda(left), direita (right).
 

Fixed Position 
Um elemento com posição fixa é posicionado em relação à janela do navegador.
Não vai mudar, mesmo que a janela seja rolada:


p.pos_fixed{ 
position:fixed;
top:30px;
right:5px;
}   
 Nota: O Internet Explorer suporta o valor fixo somente se um DOCTYPE é especificado!
Elementos com posicionamento fixo são removidos do fluxo normal. Os documentos e outros elementos se comportam como se o elemento fixo posicionado não exista. E podem sobrepor-se outros elementos.

Relative position 

Um elemento posicionado com relative é posicionado em relação à sua posição normal.
 
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
 O conteúdo de elementos relativamente posicionados pode ser movido e se sobrepõe a outros elementos, mas o espaço reservado para o elemento ainda é preservada no fluxo normal.
h2.pos_top
{
position:relative;
top:-50px;
}

Absolute Position 

Um elemento de posição absoluta é posicionado em relação ao primeiro elemento pai que tem uma posição que não seja estática. Se nenhum elemento for encontrado, o bloco é <html>:

h2
{
position:absolute;
left:100px;
top:150px;
} 
 Elementos posicionados absolutamente são removidos do fluxo normal. Os documentos e outros elementos comportam-se como o elemento posicionado absolutamente não existe.

Elementos Sobrepostos (z-index)

Quando os elementos estão posicionados fora do fluxo normal, eles podem se sobrepor outros elementos.
A propriedade z-index especifica a ordem da pilha de um elemento (elemento que deve ser colocado na frente ou de trás, os outros).

 
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
Um elemento com maior ordem de pilha está sempre na frente de um elemento com uma ordem inferior.
 
Nota: Se dois elementos posicionados sobreposição, sem um z-index especificado, o último elemento posicionado no código HTML será mostrado no topo.


Inspiração: W3schools

Como centralizar uma DIV com CSS



Ainda surgem dúvidas quanto a essa questão: "Como centralizo minha div com css para que dê certo em todos os navagadores??"
Essa perguntinha fica martelando na cabeça de quem está começando com HTML/CSS, mas temos a solução!!
Veja abaixo, é tiro e queda e funciona em todos os nabegadores atuais, até no temido IE6...
Dúvidas? Posem nos comentários.... abraço a todos!


Bom, primeiramente vamos entender a teoria:

Afaste o objeto 50% do topo e da lateral esquerda. Feito isso recue a margem (topo e lateral esquerda) em metade de seu tamanho.
Confuso? Vamos à prática:
Supondo que você tenha uma div principal nesse exemplo denominada de geral, onde todos os objetos estarão dentro dela:

#geral {
position:absolute;
top:50%;
left:50%;
width:500px;
height:300px;
margin-left:-250px;
margin-top:-150px;
text-align:center;
}
O comprimento (width) e a altura (height) são variáveis, depende do tamanho da sua página. Deve-se ficar atento que em margin-left e margin-top é metade do valor negativo.
IMPORTANTE: Recebi vários e-mails de pessoas dizendo que o código margin:0 auto realiza a mesma função do que o código que descrevemos a cima. Mas lembrando que o margin:0 auto centraliza a página apenas horizontalmente. Já o código que vimos à cima centraliza tanto horizontalmente como verticalmente.

Aplicação:

<html>
<head>
<style>
#geral {
position:absolute;
top:50%;
left:50%;
width:500px;
height:300px;
margin-left:-250px;
margin-top:-150px;
text-align:center;
}
</style>
<body>
<div id="geral">TESTE</div>
</body>
</html>

Fonte: Sonaweb.com.br 

Visão geral do HTML 5



Todos nós desenvolvedores sabemos que o html5 vem por aí! Com várias mudanças e novidades...
Abaixo uma visão do que vem pela frente para facilitar a vida de todos os profissionais de web:


O HTML5 e suas mudanças
Quando o HTML4 foi lançado, o W3C alertou os desenvolvedores sobre algumas boas práticas que deveriam ser seguidas ao produzir códigos client-side. Desde este tempo, assuntos como a separação da estrutura do código com a formatação e princípios de acessibilidade foram trazidos para discussões e à atenção dos fabricantes e desenvolvedores.

Contudo, o HTML4 ainda não trazia diferencial real para a semântica do código. o HTML4 também não facilitava a manipulação dos elementos via Javascript ou CSS. Se você quisesse criar um sistema com a possibilidade de Drag’n Drop de elementos, era necessário criar um grande script, com bugs e que muitas vezes não funcionavam de acordo em todos os browsers.

O que é o HTML5?
O HTML5 é a nova versão do HTML4. Enquanto o WHATWG define as regras de marcação que usaremos no HTML5 e no XHTML, eles também definem APIs que formarão a base da arquitetura web. Essas APIs são conhecidas como DOM Level 0.
Um dos principais objetivos do HTML5 é facilitar a manipulação do elemento possibilitando o desenvolvedor a modificar as características dos objetos de forma não intrusiva e de maneira que seja transparente para o usuário final.



Ao contrário das versões anteriores, o HTML5 fornece ferramentas para a CSS e o Javascript fazerem seu trabalho da melhor maneira possível. O HTML5 permite por meio de suas APIs a manipulação das características destes elementos, de forma que o website ou a aplicação continue leve e funcional.

O HTML5 também cria novas tags e modifica a função de outras. As versões antigas do HTML não continham um padrão universal para a criação de seções comuns e específicas como rodapé, cabeçalho, sidebar, menus e etc. Não havia um padrão de nomenclatura de IDs, Classes ou tags. Não havia um método de capturar de maneira automática as informações localizadas nos rodapés dos websites.

Há outros elementos e atributos que sua função e significado foram modificados e que agora podem ser reutilizados de forma mais eficaz. Por exemplo, elementos como B ou I que foram descontinuados em versões anteriores do HTML agora assumem funções diferentes e entregam mais significado para os usuários.

O HTML5 modifica a forma de como escrevemos código e organizamos a informação na página. Seria mais semântica com menos código. Seria mais interatividade sem a necessidade de instalação de plugins e perda de performance. É a criação de código interoperável, pronto para futuros dispositivos e que facilita a reutilização da informação de diversas formas.

Fonte: http://visie.com.br/

Piecemaker 3D Flash Slide: Como funciona?



Vimos por aí na internet muitos slides de imagens bem legais em jquery e outros...
Mas um slide em especial me chamou muito a atenção: O slide The Piecemaker2, um slide open source em Flash e xml que tem plugin até para Wordpress...

Andei estudando o código-fonte desse slide e gostei muito do seu funcionamento.

No site modularweb.net você confere o demo do slide além da documentação e tutorial de como usá-lo no seu código HTML, até mesmo no wordpress...

Para dar água na boca, confira o que o Piecemaker Flash 3D Slide nos oferece:

     * Ilimitados efeitos de transição
     * A capacidade de incluir arquivos SWF e vídeos
     * Melhor navegação (usando as dicas)
     * Sombras animadas

Também é inteiramente baseado em XML, HTML e o CSS foi melhorado em relação ao primeiro, permitindo que os caracteres especiais possam ser utilizados. Além disso, as imagens agora podem conter links para outros websites.

 
E no WordPress?

Muitos leitores queriam usar a galeria Piecemaker original em seus blogs WordPress - tanto que o site NETTUTS + publicou um tutorial (em inglês) explicando como fazer exatamente isso.

O Piecemaker 2 é open source, fique à vontade para baixá-lo, usá-lo em qualquer projeto que você gosta, aprender com ele, modificá-lo e melhorá-lo se você puder. Gostaríamos de ver o que você faz com ele.




Aqui vai um exemplo de arquivo HTML com o slide, tirado do site oficial:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>The Piecemaker by Modularweb</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/swfobject/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.cssSource = "piecemaker.css";
flashvars.xmlSource = "piecemaker.xml";
var params = {};
params.play = "true";
params.menu = "false";
params.scale = "showall";
params.wmode = "transparent";
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
params.allownetworking = "all";
swfobject.embedSWF('piecemaker.swf', 'piecemaker', '1000', '600', '10', null, flashvars,
params, null);
</script>
</head>
<body>
<center>
<div id="piecemaker">
<p>Put your alternative Non Flash content here.</p>
</div>
</center>
</body>
</html>

Acesse o site oficial e faça o download...e divirta-se...



Como criar Texto Efeito Glass no Photoshop (inglês)




Tutotial bem legal que achei no site Designioustimes.com, que tem uma ampla variedade de tutoriais de Photoshop e Indesign...O site é em inglês, mas nada que o Google não faça ou se você entende um pouquinho já está de bom tamanho!!

Acesse o tutorial AQUI!

Abraços...

Criando banner publicitário para internet



Tutorial bem legal tirado do site Tutoriais photoshop.net pra que está no comecinho da carreira de Photoshop! hehe...
Aprenda a fazer banners para sites. Também nesse tuto, você vai conhecer todos os tamanhos de banner usados hoje em dia na internet!!

Banner Dj com Flash



Mais um tutorial bem legal de Flash!!
Esse, nem precisa de código ActionScript para fazer!!
Vamos fazer um efeito de luzes sobre o Dj! Bem legal pra quem é Dj e tem um site, pode colocar na página inicial esse efeito e chamar a atenção do internalta. Divirtam-se!!

Vídeo - Criando um Avatar com Photoshop



Navegando pela net encontrei esse vídeo muito interessante de um diretor de arte. O cara é fera e mostra cpomo criar um personagem Avatar a partir de uma foto!!
Confiram...

Wireframe - Processos de criação de um site



Quem trabalha com design de sites sabe muito bem que existem vários processos na construção de um site, desde seu esboço até o acabamento e sua conclusão! Disponibilizo pra vocês uma apresentação de todo o processo, desde a conversa com o cliente, o tão famoso 'briefing' até o produto final: O SITE! no final da apresentação, coloco os sites de referência para que você possa buscar sempre mais e mais informação para sua carreira...Um abraço a todos e curtam muito, divirtam-se...

Criando um box 3D no Fireworks


Salve galerinha do Blogão do Design!! Hoje postei um tutorial bem legal e útil em muitos casos...Vamos criar um box em 3D no Fire ok??
Sigam o tuto e bom divertimento...

Plug-in Camera Raw do Photoshop CS5



Como gosto muito de Photoshop, costumo sempre 'fuçar' nas ferramentas, efeitos, etc...
Vou falar um poco do plug-in que vem no photoshop cs5 que é o Camera Raw, bem interessante, você pode diminuir ruídos das suas fotos...

Vou mostrar como usar esse plug-in:

A Propriedade 'background' no CSS3



Vamos dando continuidade aos tutoriais de CSS! Vamos falar um pouco sobre a propriedade "background" que sem dúvida é uma das mais usadas na folha de estilo em cascata. Essa propriedade tem suporte a cores e a várias imagens múltiplas, sendo que você pode colocar várias imagens de background em um elemento.

Outra nova propriedade que surge é a background-origin. Ela determina como o background-position será calculado.

Você pode também determinar no código CSS uma dimensão para sua iamgem de fundo. 

Por exemplo:

div {
  background-image: url (titulo da imagem.png);
  background-size: 15px 30px;
}

Aqui, definimos o background para ficar com 15 pixels de largura por 30 pixels de altura...

Dica básica, espero que tenham gostado...

mais informações acessem o W3C, onde falam mais sobre esta propriedade...
Abraços

Criando botões No Corel Draw


Bom galera, mais um silples tutorial de Corel aí pra vocês... Vamos criar um tipo de botão bem legal para nosso site/blog etc...Aplicaremos alguns efeitos e cores...Espero que gostem...

Com este tutorial vamos aprender as técnicas que permitem criar este brilhante efeito e aplicá-lo em interfaces comuns na Web, com o Corel Draw.
Desta forma teremos vetores facilitando os redimensionamentos, a impressão e a utilização dos botões em outros programas como o Flash, o Director ou em apresentações Corel R.A.V.E.

Conheça um pouco sobre o 'Camtasia Studio'


Você com certeza já viu ou sempre acompanha um site, portal, comunidade do Orkut alguns tutoriais em vídeo não é?? Tenho certeza que você aprende muito sobre vários assuntos através dessas “vídeo aulas”…Mas, você já parou pra pensar em “como são criados esses vídeos? Será que existe algum programa legal que faça isso?” A respósta é sim!! Existe um software que cria e edita essas vídeo aulas: O Camtasia Studio!! Esse programa é muito interessante pois ele grava vídeos a partir do ambiente de trabalho do Windows! Com ele você pode criar vídeos tutoriais, atividades comuns no seu pc e editar todo esse conteúdo…

Também pode ser usado para edição de vídeos sem problemas, além da captura da tela.
A quantidade de recursos oferecidos pelo Camtasia Studio é realmente enorme. Ao abrir o programa, um projeto já existente aparece. Ao pressionar o “play” você percebe que, na verdade, trata-se de um vídeo que explica todo o funcionamento do programa. E, caso você goste de explorar, pode ver como ao que você assiste foi feito ao olhar a linha do tempo, na parte de baixo da tela.
Para começar um novo vídeo, vá até a opção “File” e selecione “New Project”. Você pode editar o vídeo normalmente ao importar conteúdo ou começar a gravar a tela.

Gravando a tela

Capturar tudo o que aparece na tela é a maior especialidade deste aplicativo. Para fazer isso, basta clicar no botão “Record the Screen” (Gravar a tela). Ao fazer isso, um painel é aberto com todas as opções para gravação. Em “Select Area” você define se quer capturar toda a tela (“Full Screen”) ou um tamanho personalizado (“Custom”).
Logo ao lado, em “Recorded Inputs” você seleciona quais dispositivos devem ser utilizados durante a captura, como a webcam e o som. Quando tudo estiver pronto e configurado, use o botão “Rec” para começar a gravar. Para parar tudo, use a tecla “F10″.


Dependendo do tamanho que você escolheu, uma janela para a escolha das dimensões do vídeo pode aparecer na tela. Se você planeja uma resolução específica, preencha em “Width” (largura) e “Height” (altura) e pressione “Ok”.

Edição

Após a captura ser concluída, o vídeo aparece na linha do tempo (localizada na parte de baixo da tela). Em “Library” você encontra uma série de clipes de áudio e vídeo para usar na edição, que podem ser facilmente arrastados para a linha do tempo. Se você quiser usar vídeos, sons e imagens de sua propriedade, use o botão “Import Media” para adicioná-los ao projeto.
Como tutoriais em vídeo precisam ser bastante explicativos, o programa traz uma série de recursos para usar como destaques. Em “Callouts” você encontra formas geométricas para adicionar ao vídeo, como flechas e retângulos. Cada uma pode ter personalizações, como borda, preenchimento e efeitos. Você também pode adicionar palavras.


“Zoom-n-Pan” é uma opção para aproximar em regiões específicas da tela. Ou seja, você pode fazer com que o vídeo seja centralizado em uma opção para mostrar com mais detalhes para a pessoa que for assistir. Para isso, basta selecionar a área desejada com o quadrado na parte esquerda da tela. Conforme você faz isso, algumas barras aparecem na linha do tempo com indicação de uso da função.
Se o que você quer é configurar o som do vídeo, vá à opção “Audio”, que permite regular o nível do volume e reduzir ruídos. Para ver mais opções, clique no botão “More”. Assim, você encontra a função “Transitions”, para adicionar transições ao vídeo entre um clipe e outro. Em “Title Clips” você coloca títulos na tela.
Para criar uma narração, vá a “Voice Narration”. Você pode escolher uma das três faixas de som e começar a gravar com o microfone enquanto o vídeo passa na tela. Dessa forma, o vídeo fica mais explicativo. Gostaria de adicionar também legendas? A opção “Captions” é para isso. E, por último, também é possível montar um quiz para aumentar a interatividade ao clicar em “Quizzing”.


Projeto pronto. Hora de exportá-lo

Se você terminou o projeto e quer salvá-lo em um arquivo de vídeo, vá à opção “Produce and share”, no topo da tela. É possível escolher um dos vários perfis pré-definidos para salvar: “Web”, “Blog”, “CD/DVD”, “HD”, “iPhone”, “iPod”, “Screencast.com” e “YouTube”. Depois, basta dar um nome, escolher a pasta de destino e aguardar o resultado.


Visite este site abaixo e encontre mais informações sobre o produto e também o link para download da versão de teste beleza??

Aguardem!! Em breve eu, Júnior Ramos e toda a equipe do Blogão do Design usaremos este programa para criar para nossos usuários vídeo aulas e postá-las em nosso portal!! Uma nova forma de aprendizagem está por vir aqui no blog…

Abraços a todos…

Informações sobre o programa retiradas deste site

Melhorias na implementação de CSS para Firefox 3



O firefox 3 oferece uma grande melhoria na implementação de CSS. Se você ainda não viu todas, dê uma olhadinha abaixo onde relacionei as mudanças feitas:


Outras mudanças

Legal né? Agora é só aproveitar e inserir no código do seu site!!


Informações: Mozilla