Ir para


Tutorial De Bom Senso No Designer.


10 replies to this topic

#1 Tidus

    De volta a ativa.

  • Download Machine
  • 257 Posts:
  • Gender:Male

Postou 26 janeiro 2009 - 12:20

Galera faz dias que tem gente me perguntando como faço minhas assinaturas e meus avatar e para tentar influência um pouco os sprite maker, sign makers e etc eu resolvi montar um tutorial de bom senso para o designer pois vejo muita gente querendo aprender a fazer um otímo trabalho com o photoshop mas acabam encontrando dificuldades e por isso resolvi criar este tutorial e no final dele disponibilizei as versões do photoshop que recomendo.

Como alguns sabem eu sou cursado em webdesigner e vejo muita gente com anos no mugen mas que não possui um espaço de qualidade para disponibilizar seus trabalhos e o intuito deste tutorial é familiarizar os interessados para que se adaptem ao photoshop pois esse é o primeiro passo na criação de um website e também gostaria de dizer que logo irei fazer alguns tutoriais de PHP e HTML dando suporte e explicando como montar seu proprío website e como coloca-lo online e para isso é nescessário primeiro se familiarizar com photoshop pois não adianta aprender a criar uma página sem saber fazer um bom designer para ela.

Qualquer erro de português pesso que me avisem pois me dediquei muito para fazer este tuto e o reli varias vezes para as devidas correções.

Falarei a respeito e darei dicas de como melhorar o aspecto de uma imagem digital. Para isso desfragmentei uma assinatura em algumas partes subcitadas:

1: Render
2: Background
3: Elementos extras
4: Tipografia
5: Brushes
6: Blendagem
7: Borda


1: Render ou imagem

Render para quem não sabe e à imagem que você irá utilizar para fazer sua sign. Elemento semi-fundamental em uma assinatura, é esta que determina na maiora das vezes o tema de sua sign. Por tanto é fundamental que se saiba tratar uma render pois é por ela que você vai passar toda a informação que a pessoa que vê a sign precisa saber para entender qual idéia você quis transmitir.
Para isso você NÃO deve fazer as seguintes coisas de maneira infundada:

1.1: Recortar a render de maneira errada, preguiçosa e feia;
1.2: Obstruir a render com recursos como grid-lines e patterns;
1.3: Saturar a mesma demais, tornando-a muito colorida e forte;
1.4: deixá-la muito desfocada;
1.5: deixá-la sem vida;
1.6: Obstruída por cores que deixam a qualidade da imagem comprometida;
1.7: Sharp em excesso;
1.8: Render mal redimensionada, tornando-se ou muito larga, ou muito comprida.

2: Background ou Plano de fundo


Elemento também muito importante, algumas vezes muito incrementado, outras vezes praticamente vazio, ele faz parte também do contexto do trabalho, ele que dá a paisagem por detrás da render.
Certas coisas podem deixar seu plano de fundo feio, clichê e ultrapassado:

2.1: Excesso de efeitos, tornando o BG papagaiado;
2.2: Falta de efeitos quando se precisa (quando a render pede isso);
2.3: Utilização de cores desarmônicas e bregas;
2.4: Poluição (efeitos que dão a impressão de sujeira e excesso no trabalho);
2.5: Desacordo com a temática proposta pela render;
2.6: Utilização de efeitos (brushes, patterns, etc) de maneira errônea, desarmonizada e desnecessária.

3: Elementos extras

São os elementos facultativos utilizados por designers em geral. O que são estes elementos? C4D, Stocks, shapes, etc. Como são imagens já prontas, são mais fáceis de serem utilizadas e muitos dizem ser os futuros substitutos do brush.
A utilização destes elementos pode deixar seu trabalho feio por uma série de motivos:

3.1: Elementos mal-recortados;
3.2: Elementos mal-posicionados;
3.3: Elementos obstruindo a render;
3.4: Elementos muito óbvios e evidentes na imagem que você fez;
3.5: Elementos feios e papagaiados;
3.6: Saturar exageradamente estes elementos.

4: Tipografia


Um dos elementos mais importantes de um design, é a forma escrita da mensagem que você quer transmitir ao seu expectador. É com ela que passa-se mensagens importantes, ou até mesmo sátiras. A tipografia é o medo da maioria dos designers inexperientes, e até de muitos experientes, pois é delicada e atualmente não é tratada com a importância que merece.
Desta vez vou dar dicas para deixar sua tipografia mais bonita e leve:

