Cómo usar photoshop para hacer un sitio web

Hay muchas maneras de crear sitios web y Photoshop es uno de ellos.

pasos

Imagen titulada Uso de Photoshop para el diseño de un sitio web Paso 1
1
Descargar e instalar Photoshop.
  • Imagen titulada Uso de Photoshop para el diseño de un sitio web Paso 2
    2
    Abrir Photoshop en su ordenador y crear un nuevo documento, ajustar la altura y la anchura de acuerdo a su preferencia (ancho normal está entre 800px y 900px y 1200px 1500px y altura entre).
  • Imagen titulada Uso de Photoshop para el diseño de un sitio web Paso 3
    3
    Crear un encabezado para el sitio (una imagen, o creado por usted) con su logo corporativo a ella.
  • Imagen titulada Uso de Photoshop para el diseño de un sitio web Paso 4
    4
    Crear botones de menú del sitio (conjunto de formularios y el color, el espacio entre ellos, será un menú superior, inferior, izquierdo o derecho).


  • Imagen titulada Uso de Photoshop para el diseño de un sitio web Paso 5
    5
    Crear el área de contenido, pie de página, un lugar para poner las banderas, una galería de fotos y así sucesivamente, hasta que el diseño general del sitio.
  • Imagen titulada Uso de Photoshop para el diseño de un sitio web Paso 6
    6
    Ahora, la parte difícil en Photoshop: cortar y exportar el sitio terminado, nombrando a todas las partes antes de exportarlos (por ejemplo, revisar el área de encabezado con la herramienta de corte y el nombre "encabezamiento", Seleccione el área del botón Inicio con el nombre "Página de inicio" y así sucesivamente para cada parte separada de la página web).


  • Imagen titulada Uso de Photoshop para el diseño de un sitio web Paso 7
    7
    Es aconsejable dejar el área de contenido vacío, ya que ahora se está guardando al igual que partes de las imágenes y el texto será como uno de ellos. Cuando está vacío, puede agregar el contenido de cada página por separado.
  • Imagen titulada Uso de Photoshop para el diseño de un sitio web Paso 8
    8
    Exportar a un nuevo archivo en el escritorio. La exportación creará una página web en HTML (la página no se ha centrado y sin contenido), un archivo CSS y un archivo de imágenes con todos los diferentes cortes y las imágenes dentro de ella.
  • Imagen titulada Uso de Photoshop para el diseño de un sitio web Paso 9
    9


    Abra el archivo HTML con el Bloc de notas de OneNote o y hacer cambios a HTML (centralizar toda la página, configurar un color de fondo, poner el contenido en una tabla Div donde el contenido de la imagen, crear el destino de los datos para la palabras clave, contenidos, y así sucesivamente...).
  • Imagen titulada Uso de Photoshop para el diseño de un sitio web Paso 10
    10
    Copiar y pegar la misma página HTML de acuerdo con el número de páginas necesarias y luego les dan los nombres de las páginas (Inicio, Acerca de nosotros, Contacto, etc.).
  • Imagen titulada Uso de Photoshop para el diseño de un sitio web Paso 11
    11
    Crear enlaces internos a las páginas de los archivos en formato HTML (o hacerlo antes de crear más páginas para que no se mantiene repitiendo) donde se crea el código de la imagen por el botón Divs y por las direcciones de los enlaces.
  • Imagen titulada Uso de Photoshop para el diseño de un sitio web Paso 12
    12
    Cargar el sitio terminado donde se alojará.
  • consejos

    • Photoshop es fácil, basta con aprender bien para hacer un trabajo maravilloso.

    Vídeo: como diseñar una pagina web FLAT DESIGN en photoshop PARTE 1

    Vídeo: Cómo crear una Página Web desde Photoshop. PARTE 1: HTML

    Vídeo: CURSO BÁSICO DE DISEÑO WEB - De PSD a DW desde cero y sin saber código PARTE 1

    De esta manera? Compartir en redes sociales:


    Opiniones y Comentarios

    Artículos Relacionados