09
Dec

A solução para blogueiros e designers sem inspiração e mais tutoriais e geradores

Imagem de Dhanank Pambayun

Imagem de Dhanank Pambayun

Esse blog deveria se centrar em apenas duas grandes categorias, tendo em vista o título criado em 2005( na época do primeiro Arte e Vício, um blog de contos).

Arte: todos os posts sobre cria√ß√£o, seja¬† ilustra√ß√Ķes, esculturas, pinturas, desenhos ou at√© mesmo cria√ß√£o de sites, blogs etc. V√≠cio: todos as curiosidades que o blog traz, da√≠ uma abrang√™ncia maior como m√ļsica, cinema, jogos, tecnologia, testes, etc. Isso daria um certo trabalho pois eu teria que editar cada post ou at√© mesmo deletar alguns que n√£o se encaixam nas categorias principais. Decidi deixar como est√°, mas agora quem l√™ o blog sabe a inten√ß√£o por tr√°s do nome dele. Considera√ß√Ķes √† parte, vamos ao que interessa.

Hoje eu trouxe centenas de tutoriais e ferramentas. Juro que n√£o li todos, mas fiz uma leitura din√Ęmica em muitos. V√°rios sites e blogs reuniram verdadeiras aulas de design, cada um com uma tem√°tica diferente. Eu organizei esses v√°rios sites, separei por tema e assunto e fiz um pacot√£o. Se o seu ingl√™s n√£o anda l√° essas coisas, √© simples, joga no tradutor clicando aqui que j√° √© uma boa ajuda.

Se voc√™ √© designer, se precisa ter id√©ias ou uma inspira√ß√£o para criar, se voc√™ √© blogueiro e quer encontrar a melhor “cara” para o seu blog, se voc√™ precisa terminar um site urgente, calma! O AV tem a solu√ß√£o *m√ļsica de suspense”: A solu√ß√£o para a sua falta de inspira√ß√£o.

Lembre-se que o tutorial n√£o est√° nesse post, apenas o link para que voc√™ acesse. Al√©m dos tutoriais, pinc√©is, texturas, ferramentas online, muita coisa boa e √ļtil!

C√≥digos e aplica√ß√Ķes para web.

50 excellentes tutoriais em AJAX – Nessa lista d√° para aprender a fazer sistema de login, calend√°rios, menus, entre outras coisas.

13 menus em javascript com mesmo efeito que em flash РTodos os códigos usando os clássicos jQuery, Scriptaculous e Mootools. Além de ensinar a fazer menus incríveis, disponibiliza o download dos códigos.

CSS Menu Generator – Crie menus em CSS facilmente.

Listamatic РColeção de menus em CSS.

List-O-Matic РCrie seus próprios menus em CSS.

List-U-Like РOutra ferramenta para criar suas próprias barras de navegação.

Tabs Generator РCrie imagem de abas para navegação.

Flash Buttons – Crie menus de navega√ß√£o com bot√Ķes em flash.

CSS Play РMais uma coleção de menus em CSS.

Exploding Boy РColeção de menus com abas em várias cores.

CSS Navigation Menu Generator - Uma ferramenta para ajuda você a criar seu próprio menu

Inspiração: webmasters

400 arquivos, tutoriais e inspira√ß√Ķes para a design baseados na natureza.

60 templates e layouts gr√°tis em alta qualidade - eu disse em alta qualidade!

50 incríveis menus de navegação Рse você consegue aplicar exatamente aquilo que vê, então essa é uma boa fonte de inspiração para menus.

50 incríveis menus de navegação parte 2 Рa continuação.

37 exemplos de design para o formulário nos comentários Рeu sinceramente achei bem inovador, nunca tinha pensado que a página de comentários também precisa ser atrativa. O que custa deixar o formulário bonitinho, não acha?

35 websites com o mínimo de cores Рexistem temas que não precisam de absolutamente nada e mesmo assim continuam incríveis. O Arte e Vício nunca seria um deles. :)

30 headers bem criativos Рo que vocês acham do meu, hein?

25 footers impressionantes Рpara quem não sabe, footer é a o final do blog.

15 design de menus bem originais.

13 características de um design excepcional para blogs.

12 blogs que podem expandir o seu repertório de web design

12 maneiras eficazes para um design de blog – O Guia do Iniciante.

Inspiração: trabalho de Designer

45 incr√≠veis cart√Ķes de natal.

10 dicas para evitar o bloqueio de inspiração.

Design: Bot√Ķes

Adam Kalsey‚Äôs Button Maker - Ferramenta simples para fazer seus pr√≥prios bot√Ķes.

Button Maker from Blog FluxCrie o seu próprio botão personalizado.

Brilliant Button Maker - Um criador de bot√£o semelhante ao anterior.

Button Boost - Um pouco diferente de alguns dos outros geradores bot√£o.

ButtonGenerator.com - Criar bot√Ķes de navega√ß√£o nos menus.

Crystal Button. Chicklet Creator - Criar bot√Ķes que permitem que os visitantes subscrevam o seu leitor de feeds.

CSS Buttons - Escolha o texto, borda, o fundo e faça seu botão.

