Sprite é a bebida preferida de milhões de pessoas, que não só pode ser comprada em todas as lojas, mas também preparada de forma independente. Na Internet você pode encontrar muitas receitas e dicas diferentes sobre como fazer um sprite tão bom quanto o real. Os mais populares deles são coletados neste artigo.

A receita para fazer sprite é bem simples. É necessário misturar ingredientes como limão, suco de limão, açúcar e água mineral nas proporções corretas. Porém, existem várias regras que devem ser seguidas para que a bebida fique verdadeiramente saborosa e parecida com o natural.

A primeira coisa que importa é usar exclusivamente frutas frescas para cozinhar, e não levar aquelas que “é uma pena jogar fora”, mas que não podem mais ser consumidas. Um produto estragado pode estragar o sabor de todo o prato, o mesmo vale para as bebidas.

Além disso, é importante utilizar água mineral de boa qualidade. Não se deve economizar nesse ingrediente, pois ele desempenha um papel fundamental no preparo da bebida. A água deve ser altamente carbonatada; água mineral fraca ou sem gás não é adequada para tais fins.

Em vez de açúcar, recomenda-se adicionar xarope de açúcar em bebidas caseiras como Sprite, mojito e outros coquetéis. Uma receita detalhada para fazer xarope é descrita abaixo.

Como preparar xarope de açúcar?

O xarope de açúcar é necessário para garantir que o sabor do coquetel caseiro seja o mais próximo possível do comprado em loja. Fazer você mesmo esse xarope é bastante simples e não leva muito tempo.

Primeiro de tudo, você precisa colocar a panela no fogo e esperar até que a água aqueça. O fogo não deve ser forte, mas também não deve ser fraco, caso contrário o açúcar demorará muito para derreter. Aos poucos, despeje a quantidade necessária de açúcar na panela, leve a água para ferver e deixe o açúcar se dissolver completamente.

Resfrie o líquido resultante. A calda de açúcar está pronta - e agora pode ser usada para fazer deliciosos coquetéis.

Sprite em 10 minutos

Este refrigerante popular não leva muito tempo para ser preparado – você pode concluir a tarefa em menos de 10 minutos. Uma das receitas mais comuns para fazer um sprite em casa é a seguinte:

• Pique um limão finamente, descarte as raspas;
• coloque o limão na panela, polvilhado com 5 colheres de açúcar, cozinhe por cinco minutos;
• deixe o líquido resultante fermentar por cerca de uma hora;
• coe e adicione a qualquer água altamente carbonatada.

O resultado é uma bebida maravilhosa, completamente idêntica ao Sprite comprado. E levará apenas dez minutos para prepará-lo, sem contar o tempo que o líquido deve ser infundido.

Uma maneira avançada de fazer um sprite caseiro

Além das receitas padrão para fazer coquete com limão e água com gás, você encontra maneiras mais interessantes de criar uma bebida com outros ingredientes. Para preparar um sprite você precisará de:

• água plana;
• Aromatizante "Sprite";
• ácido cítrico;
• dióxido de carbono.

Quanto ao último “ingrediente”, nem todo mundo o possui. O dióxido de carbono é usado em fábricas e fábricas na preparação em massa de bebidas carbonatadas. No entanto, muitos chefs experimentais também incluem esse elemento em seus utensílios de cozinha.

Bebidas caseiras à base de Sprite

Sprite é popular principalmente porque é a base de muitos conhecidos coquetéis alcoólicos e não alcoólicos que são servidos em casas noturnas e bares. Uma delas é a bebida mojito. Este cocktail é especialmente relevante no verão, porque não só mata a sede, mas também tonifica perfeitamente o corpo.

Um mojito tradicional contém vários ingredientes. Via de regra, trata-se de água gaseificada, suco de hortelã e açúcar. Quando se trata de um coquetel alcoólico, o rum branco é adicionado a esta lista.

Mojito

A matéria traz diversas receitas de como fazer sprite em casa, mas com um mojito fica ainda mais fácil! Este coquetel parece complicado.

Normalmente, os seguintes ingredientes são necessários para criar seu próprio coquetel:

• cana de açúcar;
• refrigerante;
• lima ou limão;
• hortelã;
• rum (pelo menos vodka);
• cubos de gelo.

Sprite é perfeito como refrigerante; você também pode prepará-lo. Se você está se perguntando como fazer um sprite em casa, a receita e a descrição detalhada passo a passo podem ser encontradas acima.

Você precisa “coletar” um mojito desta forma:

• corte o limão ao meio, esprema o suco da metade;
• pique finamente a hortelã, coloque no copo com o limão;
• encha o copo com cubos de gelo;
• Preencha o espaço restante do copo com refrigerante;
• adicione 30 ml de rum branco.

O mojito deve ser servido imediatamente após o preparo para que o gelo do copo não tenha tempo de derreter. Recomenda-se beber com canudo. Até as crianças podem fazer um mojito sem álcool.