4.1: Seja consciente de que sua tipografia combina com o restante do trabalho;
4.2: Quando um trabalho pedir uma tipografia mais incrementada, faça-o, quando pedir algo mais clean(não significa só colocar qualquer letrinha e escrever, isso é horrível) faça-o também. Como? Dando leveza e colocando em consonância com o restante do trabalho;
4.3: Tematize a tipografia: Sim, ela pode fazer parte do cenário de uma assinatura, assim como também pode ser o elemento principal dela. Muitas vezes a tipografia pode ser usada como render e é importante em logotipos.
4.4:Quando for pedido algo clássico, não coloque tipografias modernas e papagaiadas, coloque simplesmente algo clean e bonito. E vice-versa.

5: Brushes

Utilizados por todo designer pelo menos uma vez em sua carreira (hipocrisia, vários usam com freqüência) Eles podem ser mesclados em todos os segmentos do design.
Do inglês pincel, ele é uma espécie de estampa, serve para preencher planos de fundo, incrementar renders, estilizar tipografias e muito mais. A dica para este tipo de elemento é que ele deve ser utilizado de forma moderada e com beleza, não esquecendo que a blendagem pode ser fundamental para sua eficiência visual.

6: Blendagem


O que é a blendagem? É uma série de efeitos que existem no photoshop e são utilizados para incrementar e estilizar toda forma de imagem que o photoshop edita.
Falarei sobre cada elemento do blending option(recurso);

6.1: Drop Shadow: Basicamente é sombra por fora da imagem que você quer adicionar o efeito, dá um aspecto de que a imagem está acima do fundo.
6.2: Inner Shadow: Exatamente ao contrário do drop, o inner adiciona sombra dentro da imagem a qual você quer adicionar o efeito, dá uma aspecto de profundidade na imagem.
6.3: Outer Glow: É o brilho ao redor da imagem, pode variar de tamanho, cor, intensidade e produndidade. Dá um aspecto muitas vezes de “aura” na imagem.
6.4: Inner Glow: É exatamente o contrário do outer glow, adiciona brilho ao redor interno da imagem.
6.5: Bevel and Emboss: É a adição de relevo texturizado ou não na imagem ou tipografia.
6.6: Satin: do inglês cetim (tipo de pano de ceda), é utilizado para adicionar uma espécie de ondulação na imagem.
6.7: Color overlay: Do inglês, cobertura de cor, este recurso visa adicionar uma cor fixa na imagem independente da imagem que estava anteriormente.
6.8: Gradient overlay: Degradê, ou seja, efeito que dá à imagem aspecto de transição de cores. Por exemplo: Do branco para o preto.
6.9: Pattern Overlay: Cobertura de textura, ele texturiza sua imagem, com a mesma pré-definida pelo programa. Para obter mais texturas você deve fazer, ou pegar pronta e adicionar no photoshop.
7.0: Stroke: Adiciona uma borda ou risco ao redor da imagem, esta pode ser de vários tamanhos.

7: Borda


Importante indicador de limites em um trabalho, a borda tem como característica circular a área do trabalho em si, impondo limite entre o trabalho e o fundo do site ou o que quer que seja. Tem que ser usada com noção de delimitação e padronização de onde vai postar a imagem.




Posteriormente colocarei mais dicas para todos vocês que querem aprender mais sobre a arte de ser designer e usar o photoshop, inclusive deixo aberto o tutorial a sugestões, para que vocês ajudem o tópico a crescer e ficar mais completo, abraço!
É isso ai por enquanto, espero que isso ajude quem pretende se tornar um bom designer, de categoria e classe.

Abaixo disponibilizo as melhores versões do Photoshop para que você possa fazer um otímo trabalho.
Todos os créditos pelo conteúdo de download postado abaixo vai para: huntergames

Nome : Photoshop CS1
Gênero : Editor de Imagens
Desenvolvedor : Adobe
Licensa : Freeware
Tamanho : 151,2 MB
Servidor de Download :
Baixar Photoshop CS1

