Como gardar imaxes para a web en Photoshop

Unha das funcións máis críticas que ofrece o Photoshop é a característica Save for Web / Devices .

Por que usalo? Mentres pode simplemente gardar o ficheiro nun método estándar, como File / Save As , a característica Save for Web / Devices fai tres cousas cruciales.

Esta ferramenta funciona excelente para outorgar iconas de Twitter, fotos de perfil de Facebook, ficheiros de produtos, imaxes de blog e ficheiros de orixe para favicons.

  • 01 - Abre o ficheiro de orixe

    Arquivo / Abre Photoshop. Captura de pantalla por Bryan Haines

    Para comezar, terás que ir a Ficheiro / Abrir para abrir o teu ficheiro. Pode estar en calquera formato - jpg, gif, psd, png ou outros. Mentres Photoshop poida abrilo, pode saialo para a web.

  • 02 - Gardar o ficheiro para a web

    Ficheiro Gardar o Photoshop CS5. Captura de pantalla por Bryan Haines

    Nós imos saltar adiante para aforrar para a web, supoñendo que fixeches os axustes que precise. Obviamente, se precisa editar a imaxe, primeiro e continúe con este paso máis tarde.

    Vaia a Ficheiro / Gardar para web / Dispositivos e faga clic. É aproximadamente a medio camiño do menú desplegable.

    Este proceso non cambia o teu ficheiro orixinal. Está creando un novo ficheiro. Unha vez que complete este tutorial e volva á súa imaxe orixinal en Photoshop, necesitará gardar ese ficheiro se realizou algún cambio nel. É importante nomear a túa nova imaxe diferente á túa orixinal. A miúdo simplemente engadindo _web ao nome do ficheiro funcionará ben. (exemplo: filename_web.jpg)

  • 03 - Axuste a comparación Ver a 2-Up

    Comparación secundaria por parte de Photoshop CS5. Captura de pantalla por Bryan Haines

    Dependendo da túa configuración, pode que precise axustar a vista aquí. O que queres é unha comparación esquerda e dereita da túa imaxe. O lado esquerdo mostrará o orixinal, á dereita mostrará a calidade da imaxe nos axustes actuais.

    Se ollades ao longo da parte superior da fiestra, verás as seguintes opcións: orixinal, optimizado, 2-Up e 4-Up. Para a maioría dos fins, o 2-Up é o que quererás.

  • 04 - Estableza o tamaño da visualización en 100%

    Axustar a vista ao 100% en Photoshop CS5. Captura de pantalla por Bryan Haines

    Para garantir que estea a ver no 100%, marque a opción na esquina inferior esquerda da pantalla.

    É importante lembrar que se ves a túa imaxe un 100% máis que pareza grande ou posiblemente indescifrable. Traballa sempre coa imaxe ao 100%.

  • 05 - Elixe Dimensións de ficheiros

    Elixindo Dimensións de ficheiros en Photoshop CS5. Captura de pantalla por Bryan Haines

    As dimensións para a web son case sempre en píxeles (px). É importante manter as proporcións correctas. Á beira da caixa de imaxe hai unha pequena imaxe dunha ligazón de cadea. O que fai é escalar o ancho cando axusta a altura. Por exemplo, unha imaxe que é de 600 píxeles por 400 píxeles. Se reduce o ancho a 300px, o ficheiro escalará automaticamente ata unha altura de 200px. Se non está sinalada a imaxe quedará distorsionada.

    Tamén tes a opción de escalar a imaxe por porcentaxes.

  • 06 - Escolla o Tipo de ficheiro para exportar

    Escolla o tipo de ficheiro para exportar en Photoshop CS5. Captura de pantalla por Bryan Haines

    Nesta opción, o tipo de ficheiro orixinal non importa. Pode elixir o ficheiro que precise.

    Nota: para comezar o proceso necesitará facer clic na imaxe á dereita. Debe seleccionarse a imaxe para ser procesada.

    O máis común é jpg para a web: é o formato de ficheiro máis pequeno, o que significa que se descarga máis rápido para os visitantes do seu sitio. Se ten transparencia elixe png-24. Se non sabe que transparencia significa que debería escoller jpg.

  • 07 - Escolle calidade de imaxe

    Elixa a calidade da imaxe no Photoshop CS5. Captura de pantalla por Bryan Haines

    Cada unha das tres opcións jpg (Alta, Media, Baixa) ten configuracións de calidade predefinidas, que poden ser axustadas manualmente. Se estás a ver no 100%, podes decidir a calidade que necesitas. Para axustar o nivel de zoom, vexa o Paso 5. A imaxe terá a mesma liña que na ventá de previsualización.

    Se escolle nada distinto de jpg pode omitir este paso.

  • 08 - Garda o teu ficheiro

    Garda o teu ficheiro en Photoshop CS5. Captura de pantalla por Bryan Haines

    Unha vez que realizou os axustes necesarios, está listo para gardar o ficheiro. Faga clic en "Gardar" e elixe o cartafol e o nome do ficheiro que desexe para esta nova imaxe.

    Parabéns! O novo ficheiro está listo para ser usado en liña.