Felipe Cesar

Módulo 2 – Aula 09 (Final)

Incorporação de Font

formmail.php

jQuery – Lightbox

Módulo 2 – Aula 08

produtos

HTML – Formulário

  • Form: Todo formulário deve ser filho de uma tag <form> contendo os atributos action=”" e method=”"
    • action: Atributo que direciona para qual arquivo serão enviados os dados. Exemplo: <form action=”formmail.php” method=”">
    • method: Atributo que diz o método de envio dos dados podendo ser POST ou GET. Exemplo: <form action=”" method=”post”>. OBS: utilizaremos o method post
  • Campo de texto: Campo de texto é uma tag <input type=”text” /> e deverá vir sempre com o atributo name. Exemplo: <input type=”text” name=”telefone” />
  • Área de texto: Área de texto é uma tag <textarea name=”mensagem”></textarea> e deverá vir sempre com o atributo name.
  • Lista de seleção: Para fazer uma lista de seleção você deverá utilizar a TAG <select name=”estado”></select> sendo que dentro da TAG <select> deverão existir as opções com seus valores. Exemplo: <option value=”ba”>BA</option>, <option value=”rj”>RJ</option> e <option value=”sp”>SP</option>
  • Radio (bola): O campo radio serve para que apenas uma opção seja selecionada. Exemplo: <input type=”radio” name=”sexo” value”masculino” />. OBS: para inserir duas respostas para uma mesma pergunta você deverá utilizar o mesmo name para os dois campos. Exemplo: <input type=”radio” name=”sexo” value”masculino” /> e <input type=”radio” name=”sexo” value”feminino” />
  • Checkbox (quadrado): O campo checkbox serve para marcar e desmarcar quantas vezes você quiser, inclusive podendo marcar mais de uma opção. Exemplo: <input type=”checkbox” name=”esporte” value”interesse” />
  • Botão de enviar: O botão de enviar é uma TAG <input type=”submit” value=”Enviar” />

PHP – EasyPHP

Iniciando o EasyPHP

  • Instale normalmente como qualquer programa
  • Acesse a pasta onde o EasyPHP foi instalado e execute o arquivo EasyPHP-X.exe, sendo X a versão do seu EasyPHP
  • Aparecerá um ícone do EasyPHP ao lado do relógio na barra do windows
  • Clique com o botão direito do mouse sobre o ícone e escolha a opção Local Web
  • Note que ele abrirá uma página no navegador. Essa página exibirá todos os projetos que você tem armazenado na pasta /www dentro da pasta do /EasyPHP
  • OBS: a partir de hoje todos os projetos deverão ser salvos dentro da pasta /www dentro da pasta /EasyPHP (exemplo: c:/Arquivos de Programas/EasyPHP/www)
  • OBS2: para navegar no seu projeto você precisará sempre acessar o EasyPHP através do Local Web do ícone (conforme etapas anteriores)

PHP – Include

  • O comando include() é uma função PHP que serve para incluir outro arquivo no lugar exato onde a função é inserida.
  • O código deverá ser: <?php include(“nome-do-arquivo.php”); ?>
  • No nosso projeto do Tomatões recortamos as DIVs #topo, #banner e #menu e inserimos num arquivo chamado topo.php. No local exato onde tiramos as DIVs devemos inserir o código <?php include(“topo.php”); ?>
  • O mesmo processo foi feito para a DIV #rodape

Módulo 2 – Aula 07

banner

Guia de Tomatões

4 etapas para instalar jQuery

  • Ver funcionando no seu PC
  • Transferir o arquivo HTML (que está funcionando) para a mesma pasta do arquivo a receber o efeito
  • Mudar os caminhos do arquivo que foi transferido
  • Aplicar os códigos no arquivo do seu site

jQuery – Nivo Slider