Nome : Photo Shop CS2
Tamanho : 329,00 MB
Requerimentos : CPU 800MHz, 320MB RAM(384MB recomedado), 650MB HD, Monitor com suporte a resolução de tela 1024x768, Placa de vídeo de 16MB
Sistema : Windows 2000/XP
Descrisão :
Obtenha resultados superiores mais rapidamente com o software padrão em edição de imagem digital, o Adobe® Photoshop® CS, e seu aplicativo de produção integrada para Web, o Adobe ImageReady® CS. Você está no controle com novos recursos indispensáveis que ajudam profissionais de design gráfico e design para a Web, fotógrafos e profissionais de vídeo a criarem as imagens da mais alta qualidade de forma mais eficiente do que nunca.
Servidor de Download:
Baixar Photoshop CS2

Nome : PhotoShop CS 3 Final
Tamanho : 570MB
Extenssão : .ISO
Sistema Operacional : Windows XP/Vista
Configurações Minimas :
* Processador Intel® Pentium® 4, Intel Centrino® Intel Xeon®, ou Intel Core™ Duo (ou compatível)
* Microsoft Windows XP com Service Pack 2 ou Windows Vista™ Home Premium, Business, Ultimate, ou Enterprise (certificado para edições de 32-bit)
* 512 MB de RAM
* 1GB de espaço disponível em disco (é necessário um espaço adicional durante a instalação)
* Resolução de monitor de 1.024x768 com cartão de vídeo de 16 bits
* Unidade de DVD-ROM
* Software QuickTime 7 necessário para recursos de multimídia
* Conexão por Internet ou telefone necessária para ativação do produto

* Conexão de Internet de banda larga necessária para o Adobe Stock Photos e serviços adicionais

Baixar pelo Badongo ou Baixar pelo Sharedzila

Nome : Adobe Photoshop CS4 Beta
Gênero : Edição de Imagens
Desenvolvedora : Adobe
Requisitos Mínimos : Processador: 1Ghz; Memória RAM: 320 Mb; Placa de Vídeo: 3D 64 Mb; Espaço em Disco: 650 Mb Livres; Resolução: 1024x768 pixels
Servidor de Download : Badongo / Flyupload
Descrição : Uma versão quase restrita do Adobe Photoshop, praticamente ninguém conhecia, lançado primeiramente em 2007 e agora com updates e correção de vários bugs encontrados no Beta anterior.

Versão exclusiva direto da Adobe para você!

Adobe Photoshop CS4 Beta!
Experimente os novos recursos de pintura e edição de fotos, renderização 3D Avançada, recursos multimidia integrados e muito mais!


Download pelo badongo ou Download pelo flyupload
Imagem
Imagem

Imagem Imagem
Mai: 100%

#2 Godita

    Superávit

  • Members
  • 900 Posts:
  • Gender:Male

Postou 26 janeiro 2009 - 12:48

Tidus, meu pai não deixou eu baixar nenhun deles, tem como
fazer avatares e sigs pelo Fireworks 8?

#3 -BK-

    Morra.

  • Members
  • 513 Posts:
  • Gender:Male
  • Location:Trevas

Postou 26 janeiro 2009 - 08:33

Belo tuto Tidus! pra kem tah aprendendo é ótimo, afinal todo mundo ker ter uma sign phodona tongue.gif
humm...sugestões??...Que tal o uso do imageready para signs animadas? ah, e pelo o ke eu sei ñ pode colokar links de Keygen, crack e pirataria e geral aki no fórum. assobiando.gif




#4 Tidus

    De volta a ativa.

  • Download Machine
  • 257 Posts:
  • Gender:Male

Postou 26 janeiro 2009 - 08:59

QUOTE(Godita @ Jan 26 2009, 01:48 PM) <{POST_SNAPBACK}>
Tidus, meu pai não deixou eu baixar nenhun deles, tem como
fazer avatares e sigs pelo Fireworks 8?


FireWorks tb é uma otíma opição mas para sign so mais fã do photoshop, Já o fireworks eu prefiro para a edição e criação de sprites pois acho mais facil trabalhar com ele na questão de criar movimentos brucos e leves.