Limonada de framboesa

Este é outro coquetel sem álcool popular que muitas crianças gostam tanto, porque os principais ingredientes são framboesas doces, suculentas e não menos saborosas. Sprite também é usado para criar este coquetel. Você já sabe fazer um sprite, a receita com fotos e métodos de cozinhar em casa estão descritas acima.

Para o coquetel Limonada de Framboesa você precisará de:

• framboesas;
• xarope de framboesa;
• limão;
• duende;
• hortelã;
• Lima.

O primeiro passo é preparar as framboesas - amasse bem três frutos maduros em um copo. Depois disso, você precisa adicionar uma rodela de limão e encher o copo até o topo com cubos de gelo. O espaço restante no copo será preenchido com sprite caseiro aromático. Use lima, limão e hortelã para decoração.

Limonada de laranja

Outra iguaria infantil é a limonada de laranja, que também pode ser preparada em casa. Esta bebida refrescante e revigorante não é de forma alguma inferior aos refrigerantes comprados em lojas. Pelo contrário, fica ainda mais saboroso se cozinhado corretamente.

Para fazer sua própria limonada de laranja você precisará dos seguintes produtos:

• 3 laranjas médias;
• 2 limões;
• raiz de gengibre moída (colher de chá);
• 150 gramas de açúcar;
• 1 litro de sprite;
• 1,5 litros de água pura.

Primeiro é preciso preparar a calda de açúcar, pois é ela que será usada na receita. Descasque as laranjas, pique finamente, corte o limão ao meio. Coloque meio limão e laranja em uma panela, adicione água e adicione a raiz de gengibre.

Coe bem o líquido resultante. Encha a jarra até a metade com cubos de gelo, coloque água cítrica, xarope de açúcar e Sprite. Água mineral comum também funciona. Corte a metade restante do limão em rodelas e adicione à bebida resultante.

A palavra sprite (sprite inglês - fada, fantasma) foi usada pela primeira vez pelos animadores da Disney em uma capacidade ligeiramente diferente; para criar e “reviver” personagens de desenhos animados de forma mais rápida e conveniente, os animadores primeiro desenharam todas as fases de seu movimento em filmes transparentes , e então sobrepuseram esses filmes ao fundo principal que era o palco, e eles receberam frames de desenhos animados, economizando tempo, dinheiro e nervosismo dos artistas... eles chamavam esses mesmos filmes de sprites.

Então, o termo sprite foi introduzido na computação gráfica e se tornou especialmente difundido em jogos de computador - mas também não é exatamente sobre isso que quero falar.. Hoje quero falar sobre os chamados sprites CSS..

Assim, sprites em CSS são geralmente chamados de uma imagem, que consiste em várias “partes” que são mostradas separadamente dependendo das ações do usuário.

São muitas palavras... vou te mostrar um exemplo...

Este é um sprite que está presente em todas as páginas deste site:

Acontece que em um estado “calmo” você vê uma parte dela e quando você passa o cursor outra.

Como fazer isso? Na verdade, é bem simples.

Neste exemplo, para um bloco com dimensões fixas, carregamos uma imagem “dupla” como fundo, mas como o bloco em si, devido às dimensões que lhe são atribuídas, tem exatamente metade da altura da imagem, o navegador mostra apenas o primeira “parte” da imagem de fundo, e quando o cursor passa, a pseudoclasse é acionada :flutuar com propriedade posição de fundo que desloca o fundo até a distância necessária, mostrando assim a segunda parte da imagem.

Ok, vamos deixar meu logotipo em paz, principalmente porque eu menti um pouco para você... vamos fazer algo mais útil para você, por exemplo este botão:

Vamos abrir o Photoshop e desenhar algo assim:

O principal aqui é não se confundir com os tamanhos! a segunda parte da imagem, onde nosso botão está ativo, deve ter exatamente o mesmo tamanho da primeira parte da imagem, caso contrário mais tarde, ao passar o cursor, tudo irá “pular”. É melhor primeiro desenhar uma parte da imagem, depois copiá-la, passar pelos filtros, terminar de desenhar algo e colar duas imagens em uma... porém, aulas de Photoshop não são minha praia...

Então, temos uma imagem “dupla” 175 sobre 80 pixels, lembre-se desses tamanhos e comece a escrever código.

Fiquei assim... veja o resultado e leia os comentários no código:

Este é o menu que obtivemos:

Acho que muitos leitores estão se perguntando: “Por que esses sprites são necessários se a mesma coisa pode ser feita usando duas imagens separadas, onde uma é o plano de fundo apenas para um link e a segunda é para um link com :flutuar, sem ter que brigar com o Photoshop e calcular as coordenadas de fundo para CSS??"