RSS Button Maker - O nome diz tudo, muito bonito.

My Cool ButtonUma bela ferramenta online que irá ajudá-lo a criar rapidamente o botão que você quer.

Design: Logos

Cada uma dessas ferramentas ir√° criar um simples logotipo estilo web 2.0.

50 exemplos de remodelação de logos.

Web 2.0 Logo Creator

Web 2.0 Logo Creator Web 2.0 Logo Creatr Рo nome é Creatr mesmo.

Web 2.0 Stylr

Design: √ćcones

Um site web 2.0 n√£o pode ignorar √≠cones. Aqui est√£o algumas cole√ß√Ķes dos √≠cones livres para utilizar em seus pr√≥prios projetos

23 conjunto de ícones natalinos.

31 fonte de √≠cones grat√ļitos e com qualidade.

Feed Icons.

Perishable Press - Uma bela cole√ß√£o de √ćcones RSS.

RSS √≠cones estilizados de vidro. Snap2Objects - √ćcones RSS em vetor.

UtomBoxUma bela cole√ß√£o de √ćcones RSS web 2.0.

Photoshop

50 texturas em alta resolução Рalguns tutoriais a mais e outros recursos.

45 sites para baixar shapes para o photoshop.

42 pincéis grátis para photoshop em alta resolução.

40 tutoriais para criar wallpappers no photoshop.

35 tutoriais para photoshop inspirados na Apple.

35 tutoariais para criar layouts no photoshop.

28 poderosos efeitos de luz no photoshop.

Brusheezy РPincéis grátis.

PSBrushes.net - Mais pincéis.

Ferramentas

7 ferramentas gr√°tis para identificar fontes.

20 excelentes editores de texto gr√°tis.

6 Add-ons do Firefox essenciais para designers – exten√ß√Ķes e complementos para o navegador.

10 plugins essenciais para quem vai começar um blog wordpress (e o por quê).

BlogPoll – Crie enquetes para seu blog.

.htacces generator – Gere um arquivo .htacces facilmente.

PsycHo – Gerador de template para blogs.

RSSxl – Converta uma p√°gina HTML em RSS.

Templatr – Crie um layout.

VectorMagic – Conversor de imagem bitmap em vetor.

Web 2.0 Generator – Crie layouts.

Ferramentas: Criadores de Badges

Os badges s√£o formas como essas:

Exemplo de Badge.

Exemplo de Badge.

adClustr - Starburst de badges.

BittBox – Badges em vetor.

Deziner Folio РUma coleção de diferentes badges.

Fresh Badge - Gerar rapidamente o seu próprio badges.

Fresh Badge - Gerar rapidamente o seu próprio badges.

Glossy Photoshop Tutorial - Crie um badge com este tutorial brilhante.

Official Seal Generator -Uma alternativa para o badge típico.

Photoshop TutorialUma rápida lição sobre como fazer o seu próprio badge.

Web 2.0 BadgesUm conjunto de badges livres para fazer o download e utilizar em seus próprios desenhos.

Avatares

Avatar Maker -Crie avatares.

Shrink Pictures – Crie uma avatar com sua foto

Cantos arredondados

Cantos arredondados são avanço na web 2.0. Eu não sei quem teve a idéia, mas hoje é essencial para um blog com visual bonito. O AV possui muitos cantinhos arredondados. Aqui estão alguns scripts e ferramentas que ajudarão você a criar rapidamente seus próprios cantos arredondados.

Canvas Corner

News List

RoundedCornr

Spiffy Box

Spanky Corners

Sliding Doors Text Box

Smart Rounded Corners

Rounded Corners in CSS

Gradientes

Outro elemento comum da web 2.0 é as imagens em gradiente. Aqui estão algumas ferramentas para ajudar você.

Gradient Image Maker

Gradient Generator

Online Gradient Image Maker (OGIM)


Speech Bubbles

Speech bubbles s√£o aqueles bal√Ķezinhos da fala do personagem nos quadrinhos. Na web 2.0 s√£o normalmente usados para definir observa√ß√Ķes ou cita√ß√Ķes. Muitos blogs usam nos blockquotes. Achei interessante, esses sites v√£o te ajudar a gerar essa caixa de di√°logo.

Bubblesnaps

CSS Play

Fluid CSS Speech Bubbles

Gerador de Speech Bubble para o MySpace.

WigFlip

Will Mayo

XHTML Speech Bubbles

O que essa imagem est√° fazendo aqui?

Backgrounds

All Free Backgrounds.

Background Image Maker - Crie imagens com op√ß√Ķes como transpar√™ncia e gradientes.

Stripe Generator 2.0.

Stripe Designer.

Tartan Maker.

Texture Generator.

Cores

Color Schemer Gallery - Com problemas em escolher um esquema de cores? Encontre o que deseja nesta galeria.

COLOURloversMais combina√ß√Ķes de cores.

I Like Your Colors - Saiba as cores usadas por um determinado site.

The Colors of Web 2.0Você está procurando inspiração para cores no seu blog?

Web 2.0 Color Pallete – As cores mais populares na web.

