Melhores sites para baixar imagens gratuitas e outros recursos
🚀 Awesome Rocketseat Resources
Versão com preview.
👨💻 Ilustrações e Vetores
Lista caprichada de vetores e ilustrações que deixam qualquer site moderno e bonito:
- https://www.freepik.com/
- https://lukaszadam.com/illustrations
- https://blush.design/collections
- https://undraw.co/illustrations
- https://www.glazestock.com/
- https://freellustrations.com/
- https://www.drawkit.io/
- https://illlustrations.co/
- https://www.opendoodles.com/
- https://iradesign.io/gallery/illustrations
- https://www.humaaans.com/
- https://www.wannapik.com/
- https://facebook.design/
- https://www.freevectors.net/
- https://icons8.com/
- https://usesmash.com/
- https://github.com/neutraltone/awesome-stock-resources#illustration
🖼️ Figma
Figma é um software que usamos para prototipar as telas da aplicação web e mobile, trouxemos alguns links que irão ajudar a te inspirar:
- https://www.figma.com/
- https://freebiesui.com/figma-freebies/
- https://www.figmaresources.com/
- https://www.figma.com/templates/
- https://www.figmacrush.com/free-figma-ui-kits/
- https://www.figmafreebies.com/
- https://www.uistore.design/types/figma/
- https://www.figmathemes.com/
- https://www.figmafinder.com/
- https://freebiesupply.com/free-figma/
- https://www.figmathemes.com/#Font-Awesome-5
- https://setproduct.com/
- https://freebiesui.com/figma-freebies/
📸 Fotos
Se seu site ou sua apresentação precisa de uma imagem bonita, com certeza essa lista vai te atender super bem:
- https://unsplash.com/
- https://br.pinterest.com/
- https://wunderstock.com/
- https://www.behance.net/galleries/illustration
- https://en.freejpg.com.ar/
- https://wunderstock.com/
😺 Animações e Gifs
Os Gifs ganharam o coração da galera e uma aplicação com animações ficam bem divertida de utilizar, se for criar um app você precisa conferir o Lottie que deixamos em primeiro da lista:
- https://airbnb.design/lottie/
- https://giphy.com/
- https://tenor.com/
- https://github.com/davisonio/awesome-gif#utilities
- Trouxemos também uma lista de ferramentas para criar seus próprios gifs:
- https://makeagif.com/youtube-to-gif
- https://gifmaker.me/
- https://makeagif.com/
- https://imgflip.com/
- https://www.gifpal.com/
- https://gifmaker.org/
- https://ezgif.com/maker
🎉 Ícones
Segue uma lista de ícones para projetos web e mobile (React Native), cada uma mais bonito que o outro:
- https://www.drawkit.io/free-icons
- https://icons8.com/animated-icons
- https://akveo.github.io/eva-icons/
- https://feathericons.com/
- https://simpleicons.org/
- https://github.com/notlmn/awesome-icons#readme
- https://react-icons.github.io/react-icons/
- https://oblador.github.io/react-native-vector-icons/
- https://ionicons.com/
- https://www.flaticon.com/
👌 Geradores de Favicon
Todo site ou app precisam de um favicon, tanto o ícone do aplicativo na tela Home ou também no título na aba do navegador. Essas ferramentas vão te ajudar, você pode pegar o logotipo do projeto e gerar os ícones do app e o favicon:
- https://realfavicongenerator.net/
- https://www.favicon-generator.org/
- https://www.favicon.cc/
- http://www.xiconeditor.com/
👍 SVG
- https://www.amcharts.com/svg-maps/
- https://simpleicons.org/
- https://www.blobmaker.app/
- https://getwaves.io/
- https://lovesvg.com/
😛 Emojis
Emojis servem para dar emoção no texto, muita gente gosta! Aqui na Rocketseat trabalhamos remoto e usamos bastante no chat do Discord e também nos posts como você já deve ter percebido. Confira a lista:
- https://www.emojicopy.com/
- https://gitmoji.carloscuesta.me/
- https://getemoji.com/
- https://webemoji.org/
🔤 Fontes
Tipografia é muito importante, você pode baixar as fontes no seu computador e instalar facilmente. O primeiro link é bem mais que o suficiente para te atender, deixamos mais três links com fontes bem legais para seus projetos.
- https://fonts.google.com/
- https://www.dafont.com/pt/
- https://everythingfonts.com/
- https://www.fontsquirrel.com/
⚙️ Ferramentas
Com o Canva você pode criar várias artes gráficas para posts no Facebook, Instagram, Miniatura do seu canal no Youtube, capa para LinkedIn, Twitter, Facebook. Tem uma infinidade de templates pagos e gratuitos, além de imagens e outros recurso que você pode utilizar.
Remove.bg te ajuda a remover o fundo do background das imagens sem a necessidade de ser especialista em Photoshop. Adeus varinha mágica! É muito fácil, só fazer upload da imagem e baixar a imagem sem o fundo, e o site permite ainda você fazer alguma customizações e correções.
Se você curte o photoshop, você vai curtir esse site que trás o photoshop no navegador e de graça. Bem útil para fazer uma edição rápida em alguma imagem.
Site bem legal para criar seus logotipos ou se inspirar:
🎨 Paletas de Cores:
Só o Diego Fernandes mesmo para decorar o código das cores no CSS. Temos aqui uma lista de sites onde podemos pegar o código RGB e colocar no frontend da nossa aplicação:
- https://flatuicolors.com/
- https://materialuicolors.co/
- https://color.hailpixel.com/
- https://www.spycolor.com/
- https://uigradients.com/#Memariani
- https://paletton.com/
⌨️ Formatar o código para postar no blog:
Pegar o código no VSCODE e jogar no blog pode perder a indentação, você pode utilizar algumas das soluções abaixo:
- https://carbon.now.sh/
- https://beautifier.io/
- https://prettier.io/playground/
- https://jsbin.com/
- https://jsonformatter.org/
- https://www.cleancss.com/html-beautify/
🤖 Compressão de imagens para melhorar performance do site
Se você produz conteúdo em um site ou se é um web developer tem que conhecer essas ferramentas abaixo para melhorar a performance no carregamento da página. Uma imagem com muitos bytes pode prejudicar. Alguns CMS já fazem a otimização para você, mas não custa nada checar, se a imagem estiver muito grande utilize esses sites que diminuem alguns bytes e preservam a qualidade da imagem. O SEO agradece!
🔥 Outros
Trouxemos alguns sites que podem te inspirar nos seus projetos. Os repositórios no Github com o nome awesome-xxxx tem várias coisas legais, a comunidade contribui com vários links, o mais famoso é do Sindre Sorhus, primeiro da lista.
- https://github.com/sindresorhus/awesome
- https://github.com/neutraltone/awesome-stock-resources#videos
- https://github.com/lvwzhen/tools#readme
- https://sketchrepo.com/
- https://carbon.now.sh/
- https://screenshot.rocks/
- http://patorjk.com/software/taag/#p=display&f=Doom&t=Rocketseat
- https://free-for.dev/
🙏 Considerações finais
Confira se todos os recursos podem ser utilizados com ou sem os créditos ao autor de cada recurso. Alguns sites pedem para que citem o nome do criador da arte gráfica. ⚠️ Fiquem atentos!
Espero que tenha curtido! 💜
O aprendizado é contínuo e sempre haverá um próximo nível!