El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Photoshop CC 2017 para diseñadores

CSS y SVG más integrado en Adobe Photoshop

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Con Photoshop ya se crean prototipos para dispositivos móviles, páginas web etc. por eso, en el proceso de integración con estas nuevas tecnologías, ya se pueden copiar los contenidos de nuestras capas tanto en formato de descripción CSS como en formato vectorial SVG.
04:42

Transcripción

Es de todos sabido que cada vez más nuestras creaciones van a compartirse a través de páginas web, dispositivos móviles. Sí que es cierto que esta la parte del diseño impreso y luego también tenemos la parte del diseño para pantalla. En este caso una página web viene marcada por el CSS que va a describir el contenido de los objetos que está mostrando tanto objeto como texto. Photoshop también se ha actualizado para trabajar con las nuevas tecnologías y con toda la parte de internet. Por ello quiero mostraros como vamos poder copiar diferentes contenidos de nuestros diseños con dos formatos que son de utilidad en internet. En este caso aquí tenemos por ejemplo este botón, este botón se encuentra dentro de la cabecera, en la parte de destacados y aquí estaría el botón. Podemos observar como mostramos u ocultamos ese botón entero. El botón está compuesto en este caso de un texto y del propio botón con una serie de características. Yo voy a poder seleccionar y copiar la descripción CSS de esa capa en concreto que tiene el texto. Si yo le digo copiar CSS voy a irme a un documento de Google doc y voy a decirle pegar. Control V. Aquí lo que tenemos es la clase y los diferentes parámetros que la componen para representar con las mismas características e incluso tipografía que yo tengo en Photoshop ese texto o cualquier otro texto dentro de mi diseño que le diera estas características. Vamos a hacer con Control A para borrar y voy a irme a la parte gráfica, en este caso tenemos aquí la parte gráfica voy a entrar dentro de la parte gráfica y voy a decirle que también copie el CSS. Voy a volverme en este caso al documento de Google y voy a pegar. Aquí tenemos la descripción de ese degradado con los cambios tonales y los cambios de color también para poder ser integrado dentro de la hoja de estilo CSS que represente o que muestre mi página web con unas características determinadas. Voy a borrarlo y vamos a ver que también vamos a tener la posibilidad aparte de copiar como CSS también vamos a poder determinados elementos guardarlos o incluso aquí es el caso copiarlos como SVG. El SVG es un sistema de descripción vectorial para gráficos, con este sistema nuestros gráficos ocupan mucho menos espacio, tienen carácter vectorial lo cual quiere decir que son re escalables dentro del interface que estemos trabajando y de esa manera se pueden representar en páginas web con muy poco peso. Voy a decir copiar el SVG, voy a ir otra vez al Google doc y voy a pegar lo que acabo de traer. Aquí podemos observar como todo esto es una etiqueta SVG que describe las características del botón. En ellas esta recogido los diferentes colores, las diferentes formas y los degradados que lo componen. Al igual que podemos copiar en vectorial un botón que por si es vectorial, los textos también los vamos a poder copiar en SVG, voy a volver al Google doc y voy a volver a pegar. Control V. Como podemos observar aquí también está dando una descripción de la fuente y la familia así como el propio texto que está escribiendo. De esta manera con esta etiqueta podemos describir ese elemento concreto que yo he copiado desde Photoshop. y de esta manera tan simple, cuando nosotros estamos prototipando y haciendo unos diseños para verse en páginas web da lo mismo que sea para páginas web que para aplicaciones de dispositivos móviles. La tecnología muchas veces está basada en aspectos muy parecidos por eso vamos a poder utilizar estos comandos para copiar y pegar estos elementos como CSS o SVG y poder utilizarlos para crear esos contenidos.

Photoshop CC 2017 para diseñadores

Emplea Photoshop CC 2017 desde la perspectiva de un diseñador, aprendiendo conceptos iniciales, procesos más avanzados y las herramientas imprescindibles para todo diseñador.

4:48 horas (57 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.