[DICA] Ícones das formas de pagamento para o rodapé
Enviado: 05 Out 2013, 20:57
Olá galera do OC Brasil! Hoje vou publicar uma dica (ou colaboração?) um pouco diferente do usual.
Pra quem não me conhece a minha ocupação principal é na área gráfica. Tenho uma gráfica rápida e revendo materiais impressos e fotoprodutos, e gosto de criar artes finais e de desenhar coisas. E a colaboração de hoje é um conjunto de ícones com todas as formas de pagamento disponíveis online. Estou publicando esta colaboração pois percebo que várias lojas menores acabam dependendo dos banners do Pagseguro e do Bcash para divulgar as formas de pagamento aceitas. Esses banners, apesar de úteis e práticos, são bem feios e quase nunca se adaptam ao layout da loja
Então criei esse conjunto de ícones para usar na minha loja, e estou disponibilizando para a comunidade.
Estes arquivos podem ser distribuídos livremente - nada de sair vendendo por aí, hein!
Apenas me dê o crédito.
Mas atenção: eles servem para que você personalize-os de forma a integrá-los em sua loja - eles não devem ser usados diretamente, mas no final deste post há um bônus com barras prontas que você pode usar caso não saiba editar imagens.
Você precisará de um editor vetorial (CorelDRAW, Illustrator, Inkscape ou outro) ou de um editor bitmap (Photoshop, Photopaint, Paint.net, GIMP) para modificar características como tamanho, posição dos ícones e a seleção das formas de pagamento que você vai disponibilizar. É um processo rápido e simples que vai garantir que as formas de pagamento sejam exibidas de uma forma legal na sua loja. E você não precisa gastar nada se não tiver o CorelDRAW ou o Photoshop: o Inkscape, o Paint.net e o GIMP são gratuitos.
Prévia dos ícones
Esta coleção inclui ícones das formas de pagamento aceitas pelas seguintes empresas: Cielo, Redecard, Pagseguro, Bcash, Paypal, Mercadopago e F2b. Há também ícones para os principais bancos, e os ícones das formas de pagamento a vista.

Download no Skydrive
http://sdrv.ms/15OTguY - Versão em PNG (bitmap) com fundo transparente
http://sdrv.ms/15OTiTA - Versão em SVG (vetorial)
Dica: Esses arquivos também podem ser usados para fazer materiais impressos como panfletos, banners, cartões de visita, etc. A versão em PNG (bitmap) tem 300 dpi de resolução, ou seja, é bem grande. E a versão em SVG, por ser vetorial, pode ser redimensionada para qualquer tamanho sem perda de qualidade.
Como usar
Abra qualquer desses arquivos no editor de imagens correspondente e recorte e cole os ícones que desejar em um novo arquivo na sequência que você quiser. Lembre-se de colocá-los em uma disposição que se encaixe na posição onde você deseja inseri-los em sua loja. Redimensione para o tamanho certo e por fim salve em um arquivo PNG com transparência ativada. Depois disso basta inserir na loja usando um módulo ou alterando o código fonte do seu tema. Se tudo der certo, você verá os ícones na sua loja se encaixando perfeitamente ao tema devido à transparência do PNG.
Se você quiser customizar ainda mais os ícones, como mudar a cor de contorno ou a cor de fundo dos retângulos, deixar somente os ícones sem os retângulos, ou ainda transformar os ícones em uma cor (excelente para certos tipos de temas) abra o arquivo SVG usando um editor vetorial. Assim você poderá modificar os objetos individuais livremente.
Se você tiver dúvidas sobre como usar os arquivos fique à vontade para perguntar. Farei o possível para responder, mas não vou dar aulas de Photoshop ou CorelDRAW
Bônus - Barras prontas dos intermediadores de pagamento
Barras prontas para usar no rodapé da loja, já redimensionadas para o tamanho ideal (a maior tem 800 pixels de largura). As barras contêm as formas de pagamento aceitas pelo respectivo intermediador. Todas com fundo transparente para se adaptar a qualquer tema e qualquer cor de loja. Se precisar menor basta redimensionar usando algum aplicativo de imagens. Para baixar clique com o botão direito e escolha Salvar Imagem Como.
Pagseguro

