Esta es la segunda entrega del tutorial que te muestra como diseñar y codificar una página web desde cero. En esta segunda parte mostraré el proceso de selección y creación de las imágenes que se convertirán en parte de nuestra página ya que no todo lo que hicimos en Photoshop pasará a fomar parte de la misma, asi que si ya conoces este proceso puedes pasar direcatamente a la Parte 3.

Paso 1

En nuestro tutorial anterior diseñamos nuestra página web en Photoshop, ahora vamos a usar la Herramienta Sector para recortar cada parte del sitio que necesitemos lo cual será nada mas algunas imágenes, no todo lo que hicimos en Photoshop se convertirá en parte de la página. Puedes descargar el Archivo PSD del tutorial anterior.

Como podrás apreciar en la imagen superior se notan áreas donde el borde azúl es solido y en la esquina superior izquierda unos pequeños rectangulos de color azul, a eso se le llama sector y fuerón creados con la Herramienta Sector, cuando usas esta herramienta se crean automáticamente otros sectores que son los de borde punteado.

Paso 2

Luego de haber creado los sectores deberás renombrarlos para que así los puedas reconocer más facilmente, así al sector que rodea el logo le denominaremos logo, al iPhone pues iphone y así sucesivamente, para hacerlo solo debes tomar la Herramienta Seleccionar Sector y dar doble clic sobre cada sector que necesitemos los cuales son:

- El Logo.
- iPhone.
- Texto: iPhone Stuff, Does not matter what you want, we have it!. en un solo sector.
- La Canasta y el texto Go Now, en un solo sector.
- How we are?.
- What we do?.
- Suggestions?.
- Circulo del botón de busqueda, desactiva la capa que dice GO y guarda solamente el circulo.

Puedes nombrarlas como mejor te parezca siempre y cuando logrés identificarlas fácilmente.

Paso 3

Con todos los sectores (8 en total) listos y con su respectivo nombre vamos a guardar las Imagenes para la web, pero primero vamos a descativar la capa del fondo y de las brushes grunge además la del rectangulo que cruza toda la página web.

Luego ve a Archivo | Guardar par la web y dispositivos.. luego deberás seleccionar cada uno de los 8 sectores y a cada uno aplicar lo siguiente en las opciones de guardado.

Cuando todas los sectores tengan la propiedad PNG-24 da clic en guardar y en la opción Tipo selecciona Solo Imágenes (PNG) y en la opción Sectores selecciona Todos los sectores de Usuario.

Ahora solo resta guardar las imágenes en una carpeta especial, solo para la página web, puedes crear una en el escritorio para guardarlas allí, Photoshop creará además una carpeta llamada imágenes o images dependiendo del idioma de tu aplicación, te recomiendo que uses el último nombre.

Palabras Finales

Este tutorial es parte importante del siguiente tutorial donde por fin veremos código CSS y HTML.