Primeiramente: A velocidade de carregamento das imagens aumenta significativamente!! Apesar de uma imagem “dupla” pesar o mesmo que duas pequenas imagens “únicas” separadas, carregar uma imagem grande é mais rápido, pois o navegador não cria solicitações HTTP adicionais para o servidor.

Você se lembra quando eu mostrei meu logotipo de sprite e disse que estava mentindo? Portanto, minha astúcia reside no fato de que esta imagem contém não duas partes lógicas da imagem, mas dezoito!!

E fica assim na íntegra:

Ou seja, quase todos os gráficos que você vê neste site chegam até você na forma de uma única imagem! Não vou mostrar o arquivo CSS, tenho medo disso..)),

Então aqui estão as solicitações HTTP... se houvesse 18 imagens em vez de uma, então o diálogo do navegador com o servidor seria mais ou menos assim:

Navegador: Olá servidor! Estou aqui de vocês, a meu pedido, estou recebendo documentos HTML e CSS, então eles indicam que na sua pasta “graphics”... deve ter uma imagem com o nome: “picture1” larga aí, hein ?
Servidor: Olá Navegador, faz muito tempo que não vejo, vou dar uma olhada agora... sim, tenho uma foto dessas! Pegar!!
Navegador: Obrigado, peguei! Mas ainda preciso de "picture2" na mesma pasta.
Servidor: Sim, e tem um.. Estou enviando..
Navegador: Carregado.. mas aqui “image3” também é indicado.
Servidor: E você não consegue dormir! Guarde sua foto!!
Navegador: Obrigado! Sim, para ser sincero, já estou cansado disso, mas meu usuário quer carregar a página completamente... resumindo, você também deveria ter “picture4” aí...
Servidor: Você está começando a me estressar! Para sua foto!!
Navegador: Desculpe, mas não tenho culpa de ter tantas imagens aqui!!! Precisa de "foto5"!
Servidor: Você já está fazendo meu processador ferver!! Eu hesitei!! Tire sua foto!!
... ... ...

Não vou expressar mais diálogos, porque o que se segue é linguagem obscena...

Por que toda essa conversa entre o servidor e o navegador (cliente), que consome muito tempo e tráfego, e também carrega o servidor quando há um grande número de visitantes do site, se é muito mais rápido e econômico fazer um HTTP solicite e receba todas as 18 fotos em um só pacote!!

Segundo: Carregando uma segunda imagem ao usar uma pseudoclasse :flutuar ocorre apenas no momento em que o usuário passa o mouse sobre o link com a primeira imagem. Se esta for uma imagem pequena como um botão do exemplo acima, nada de particularmente ruim acontecerá - a segunda imagem será carregada rapidamente e o usuário não notará nada... mas e se esta for uma imagem grande em peso e tamanho? ? Aí o usuário observará como ele carrega, embora esteja psicologicamente preparado para a rápida mudança de imagens! Outra vantagem para sprites! ... embora, para ser sincero, isso também seja um sinal de menos.. um sinal de menos se o usuário nunca passou o cursor durante a sessão.. a imagem carregou, mas não foi útil para ele.. mas acredite, essa “vítima de tráfego” quase sempre compensa. !

E terceiro: por mais estranho que possa parecer para você, é conveniente!! É conveniente indicar o caminho para a mesma imagem no código, é conveniente editá-la no Photoshop, por exemplo, para tornar todo o site mais claro ou mais escuro trabalhando com uma única imagem, é conveniente armazenar, é conveniente fazer upload para o servidor, e mesmo em CSS é conveniente trabalhar com um sprite grande! - embora isso exija certas habilidades e hábitos..

Ok, decida você mesmo se vai usar sprites ou não.. e meu negócio é pequeno, só para chamar a sua atenção para a informação, por assim dizer.. se surgir alguma dúvida adicional, estou te esperando em

Sprites são uma tecnologia bastante interessante e simples. Agora vou contar um pouco mais sobre isso.

O que são sprites CSS?

Resumindo, sprites CSS são várias imagens em um arquivo. Existe um arquivo, mas existem várias imagens dentro dele. Ao mesmo tempo, isto é completamente invisível para o visitante. Para quem visualiza o site, parece que vê várias fotos separadas.

Por que isso é necessário? Sprites reduzem o número de solicitações de página feitas pelo usuário e reduzem o tamanho geral das imagens. Como resultado, o visitante verá o site com mais rapidez.

Como isso é feito? Uma imagem comum aumenta em largura e altura, ou seja, várias imagens são simplesmente colocadas lado a lado em uma imagem comum. Em seguida, cada imagem individual deste conjunto é inserida no bloco desejado com uma determinada largura ou altura para que todas as outras imagens não fiquem visíveis. Todo o conjunto é cortado e resta apenas uma imagem. Um sprite. Todas as outras imagens permanecem fora do bloco específico.

