Quiero hacer una web: cortando el diseño

por , el 12 de Octubre de 2012, Internet

Bueno, aqui les presento la segunda parte del procedimiento sobre cómo hacer un sitio . Este artículo está escrito asumiendo que ya tienes tu buen diseño armado en Adobe Photoshop y ahora tienes ganas de mostrarselo al mundo y que todos puedan navegar por él.

Entonces...lo primero que hay que hacer cuando cortamos un diseño es abrir el PSD donde tenemos nuestro hermoso diseño. La herramienta que vamos a utilizar para cortar el diseño es SLICE TOOL.

 

 

Con esta herramienta entonces vamos a empezar a cortar por los bordes de las imagenes que queremos ir recortando (logo, fondos, imagenes, etc.). Hay que tener en cuenta un par de cosas...si queremos guardar solo el fondo sin nada por delante de él, entonces tendriamos que dejar visible SOLO la capa del fondo. Para poder hacer esto, podemos presionar ALT y manteniendo la tecla apretada, hacemos click sobre el ojito que nos permite ocultar o mostrar una capa (a la derecha del nombre de la capa, en el listado de las capas). Al presionar ALT mientras hacemos esto, se mostrará sólo la capa que hemos seleccionado, y de esta forma podemos guardar el slice sin que nada salga por encima. Si por el contrario, son más las capas que tenemos que dejar visibles que las que tenemos que ocultar, entonces sólo ocultamos la capa presionando el mismo ojito pero sin presionar la tecla alt.

Una vez que tenemos todos los slices hechos, vamos a File -> Save for web & devices (en castellano sería Archivo -> Guardar para web y dispositivos...). Adentro tenemos una pantalla como la que se muestra a continuación.

Alli tendremos la opción de seleccionar los slices que queremos guardar y elegir el formato, optimizándolo para que pese lo menos posible. Cuando presionamos Save o Guardar, alli podremos colocar el nombre del archivo y si son muchos archivos los que has seleccionado, entonces te creará una secuencia con el nombre + el numero que le corresponda al slice, por ejemplo: mi_imagen_03.gif, mi_imagen_04.gif, etc. Recuerda abajo del campo donde va el nombre, que hay unas opciones. Fijate donde dice "All slices" o "Selected slices". Siempre te recomiendo que uses el "Selected slices".

Una vez que ya tenemos todos nuestros slices, todos nuestros fondos y todo lo del diseño cortado en imagenes...ya podemos pasar al siguiente paso: el armado. Pero eso es otro cantar, y para eso ya estaremos necesitando otro software, y conocimientos de html y CSS. El software que ya deberían estar pensando en descargar: Adobe Dreamweaver.En el próximo artículo nos adentraremos allí.

Muchas gracias por leer!

Juan Manuel Bosi
Diseñador

Tags: , , , ,

  • Te gusta este artículo?
  • 2
  • 0

Artículos relacionados

Opiniones sobre este artículo

No hay comentarios

Tu opinión sobre este artículo

  • Título de tu opinión
  • Tu opinión:
  • Por favor, introduce tus datos para poder enviar el comentario.