Há um grande número de modelos de sites na web, mas eles têm uma desvantagem - não são únicos. Se o proprietário do site não quiser que o design de seu site seja repetido em outro lugar, ele pode solicitar um modelo de um designer profissional ou tentar criá-lo por conta própria.
É necessário
Programa Adobe Photoshop
Instruções
Passo 1
Criar seu próprio modelo não é uma tarefa tão difícil quanto pode parecer à primeira vista. Para funcionar, você precisa do Adobe Photoshop - é claro, você precisa ter pelo menos um conhecimento básico de como trabalhar com ele. Mas antes de lançar o programa e começar a criar, você precisa pensar sobre o design futuro com antecedência. A maneira mais conveniente de fazer isso é primeiro familiarizar-se com pelo menos uma centena de modelos prontos, avaliar suas vantagens e desvantagens. Preste atenção às soluções bem-sucedidas de certos elementos de design. Isso não significa que você irá copiá-los, mas é bastante razoável tomar algumas soluções bonitas e convenientes como base.
Passo 2
Com base na análise dos modelos de outras pessoas e na sua própria criatividade, você deve ter uma ideia de como será a aparência do seu site. É melhor fazer esboços do futuro design com lápis de cor em folhas A4 comuns. Você deve começar a trabalhar com o Photoshop somente depois de ter uma ideia clara do que exatamente vai desenhar.
etapa 3
Inicie o Photoshop, crie um novo projeto 1200x1600, defina um fundo transparente. Ative a ferramenta Ruler, se ainda não estiver ativada, para fazer isso pressione a combinação de teclas Ctrl + R. Habilitar ajuste: Exibir - Ajustar.
Passo 4
Agora precisamos dividir o modelo com guias que mostrarão as bordas de seus elementos - lados, colunas, etc. Por exemplo, você deseja dividir o modelo para que haja uma coluna estreita à esquerda, uma coluna larga à direita do modelo e haja espaço na parte superior para um cabeçalho. Isso significa que você precisa de três linhas verticais (a borda esquerda do modelo, a direita e a linha entre elas) e uma horizontal, mostrando a borda inferior do cabeçalho. Para definir uma linha vertical, mova o cursor para a régua esquerda no lado esquerdo, pressione V e, enquanto mantém pressionada a tecla, arraste a linha para o local desejado. Faça o mesmo com as outras duas linhas verticais. As horizontais são construídas da mesma forma, apenas a régua superior é usada.
Etapa 5
Encontre um plano de fundo para o seu modelo, deve ser um padrão pequeno e repetitivo. Abra-o no Photoshop, selecione, copie. Em seguida, cole no modelo quantas vezes você precisar para preenchê-lo com o plano de fundo. A colagem é feita assim: "Editar" - "Colar" e, em seguida, arraste a área de fundo para o local desejado. É ainda mais rápido inserir uma imagem usando o comando Ctrl + V. Adicione um plano de fundo para o cabeçalho do site da mesma maneira. Você pode usar vários preenchimentos de gradiente para criar um plano de fundo.
Etapa 6
Usando a ferramenta Lápis, desenhe as bordas do modelo, focalizando as linhas já desenhadas (ou seja, em cima delas). Você recebeu a base do modelo mais simples, agora você precisa complementá-lo com os detalhes necessários - botões de navegação, linhas de menu, vários elementos de decoração, etc. Para obter mais informações sobre como criar botões e outros elementos, leia os artigos correspondentes sobre como trabalhar com o Adobe Photoshop.
Etapa 7
O modelo é criado, agora você precisa cortá-lo em pedaços para inseri-los na página html. Use a ferramenta Slice para cortar. Para localizá-lo, clique com o botão direito na ferramenta Moldura e escolha Recorte no menu que é aberto. Agora você pode aninhar o modelo conforme desejado e salvar: "Arquivo" - "Salvar para a Web". Na janela que se abre, selecione o tipo de arquivo: HTML e imagens, especifique o nome do arquivo: index.htm e salve-o. Você terá um arquivo index.htm e uma pasta de imagens com imagens fatiadas.