Para deixar mais claro, farei uma analogia. Imagine que você está olhando pelo buraco da fechadura. Você vê apenas uma parte separada da sala do outro lado da porta. Se você se mover um pouco para o lado e olhar para a caverna de um ângulo diferente, verá algum outro pedaço da mesma sala.

Terminologia

Para evitar confusão, vamos definir imediatamente os termos:
Sprite- esta é uma imagem de um arquivo com várias imagens.
Conjunto de Spritesé o próprio arquivo com diversas imagens.

Recursos de uso de sprites

Quando você deve usar sprites? Geralmente há uma resposta: sprites devem ser usados ​​se você tiver muitas imagens pequenas na página. Não importa que tipo de imagens sejam. Se você tiver muitos gradientes com a mesma localização, muitos botões, muitos ícones, etc. Se houver muitas imagens pequenas em uma página específica, considere usar sprites.

Geralmente existem três tipos de imagens em uma página – jpg, png e gif. Todos esses formatos possuem dois modos de download - modo normal e modo de download gradual.

O formato jpg pode ser regular (básico) ou progressivo (progressivo). No modo normal, a imagem começa a ser exibida linha por linha à medida que carrega e imediatamente em boa qualidade. No modo progressivo, a imagem jpg é baixada inteira de uma só vez, mas com baixa qualidade e a qualidade aumenta à medida que é baixada.

Gif e png têm o mesmo comportamento. O GIF pode ser regular ou entrelaçado. PNG pode ser regular ou entrelaçado. O comportamento de gifs e pngs entrelaçados é semelhante ao do jpg progressivo. Esse comportamento aumenta ligeiramente o tamanho do arquivo.

Total. A imagem pode aparecer na página imediatamente ou com atraso. Isso é importante saber quando se trata de sprites. É aconselhável fazer sprites entrelaçados ou progressivos. O usuário deverá ver as imagens o mais rápido possível, embora com baixa qualidade.

Mas! Se o arquivo final com todos os sprites for muito grande, apesar de toda a progressividade e entrelaçamento, o visitante terá que aguardar até mesmo o download parcial do arquivo. Portanto, não recomendo usar grandes conjuntos de sprites. Se o arquivo for grande, todo o objetivo dos sprites será completamente perdido - para acelerar o site. Com grandes conjuntos de sprites, o usuário terá que esperar tanto tempo, se não mais, do que com imagens divididas normais.

Arquivos com mais de 30 kilobytes parecem grandes para mim. Isso é subjetivo. Você pode ter suas próprias ideias sobre o tamanho do arquivo. Um arquivo de 30 kilobytes será baixado em cerca de 7 segundos com uma velocidade de internet de 56,6 kbps.

Exemplos de uso de sprites

Sprites com ícones

Em um sprite terei ícones para:

1. Lista - um ícone
2. Links - três ícones
3. Formulários de pesquisa - um ícone

Ou seja, meu primeiro conjunto de sprites conterá cinco fotos. Todas as minhas fotos terão o mesmo tamanho - 16 por 16 pixels. Sprites podem ser usados ​​para criar imagens com diferentes resoluções, não é necessário que a resolução de todas as imagens coincida. Com diferentes resoluções de imagens, fica um pouco mais difícil combinar essas imagens em um arquivo.

Como resultado, o primeiro exemplo ficará assim:

Encontrei cinco ícones. Então simplesmente combinei todos eles em um arquivo. Este é o arquivo que acabei com:

Chamar sua atenção. Neste caso, os ícones não estão localizados próximos, existem pequenos recuos entre eles. Como escolher esses recuos? Você pode, é claro, calcular tudo pixel por pixel, mas nosso caso é bastante simples, então aqui é melhor selecionar experimentalmente esses recuos na imagem. Primeiro combinamos as imagens simplesmente a olho nu, depois tiramos a foto de cima e colocamos no lugar certo. Se a imagem estiver em seu lugar, mas ao mesmo tempo um pedaço de outra imagem sobressair de algum lugar, o recuo precisará ser aumentado.

Mais uma coisa. O último ícone da lista é o ícone da lista - uma seta verde. Por que ela é a última? A localização dos restantes ícones na imagem é-nos indiferente, mas na lista qualquer item pode ocupar várias linhas e se a seta verde estiver algures no meio, as outras imagens irão sobressair nas linhas seguintes. Veja a imagem da lista acima para ver do que estou falando.

Então. Encontrei cinco ícones e os combinei em um arquivo. O que faremos a seguir? Claro que escrevemos o código:

• Item da lista
• Mais um item da lista
• Item da lista
• Mais um item da lista
  mas em duas linhas
• Item da lista
• Mais um item da lista

Este é o código HTML da lista. Agora vamos aplicar nosso sprite a ele:

Ul li( preenchimento:0 0 0 21px; background:url("sprites.png") 0 -94px sem repetição; )

O que fizemos aqui? Recuado cada