Website Color PickerTeste rapidamente as combina√ß√Ķes de cor.

I Like Your Colors - Saiba as cores usadas por um determinado site.

Favicons

Favicons são aqueles símbolos (mini-logo) na aba dos navegadores para cada site/blog.

Favicon GeneratorCrie o seu próprio favicon a partir de uma imagem em seu computador.

Favicon from Pics – Crie um favicon com sua foto.

Favicon Editor – Upload a photo, create a favicon.

Favicon.cc – Another option for favicons.

Photoshop Tutorial – Criando favicon no photoshop.


Gr√°ficos

Você me pergunta até um gerador de gráfico o filho da mãe trouxe? Sim. :shh:

amCharts – Gr√°ficos em flash.

PHP/SWF Charts РCrie incríveis gráficos.

A galeria √© maior do que voc√™ imaginava hein? Ok, n√£o precisa agradecer. :roll: Mas se algu√©m quiser, claro… estamos a√≠.

36 Responses to “A solu√ß√£o para blogueiros e designers sem inspira√ß√£o e mais tutoriais e geradores”

  1. Compulsivo says:

    Belo post, parabéns! Já foi para os meus favoritos!

    []‘s
    Compulsivo

  2. Devidamente Deliciousado e pronto para a √°nalise posterior…
    √ďtimo trabalho!

  3. Fant√°stica esta colet√Ęnea de solu√ß√Ķes para falta de inspiration, realmente uma das melhores que vi, devidamente anotadas, manda para o Ueba barba… :D

  4. j. noronha says:

    Esse foi para os favoritos refer√™ncia r√°pida, hehe…

  5. Simplesmente foda! Essa p√°gina inteira j√° est√° nos meus favoritos hehe

  6. Lateri says:

    N√£o existe outra coisa a dizer al√©m de parab√©ns e obrigado….

    Du Carelo est√° pagina… tudo o que precisamos para dar um up de rapidez em nossos trabalhosss…

    agrade√ßooooo…

    sem d√ļvidas jah foi para os favoritosss

    abraço

  7. alex says:

    Sensacinal.

    j√° esta no favoritos.

  8. Lucas says:

    MUUUITO BEM
    SER√Ā MUITO √öTIL RAPA!!
    PARAB√ČNS!

  9. Lucas says:

    Favoritos!!
    muito bom

  10. Marcos says:

    Muito interessante !!! Valew !!! =D

  11. [...] post A solução para blogueiros e designers foi o início de tudo. Muita satisfação receber o primeiro comentário do Compulsivo e do Noronha [...]

  12. Jefferson says:

    Cara, muito bom esse post.

    Perfeito para futuros designers como eu.

    =D

  13. [...] A solução para blogueiros e designers sem inspiração e mais tutoriais e geradores. (Inspiração #0, o post que deu origem a idéia) [...]

  14. @AndrePacheco dei uma pequena modificada http://arteevicio.com/ enquanto num penso em algo melhor

  15. RT @barbaaa: @AndrePacheco dei uma pequena modificada http://arteevicio.com/ enquanto num penso em algo melhor

  16. RT @barbaaa: @AndrePacheco dei uma pequena modificada http://arteevicio.com/ enquanto num penso em algo melhor

  17. DJ Katan says:

    @titosenna Você conhece o Arte e Vício, do @barbaaa? Eu não trabalho com isso, mas sou fã desse blog: http://arteevicio.com/ Passa lá. =)

  18. Tito Senna says:

    RT @LBKatan: @titosenna Você conhece o Arte e Vício, do @barbaaa? Eu não trabalho com isso, mas sou fã desse blog: http://arteevicio.com

  19. Tito Senna says:

    @LBKatan blog maneiro! http://bit.ly/4rgTls Arte e Vício

  20. DJ Katan says:

    RT @titosenna: @LBKatan blog maneiro! http://bit.ly/4rgTls Arte e Vício

  21. Um blog bem legal que retomou as atividades esse ano : ) http://bit.ly/4rgTls

  22. Pra quem n√£o sabe, o blog do @barbaaa, tb conhecido por "blog mais fod√°stico de arte, design e cultura" t√° de volta: http://arteevicio.com/

  23. Vitor Torres says:

    J√° visitou um blog hoje? http://arteevicio.com/ <— arte, design e cultura! (dica do amigo @tarushijio)

  24. RT @PTBaixada: "Tem gente que acha…o importante √© discutir …j√° e adotar as posi√ß√Ķes corretas para o futuro." em http://migre.me/4gl

  25. RT @rcovaleski: Al√ī @Muvuca2011, links dos v√≠deos da palestra: http://migre.me/4ju5t | http://migre.me/4ju1‚Ķ (cont) http://deck.ly/~ppXpX

  26. Mila Ziggy says:

    GENTE!! pra quem #ama O #TWITTER tem uns #badges muito lindooos aqui http://bit.ly/c6gNB #icones

  27. Lucas Lange says:

    RT @barbaaa: Yankee Gal, a animação Рtv-av #13 http://t.co/WTsYrBM Bão, muito bão!

Comente

*