EXERCÍCIOS

  • Fazer um SLIDER com as imagens do Elefante (DOWNLOAD)
  • Colocar o ícone que fica na aba do navegador
  • Colocar imagens das redes sociais no rodapé
  • Trocar a imagem da segunda notícia
  • Colocar link nas imagens das notícias
  • Quando colocar mouse na imagem da notícia a borda deverá ficar vermelha (#ac0000)

Módulo 2 – Aula 06

flash

TOMATÕES (Projeto)

Firebug

DREAMWEAVER

Editando a cor do código:

  1. Vá em: Edit / Preferences…
  2. Escolha a opção Code Coloring
  3. Em Document Type, selecione a linguagem que terá sua cor alterada (HTML, PHP, CSS, etc)
  4. Escolha o comando e as cores para esse comando (Exemplo: HTML Comment)

MENU TOMATÕES

  • display: inline – Serviu para colocarmos nossa lista que é VERTICAL na posição HORIZONTAL (em linha)
  • line-height: 40px – Serviu para alinhar o texto de forma vertical num espaço de 40px

EXERCÍCIOS

Módulo 2 – Aula 05

TOMATÕES (Projeto)

EXTENSÕES DAS IMAGENS

  • GIF
    1. Quando utilizar: Utiliza quando tem poucas cores ou a imagem é pequena
    2. Vantagem: É leve e mantem as cores originais
    3. Desvantagem: Tem limite de 256 cores
  • JPG
    1. Quando utilizar: Utilizado para fotografias
    2. Vantagem: Serve para imagens com muitas cores e grandes
    3. Desvantagem: Distorce a imagem
  • PNG
    1. Quando utilizar: Quando precisar utilizar transparência real
    2. Vantagem: A transparência funciona
    3. Desvantagem: Muito pesado

ASSUNTOS – CSS

  • Zerando um novo projeto (Seletor Universal): Toda vez que formos iniciar um projeto precisaremos utilizar o seletor universal asterisco (*) e aplicar o valor zero (0) para margin, padding e border. Exemplo: * { margin:0; padding:0; border:0; }

SEO (Otimização para o Google)

  • SEO são técnicas de Otimização para buscadores, entre eles o principal que é o Google
  • Tomaremos como exemplo a otimização de uma pizzaria que queira otimizar o termo “pizza delivery salvador”
  • As técnicas de SEO são divididas em duas partes:
  • Técnicas ON-PAGE
    • Título nas páginas com a tag <title> (exemplo: <title>Pizzaria Velame – Melhor Pizza Delivery de Salvador</title>)
    • Heading tags (<h1>, <h2>, etc) (exemplo: <h1>Pizza delivery em salvador é Velame</h1>)
    • Imagens: Nome do arquivo (exemplo: pizza-calabresa.jpg) e Atributo ALT (exemplo: <img src=”" alt=”Pizza de Calabresa” />)
    • Domínio (exemplo: ao invés de apenas “velame.com” seria melhor “velamepizzas.com”)
    • URL da página (exemplo: ao invés de “velamepizzas.com/pagina1.html” seria melhor “velamepizzas.com/delivery-salvador.html”)
    • Conteúdo (é todo restante do código como <p>, <li>, etc
  • Técnicas OFF-PAGE
    • Quantidade de links externos. Cada link é chamado de backlink. Para conferir seus backlinks acesse www.backlinkwatch.com
    • Qualidade dos links externos. É melhor ter um blog de receita apontando pro site de pizzaria do que dois sites de tecnologia.
    • Texto âncora dos links externos (ao invés de <a>Velame Pizzas</a> seria melhor se fosse <a>Pizza Delivery Salvador</a>
    • Idade do domínio
  • Existem técnicas que são consideradas Black Hat e técnicas White Hat. As Black Hat são proibidas, confira algumas:
    • Criar vários domínios apenas para colocar links apontando para seu sites. Essa técnica é conhecida como Link Farm
    • Escrever algo interessante para o Google e depois esconder texto com display none para que o usuário não enxergue, apenas o Google enxergue
    • Detectar o IP de acesso. Se for o Google, ele direciona para um HTML e se for o usuário direciona para outro
  • Download do Slide

EXERCÍCIOS

Módulo 2 – Aula 04

image-replacement CSS – Background

DREAMWEAVER

  • Apenas trabalharemos no modo CODE e nunca no SPLIT e nem DESIGN
  • Configuramos para que todo novo documento seja do tipo xHTML 1.0 Strict. Basta ir em Edit / Preferences / New Document
  • Configuramos para fechar automático após digitar “>” da tag de abertura. Basta ir em Edit / Preferences / Code Hints
  • Criando atalhos no Dreamweaver via Snippet
    • Criando um Snippet
      1. Escreve o código que será inserido
      2. Seleciona o código e com o botão direito do mouse escolhe “Create New Snippet”
      3. Automaticamente abrirá uma nova janela (Snippet)
      4. Escolha o nome do Snippet e depois o que será inserido ANTES (before) e o que será inserido DEPOIS (after). O mouse será posicionado no meio entre eles.
      1. Atalho de Teclado
      2. Vá em Edit / Keyboard Shortcuts
      3. Se for a primeira vez, clica em Duplicate Set (1º dos 4 ícones da direita)
      4. Escolha um nome
      5. Em COMMANDS escolha SNIPPETS
      6. Localize sua Snippet
      7. Clique no campo PRESS KEY
      8. Escolha o atalho (exemplo: “CTRL + SHIFT + D” para a DIV)
      9. Clique em CHANGE

IMAGE-REPLACEMENT (Substituição por imagens)

  • Para que serve: A técnica de Image-replacement serve para substituir um texto por imagem, escondendo o texto (que não deixa de existir) e exibindo uma imagem de fundo (background)
  • Quando utilizar:Quando for criar um botão que precise de um efeito “:hover”
  • Exemplo:
    • HTML: <p class=”botao”><a href=”#”><span>Inscreva-se</span></a></p>
    • CSS: .botao a { background: url(botao.gif); width: 235px; height: 45px; } .botao a:hover { background-position: 0 45px; } .botao span { display: none; }
    • Download de image-replacement padrão

ASSUNTOS – CSS

  • border: Para funcionar uma borda sempre precisaremos colocar 3 propriedades: Cor (border-color), Estilo (border-style) e Largura (border-width). Exemplo: img { border: red solid 3px; }
  • background: Existem várias propriedades de background.
    1. background-color: Serve para colocar a cor de fundo. Exemplo: body { background-color: yellow; }
    2. background-image: Coloca uma imagem de fundo. Exemplo: body { background-image: url(gmail.png); }
    3. background-repeat: Serve para dizer se deverá ser repetido ou não (precisa ter um background-image). Exemplo: body { background-repeat: no-repeat; }
    4. background-position: Posiciona sua imagem de fundo para cima (top), direita (right), baixo (bottom), esquerda (left) e centro (center). Exemplo: body { background-poition: bottom right; }
    5. background-attachment: Dirá se o seu background é fixo ou rola com a tela (precisa ter um background-image). Exemplo: body { background-attachment: fixed; }
    6. OBS: Poderemos e passaremos a utilizar a propriedade background pura para tudo. Exemplo: body { background: yellow url(gmail.png) no-repeat bottom; }
  • Formatação de texto: Faça download do arquivo
    1. letter-spacing: Espaçamento entre as LETRAS. Exemplo: div { letter-spacing: 5px; }
    2. word-spacing: Espaçamento entre as PALAVRAS. Exemplo: div { word-spacing: 30px; }
    3. line-height: Altura da linha. Aumenta a altura de uma linha para a outra. Exemplo: div { line-height: 36px; }
    4. text-align: Alinha o texto. Exemplo: div { text-align: right; }
    5. text-transform: Transforma o texto. Exemplo: div { text-transform: uppercase; }
    6. font-weight: Diz o peso da font (negrito). Exemplo: div { font-weight: bold; }
    7. font-style: Estilo da font. Exemplo: div { font-style: italic; }
    8. font-family: Diz a família tipográfica da font. Quando tem mais de um valor, caso não exista a primeira font ele passa para a segunda e assim por diante. Exemplo: div { font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif; }

Regras W3C

  1. Toda página deve ser documentada (DTD). O próprio Dreamweaver dá a tag pronta. Exemplo: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Módulo 2 – Aula 03

Nivel 1 – inserir mudanças

Download do Nível 1

Download do Nível 2

CLEAR

  • Para que serve: Serve para LIMPAR seu elemento e impedir que o mesmo se misture (fique atrás de outro)
  • Quando utilizar: Quando quiser impedir que um elemento fique atrás do outro ou ao lado do outro.
  • Exemplo: Em sala utilizamos essa propriedade na DIV do RODAPÉ para que ela não ficasse por trás de MENU e CONTEÚDO

FLOAT

  • Para que serve: Serve para “flutuar” um elemento.
  • Quando utilizar: TODAS as vezes que quisermos colocar um elemento ao lado do outro precisaremos utilizar o FLOAT em ambos.
  • Exemplo: Em sala utilizamos o FLOAT no MENU e no CONTEÚDO do exercício Nível 1

LIMPADOR

  • Quando utilizar: duas situações de quando utilizar o limpador:
    1. Quando a mãe sumir por causa dos filhos que flutuaram. SOLUÇÃO: Colocar um LIMPADOR antes de fechar a div mãe
    2. Quando dois elementos que não deveriam estar se misturando acabaram misturados. SOLUÇÃO: Colocar um LIMPADOR entre os dois irmãos
  • HTML: <div class=”limpador”></div>
  • CSS: .limpador { clear: both; }

ASSUNTOS – HTML

  • Negrito: Serve para deixar um texto em negrito. O texto que deverá ser negrito ficará dentro das TAGs . Exemplo: Meu texto está <strong>negrito</strong>
  • Itálico: Serve para deixar um texto em itálico. O texto que deverá ser itálico ficará dentro das TAGs . Exemplo: Meu texto está <em>itálico</em>
  • span: A TAG é uma TAG “nada”, ou seja, ela não tem uma função específica, ficando a critério do desenvolvedor utilizá-la no momento que achar adequado. Ela é uma espécie de coringa. Exemplo: <p>Tenho um parágrafo, mas <span>aqui</span> terá uma cor diferente.</p>
  • div: é um BLOCO DE INFORMAÇÕES que pode conter parágrafos, imagens, links e qualquer outra coisa. Os blocos de informações mais utilizados são Topo, Menu, Conteúdo e Rodapé. Exemplo: <div></div>

ASSUNTOS – CSS

  • HERANÇA: O CSS aceita trabalhar seletores com herança permitindo aplicar propriedades mais específicas como #menu a { color: yellow; } que está dizendo que TODA tag </a> que estiver dentro de #menu ficará com a cor amarela
  • :first-child (Pseudo-elemento): serve para atingir o primeiro filho. Exemplo: #conteudo p:first-child { color: white; } fará com que apenas o PRIMEIRO </p> dentro de #conteudo ficará branco
  • Pseudo-class: Vimos 3 pseudo-classes.
    1. :visited – Quando tiver sido visitado. Exemplo:
    2. :hover – Quando colocar o mouse em cima. Exemplo:
    3. :active – No momento do clique do mouse. Exemplo:
  • comentário: O comentário no CSS é composto por /* para abrir e */ para fechar. Exemplo:
  • Seletor ID: o seletor ID serve para criar uma regra CSS que possa ser utilizada em um único ponto da sua página. É composto por sustenido e o nome do seletor. Exemplo:
  • Seletor CLASS: o seletor CLASS serve para criar uma regra CSS que possa ser utilizada em pontos específicos da sua página e por mais de uma vez. É composto por ponto e o nome do seletor. Exemplo:
  • margin: Espaçamento EXTERNO. Empurra quem está FORA dele.
  • padding: Espaçamento INTERNO. Empurra quem está DENTRO dele (os filhos).

Módulo 2 – Aula 02

ASSUNTOS – HTML

  • Imagem: Para inserir imagens é necessário utilizar a marcação junto com o atributo , sendo que o valor dentro de src será o caminho para a imagem. Exemplo:
  • Link: Os links são a base da Web. A TAG de link é e assim como a imagem ela precisa de um atributo chamado onde o valor desse atributo será o destino do link. Exemplo:
  • Comentário: Comentário serve como auxílio ao desenvolvedor (você). O código para comentário é .

Regras W3C

  1. HTML para marcação e CSS para estética
  2. Toda página deve ter e o deve dizer o que a página oferece
  3. Toda página deve conter um e somente um
  4. Utilizar apenas para subseção de , para subseção de e assim por diante.
  5. Todo menu deve ser em lista. Utilizaremos a lista não ordenada
  6. Toda imagem deve conter um texto alternativo (Atributo ALT). Exemplo:

Regras xHTML

  1. Toda TAG deve ser minúscula
  2. Toda TAG deve ser fechada. Nos casos de TAGs únicas utilizaremos uma “/” no final. Exemplo:
  3. Quando quiser deixar negrito utilizar a tag e não <b>
  4. Quando quiser deixar itálico utilizar a tag e não <i>

Regras HTML

  1. Toda TAG vem entre “<” e “>”
  2. As TAGs de fechamento possuem uma “/”. Exemplo:
  3. Atributos HTML – 1: Devem vir na TAG de abertura | 2: Tem a estrutura nome=”valor”

ASSUNTOS – CSS

  • Regra CSS:
  • Existem 3 tipos de CSS: inline, interno e externo
  • Seletor TAG: o seletor TAG formatará todas as TAGs daquele tipo das páginas que tenham vínculo com aquele CSS. Exemplo: Se escrevermos no CSS então todos as TAGs ficarão azul.
  • Link do HTML com CSS: para que haja vínculo entre HTML e CSS você precisará colocar a tag dentro da tag

Regras W3C

  1. Utilizar CSS externo

EXERCÍCIOS

Módulo 2 – Aula 01

Exercício – Criação de Layouts no Photoshop 2a

DOWNLOAD NOTEPAD++

ASSUNTOS – HTML

  • Estrutura básica: Composta pelas TAGs e
  • Título: Composto pela TAG . Serve para criar um título para o seu projeto.
  • Parágrafo: Composto pela TAG . Serve exclusivamente para a criação de parágrafos.
  • Cabeçalhos: São TAGs que criam hierarquia à sua página. As TAGs são , , , , e . IMPORTANTE! Cada TAG de cabeçalho apenas existe se a superior a ela existir. Exemplo: H3 apenas existirá se for uma subseção de H2.
  • Listas: Existem 2 tipos de listas, ORDENADAS e NÃO ORDENADAS . Independente da lista escolhida você deverá ter os itens da lista que serão aplicados com a TAG

Regras W3C

  1. HTML para marcação e CSS para estética
  2. Toda página deve ter e o deve dizer o que a página oferece
  3. Toda página deve conter um e somente um
  4. Utilizar apenas para subseção de , para subseção de e assim por diante.
  5. Todo menu deve ser em lista. Utilizaremos a lista não ordenada

Regras xHTML

  1. Toda TAG deve ser minúscula

Regras HTML

  1. Toda TAG vem entre “<” e “>”
  2. As TAGs de fechamento possuem uma “/”. Exemplo:

Regra Velame

  1. Abriu FECHOU!

EXERCÍCIOS

Aula 07

PÁGINAS INTERNAS

  1. O Designer do projeto é também responsável pelo design das páginas internas, por isso ele deverá criar um arquivo PSD para cada página interna.
  2. Para o projeto do curso iremos criar 2 páginas internas:
    1. Página de padronização (exemplo):
      1. Título 1
      2. Subtítulo 2
      3. Subtítulo 3
      4. Subtítulo 4
      5. Parágrafo
      6. Parágrafo
      7. Link
      8. Link Hover (quando colocar o mouse em cima do link)
    2. Página de Contato (exemplo)
  3. Exemplos de formulário: http://www.velamecursos.com.br/index.php/blog/22-criativos-formularios-e-paginas-de-contato/

ÍCONES

  1. A utilização de ícones enriquece bastante o projeto, seja em menu, botões ou qualquer outro lugar
  2. Find Icon
  3. Icon Finder
  4. Google Images (pesquise por icon e o nome. Ex: “icon facebook”, “icon home”, “icon contact us”)
  5. Icon Monstr
  6. Web Design Ledger

TIPOGRAFIA

  1. DAFONT.COM – Site para download de FONTS

Classificação das fonts

  • Com Serifa: Font que possui o “rabinho”. Indicada para mídia impressa (livro, revista, jornal) | ver exemplo
  • Sem Serifada: Font que NÃO possui o “rabinho”. Indicada para display (monitor, celular, tv) | ver exemplo
  • Cursiva: Font escrita à mão | ver exemplo
  • Dingbats: Font decorativa ou de ícone | ver exemplo

Dicas do uso de Tipografia

  • Evite alinhamento centralizado em textos longos
  • Nunca utilize tipo claro em fundo claro, ou tipo escuro em fundo escuro
  • Use apenas uma categoria de fonte

3 formas de destacar uma font

  • Deixar negrito
  • Colocar sublinha
  • Escolher uma família de font diferente
  • Escolher uma cor diferente
  • Escolher um tamanho diferente

Lista das melhores fonts

DIMENSÃO DO SITE

  1. Download da BASE para um Novo Layout
  2. Todo o conteúdo do site deverá ficar entre as duas linhas do centro. Caso não esteja enxergando as linhas aperte “CTRL ;”
  3. Apenas Trabalhar com 100% de visualização
  4. Importante! Colocamos 2000 px de altura para que você pudesse trabalhar tranquilamente, portanto não “force” o layout a ter exatamente essa alturo (no final iremos cortar o retsante)

EXERCÍCIOS

  1. Concluir o Layout
  2. Fazer um menu simples para site de investimento em bolsa contendo texto e ícone (home, sobre, equipe, fale conosco)

Aula 06

UIs PSDs prontos

  1. São elementos prontos do Photoshop para você utilizar em seus projetos
  2. Sites para download de UIs PSD

PATTERNS

  1. Design M
  2. Brusheezy
  3. Smashing Magazine

CORES

  • Contraste: O contraste mede a diferença entre duas ou mais cores
  • Brilho: O brilho mede a quantidade de cor branca adicionada a imagem
  • Saturação: A saturação mede a quantidade de uma determinada cor presente na mistura
  • DOWNLOAD: Estudo de cores (impacto psicológico das cores)

Paleta de cores

EXERCÍCIOS

  1. Escolher a Paleta de cores para seu projeto
  2. Concluir o Wireframe do seu projeto para iniciarmos o Photoshop na próxima aula
  3. Fazer um banner 800×600 contendo um slider com imagem, sombra e passadores (setas)
  4. Fazer 3 banners aplicando as cores (escolhendo a Paleta de cores no Colour Lovers) e Styles
    • Cerimonial de casamento
    • Academia de musculação
    • Cafeteria Feito a Grão

Aula 05

STYLES

  1. ultimate-collection-500-photoshop-layer-styles-your-design-free-download
  2. 131 Layer Styles
  3. 220 Layer Styles
  4. 12 Layer Styles
  5. Madeira
  6. Ferrugem
  7. Cromado
  8. Refração
  9. Transparente
  10. Metal
  11. Jóia
  12. Neon

TUTORIAIS PHOTOSHOP

  1. Velame Cursos Arco-Íris
  2. criando uma palavra desenhada
  3. palavra em brasa
  4. efeito de palavra esfumacada
  5. criando palavras de chocolate
  6. efeito brilhante para palavras
  7. efeito glow para palavras
  8. texto com efeito bronze
  9. texto com efeito cheetos
  10. palavra eletrica
  11. texto com efeito 3d
  12. letras de ferro
  13. efeito brilhante para palavras
  14. letras e palavras com efeito de vidro
  15. palavras com efeito aluminio em bevel
  16. efeito metal liquido glossy para

WIREFRAME

  • Serve para separar o momento de Criação e Execução. Através do Wireframe nós podemos nos preocupar apenas com a criação, sem pensar ainda na execução que será feita mais tarde no Photoshop.

PESQUISA DE SITES REFERÊNCIA

EXERCÍCIOS

  1. Concluir o Wireframe do seu projeto
  2. Fazer 3 tutoriais

Aula 04

GUIA DA VAQUINHA

TENDÊNCIAS WEB

  1. Feedback
  2. Menu Fixo (derivado do Feedback)
  3. Slider
  4. BGzão (BG Grande)
  5. Rodapé Grande
  6. Formulário bem trabalhado
  7. Transparência PNG
  8. Exploração da Tipografia
  9. Exploração de ícones
  10. Carousel
  11. Profundidade
  12. Site de página única
  13. Parallax Scrolling (BG Movendo)
  14. Flat Design (design plano)
  15. Menu Drop Down
  16. Metro Windows 8

SLIDES DE TENDÊNCIAS

  1. Tendências 2014: http://www.slideshare.net/davidleeking/web-trends-to-watch-in-2014
  2. Tendências 2012-2013: http://prezi.com/4kv5elhyazu0/2012-2013-web-design-trends/

BRUSHS PARA PHOTOSHOP

Dicas

  1. Quando for pesquisar no Google use “Download Photoshop Brush” antes da palavra desejada. Ex: “Download Photoshop Brush Moon”, “Download Photoshop Brush Tree”
  2. Crie uma camada nova toda vez que for aplicar o Brush
  3. Mude a cor e o tamanho antes de aplicar o Brush

Sites de download

  1. BrushKing
  2. Brusheezy
  3. Celestial Star
  4. BlendFu
  5. Get Brushes
  6. 1000 Brushes para download
  7. HeroTurko

EXERCÍCIOS

  1. Desenvolver um banner livre de 800 x 600 utilizando apenas Brush, Gradient e Texto
  2. Replicar Layout da Invoice Machine

Aula 03

PHOTOSHOP – Rane ADM

PESQUISA DE IMAGENS

DOWNLOAD DO PHOTOSHOP

CRACK DO PHOTOSHOP

MÍDIAS SOCIAIS DA VELAME CURSOS

EXERCÍCIOS

  1. Estudar Layer Styles do Photoshop
  2. Instalar Shapes no Photoshop e trazer um Banner 800 x 600 utilizando apenas Shapes
  3. Aprender a justificar o texto
  4. Concluir o Layout da Vaquinha
  5. Concluir Rane ADM
  6. Agrupar as camadas de acordo com as cores (ex: Agrupar as Verdes, depois as vermelhas e por fim as azuis)
  7. Organizar os quadrados de acordo com a imagem referência (a imagem referência está no próprio arquivo, basta abrir)
  8. Continuar pesquisa de imagens

Aula 02

PHOTOSHOP – Vaquinha

Site que cria marca

EXERCÍCIOS

  1. CONQUISTAR uma reunião com cliente
  2. Desenvolver marca do cliente
  3. Assistir ao vídeo da Velame Cursos no Youtube: http://www.youtube.com/watch?v=75NJ5upq2NU

Aula 01

RESUMO DA AULA

  • Definimos os três projetos: 1, 2 e 3

ARQUIVOS PARA DOWNLOAD

4 ETAPAS DA CONSTRUÇÃO DE UM SITE

  1. Construção: Etapa que um Web Designer trabalhará no desenvolvimento dos arquivos do site, contando com Layout, Montagem e, caso precise, Sistema | Valor único | Você fará o serviço
  2. Manutenção: Serviço feito periodicamente, atualizando as páginas do site de acordo com a necessidade | Valor mensal | Você fará o serviço
  3. Hospedagem: Servidor de hospedagem onde ficarão armazenados os arquivos do site para que as pessoas acessem pela internet. A Velame Cursos indica UolHost ou Locaweb | Valor mensal (em torno de R$ 15)| Você repassará o valor para a empresa até contratar um servidor virtual
  4. Domínio: Endereço para acessar o site (.com.br). O registro é feito através do registro.br | Valor anual (R$ 30) | Você não ganhará em cima disso

PESQUISA DE SITES CONCORRENTE (Similares)

  • Feita antes da reunião
  • Serve para te dar uma base do que você poderá oferecer ao site do cliente
  • NÃO serve para se INSPIRAR

DICAS DE NEGOCIAÇÃO

  1. Quando passar o valor: O valor deve ser dado logo após a reunião, porque o cliente terá o real entendimento do porque deve ter um site
  2. Parcelamento: Através de sistemas como o PagSeguro você poderá oferecer ao seu cliente o parcelamento em até 12x em qualquer cartão.
  3. Cliente já possui site: Não despreze o cliente que já possui site, pois serão 50% dos seus clientes.
  4. Lançar o valor acima: Sempre lance o valor acima do que calculou para que o cliente CONQUISTE o desconto e ambos saiam com sensação de vitória.

PESQUISA

EXERCÍCIOS

  1. Escolher o nome da agência
  2. Trazer a pesquisa de concorrentes de cada projeto