Design de fã-site passo a passo

Este post estava sendo gestado e preparado há muito tempo. Inicialmente, deveria sair como a continuação da série de artigos "Criando um fan-site" (um e dois). Então, o que este artigo está fazendo no blog de Fable 3? A resposta é simples: no caso do design, sem um exemplo concreto, é complicado explicar algo. Não existe design esférico em um vácuo. Portanto, quando há algum tempo decidimos reiniciar um de nossos fan-sites dedicados à série de jogos Fable, eu decidi que ali estava o exemplo que usaria para "compartilhar meus conhecimentos".

Na verdade, eu não pretendia revelar um grande mistério do universo ou ensinar a criar um design único para seu fan-site com um único artigo. O tema do design é vasto e multifacetado para que um único designer possa abordá-lo completamente com apenas um trabalho… Além disso, quero deixar claro desde já que isso não é uma aula sobre Photoshop. Há muitas por aí sem mim, google ajuda. Como autor, suponho que você já esteja familiarizado com as noções básicas do Photoshop, então não espere instruções passo a passo como "clique aqui", "vá ali". Isso não é uma aula sobre Photoshop, é um masterclass sobre design. Vou compartilhar como eu trabalho, oferecer algumas dicas e truques que não são de fato segredos, mas que muitas vezes caem no esquecimento. Vamos começar :)

Preparando o cavalete e a tela

Neste caso, o nosso cavalete será, como você já deve ter adivinhado, Photoshop CS4, e a tela, nosso arquivo novo e ainda vazio. Além de "fotomontagens", existem outros programas, como Gimp. Alguns conseguem trabalhar com Corel Draw. Mas, de qualquer forma, até agora a humanidade não criou um programa melhor que o Photoshop para design web. Este é a ferramenta principal do web designer. O Corel Draw ou o Adobe Illustrator podem ser usados para criar elementos isolados do seu design, mas "montar" um layout é mais conveniente no Photoshop.

Agora que entendemos o "cavalete", é hora de pensar na tela. Aqui vale a pena lembrar sobre as resoluções de tela. Há cinco anos, a resolução de 1024x768 dominava, e 1280x960 começava a ganhar popularidade. Alguns anos atrás, 1680x1050 e 1600x1200 eram consideradas grandes resoluções. Hoje em dia, monitores com padrão Full HD estão se tornando cada vez mais comuns, ou seja, devemos nos orientar em relação à resolução máxima de 1920x1080. No entanto, 1024x768 ainda não se aposentou completamente, e essa é a nossa linha inferior. Na verdade, a largura é muito mais importante, pois a altura do nosso site será longa, como 90% de todos os sites na rede.

Antigamente, era popular criar sites "extensíveis", onde elementos de design eram compostos de elementos repetidos, permitindo que o site se alongasse na largura conforme a resolução do usuário. Mas com a chegada do Full HD, esse método de ajuste de site à resolução do usuário tornou-se esteticamente desagradável. O olho humano é estruturado de tal forma que a informação a uma distância de um braço é bem percebida com uma largura aproximadamente igual a uma folha A4. Tudo o que é mais largo já está fora de foco. Portanto, a parte de conteúdo nos últimos tempos tem sido feita estreita, e o espaço restante à esquerda e à direita é preenchido com algum tipo de decoração de fundo. Assim, tanto as ovelhas estão alimentadas quanto os lobos estão a salvo :) E assim, a parte de conteúdo será de 1000 pixels (não se esqueça que no navegador há uma barra de rolagem à direita que "devora" esses mesmos 24 pixels de 1024). Portanto, nossa área para "margens" com decorações de fundo será (1920-1000)/2=460 pixels à esquerda e à direita. Para não sair acidentalmente dessa área, eu uso guias. No modo com réguas ativadas, basta deslizar o cursor e "arrastar" as guias para os lugares desejados. Também posso marcar imediatamente o centro da nossa tela. Ainda marquei aproximadamente a altura do espaço que reservei para o cabeçalho do site, que vai se mover no futuro, mas deixei uma "marca". Tudo, o trabalho preliminar está concluído. Vamos para a preparação :)

