Para os iniciantes este post é excelente, não existe maneira melhor que aprender os básicos através de vídeo-tutoriais… E para quem já domina o Illustrator, nada melhor que aprofundar os seus conhecimentos, com este grupo de vídeos incríveis, que apresentam diversas técnicas diferentes. Vídeos em inglês, com grande qualidade de imagem para que possa aprender mais facilmente todas as técnicas. Torne-se um designer/ilustrador melhor!

1) Sketch to vector Illustrator Tutorial

2) How to Create a Vector RSS Icon

3) Film Strip Tutorial – Illustrator

4) Create a Vibrant 3D Pixel Type Treatment – Video

5) engage> Quick Tip: Select objects faster and more efficiently in Illustrator

6) Web 2.0 Style Box / Icon: Adobe Illustrator Tutorial

7) Pixel Art Tutorial – Illustrator

8 ) Vector Metal Icon Buttons: Illustrator Tutorial!

9) Create a Windows Vista Icon all Vector! Illustrator Tutorial

10) Masking in Adobe Illustrator! Basics Tutorial

11) Metal Lightning Bolt & Vector Leather! Illustrator Tutorial

12) Create a button for a website in Illustrator – Tutorial

13) Vector Swirls, Swooshes, and Florals: Illustrator Tutorial

14) Draw Vector Heart Artwork: Adobe Illustrator Tutorial

15) engage> Quick Tip: Select objects faster and more efficiently in Illustrator

16) Metal/Metallic Text: Adobe Illustrator CS3 Tutorial

17) NEW! Adobe Illustrator Tutorial! Make Comic Style Text!

18) ‘>’>’>Adobe Illustrator Tutorial! ::The Pen Tool::

19) Illustrator & Photoshop CS4 Tutorial: Create 3D Shapes and Backgrounds

20) Create Intricate Patterns in Illustrator

21) graphic design illustrator text effects

22) How to Create an Hourglass Icon in About an Hour – Screencast

23) Electric Zombie Tee Creation

24) How to Create an Alarm Clock Icon – Screencast

25) Crow No!

26) How to Create Sheet Rolls with Custom Spirals – Screencast

27) How to Create a Vector Sketchbook – Screencast

28) Illustrator Grunchybackground Tutorial

29) illustrator envelope tutorials

30) Illustrator Tutorial – Rotationswerkzeug

Aplicações web são populares devido à omnipresença dos navegadores web. A capacidade de actualizar e manter as aplicações web sem distribuir e instalar o software em potencialmente milhares de computadores dos clientes é uma das principais razões para a sua popularidade.

Por isso a webappers criou um tutorial em photoshop de como como criar uma aplicação Web Admin User Interface.

O tutorial encontra-se em inglês, mas é de fácil compreensão.

Podem ver aqui a imagem do resultado final (carreguem nela para ver no tamanho original).

Website: Criar aplicação web no photoshop

Toda a gente quando cria algo gosta de criar algo bonito, simples e eficaz… por isso trago aqui um tutorial que ensina a criar uma galeria de imagens com jQuery.
O criador deste tutorial é DreamCSS, que ensina a criar o tutorial como fazer a galeria com scroll de imagem, descrição e nome. O nome e descrição tem um efeito de scroll, um efeito simples e muito elegante.

O tutorial encontra-se em inglês, mas é de muito fácil compreensão e muito pequeno. Também disponibiliza os ficheiros para download, mas recomendo-vos a criar o tutorial por vocês a partir do site, pois caso contrário nunca aprendem a fazer por vocês próprios. Caso tenham feito o tutorial e não esteja a funcionar, ai sim aconselho a fazer o download e ver o(s) erro(s) que cometeram.

Pode ver o exemplo da galeria aqui.

Website: Galeria de imagens com jQuery
Demo: Galeria de imagens com jQuery
Download (ficheiros): Galeria de imagens com jQuery
Download (artigo): Galeria de imagens com jQuery
Requisitos: jQuery Framework
Licença: Gratuita

Link para o tutorial: Aqui!

Web Developer Plus, é um blog sobre blog web design / desenvolvimento de dicas e tutoriais, está compartilhando um tutorial de como criar um slider com conteúdo deslizante que é construída com jQuery e jQuery UI.

É um tutorial que descreve cada passo (HTML, CSS, JS) e vem com os arquivos de origem.

O slider muda automaticamente o conteúdo exibido em cada X segundos definido e pode mudar para o item clicado instantaneamente.