21 pixels da borda esquerda para que o texto não obscureça a imagem. Em seguida, defina sprites.png como imagem de fundo. A altura de toda a imagem com sprites, neste caso, é de 110 pixels e a seta verde está bem no final. A altura da seta verde é de 16 pixels, ou seja, a seta começa após o 94º pixel do topo da imagem. Isso significa que precisamos mover o fundo 94 pixels para cima. No código CSS está escrito como “0 -94px”, ou seja, movido 0 pixels para a direita e 94px pixels para cima.

Vamos terminar com a lista. Agora vamos fazer links aproximadamente da mesma maneira:

A( preenchimento:0 0 0 20px; background:url("sprites.png") 0 -42px sem repetição; ) a( preenchimento:0 0 0 20px; background:url("sprites..png") 0 -21px sem repetição; )

O que significam os seletores a? Aparentemente este seletor força o navegador a aplicar este estilo a todos os links que possuem um atributo href cujo valor começa com a string http://site/. O sprite em si é usado da mesma maneira que no caso de uma lista. Considerarei apenas um link - um link para meu blog.

1. Determinamos o link necessário por href.. Você pode simplesmente atribuir uma classe ao link desejado ou adicionar estilos ao atributo style diretamente no código HTML. Ou identifique o link desejado usando qualquer outro método.
2. Fazemos uma margem de 20 pixels a partir da borda esquerda de um link específico
3. Especifique a imagem sprites.png como imagem de fundo
4. A imagem que escolhi para o meu blog tem 21 pixels da borda superior, o que significa que precisamos mover o fundo 21 pixels para baixo. Em css escrevi assim: “0 -21px”

Trabalho de casa

Sprites com gradientes

Agora vamos ver o segundo exemplo.


Esta imagem mostra uma janela. Uma janela possui cabeçalho, corpo e rodapé. Cada um desses elementos possui um gradiente de fundo definido. Observe mais de perto, se não for imediatamente visível, há uma transição de cor de pálido para saturado.

Vou mostrar como os gradientes nesta janela podem ser transformados em sprites. O cabeçalho e o rodapé da janela terão uma altura fixa de 30 pixels. O corpo da janela será esticado dependendo do comprimento do texto.

Agora vamos escrever o código HTML da janela:

Vamos começar a usar sprites. Vamos começar com o título da janela:

#window-header( altura:30px; fundo:#C0C0FF url("gradientes.png") 0 0 repetir-x; )

No arquivo gradientes.png, primeiro há um gradiente para o cabeçalho, depois para o corpo e depois para a linha inferior. Ou seja, o gradiente do título começa no topo. Portanto, simplesmente definimos o próprio arquivo como plano de fundo e indicamos a posição como “0 0”, ou seja, não recuamos para lugar nenhum. Para fazer o gradiente esticar horizontalmente, escreva “repeat-x”.

Para garantir que todo o gradiente caiba no cabeçalho, defina a altura para 30 pixels.

Vamos definir um gradiente para o rodapé da mesma forma que para o cabeçalho:

#window-footer( altura:30px; fundo: #C0FFC0 url("gradientes.png") 0 -60px repetição-x; )

Só que desta vez moveremos a imagem 60 pixels para baixo.

A situação com o corpo da janela é mais complicada. Nosso corpo irá esticar, ao contrário do cabeçalho e rodapé. Ou seja, se simplesmente fizermos uma div para o corpo da janela e colocarmos um gradiente lá, então todos os gradientes aparecerão nesta div de uma vez. Alternativamente, podemos colocar o gradiente para o corpo por último na vertical, mas e se tivermos vários gradientes para blocos que se estendem? Você não pode fazer tudo de uma vez. Faremos isso de maneira um pouco mais inteligente.

O código CSS será o seguinte:

#window-body( position:relative; ) #window-body-gradient( position:absolute; left:0; top:0; width:100%; height:30px; background:url("gradients.png") 0 - 30px repetir-x; ) #window-body-text( posição:relativa; )

Agora vou contar com mais detalhes o que fizemos aqui. Aqui está o código HTML do corpo da janela separadamente:

Como você pode ver, temos mais duas divas embutidas no corpo. O primeiro "gradiente do corpo da janela" será responsável pelo gradiente. O segundo “window-body-text” é para texto. Além disso, como fica claro no código CSS, aplicamos position: relativo; para todo o corpo da janela.

Para o div gradiente especificamos posição:absolute. Assim, eliminamos o gradiente div do fluxo geral. Agora essa div não tem efeito em nada. Como especificamos position: relativo para todo o corpo, o gradiente div não flutua em nenhum lugar além do pai. Anexe-o à borda esquerda e superior do corpo da janela usando “left:0; topo:0;". Defina a altura do gradiente div para 30 pixels. Ou seja, aqui indicamos a altura do gradiente que iremos anexar, se a altura da div for maior que a altura do gradiente, então outros sprites irão se destacar na div. E, finalmente, anexamos nosso arquivogradientes.png ao div gradiente. Como de costume, movemos o fundo para cima na distância necessária; neste caso, movemos o fundo 30 pixels para cima.

