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

Em 1º vamos criar um ficheiro “.html”.

Na shell do MySQL digite após selecionar uma Base de Dados escreva o seguinte código:

CREATE TABLE votacao (id INT(2) NOT NULL auto_increment primary key, descricao CHAR(50), votos CHAR(4));

Pronto, a sua tabela foi criada com sucesso, de seguida vamos adicionar nas opções de tabela:

INSERT INTO votacao (descricao,votos) VALUES (“vermelho”,”0″);
INSERT INTO votacao (descricao,votos) VALUES (“azul”,”0″);
INSERT INTO votacao (descricao,votos) VALUES (“amarelo”,”0″);
INSERT INTO votacao (descricao,votos) VALUES (“roxo”,”0″);

Vamos agora criar  o ficheiro .php com o nome de votação, com o seguinte codigo:

<?

if ($escolha != “”) { // Verifica se foi inserido um voto e prossegue em frente no caso de verdade

// Variáveis a serem alteradas

$mysql_host = “”; // local do servidor MySQL
$mysql_user = “”: // utilizador do MySQL
$mysql_pass = “”; // senha do utilizador do MySQL
$mysql_dtbs = “”; // base de dados onde a tabela foi criada

$num_resp = “”; // número de opções na tua votação
$pergunta = “”; // pergunta da votação

// Nada mais a ser alterado

$mysql_conx = mysql_connect($mysql_host,$mysql_user,$mysql_pass);
// ligação ao MySQL

$radio = $num_resp + 1;
// para uso posterior

mysql_select_db($mysql_dtbs);
// seleciona a base de dados

// aqui começa todo o trabalho do PHP para actualizar a base de dados

$query_upd = “SELECT * FROM votacao WHERE id=$escolha”;
$resul_upd = mysql_query($query_upd);
// aqui o PHP selecciona apenas os registos que coincidem com a escolha, neste
// caso so uma opção

$obj_upd = mysql_fetch_object($resul_upd);
// o comando mysql_fetch_object() separa os resultados de uma query por colunas
// neste caso, $obj_upd -> descrição da opção que o utilizador votou

$vot_upd = $obj_upd->votos;
$vot_upd++;
// separa só os votos e adicinona mais um voto

$upd_upd = “UPDATE votacao SET votos=$vot_upd WHERE id=$escolha”;
mysql_query($upd_upd);
// atualizou a base de dados

// Agora o PHP fará a pesquisa na base de dados e retornará as opções, seus
// respectivos votos, total de votos e a sua escolha.

echo “<H3>” . $pergunta . “</H3>”;

for($i=1;$i<$radio;$i++) {

$query[$i] = “SELECT * FROM votação WHERE id=$i”;
$resul[$i] = mysql_query($query[$i]);
$objet[$i] = mysql_fetch_object($resul[$i]);

echo “<FONT FACE=”Verdana” SIZE=”1″><B>” . $objet[$i]->opcao . “</B> ” . $objet[$i]->descricao . “<B> ” . $objet[$i]->votos . “</B><BR>”;

$tot_vt += $objet[$i]->votos;

// tudo isto serve para requisitar o resultado de cada opção e exibir no écran

}
echo “<FONT SIZE=”1″><B>Total de votos:</B>” . $tot_vt . “   <B>Sua Escolha</B>:” . $escolha . “</FONT></FONT>”;
}
?>

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

Muita gente gosta de misturar nomes para criar verdadeiras “obras de arte”. Colocar a metade do nome da mãe junto com a metade do nome do pai gerou uma geração de “ClaudeVanes”, “Vivingelinas”, etc.

Se você gosta desta tendência vai adorar o namemasher.com, um site onde podem informar os nomes originais e obter uma colecção de resultados realmente assustadores.

Testem, brinquem, mas, antes de batizar seu filho, pense no futuro dele…

Website: NameMasher

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