Na proporção com o tamanho da “imagem”, a barra pode apresentar um número limitado de itens (4, no exemplo).

Com este tutorial, pode-se criar um elegante e eficaz sistema de notícias.

O tutorial encontra-se em inglês mas é de fácil compreensão. Caso não percebam muito de inglês podem sempre traduzir a página no google para português.

Website: Content Slider with jQuery UI
Demo: Content Slider with jQuery UI
Download: Content Slider with jQuery UI
Requisitos: jQuery, jQuery UI
Licença: Gratuita

Sliding Boxes – aprender a usar a jQuery para criar animações slide para legendas e imagens dentro e fora da vista quer para mostrar ou ocultar o visionamento da área. Sam Dunn, criou um tutorial, de como “brincar” com efeitos de deslizamento. Este tutorial encontra-se em inglês (muito básico até, para quem percebe o mínimo de inglês safa-se bem), e no fim do tutorial, tem-se resultados excelentes, e muito apelativos. Então aqui deixo o link para o tutorial, para os demos que se podem criar, com este tutorial e ainda o link para download!

Website (tutorial): Sliding Boxes
Demos: Sliding Boxes
Download: Sliding Boxes

Hoje em dia, cada vez mais existem sites totalmente criados em flash, com a integração a PHP, Asp ou outras línguas de programação. Como é óbvio os webmasters usam ficheiros externos do flash, para poderem actualizar de forma fácil. Uma dessas maneiras é carregar dados de um ficheiro .txt, pois é fácil de actualizar e muito fácil integração no flash. Por isso hoje o que vos trago é um tutorial que ensina a importar dados de um ficheiro .txt.

Data: 08/03/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programas necessários: Adobe Flash e Bloco de Notas

Tempo: 5 minutos

Nível: Básico

Resultado Final: Ver

1- Abrir o Flash.

2- Cria um novo documento, com as dimensões que desejares.

3- Agora cria duas novas layers e renomeia-as para Campo e Actions.

4- Após ter criado as 2 layers, na layer Campo, crie um campo de texto dinâmico (Dynamic Text) e no campo nome da instância (Instance Name), coloca carrega_txt.

5- Agora seleccione a layer Actions pressione F9 para abrir o painel das Actions. Cole o seguinte código:

System.useCodepage= true;//Para habilitar o uso de outros caracteres.

var leitor = new LoadVars();//Criando a variável leitor

leitor.onData = function(txt){// Abrindo função com o leitor usando a função criada txt

carrega_txt.text = txt;

}

leitor.load(“dados.txt”);//Carregando o .txt para dentro do dynamic text

6- Na parte do flash é tudo, agora vamos abrir o bloco de notas e vamos guardar o ficheiro com o nome de “dados.txt”. Dentro desse ficheiro, coloque o texto que irá aparecer no flash.

7- Nosso projecto está pronto. Basta pressionar Ctrl+Enter para testar.

Trago aqui um simples tutorial que ensina como colocar texto transparente. Este tutorial é óptimo para quem se está a iniciar no Photoshop. Este é um simples efeito, que pode dar jeito de vez em quando, depende do resultado final que cada um pretenda. O tutorial está explicado passo-a-passo, com imagens que achei necessário colocar para ajudar. Caso tenham alguma dúvida, perguntem que eu responderei o mais breve possível.

Data: 07/03/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programa necessário: Adobe Photoshop

Tempo: 5 minutos

Nível: Básico

Resultado Final:

1- Abrir o Photoshop.
2- Cria um fundo a teu gosto.
3- Depois de teres criado o fundo, cria uma nova layer (Ctrl+Shift+N), selecciona a ferramenta de texto (T), e escreve o texto que desejares, tendo em atenção que a cor do texto é branco.

4- Na layer do texto, faz duplo clique para irmos para as Blending Options (Layer » Layer Style » Blending Options).
5- Agora nas Blending Options configura conforme a figura abaixo. (Basta mudar o “Blend Mode” para Linear Burn)

