Turbine seus posts otimizando as imagens com o Gimp | How to optimize images with Gimp

in #utopian-io7 years ago (edited)

tutorial-gimp-topo.jpg

Otimizar imagens, serve para que elas ocupem menos espaço e sejam mais rapidamente carregadas. Isso é excelente para WEB porque carrega páginas rapidamente, evitando perda de visitantes. Também é útil para economizar espaço em seu celular ou discos locais e virtuais.

O que você Aprenderá:

Parte 1 - Otimização Rápida
Parte 2 - Otimização Avançada
Parte 3 - Otimização para WEB

Optimized images, use less disk space and are faster uploaded and downloaded. This is great for WEB cause websites loads faster and you don't lose visitors. Also, it help you to save space in your smartphone or in local and online drive.

What you will learn:

Part 1 - Fast optimization to GIF
Part 2 - Advanced Optimization to JPG
Part 3 - Web Optimization to PNG


Site Oficial

Caso não tenha o gimp instalado, faça download no website oficial:
https://www.gimp.org/downloads/
(escolha Download directly)

Official Website

If you haven't GIMP yet, just download at official website.
https://www.gimp.org/downloads/
(choose Download directly)


download.png



Parte 1 Otimização Rápida para GIF

Part 1 Fast Optimization to GIF


I. Abra a imagem

Em primeiro lugar, você deve ter uma imagem para ser otimizada. A maioria dos sites de imagens gratuitas, disponibilizam em formato PNG, devido à maior qualidade.

  • a) Clique em File e escolha Open

I. Open an Image

First, you need an image. Websites that have free royalty images, generaly put it in PNG format, cause it is the best.

  • a) Click in "File" and "Open"

passo1.png


  • b) Clique na imagem e aperte o botão Open
    Encontre a imagem, clique em cima e aperte o botão Open no canto inferior direito.
  • b) Click in image file and "Open Button"
    Just find it in your computer and click in Open to start.

passo2.png


II. Exporte para GIF

Essa é a forma mais rápida de otimizar a maioria das imagens em formato PNG. Basta transformá-las em .gif para diminuir em torno de 50% do tamanho, sem perder muita qualidade.

  • a) Clique em "File" e escolha "Export As"

II. Export to GIF

It's the fastest way to optimize an PNG image. More than 50% of optimization, without quality loss.

  • a) Click in "File" and "Export As"

passo3.png


  • b) Clique em "Select File Type", escolha "GIF image" e aperte o botão "Export"
  • b) Click in "Select File Type", choose "GIF image" and click in "Export" buttom

passo4.png


  • c) Opcionalmente escreva um comentário
    Não use caracteres especiais, acentos, etc.

  • d) Clique no botão "Export"
    Isso conclui a otimização para o formato GIF.

  • c) Write comment if you want
    Shoudn't contain any special characters.

  • d) Click in "Export" button
    It'll finish the first optimization to GIF.


passo5.png


Parte 2 Otimização Avançada JPEG

Part 2 Advanced Optimization - JPEG


I. Exporte e otimize em JPEG

Para fins de aprendizado, exporte agora para JPEG

  • a) Clique em "File" e "Export As"

I. Export to JPEG

To learn an advanced way, export to JPEG format now.

  • a) Click in "File" and "Export As"

passo3.png


  • b) Clique em "Select File Type", escolha "JPEG image" e clique no botão "Export
  • b) Click in "Select File Type", choose "JPEG image" and click in "Export" buttom

passo6.png


  • c) Clique em "Show preview in image window"
    Note que a imagem fica atrás dos menus e janelas, dificultando a visualização.
  • c) Click in "Show preview in image window"
    As you see bellow, the image preview is in background.

passo8-baguncado.png


  • d) Clique na janela da imagem
    (Veja onde está o mouse no exemplo abaixo).
    E aperte [TAB] em seu teclado para remover menus desnecessários.
  • e) Click in image preview window
    (See whare are the mouse below).
    Click in image window and press [TAB] in your keyboard.

passo9-onde-clicar.png


(Isso fará sumirem as barras de ferramenta que estão atrapalhando.)

(Isso fará sumirem as barras de ferramenta que estão atrapalhando.)


passo10-sembagunca.png


(Para voltar a ver esse menu, a qualquer momento, clique na janela imagem e aperte [ TAB ] em seu teclado)

  • e) Clique em "Advanced Options"
    Organize as janelas para ver as duas ao mesmo.