Bcash

Paypal

MercadoPago

Pra quem não me conhece a minha ocupação principal é na área gráfica. Tenho uma gráfica rápida e revendo materiais impressos e fotoprodutos, e gosto de criar artes finais e de desenhar coisas. E a colaboração de hoje é um conjunto de ícones com todas as formas de pagamento disponíveis online. Estou publicando esta colaboração pois percebo que várias lojas menores acabam dependendo dos banners do Pagseguro e do Bcash para divulgar as formas de pagamento aceitas. Esses banners, apesar de úteis e práticos, são bem feios e quase nunca se adaptam ao layout da loja
Estes arquivos podem ser distribuídos livremente - nada de sair vendendo por aí, hein!
Mas atenção: eles servem para que você personalize-os de forma a integrá-los em sua loja - eles não devem ser usados diretamente, mas no final deste post há um bônus com barras prontas que você pode usar caso não saiba editar imagens.
Você precisará de um editor vetorial (CorelDRAW, Illustrator, Inkscape ou outro) ou de um editor bitmap (Photoshop, Photopaint, Paint.net, GIMP) para modificar características como tamanho, posição dos ícones e a seleção das formas de pagamento que você vai disponibilizar. É um processo rápido e simples que vai garantir que as formas de pagamento sejam exibidas de uma forma legal na sua loja. E você não precisa gastar nada se não tiver o CorelDRAW ou o Photoshop: o Inkscape, o Paint.net e o GIMP são gratuitos.
Prévia dos ícones
Esta coleção inclui ícones das formas de pagamento aceitas pelas seguintes empresas: Cielo, Redecard, Pagseguro, Bcash, Paypal, Mercadopago e F2b. Há também ícones para os principais bancos, e os ícones das formas de pagamento a vista.

Download no Skydrive
http://sdrv.ms/15OTguY - Versão em PNG (bitmap) com fundo transparente
http://sdrv.ms/15OTiTA - Versão em SVG (vetorial)
Dica: Esses arquivos também podem ser usados para fazer materiais impressos como panfletos, banners, cartões de visita, etc. A versão em PNG (bitmap) tem 300 dpi de resolução, ou seja, é bem grande. E a versão em SVG, por ser vetorial, pode ser redimensionada para qualquer tamanho sem perda de qualidade.
Como usar
Abra qualquer desses arquivos no editor de imagens correspondente e recorte e cole os ícones que desejar em um novo arquivo na sequência que você quiser. Lembre-se de colocá-los em uma disposição que se encaixe na posição onde você deseja inseri-los em sua loja. Redimensione para o tamanho certo e por fim salve em um arquivo PNG com transparência ativada. Depois disso basta inserir na loja usando um módulo ou alterando o código fonte do seu tema. Se tudo der certo, você verá os ícones na sua loja se encaixando perfeitamente ao tema devido à transparência do PNG.
Se você quiser customizar ainda mais os ícones, como mudar a cor de contorno ou a cor de fundo dos retângulos, deixar somente os ícones sem os retângulos, ou ainda transformar os ícones em uma cor (excelente para certos tipos de temas) abra o arquivo SVG usando um editor vetorial. Assim você poderá modificar os objetos individuais livremente.
Se você tiver dúvidas sobre como usar os arquivos fique à vontade para perguntar. Farei o possível para responder, mas não vou dar aulas de Photoshop ou CorelDRAW
Bônus - Barras prontas dos intermediadores de pagamento
Barras prontas para usar no rodapé da loja, já redimensionadas para o tamanho ideal (a maior tem 800 pixels de largura). As barras contêm as formas de pagamento aceitas pelo respectivo intermediador. Todas com fundo transparente para se adaptar a qualquer tema e qualquer cor de loja. Se precisar menor basta redimensionar usando algum aplicativo de imagens. Para baixar clique com o botão direito e escolha Salvar Imagem Como.
Pagseguro

Bcash

Paypal

MercadoPago
