Dreamweaver CC 2017 esencial

Optimizar imágenes: Dreamweaver y Photoshop

¡Prueba gratis durante 10 días

nuestros 1220 cursos !

Prueba gratis Mostrar modalidades de suscripción
Las imágenes tienen que tener tamaños bien pensados para que no pesen demasiado, así que tendremos que aprender a exportar nuestras imágenes con la compresión y tamaño correctos: pero con Dreamweaver veremos que el trabajo directo desde Photoshop es algo muy cómodo.

Transcripción

(hombre) Añadir las imágenes de un sitio, muchas veces es una tarea bastante pesada y ardua. Porque tienes que estar cambiando los tamaños de todas las imágenes que tienes que añadir para adaptarlas al tamaño en que van a aparecer y así no desperdiciar ancho de banda. De todas formas, Dreamweaver dispone de herramientas muy potentes para facilitar todo este trabajo. Una de ellas es la biblioteca CC. Yo puedo ir haciendo imágenes, preparándolas desde Photoshop, metiéndolas dentro de una biblioteca y luego utilizar esa biblioteca para añadir las imágenes dentro de Dreamweaver. Por ejemplo, yo quiero añadir, voy a irme al dom, dentro de este "banner", bueno pues yo quiero, dentro de esta etiqueta en concreto, quiero añadir este "banner" que ya se ha preparado. En principio, dependiendo del modo de visualización, si estuviese en la vista de diseño podría arrastrarlo y colocarlo. En la vista en vivo, lo que puedo es pedir que inserte ese elemento, podemos hacerlo enlazado, con lo cual siempre va a haber una referencia de ese elemento para hacer modificaciones o desenlazado, que lo que hará será mantenerlo independiente. Voy a pedir que inserte ese elemento enlazado y voy a pedir que lo inserte dentro de la etiqueta. Me va a devolver un SRC, voy a seleccionar "Banner" de nombre, me va a servir para seleccionar donde quiero guardar esta imagen. Entonces voy a ponerle "Banner logo", por ejemplo. Tengo un botón de Desvincular archivo que serviría para que además se perdiera la relación directa con ese archivo. Esto sirve para que después, si se hacen modificaciones sobre el archivo, se vean esas modificaciones actualizadas dentro de nuestros archivos vínculados. Por otro lado, puedo elegir el formato en que quiero que se genere esa imagen, o sea, en realidad estoy utilizando los recursos de exportación de Photoshop, pero directamente dentro de Dreamweaver. Y por último puede elegir el tamaño máximo en que quiero que se vea 600, 500, lo que yo quiera. Por ejemplo, puedo decirle que quiero que aparezca a 500 pílxeles de ancho como máximo, de hecho, en vez de logo, voy a poner aquí "Peq". Pulso en aceptar y me ha generado esta imagen, aquí lo vemos. Tiene un ícono distinto al resto de las imágenes, aquí yo la selecciono y no aparece nada, y aquí la selecciono y aparece esta pequeña nube que sirve para que me vuelva a abrir otra vez este mismo panel y me la remuestree, es decir, que vuelva otra vez a generar esa imagen, pero por ejemplo, en vez de 500, ahora le voy a pedir que la crée a 400, acepto y me sustituye esa imagen y me la cambia, y así puedo ir jugando con ella hasta que encuentre el tamaño que me interesa realmente para esa imagen. El hecho de que no esté cambiando esta imagen de tamaño simplemente porque esa imagen en realidad, como siempre debería ser, tiene controlado su tamaño respecto al ancho. Tiene un 70 % respecto a la pantalla, pero claro, tiene un ancho máximo de 600 píxeles, si yo se los sustituyo y le pongo esos 500 píxeles, pues entonces me la va a dejar al tamaño correcto y perfecto para que se vea bien. Así que hay que tener cuidado porque una cosa es el tamaño que tiene la imagen y otra cosa es el tamaño en el que se ve, que viene controlado desde el HTML y desde el CSS. Como vemos, es muy práctica la utilización de estas bibliotecas CC. Pero no es la única forma de trabajar con imágenes. Dentro de Info, aquí, un segundo archivo en el que de momento solo tengo un poco de contenido, también puedo añadir una imagen. Puedo irme aquí a la parte de abajo, y aquí añadir una etiqueta P para englobar todo este texto y añadir una imagen sobre la que de momento no voy a poner el atributo SRC. Si ahora selecciono esta imagen, aquí la tengo, puedo irme, por ejemplo, al panel de propiedades y desde el panel de propiedades podría seleccionar de donde quiero sacar esa imagen. Puedo hacerlo desde cualquier otra parte, simplemente por variar. Y puedo seleccionar una archivo PSD, esto es muy interesante. Yo selecciono ese archivo PSD y entonces me va a abrir un segundo panel en el que me permite optimizar esa imagen, elegir el formato de nuevo, elegir la calidad en la que quiero que lo genere, y de hecho, tengo diferentes ajustes predeterminados, si lo prefiero para diferentes tipos de imagen. Cuando pulso en aceptar, me genera esa imagen y además me pregunta donde quiero guardar esa imagen. Selecciono la carpeta de imagenes y lo guardo con su nombre. Vemos que en este caso no he elegido el tamaño de la imagen, simplemente me ha guardado una imagen remuestreada como yo quiero. Pero, esta forma de añadir la imagen tiene un problema, y es que no me ha permitido elegir el tamaño y no me ha remuestreado a un tamaño concreto, sino que simplemente se ha limitado a añadir la imagen a su gusto, así que no es la forma ideal de añadir esa imagen. La forma ideal va a ser siempre utilizar el sistema habitual de inserción, quiero decir, el pasar la fotografía a una biblioteca dentro de las bibliotecas de la Creative Cloud, y a partir de aquí, hacerlo. Para ello, tendré que irme a Photoshop, dentro de Photoshop, abrir este archivo, abrir la biblioteca de Creative Cloud, añadir esta imagen como gráfico dentro de la vista en vivo añadir esa imagen donde yo quiera, luego ya la recolocaré donde parezca bien, eso es lo de menos, y aquí pedir que me la remuestree como una imagen JPG, en vez de ese tamaño enorme, voy a pedir que me ponga solmanete a 400 píxeles o máximo, pulsaría en aceptar y ya me ha añadido esa imagen y la tengo disponible. ¿Qué me queda? Bueno, pues pinchar y arrastrar para colocar esa imagen en el punto de inserción en concreto que me interesa.

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.