Archive for the Tutoriais Category

Tutoriais e geradores úteis by Marina

Posted in Blogosfera, Dicas, Geradores, Photoshop, Tutoriais, Utilitários, Webdesign with tags , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , on 3, junho 2008 by deianaweb

Como estudante quase que autodidata de webdesign, assim que eu comecei a me interessar por blogs, encontrei um que me chamou muita atenção pelos layouts e dicas que trazia pois de tempos em tempos mudava de aparência e trazia muita boa informação, o antigo blog Templates By Marina que hoje passou a chamar By Marina, com um estilo mais “clean” e bem delicado, é feito por uma estudante de Publicidade que adora designer e que mantém esse blog pessoal muito bem feito, onde além de seu dia-a-dia, seus trabalhos como webdesigner, dedica uma página do blog chamada EXTRAS onde publica tutoriais e geradores de sua autoria que, com certeza, ajudarão aos visitantes que estão ainda começando a fazer um blog ou mesmo estudando sobre edição de imagens. Vale a pena visitar o By Marina!

Abaixo seguem os links diretos dos tutoriais e geradores criados pela Marina:

Tutoriais de Photoshop:

Se você ainda é principiante, tem um site ou blog, os geradores abaixo o ajudarão a criar determinados itens úteis que exigem algum conhecimento para serem inseridos no código HTML da sua página.

Geradores de códigos:

Downloads gratuitos:

Anúncios

Tutorial: Layout Estilizado com texto 3D usando Photoshop e Ilustrator

Posted in Efeitos Digitais, Ilustrator, Photoshop, Tutoriais, Web2.0, Webdesign with tags , , , , , on 25, maio 2008 by deianaweb


O site PSDTUTS publicou um tutorial (em inglês), que cria um layout estilizado com texto em 3D, extremamente moderno e bonito, que pode ajudar muito aos webdesigners em seus projetos de criação. O tutorial requer um bom conhecimento de Photoshop e Ilustrator, pois combina os 2 softwares para resultar no efeito acima. Mesmo que você não saiba inglês, o tutorial traz o passo-a-passo com as ilustrações de cada etapa.

Para facilitar estamos disponibilizando 2 links, abaixo, um com a versão original do tutorial e, outro, com a versão traduzida para o português:

Design Soft Stylized 3D Type:

Serviço online que extrai cores hexadecimais de fotos

Posted in CSS, Fireworks, Geradores, Photoshop, Utilitários, Web2.0, Webdesign with tags , , , , on 12, maio 2008 by deianaweb

Descobrimos uma ferramenta muito útil, online e gratuita, que poderá ajudá-lo na criação de projetos web. A ferramenta Palette Generator permite que você extraia cores, em hexadecimal, de fotos a partir do seu computador, do Flickr, do Photobucket, ou de uma URL. Após escolher a foto desejada, faça o upload e clique em “Create”. Em poucos segundos será gerada sua paleta de cores extraída da foto, com o respectivo código hexadecimal e o nome da cor abaixo. Além disso, existem outras duas possibilidades: 1) fazer o download do “swatch” que é compatível com o Photoshop e outros aplicativos. 2) Copiar o código CSS das cores para utilizar em seus projetos de webdesign.

Confira um exemplo da paleta gerada a partir de uma foto:

Para utilizar o serviço não é necessário cadastro, porém, se você desejar ter mais comodidade e ter armazenado seus últimos acessos ao site, sem a necessidade de refazer o upload de fotos e participar do fórum, crie sua conta clicando aqui.

4 pacotes de brushes gratuitos para Photoshop – estilo Floral (+ Tutorial de Instalação)

Posted in Brushes, Dicas, Photoshop, Tutoriais, Web2.0, Webdesign with tags , , , , , , , , , , , on 11, maio 2008 by deianaweb

Encontramos 4 ótimos pacotes de brushes gratuitos para Photoshop no estilo Floral, de autoria do artista Coolwing. Para baixar os pacotes, entre nos links indicados abaixo que, o redirecionará para a página do autor dentro da comunidade DeviantART e clique em download (conforme a figura abaixo):

Baixe agora os pacotes individualmente:

Não sabe como instalar os pacotes de brushes dentro do seu programa Photoshop? Então vamos te ensinar. Siga os passos do tutorial abaixo:

Tutorial para instalação básica de brushes (pincéis) para Photoshop:

Criado por: Andréia (Blog Caça-Links)
Data de criação: 11/05/2008 

IMPORTANTE: Deixe seu Photoshop fechado enquanto instala os arquivos de brushes. Só no passo 04 desse tutorial é que você deverá abrir o programa.

1) Faça o download do arquivo para uma pasta onde seja fácil localizá-lo depois (exemplo: pasta Meus Documentos, pasta Arquivos Recebidos, Desktop ou Área de Trabalho).

2) O arquivo virá zipado, ou seja, compactado. Assim é necessário descompactá-lo antes em um programa tipo Winzip, Filzip, etc. Para isso, localize o arquivo baixado, clique em cima com o botão direito do mouse e localize o nome do seu programa descompactador. Clique no nome do programa (ex: Filzip), e logo aparecerão algumas opções, escolha a opção “Extrair para C:/…”. Após isso, no mesmo local onde o arquivo zipado foi salvo, você verá que irá aparecer uma pastinha amarela com o nome do arquivo. Clique nessa pastinha e lá você encontrará o arquivo necessário para a instalação do brush dentro do Photoshop. Localize o arquivo pelo ícone abaixo:

ATENÇÃO: Como o autor desses brushes é Chinês, o nome do arquivo.ABR depois de descompactado está com um nome desconfigurado. Assim, para ficar mais fácil, renomeie o arquivo clicando com o botão direito do mouse sobre ele e coloque o nome que quiser, no meu caso, escolhi os nomes Floral 1, Floral 2, Floral 3, para facilitar a localização dentro do Photoshop depois.

3) Clique em cima do arquivo identificado com o ícone acima (arquivo com extensão .ABR), copie (Ctrl+C). Em seu PC, clique com o botão direito do mouse em cima de Iniciar, escolha Explorar na lista, localize as pastas na seguinte ordem: Arquivo de Programas que fica dentro do Disco local (C:), Adobe, Photoshop CS (no meu caso uso a versão CS), Predefinições, e por fim, localize a pasta Pincéis. Nessa última pasta, cole(Ctrl+V) o arquivo copiado. Feche a pasta.

Endereço para instalação do brush:
C:\Arquivos de programas\Adobe\Photoshop CS\Predefinições\Pincéis

4) Abra o Photoshop, clique em novo documento ou então abra o documento no qual deseja aplicar o brushe.

5) Localize e clique na Ferramenta Pincél ou clique no atalho (B) (veja a figura abaixo):

6) A seguir vá até o menu superior do Photoshop e clique na seta 1 para abrir o seletor de Predefinições do Pincél. Clique na seta 2 para abrir a lista de brushes. Por fim, localize o brushe salvo dentro da pasta Pincéis e clique nele, conforme a figura abaixo:

7) Será perguntado se você deseja substituir os pincéis atuais por pincéis de floral1.abr (ou o nome do arquivo escolhido)? Clique em sim.

8 ) A seguir aparecerá uma lista com as miniaturas dos brushes carregados. Aí é só escolher o brushe de sua preferência, ajustar o diâmetro do pincel e utilizá-lo em seu trabalho.

Veja um exemplo da utilização dos brushes baixados:


Esse pequeno tutorial faz parte da nossa contribuição para o Movimento Blog Voluntário.

Em breve: Tutorial “Folha de Caderno” (Fireworks 8)

Posted in Fireworks, Tutoriais, Webdesign with tags , on 23, abril 2008 by deianaweb

Amigos,

Tenho observado que existem muitas buscas aqui no blog, sobre como criar “folhas de caderno”. Assim, em breve postarei o tutorial que estou desenvolvendo no Fireworks 8.

Só pra ficarem com um gostinho de “quero mais”… segue uma pequena parte do resultado final:

Deixem suas opiniões!

Tutorial de CSS – gratuito

Posted in CSS, Tutoriais, Webdesign with tags , , , , , , , , , on 12, fevereiro 2008 by blogcacalinks

 

Tutorial de CSS
Quer aprender CSS?

O site HTML.NET oferece um Tutorial de CSS traduzido para o Português, que vem dividido em lições e exemplos bastante didáticos.