QUOTE(Best Killer @ Jan 26 2009, 09:33 PM) <{POST_SNAPBACK}>
Belo tuto Tidus! pra kem tah aprendendo é ótimo, afinal todo mundo ker ter uma sign phodona tongue.gif
humm...sugestões??...Que tal o uso do imageready para signs animadas? ah, e pelo o ke eu sei ñ pode colokar links de Keygen, crack e pirataria e geral aki no fórum. assobiando.gif


isso ae ^^, A minha intenção é tentar coloborar para que os makers possam ver bem quais os pontos mais criticos na criação de uma userbar ou uma assinatura pois muitos esquecem os detalhe mais importante quando estão concorrendo em campeonatos de sign e na hora da avaliação acabam avaliando a beleza e não o trabalho feito ^^, O imageready e otímo mas eu ainda so mais fã do fireworks e do serif photoplus pois já trabalho com estás ferramentas a mais tempo ^^

Na hora de fazer o post esqueci do termo pirataria más já retirei os links do crack e do keygen
Imagem
Imagem

Imagem Imagem
Mai: 100%

#5 Godita

    Superávit

  • Members
  • 900 Posts:
  • Gender:Male

Postou 26 janeiro 2009 - 09:26

Pô então nun precisa mais, de tarde eu tava explorando o PSP x que o Equicio me passo, tem como fazer sigs e avatar e tambem aqui no meu pc eu tava vendo e eu to com um CD do PS 7 em portugues.


#6 Pit Wolf

    Pit Wolf

  • Download Machine
  • 586 Posts:
  • Gender:Male
  • Interests:Mugen, Chars, Add-ons, Life Bars, Fonts, Sparks.... Tudo de Mugen

Postou 27 janeiro 2009 - 07:06

Belo tuto....
Pit Wolf

E-Mail --> pitwolf@ig.com.br

MSN --> winliveid72@hotmail.com



Visite meu Sky Drive - Lugar onde estão Meus Trabalhos


#7 Sho

    Not about to see your light...

  • Members
  • 55 Posts:
  • Gender:Male

Postou 27 janeiro 2009 - 07:14

Tuto mto bem explicado, parabéns clap.gif

#8 Summon Night

    "Tudo posso naquele que me Fortalece"

  • Members
  • 422 Posts:
  • Gender:Male

Postou 27 janeiro 2009 - 08:39

Muito bom tutorial, se um dia eu tiver a coragem de tentar fazer algumas coisas desse tipo, será muito útil pra mim.
"There Are Many Paths To Redemption, Not All Of Them Peaceful."

#9 Tidus

    De volta a ativa.

  • Download Machine
  • 257 Posts:
  • Gender:Male

Postou 27 janeiro 2009 - 07:03

Vlw galera a minha intenção era ajudar ^^

QUOTE(Godita @ Jan 26 2009, 10:26 PM) <{POST_SNAPBACK}>
Pô então nun precisa mais, de tarde eu tava explorando o PSP x que o Equicio me passo, tem como fazer sigs e avatar e tambem aqui no meu pc eu tava vendo e eu to com um CD do PS 7 em portugues.


Bom entre o photoshop 7 e o CS1 naum á muita diferença mas ele tb é um otímo editor e da para fazer muita bagunça com ele ^^


Imagem
Imagem

Imagem Imagem
Mai: 100%

#10 mabskmk

    Spam

  • Administradores
  • 4.075 Posts:
  • Gender:Male
  • Location:Innsmouth - MA
  • Interests:$$$ e meter o bedelho no perfil dos outros

Postou 28 janeiro 2009 - 06:26

E põe bagunça nisso tongue.gif Aew bom tuto, serviu para clarear as ideias aqui. post-513-1167229629.gif

#11 Tidus

    De volta a ativa.

  • Download Machine
  • 257 Posts:
  • Gender:Male

Postou 29 janeiro 2009 - 11:37

QUOTE(MabsKMK @ Jan 28 2009, 07:26 PM) <{POST_SNAPBACK}>
E põe bagunça nisso tongue.gif Aew bom tuto, serviu para clarear as ideias aqui. post-513-1167229629.gif


hehe quando o cs2 saiu eu naum gostava, Preferia fica com o cs1 pois eu já tava acostumado a bagunçar com ele hsauhasuhasuhasu, Mas de qualquer forma me acostumei com o CS2 ^^
Imagem
Imagem

Imagem Imagem
Mai: 100%





1 usuário(s) está(ão) lendo este tópico

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)