Preparação preliminar concluída

Buscando inspiração

Esta etapa é a mais simples e ao mesmo tempo a mais difícil. Você precisa coletar material do qual iremos moldar nosso design. Se você é um artista profissional, pode desenhar todos os elementos e artes necessários por conta própria ou delegar isso à sua equipe... Por outro lado, se for assim, o que você, Artemy Tatyanych Andreyevich, está fazendo neste artigo? :) Este artigo é para iniciantes. Precisaremos de artes temáticas e elementos para nossa interface, ou pelo menos do que podemos construir esses elementos. Provavelmente, você não conseguirá reunir tudo o que precisa na primeira tentativa, então precisará voltar à busca de artes e inspiração várias vezes. Eu geralmente começo a busca no site oficial, depois me dirijo a grandes fan-sites, se existirem. Após isso, mudo para a busca de imagens no Google e no Yandex. E busco exatamente nas duas ferramentas de busca, pois os resultados são muito diferentes. Onde um falha, o outro encontrará toneladas de material. É bom se houver muitas artes, capturas de tela grandes da interface do jogo, o desenvolvedor lança muitos papéis de parede... mas na maioria das vezes, você sentirá falta de algo.

Nos meus resultados de busca, encontrei várias artes por Fable e não apenas, de diferentes partes do jogo. Mas em relação à terceira parte, artes bonitas são raras. Mas colete tudo: papéis de parede, conceitos, capturas de tela... Nunca se sabe o que pode ser útil. Não vou cansá-los com a seleção completa do material encontrado. No spoiler, você encontrará os elementos que acabaram formando a base do design.

Esta moldura, no final, foi desmontada em uma série de elementos separados da interface


Primeira arte decente encontrada para a terceira parte

E esta é a segunda arte. Isso é tudo, não encontrei mais nada no estilo necessário

Esta arte foi imediatamente utilizada como fundo. Não é perfeita, mas não encontrei nada melhor.

Arte da segunda parte foi útil já no final do trabalho

Como poderíamos viver sem o logotipo?

Começando o trabalho

Agora posso começar a trabalhar. Vou dar uma pequena dica, costumo salvar as versões do trabalho com novos nomes, mantendo um histórico de versões. Por padrão, o primeiro resultado é a versão 0_1, depois vêm 0_2, 0_3 e assim por diante. A versão 1_0 é alcançada quando você acha que fez tudo o que queria e pode começar a mostrar o trabalho a revisores/amigos/clientes. Muito provavelmente, o design exigirá ajustes. Então aparecerão versões 1_1, 1_2, etc. É conveniente acompanhar seu próprio progresso, e também ter a possibilidade, se necessário, de voltar a ideias de versões mais antigas ou pegar algum elemento que você excluiu ou modificou até não reconhecer.

E uma outra dica, no Photoshop, todos os seus elementos são armazenados em camadas separadas. Não se esqueça de dar nomes significativos a elas e agrupar camadas de elementos semelhantes usando ctrl+b. Quando seu arquivo acumula mais de 100 camadas, fica extremamente difícil entender sem rótulos e agrupamentos.

Mas chega de blá-blá-blá, vamos olhar o primeiro resultado. Embora esse não seja o primeiro, é quase um zero:

Nesta etapa, a área para o conteúdo está aproximadamente delineada, as artes estão dispostas nos lugares onde poderiam estar. Por toda parte, já estão visíveis os elementos que deverão ser incorporados no design, ou não. Vamos em frente. Essa fase, aliás, teve duas importantes tarefas técnicas realizadas. Fui muito cuidadoso ao recortar nosso personagem do fundo, e a moldura foi desmontada em pequenas partes.