(Para voltar a ver esse menu, a qualquer momento, clique na janela imagem e aperte [ TAB ] em seu teclado)

  • e) Click in "Advanced Options"
    Now, move windows to see both at same time.

passo11-avancado.png


  • f) Experimente as opções de otimização.
    A princípio, apenas movimente a barra "Quality" e procure manter a imagem aceitável (sem borrões). Geralmente, abaixo de 80 já começa a ficar muito ruim.
  • f) Enjoy and test options.
    First, just move "quality" and see results in image preview window.

passo11-clique-advanced.png


  • g) Experimente também a opção Smoothing
    Ela faz uma sombra que pode evitar a aparência serrilhada da imagem e ocultar algumas falhas. Ajuste utilizando a barra, da mesma forma que fez em Quality.
  • g) Test the Smoothing option
    It is good to hide problems in image.

passo12-sombras.png


  • h) Opcionalmente, escreva um comentário
    (não utilize acentos ou caracteres especiais)

  • i) Exporte
    Quando terminar de modificar as opções, se a imagem ficou com boa qualidade, clique no botão "Export".

  • h) Write comments if you wanna.
    (shoudn't have special characters)

  • i) Export
    When you think image is ok, click in "Export" buttom.


passo13-finalizado.png


Part 3. Otimizando para WEB

PNG é o melhor formato para WEB.

Siga os passos:

3. Optimizing for WEB

PNG format is the best for WEB.

Follow steps bellow to do it.


a. Clique em File e Open

a. Click in File and Open


passo1.png


b. Selecione a imagem GIF que acabou de otimizar

b. Choose GIF optimized image


seleciona-gif-para-transformar.png


c. Clique em "File" e escolha Export As"

c. Click in "File" and choose "Export As"


passo3.png


d. Modifique o nome para não sobrescrever a original, escolha o formato "PNG image" e clique no botão "Export"

d. Modify the name to avoid override, choose "PNG image" and click in "Export" buttom


passo15.png


A imagem deve ter ficado consideravelmente maior do que a JPG, mas esse meio termo entre GIF e PNG geralmente resolve o problema.

The PNG exported from GIF optimized, should have more size than JPG, but is the bestest optimized file for online publishing.


resultado-final-2.png


Agora parta para a ação, otimizando suas imagens e tornando a navegação mais rápida para todos.

It's done! Go to action.


Espero que essas informações te ajudem a prosperar.

clique aqui para ver meus outros artigos e tutoriais

I hope it help you to prosper.

click here to see my other posts and tutorials


Imgur




Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Eu uso o gimp junto com o blender ha anos.

Olha aí que top! Klaus é o nosso amigo designer do #pt
Obrigado pela presença ^^

Sempre que puder estarei prestigiando. Só preciso me organizar melhor.

Hey @casberp I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • This is your first accepted contribution here in Utopian. Welcome!

Suggestions

  • Contribute more often to get higher and higher rewards. I wish to see you often!
  • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

  • Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Boa dica, eu uso o gimp para fazer imagens para as minhas páginas e vídeos, é uma mão na roda, e bem leve(depois que carrega :p )!! Bom post!!

Esse GIMP é excelente. Um pouco complexo a princípio mas basta persistência para conseguir fazer a maioria das operações da concorrência. Valeuu :)

Ficou muito massa mano! E parabéns pelo seu ótimo trabalho!

Muito obrigado coyote! Agora atualizei, ficou bilíngue!

Excelente e já está favoritado!
Gosto de usar o Gimp apesar de não manejá-lo bem XD

Thank yoo! Gimp é top mesmo. Só precisa investir um tempo aprendendo e fuçando.

E com esse seu tuto, muito melhor :)
Fiz um cursinho tipo introdutório (manipulação de imagem em app free) juntamente com o Inkscape. Quatro horinhas, pros dois, não dá nem pra fazer uma árvorezinha direito XD. Mas valeu a pena porque nem sabia de existência deles ;)

Muito obrigado, seu comentário me incentiva e anima a fazer mais tutos. Realmente 4 horas é só a apresentação né.

Inkscape é muito bom, bem avançado.

Obrigada pela sua disponibilidade :)
Queremos mais!!!!!

  • It's very unclear as to what you are trying to achieve. Could you please explain in depths. You have less than 4 hours to do so.

Hi, please, I have edited to explain each steps in depths. I am in discord to resolve everything else. Sorry for delay, in Brazil is only 9AM yet.

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Coin Marketplace

STEEM 0.18
TRX 0.16
JST 0.029
BTC 76387.98
ETH 3047.82
USDT 1.00
SBD 2.62