Agora temos um gradiente no corpo da janela. Mas isso obscurece o texto. Para evitar que o texto fique obscurecido, agruparemos todo o texto em uma div e atribuiremos a ele a posição: relativa. Uma vez atribuído, o texto ficará no topo do gradiente.

Isso é basicamente tudo. Agora colocamos todos os gradientes em nossa janela. E no cabeçalho, no corpo e no porão.

Faço explicações tão longas para que tudo fique completamente claro. Mas, na verdade, se você sabe um pouco sobre layout, provavelmente será suficiente olhar os próprios exemplos:

Mais uma vez dupliquei o link.

Na verdade, você pode encontrar muitos exemplos de uso de sprites. Mostrei apenas dois exemplos, mas esses exemplos devem ser suficientes para entender como funcionam os sprites. Se você tiver alguma dúvida, pergunte nos comentários.

Trabalhei criando ferramentas e motores para artistas de jogos e efeitos visuais por mais de uma década e sempre fiquei intrigado com a distinção que as pessoas fazem entre “arte de software” e “arte de jogo real”. Também notei que as pessoas que lhe dão passe livre para gráficos ruins são, em sua maioria, outros programadores. Não importa quão divertido seja o seu jogo ou quão incrível seja tecnicamente sua demo, os não-programadores para quem você mostra seu personagem vão pensar: “Ele tem um jetpack ou é outra coisa?” Freqüentemente, você pode encontrar uma maneira de criar bons gráficos sem precisar desenhá-los do zero. Mas às vezes você precisa criar gráficos instantaneamente. Restrições orçamentárias ou regras em uma competição de jogos, ou simplesmente um prazo apertado para um protótipo, podem exigir que você pegue uma régua e um pincel.

Não sei desenhar, sério... quero dizer, olha isso:

Se é assim que seus gráficos se parecem, este artigo é para você. Pensei em compartilhar algumas dicas sobre como melhorar seus gráficos. Essas dicas serão úteis para todos, independentemente de suas habilidades e experiência em desenho.

Embora dicas como “desenhar todos os dias” ou “visitar um museu de arte” possam ser úteis para um aspirante a artista, este artigo não é para um artista, é sobre como fazer as pessoas pensarem que você é um programador, um programador, um hobby. matemática, possuem algumas habilidades artísticas.

Além disso, nenhuma (quase) dessas dicas exige “prática”, embora a prática seja benéfica e até mesmo essencial para um verdadeiro artista. Sempre parece que o prazo de um projeto chega de madrugada e tudo que você precisa é de alguns malditos sprites.

Parte dessa história também será útil para usuários do Photoshop, porque até onde eu sei, os mesmos conceitos se aplicam a qualquer programa de desenho, e existem operações semelhantes para tudo que menciono aqui no Gimp, e talvez em qualquer outro programa que você esteja usando. usando.

Parte disso também se destina aos participantes da competição LudumDare e outras competições semelhantes onde o objetivo é criar um jogo em tempo real em 48 horas. Meus jogos tendem a ter uma boa pontuação na categoria de gráficos (infelizmente, o matador de jogabilidade continua a me escapar), embora eu não me considere um artista de jogos particularmente bom. Muitos desses exemplos vêm de minhas inscrições no LD, e a maioria dessas experiências são coisas que aprendi ao competir nessas competições e ser forçado a criar arte em prazos extremamente apertados. Além disso, eles devem ser inestimáveis ​​para qualquer pessoa que tente criar gráficos de qualidade (ou algo próximo a isso) em um curto espaço de tempo ou orçamento limitado.