Para o corte, normalmente uso máscaras de camada, não a borracha. Pintamos de preto as áreas que devemos ocultar, deixamos brancas as partes visíveis. Tonalidades de cinza representam áreas de semitransparência. Graças a isso, se eu apagar algo a mais, será fácil restaurá-lo. O personagem cortado em máxima resolução foi salvo separadamente, para não se perder.

A moldura foi desmontada em partes cortando pequenos pedaços e transformando-os em texturas. Os cantos são o canto superior esquerdo, refletido três vezes. Assim, alcancei a simetria.

O design foi inicialmente planejado para ser um pouco sombrio, próximo ao estilo das nossas duas primeiras artes principais. Com pincéis suaves e diferentes modos de mistura, consegui transformar uma imagem de fundo bem clara em uma tela bastante sombria. A parte de conteúdo tentei representar como um pergaminho dobrado, que deveria ser emoldurado pela conhecida moldura dourada. A coroa, como um dos elementos chave, continuou presente no design. Comecei lentamente a procurar uma fonte para o menu.

Com fontes cirílicas bonitas, a situação é um pouco complicada. Porque, como regra, elas simplesmente não existem. Ou seja, existem letras em inglês, mas não em russo. Ou pedem muito pela versão em russo, ou a versão russa é feita de forma tosca e feia. Ou tudo está bem, mas a fonte não é legível :) A fonte na imagem se chama bonzai. Quem precisar, pode pedir. Compartilho. Vamos em frente.

Após algumas dificuldades, algo coerente começou a surgir. A primeira versão do menu principal foi feita (ainda mudará, mas a base será útil muitas vezes). Os observadores atentos podem notar que a parte esquerda e direita deste menu é nossa coroa combinada com um detalhe da moldura. Não tenha medo de combinar diferentes elementos da interface. Juntos, eles frequentemente produzem um resultado inesperado, mas agradável. Além disso, o conceito da parte principal de conteúdo mudou. Eu tentei representar algo como uma manto real, mas o resultado não me agradou. Portanto, tomei a decisão de mudar o conceito.

Essa não é uma nova iteração, é, na verdade, apenas uma experimentação: como isso ficará em uma versão clara e sem a "manto"? - Claramente melhor, mas precisamos pensar mais. Por sinal, os elementos à esquerda no topo são "letras" da fonte fleur. Uma ótima ferramenta para criar elementos de interface. Uma enorme variedade de detalhes e floreios em uma única fonte.

E aqui está algo novo. Experimentei a posição do nosso personagem no cabeçalho do site, mas o principal não é isso. Abandonei o menu horizontal e tentei fazer um vertical. E o que, parece bem. E o menu central foi deslocado para o rodapé.

Mais uma iteração intermediária, onde comparei o menu horizontal e o vertical, pensando em fazer os blocos laterais expansíveis ao clicar.

Este é o caso em que você se lembrará das versões anteriores salvas. O design acabou indo para um caminho completamente diferente. O pergaminho na largura total do conteúdo junto com a moldura no meio e as molduras reduzidas para os blocos laterais não ficaram bons. Eu optei por este caminho, voltei um passo atrás e segui por outra direção.

E aqui está o momento da verdade! Voltando um passo atrás, brincando com nossos elementos, acabei criando um layout que já está bastante próximo do final. Todos os elementos principais estão montados e em seus lugares: menu principal, blocos laterais, conteúdo, cabeçalho e rodapé. Se você olhar de perto, pode notar que alguns elementos da iteração anterior ainda foram úteis. A marcação de texto foi tirada de um site sobre Dragon Age, só para experimentar a disposição do texto. A fonte principal escolhida foi Palatino Linotype. É uma fonte padrão bonita, o que é muito importante. Nesse caso, seu site será exibido sem problemas para todos os usuários do Windows. Existe, claro, uma maneira de usar fontes personalizadas, que o site carregará no cache do usuário, mas isso consome largura de banda e pode causar problemas na exibição em diferentes navegadores. Não recomendo exagerar nesse sentido. Há uma excelente tabela de fontes padrão do Windows na internet. Pessoalmente uso, e recomendo a você. Agora, no cabeçalho, pode-se e deve-se usar fontes decorativas. Para o nome do site, neste estágio, encontrei uma incrível fonte chamada Algerius Caps. Sinta a diferença em relação à que estava antes!