Confira abaixo o índice do tutorial:

  • Introdução
    Uma breve introdução ao tutorial e o que você aprenderá.
  • Lição 1: O que é CSS?
    O aparecimento das CSS, vantagens do seu uso para layout em relação ao HTML.
  • Lição 2: Como funciona CSS?
    A sintaxe básica das CSS e a construção da sua primeira folha de estilos.
  • Lição 3: Cores e fundos
    Como aplicar cores de primeiro plano e de fundo no seu website e o uso de imagens de fundo.
  • Lição 4: Fontes
    O que são fontes e como aplicá-las com uso de CSS.
  • Lição 5: Textos
    Aplicação das CSS para layout e apresentação de texto.
  • Lição 6: Links
    Adicionando interessantes efeitos em links e trabalhando com pseudo-classes.
  • Lição 7: Identificando e agrupando elementos (class e id)
    Usando class e id para aplicar estilos a determinados elementos.
  • Lição 8: Agrupando elementos (span e div)
    O uso dos elementos HTML span e div e sua vital importância para CSS.
  • Lição 9: O box model
    O box model em CSS descreve como são gerados os boxes para os elementos HTML.
  • Lição 10: O box model – margem e padding
    Mudando a apresentação de elementos através das propriedades margin e padding.
  • Lição 11: O box model – bordas
    Aprenda as infinitas opções de estilização com uso de bordas.
  • Lição 12: O Box model – altura e largura
    Aprenda a definir altura e largura para os elementos HTML.
  • Lição 13: Flutuando elementos (floats)
    Uso da propriedade float para ‘flutuar’ um elemento à esquerda ou à direita.
  • Lição 14: Posicionando elementos
    Colocando um elemento em um lugar qualquer da página com posicionamento CSS.
  • Lição 15: Usando z-index (Layers)
    O uso de layers para sobrepor elementos.
  • Lição 16: Web-standards e validação
    A última lição trata das W3C-standards e como verificar suas CSS.

lupa1.jpgCaça-Links indica: HTML.NET

Tutorial de HTML – gratuito

Posted in HTML, Tutoriais, Webdesign with tags , , , , , , , , , , , on 12, fevereiro 2008 by blogcacalinks

Tutorial de HTML
Quer aprender HTML?

 O site HTML.NET oferece um Tutorial de HTML traduzido para o Português, que vem dividido em lições e exemplos bem explicativos.

Confira abaixo o índice do tutorial:

  • Introdução
    Uma breve introdução ao tutorial e o que você aprenderá.
  • Lição 1: Vamos iniciar
    As ferramentas que você precisa para desenvolver seu próprio website.
  • Lição 2: O que é HTML?
    Entendendo o que é o que significa HTML.
  • Lição 3: O que são tags HTML?
    O que são e para que servem as tags HTML.
  • Lição 4: Criando seu primeiro website
    Aprenda a criar seu primeiro documento HTML – o template básico para páginas.
  • Lição 5: O que você já aprendeu?
    Recapitulando o que você já aprendeu e antevendo o que aprenderá nas próximas lições.
  • Lição 6: Mais tags HTML
    Conhecendo as sete tags HTML mais usadas.
  • Lição 7: Atributos
    Aprenda como adicionar informações extras às tags e a projetar comandos de um modo explícito.
  • Lição 8: Links
    Como criar links para suas próprias páginas e para a Internet.
  • Lição 9: Imagens
    Descubra como é simples e fácil inserir imagens em uma página web.
  • Lição 10: Tabelas
    Construindo tabelas HTML para apresentar dados tabulares.
  • Lição 11: Mais tabelas
    Criando tabelas avançadas.
  • Lição 12: Layout (CSS)
    Entendendo como Cascading Style Sheets (CSS) pode ser usada para construir fantásticos layouts para suas páginas
  • Lição 13: Uploading páginas
    Como publicar páginas na Internet para serem vesualizadas por todos.
  • Lição 14: Web standards e validação
    Conheça as normas para HTML e como verificação a correção do código.
  • Lição 15: Dicas finais
    Algumas dicas adicionais para seus projetos web.

    lupa1.jpgCaça-Links indica: HTML.NET