O erro mais comum que vejo e o mais fácil de evitar. A paleta padrão para a maioria dos programas de desenho de computador remonta aos dias do DOS (você consegue identificar a conexão entre as cores nesta paleta e os valores binários de quatro bytes de 00 a 15? Claro que sim. Se você pudesse ' Se não visse, você seria um verdadeiro artista.).

Por paleta não me refiro à paleta de 16 ou 256 cores dos tempos VGA. Quero apenas dizer um sistema coordenado para o seu jogo. Se você começar com uma paleta bem escolhida, seus “rabiscos” parecerão esteticamente agradáveis ​​e até pré-projetados.

Mas onde posso encontrar uma paleta? Não consigo nem escolher as cores quando me visto de manhã!

Bem, um pouco de teoria das cores ajuda muito e se você dedicar quinze minutos para pesquisar o que é "teoria das cores" na Internet, acabará definindo o que é um jogo. Mas se você não tem tempo para isso, aqui vão algumas dicas que funcionam maravilhosamente bem:

Para um jogo maior, você pode querer usar uma paleta diferente por nível ou área do mundo do jogo. Se os elementos da interface do usuário e o personagem principal forem representados em cores neutras ou se essas paletas tiverem uma cor principal comum, você poderá aplicá-los igualmente entre níveis ou áreas.

Este exemplo utiliza uma paleta “monocromática”, onde as cores são todas tonalidades diferentes de um tom muito parecido, outros esquemas de cores são mais variados, mas o importante é que as cores fiquem bem juntas.

Recursos:

1. MultiColr da idee labs
   O bom deste site incrível é que você pode fazer uma paleta e tirar um monte de fotos simplesmente selecionando algumas cores desejadas e uma imagem a partir da qual você pode usar as cores.

Eu não consigo desenhar!..

Talvez você seja uma pessoa muito legal para saber desenhar. Talvez tudo isso seja intencional. Isto é verdade. Em vez de fazer boa arte, escolha um tema que exija arte ruim. Isso funcionou para "Sketch Fighter" E "Física do Lápis de Cera" desenhado em papel.

Use o que está disponível para você. Tem alguma porcaria na sua mesa? Você pode ter feito um dos jogos mais populares de todos os tempos "Defesa de torre para desktop".

As pessoas estão começando a entender o truque, mas ele não terá muitos anos de vida. Seja criativo...talvez seus personagens sejam biscoitos e você possa literalmente assá-los. Ou algum bacon zumbi ataca sua cozinha. Ou mesmo peito peludo que precisa ser raspado.

Dica três: formas e silhuetas simples

Círculo, Quadrado, Triângulo, Losango, Trapézio, Paralelogramo, etc. Você sabe calcular com precisão a área deles, mas sabe que desenhá-los não dá certo? Esboce algumas formas à mão e adicione olhos (para o personagem) ou rodas (para o veículo) ou qualquer outra coisa. Eles podem acabar sendo engraçados e absurdos, e completamente imprecisos.

Dependendo da quantidade de café que você já bebeu, eles podem ter formatos completamente diferentes. Tudo está bem! Na verdade, isso é bom, porque falhas e variações criam “individualidade” e as fazem ganhar vida. Não use ferramentas de forma em seu programa de desenho, pois é um destruidor de almas de sprites. Ao tornar seus contornos distintos, você torna mais fácil para o jogador distingui-los visualmente.

Uma observação: não tente descobrir isso durante uma competição de redação de jogos. Teste tudo antes de fazer para saber exatamente como fazer o quê. Você gastará muito tempo, mas durante uma competição isso pode levar apenas de 15 a 20 minutos e fará uma grande diferença.

E também, não se apresse em assar até terminar as texturas dos modelos. Você não conseguirá remover o "assar" ou fazê-lo duas vezes.

Dica onze: compre um tablet

Mesmo que você não tenha aspirações de se tornar um artista de jogos, se você desenhar alguma arte em um computador, precisará comprar um tablet. Não precisa ser grande ou caro; você pode comprar um tablet da Wacom. Porque desenhar com o mouse é semelhante a desenhar com um tijolo no papel.

Muitas pessoas que conheço que compraram um tablet pela primeira vez demoraram a usá-lo. Aqui estão algumas dicas para ajudá-lo a aproveitar ao máximo seu tablet.

• No painel de controle da mesa gráfica, aumente a sensibilidade da caneta para uma configuração mais firme. Isso fornecerá o melhor controle ao desenhar.
• Desenhar em uma folha de papel em branco muda completamente a sensação. Vários tipos de papel: papel de escritório, páginas de revistas, papel grosso, etc. - irá ajudá-lo a experimentar plenamente o desenho em um tablet. De uma chance.
• Prática. Eu sei que antes de dizer que nenhum dos meus conselhos exigia prática - eu estava mentindo. Experimente estes exercícios:
• Faça dez quadrados seguidos no Photoshop e preencha-os com preto em um raio de transparência de zero a cem. Faça dez quadrados vazios embaixo deles. Experimente sombrear os quadrados inferiores para alinhar os quadrados principais. Experimente com outros pincéis e pratique com a sensibilidade à pressão da caneta.
• Tente escrever algo, o alfabeto ou apenas um texto. Comece com tamanhos de letras maiores e depois vá diminuindo. Isso permitirá que sua mão se acostume com o tablet, bem como seus olhos com a tela enquanto você desenha.

Na era atual de interfaces baseadas em telas sensíveis ao toque, torna-se benéfico ter um tablet para entender como funcionam os jogos baseados nessa tecnologia. Embora esta abordagem não seja diferente quando se compara a tecnologia de mouse.

No artigo de hoje quero falar um pouco sobre sprites CSS e dar alguns links onde você pode criar esses mesmos sprites. A técnica de utilização de sprites não é nada nova e já é utilizada há muito tempo, mas a complexidade de sua criação assusta os webmasters. Vamos tentar ajudá-los...

O que são sprites CSS?

Imagine uma imagem grande que mostra todos os seus ícones, divisórias, botões, setas e outros componentes de design. Carrega junto com o site, está tudo normal. Ele simplesmente não cria várias solicitações para todos os arquivos, mas é executado com uma solicitação. Legal? Sem dúvida. Após o carregamento, a parte desejada da imagem grande é exibida no lugar certo.

Vi estatísticas em algum lugar (não me lembro onde, então não vou dar um link) - de 5 a 40% das vezes são as próprias páginas, o resto é o processamento de solicitações pelo servidor. É lógico supor que se o número de solicitações diminuir, a velocidade de download aumentará proporcionalmente.

Vamos dar uma olhada mais de perto nos prós e contras do uso de sprites:

prós usando sprites:

Desvantagens estas são tecnologias:

• No layout é necessário indicar não só a imagem, mas também a posição do fragmento, o que não é totalmente conveniente e familiar.
• aumento da carga no servidor. Uma imagem grande ocupa mais RAM, levando em consideração os “vazios” entre os fragmentos.
• Para alterar um ícone você terá que mexer no arquivo inteiro, o que não é muito conveniente. Embora, talvez seja para melhor

Escolhemos o que é mais importante para quem – simplicidade ou rapidez – e seguimos em frente. Se nada puder ser feito em relação à carga do servidor, existem ferramentas para resolver problemas de layout e alteração de sprites.

Geradores de Sprites— serviços online que, em princípio, funcionam segundo o mesmo esquema. Você carrega seu conjunto de imagens, seleciona o formato sprite e o sistema cria a imagem e a marcação CSS para este arquivo.

Onde criar sprites?

Provavelmente a ferramenta mais antiga para criação de sprites CSS. Uma característica distintiva é que existe uma versão russa da interface, o que é conveniente. É altamente customizável, não só a criação da imagem, mas também o código CSS. No geral - um excelente gerador, recomendo. Aliás, além disso, o serviço pode gerar favicons e calcular direitos de acesso para sistemas Unix.

Gerador de Sprites CSS

Este gerador também é muito bom, possui todas as configurações necessárias e gera um arquivo de saída de tamanho um pouco menor que o serviço anterior. Uma característica distintiva é a saída conveniente de código CSS para cada imagem.

Um gerador bastante funcional que permite não apenas criar um sprite regular, mas também mover as imagens por conta própria, organizando-as da forma mais compacta possível. Além disso, ele pode produzir código CSS compactado, bem como código SASS.

Atrevidoé uma metalinguagem baseada em CSS projetada para aumentar o nível de abstração do código CSS e simplificar arquivos de folhas de estilo em cascata.

Este serviço difere dos demais apresentados por não criar imagem sprite. Você mesmo pode criá-lo no Photoshop ou em outro lugar, carregue-o aqui e o serviço ajudará com o código CSS. Interface bastante clara e amigável. Recomendo para quem gosta de fazer tudo sozinho, sem confiar na máquina

Um bom gerador, tudo que você precisa para criá-lo está presente. O único aspecto negativo é que cada imagem terá que ser baixada separadamente; você não pode baixá-las em grupo. Caso contrário, nada notável, média sólida.

O serviço é escrito em HTML5 e funciona apenas no Chrome e Firefox, mas o desenvolvimento de tais serviços é encorajador. A web não fica parada e isso é bom: muito simples, configurações mínimas. Mas, se você quer uma solução rápida e simples, este gerador é 100% adequado

Gerador de Sprite para Jedi real Instale o programa, especifique o caminho para o arquivo CSS com o layout antigo e este serviço fará tudo por você. Tem muitos recursos - recomendo a leitura da documentação no site oficial.

Quase um análogo completo do Spritebox, também é utilizado apenas para obter código CSS, com a diferença que aqui a seleção da borda do elemento não é feita manualmente, mas automaticamente, a precisão do processamento é visivelmente maior. Funciona apenas no Chrome e Firefox

Um excelente serviço que funciona assim - acesse uma página pronta, com o layout normal. Clique no ícone do serviço (você precisa instalá-lo primeiro com um bookmarklet) e pronto - o serviço coleta todas as imagens desta página e gera um sprite com código. É muito conveniente, existem configurações exatamente para o que precisa ser montado. Em geral - um bom serviço.

Um gerador muito simples, mas direto e conveniente. Arraste as imagens que deseja combinar, organize-as como quiser e pressione o botão - o sprite e o código estão prontos. A desvantagem deste serviço é que ele só funciona no Chrome e no Ognelis.

O serviço é muito parecido com o SpriteMe descrito acima, com a diferença que aqui você precisa fazer o upload manual de todas as imagens e do arquivo CSS que precisa ser alterado. Existem configurações mínimas, mas faz bem o seu trabalho.

Espero que agora você não tenha medo de trabalhar com sprites CSS e que seus projetos fiquem ainda mais rápidos.