Cómo crear HTML CSS desde Photoshop

Photoshop es una aplicación de diseño gráfico y edición de fotos desarrollado por Adobe. Es el líder del mercado en software de edición de imágenes digitales. Sus capacidades incluyen la capacidad de crear y manipular gráficos para la impresión y el uso de la web. También incluye muchas características para ayudar a los usuarios en el diseño de sitios web y la codificación. No sólo pueden las imágenes optimizar el software para uso de la web, sino que también pueden generar hojas de estilo en cascada y el HTML necesario para incluir gráficos en páginas web.

Instrucciones

1 Crear su imagen. Cuando haya terminado, utilice la herramienta "rebanada" de Photoshop para dividir la imagen en secciones. Utilice la herramienta "Selección de sección" para cambiar el nombre de cada sección con nombres que corresponden a la organización de su sitio. Por ejemplo, si su imagen incluye botones de navegación del sitio, secciones de nombres en esa área "nav". Estas secciones se corresponderán con las etiquetas "div" en el código CSS.

2 En la barra de menús, haga clic en "Archivo" y luego elegir "Guardar para Web y dispositivos." Seleccione "2-Up" o "4-Up" de las pestañas de abajo del área de la imagen para una selección de vistas previas. Elija las opciones que desee para su imagen en la sección "preset". Seleccione la vista previa de la imagen que mejor se ajuste a sus especificaciones visuales. Clic en Guardar."

3 Escriba el nombre del archivo en el campo "Nombre de archivo". Seleccione "HTML e imágenes" en el campo "Guardar como tipo". Seleccione "Otros" en el campo Configuración. aparecerá un cuadro de diálogo "Configuración de salida". En la configuración desplegable selecciona "Custom". Seleccione el botón "Siguiente" hasta que vea la sección de "salida de sectores". Seleccione el botón "Generar CSS".

4 Elija el formato de salida de la CSS en el menú de Referencia. Para una hoja de estilo externa, seleccione "Por ID" o "Por la Clase". Su CSS se organizará por cualquier elemento de su elección. Si desea que su CSS para estar en línea (incluido en la parte superior de la página HTML) seleccione "en línea".

5 Selección completa otras opciones en Ajustes de salida. Cuando haya terminado, haga clic en "Aceptar". En el campo Rebanadas seleccionar qué sectores que desea ser incluido en la salida de CSS. Asegúrese de que haya desplazado hasta el lugar donde desea que el archivo que se encuentra en el "Guardar optimizada como" zona de gestor de archivos. Clic en Guardar."

6 Abra el archivo HTML que acaba de crear en su programa de edición de HTML. Su código HTML, completa con CSS, será donde lo haya guardado en su ordenador y listo para cualquiera insertar en una página web se crea o como una página web independiente. Modificar el código, si es necesario, a su gusto.

7 Abra el archivo en el navegador web de su elección para ver el archivo para comprobar si hay cualquier problema y para asegurarse de que coincide con la imagen que ha creado en Photoshop.