Uma fase bastante interessante, que demonstra visualmente que mesmo em um design quase final sempre é possível melhorar algo. Em primeiro lugar, eu realmente abandonei o menu inferior e o transformei definitivamente em rodapé. Lembra que eu disse que o menu horizontal ainda nos seria útil? - Ele foi útil. O layout foi limpo de elementos já desnecessários, para não poluir o design. Mas o mais importante é que a coroa no design encontrou seu lugar definitivo. Fora a espada da bainha! Pegamos uma de nossas artes, cortamos a mão com a espada e a coroa. O trabalho de cobrir o logotipo que estava sobre a luva foi simplesmente impecável. Esta é uma daquelas vezes em que uma escala acima de 1000% é bastante útil. Além disso, comecei a trabalhar na correção de cores de nosso fundo. Estava muito amarelo-esverdeado. Eu o suavizei. Para isso, geralmente uso uma camada adicional preenchida com a cor necessária e misturada no modo soft light (luz suave), mas conforme necessário, você pode experimentar outros tipos de mistura. Neste caso, a gama foi ajustada usando uma camada azul.

Continuei refinando o design. Ajustei a posição da arte no fundo, corrigi novamente sua paleta de cores. Removi quase todo o lixo restante da limpeza anterior, apenas um detalhe foi esquecido. Mas também prestei atenção que o nome do site no fundo do céu parecia pálido. Por isso, corrigi o estilo e o torneio contrastante ao fundo, mas ainda assim utilizando as cores principais do site.

A reta final

Paraaaam! Aqui está a versão 1_0. Na verdade, não é a final, mas nesta fase decidi mostrar o layout para meus amigos e ouvir suas críticas. Não há mais lixo aqui, o fundo foi novamente colorido. Mas outra coisa importante foi que adicionei um menu com uma barra de busca e botões de redes sociais. Inicialmente, apenas o RSS funcionará, mas em breve estará aberto o Twitter, canal do YouTube e página no Facebook.

A primeira observação importante - nosso herói está claramente sozinho no cabeçalho do site. Ele precisa de companhia. Infelizmente, belos artes femininos da terceira parte não foram encontrados, mas uma cigana da arte da segunda parte veio ao resgate. E isso é pertinente. O site, afinal, não é apenas sobre a terceira parte. Para substituir a garota, nosso herói teve que ser privado de sua pistola, que se tornou visivelmente desnecessária.

Mas a história não parou por aí, surgiu mais um lote de observações. O site ficou muito chamativo em dourado, e a moldura dourada do bloco central de conteúdo ocupava muito espaço. Bem, suavizei o tom com efeitos de camada e diminui a moldura. As correntes que pesavam o design e complicavam a marcação também foram removidas. Chegou o momento da verdade. A versão final:

www.Fable-game.ru

Considerações finais

Na verdade, ainda nos aguardava o trabalho de desenvolvimento, que também trouxe suas pequenas correções. Por exemplo, a posição do fundo e dos heróis em relação a ele. Também houve ajustes nos estilos, busca por bugs e erros. Mas isso já é um trabalho técnico. A parte mais difícil já passou. Quando você chegar a esta etapa, pode relaxar, se parabenizar e com confiança adicionar seu novo trabalho ao seu portfólio. E, em seguida, começar a preencher e reabastecer o site com materiais, planejando uma estrutura otimizada... mas essa é outra história completamente :)

Espero sinceramente que meu "conto com imagens e sobre imagens" tenha agradado você e que, principalmente, ajude você a criar seus próprios designs bonitos, únicos e surpreendentes para seus sites. Aguardando suas perguntas, sugestões ou comentários nas observações.

*Autor do design e texto sou eu, Ksandr\_Warfire

Material preparado especialmente para GAMER.ru