6- Agora vamos aplicar um efeito pois caso contrário o texto não se irá ver. Podem aplicar um Stroke, um Drop Shadow, Outer Glow, entre muitos outros…. No meu caso vou aplicar dois efeitos:  Outer Glow e Stroke. (Aqui fica o meu resultado final

Hoje em dia cada vez mais, existem sites criados em flash. Uma “característica” que os webmasters usam no site, são as preloaders. As preloaders serve para mostrar que o site está a ser carregado e normalmente a percentagem que vai. Existem preloaders mais complexas, em que essas mostram: o tempo restante, a velocidade de download, o tamanho total, tamanho transferido, entre outras opções. Eu neste tutorial, apenas vou ensinar a criar uma simples preloader, apenas mostrando a percentagem carregada. Brevemente postarei, outras formas de fazer preloaders (mais complexas).

Data: 06/03/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programa necessário: Adobe Flash

Tempo: 5 minutos

Nível: Básico

Resultado Final:

1- Abrir o Flash.

2- Criar um novo documento.

3- Depois de criado o novo documento, na primeira frame vamos criar um campo de texto dinâmico (dynamic text) e com o nome de instância (Instance Name) “percentagem”. (Ver imagem )

4- Vamos agora seleccionar a frame 2 e vamos pressionar F7 para criarmos uma Blank keyframe. Agora nesta frame coloquem todo o contéudo que o site/animação irá conter. (No meu caso vou colocar uma imagem com um tamanho grande, para poderem ver o efeito)

5- Depois de terem adicionado o conteúdo, vamos voltar à frame 1, e pressionamos F9 para abrir o painel das Actions. Depois nas actions, colem o seguinte código:

ActionScript 2:

onEnterFrame = function () {

//pegamos o tamanho total e o tamanho carregado do arquivo
atualsize = _root.getBytesLoaded();
totalsize = _root.getBytesTotal();

//exibimos a percentagem carregada
percentagem.text = int(100*int(atualsize)/totalsize)+”%”;

//verificamos se o carregamento foi completado
if (totalsize != undefined && totalsize == atualsize) {
play();
delete this.onEnterFrame;
}

};

stop();

ActionScript 3:

this.addEventListener(“enterFrame”,onEnterFrame);
function onEnterFrame(e:Event) {

//pegamos o tamanho total e o tamanho carregado do arquivo
var atualsize = this.loaderInfo.bytesLoaded;
var totalsize = this.loaderInfo.bytesTotal;

//exibimos a porcentagem carregada
textload.text = int(100*int(atualsize)/totalsize)+”%”;

//verificamos se o carregamento foi completado
if (totalsize != null && totalsize == atualsize) {
this.removeEventListener(“enterFrame”, onEnterFrame);
play();
}

}
stop();

6- Depois basta pressionar Ctrl+Enter para testar e verem o resultado final.

Favicon, é uma fusão das abreviatura de “favorite” (favorito) e “icon” (ícone), são pequenas imagens no formato *.ico com de cerca de 16×16 pixels que ficam guardados num site para serem apresentadas pelo browser.

Data: 04/03/09

Autor: NgM_Me_KuRtE (Flávio Proença)

Programa necessário: Adobe Photoshop

Tempo: 5 minutos

Nível: Básico

Resultado Final:

Vamos então começar o nosso tutorial:

1- Abrir o Photoshop.
2- Criar um novo documento com as dimensões de 64×64 px.
3- Criem uma nova layer (Ctrl+Shift+N), e chamem-na de “Fundo“. Preencham cor uma cor que vocês queiram, podem até aplicar gradientes ou o estilos que vocês queiram. No meu caso eu preenchi de branco e apliquei um gradiente.

Propriedades do meu gradiente:

4- Agora abrem o logo do vosso site, ou uma imagem que queiram usar (eu aconselho um logo), eu vou usar o logo da CriatividadeVisual. Colem o logo/imagem numa nova layer (Ctrl+Shift+N). Coloquem o logo como vocês acharem melhor (medidas, centrado, etc).

5- Para finalizar falta apenas um passo. Agora vamos ao menu Image » Image Size… (Alt+Ctrl+I). Vai abrir a seguinte janela.

Vamos mudar para:

6- Seu Favicon está finalizado. Agora você está perguntando a si mesmo, “Como é que eu gravo no formato *.ico se não aparece cá?” Calma, tudo tem solução…. para você poder guardar o seu ficheiro como *.ico você precisa de fazer o download do plugin, que serve para abrir e guardar ficheiros *.ico no photoshop. Pode efectuar o download do plugin Aqui.

Para aplicar favicon em seu site, basta colocar o seguinte código dentro das tags <head> e </head>.

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />

Além disto, o ícone em formato *.ico deve se chamar obrigatoriamente favicon e estar alojado na pasta (directório) principal do website. De forma que se o endereço da página for http://www.criatividadevisual.com, o endereço do ícone deve ser, http://www.criatividadevisual.com/favicon.ico

]]> http://www.criatividadevisual.com/tutorial-criar-favicon/feed/ 2