Como crear una pagina web con photoshop

Al crear el nuevo documento, se debe elegir las dimensiones en píxeles.

Las dimensiones reflejarán en la resolución que se presentará en el navegador. Por ejemplo, un ancho de 900px por una altura de 800px a una resolución de 72px/pulg.

 

Vamos a realizar un Landing Page para una Maestría en Maketing Digital.

Crearemos el diseño general, insertando  formas rectangulares para representar las Regiones para el encabezado, el pie, el  formulario y la zona central. Insertamos un rectángulo para el encabezado y ajustamos a los márgenes de la imagen. Vemos que se genera una capa para la figura insertada. Cambiamos el color de fondo, seleccionando las propiedades de la parte superior.   Hacemos doble clic para cambiar el nombre de la capa, le pondremos «Encabezado».

Duplicamos la capa para generar otro  rectángulo A esta nueva capa le pondremos de nombre «Pie» Movemos la capa para ubicarla en la parte inferior   Duplicamos el fondo para poder manejar sus propiedades como  la transparencia. Ocultamos el Fondo que está con bloqueo.

 

Con la varita mágica, seleccionamos el contenido del Fondo Copia y suprimimos

Cambiamos el color de fondo del encabezado, seleccionando previamente la capa.

Dibujamos un rectángulo con ángulos redondeados, para el formulario. Le ponemos color de fondo Blanco y el borde de color Azul con 1pt de grosor.

Le ponemos nombre a la capa «Formulario»

.

Insertamos la imagen principal en la region central. Arrastramos el archivo de imagen hacia Photoshop, en una nueva pestaña. La imagen se abrirá en una pestaña. en la capa bloqueada Fondo Duplicamos el Fondo para poder manejar sus propiedades. Cortamos la imagen para ocultar el logo que tiene en la parte superior.

 

Aplicamos. Y arrastramos la capa hacia nuestra pestaña (archivo) de trabajo. . Ajustamos la imagen en la posición deseada   Cambiamos los nombres de las capas Cambiamos la posición de las capas para dejar la imagen atrás de las demás capas   Duplicamos la Imagen para poder cubrir el lado izquiero de formulario   Se reordena las capas para ocultar una de otra.

 

Seleccionamos la capa Encabezado. Le aplicamos Estilo a la Capa, como Resplandor exterior y sombra paralela.   Estamos listos para insertar textos   Insertamos un mensaje en la parte superior para generar interés al usuario.

Le aplicamos formato necesario al texto. . Insertamos el Título del Landing Page Aplicamos las propiedades necesarias, como la alineación a la derecha… Tamaño de fuente, color, etc…   Aplicamos estilo a la capa, como sombra paralela y resplandor exterior   Insertamos la llamada a la acción, el mensaje de persuación para conseguir suscriptores Atentos…

Mensaje directo y lo más convincente posible   Aplicamos propiedades al texto. Diseñamos el formulario, insertamos texto y rectángulos que representarán cajas de texto Le ponemos nombres a las capas Duplicamos capas para modificar posición y contenido.

 

Al final de formulario creamos el botón Enviar. Insertando un Rectángulo redondeado, y ajustando sus propiedades y aplicando Estilos a la Capa   Insertamos el texto Enviar sobre el rectángulo Aplicamos las propiedades necesarias Seleccionamos ambas capas para aplicar alineación entre ellas.

Insertaremos un logo para identificar la Universidad Aplicamos efecto Resplandor interior Insertamos texto con el nombre de la universidad Aplicamos las propiedades necesarias . Insertamos un rectángulo redondeado para que, de fondo blanco y transparencia Ingresamos el texto de información complementaria al interesado Ordenamos el texto.

 

Separando cada párrafo en capas diferentes   Ingresamos las condiciones necesarias para participar en las Becas.

Insertaremos viñetas para la info adicional. Lo descargamos de la web y lo abrimos en una pestaña nueva . Insertamos a la pestaña de trabajo.

Lo arrastramos al Landing Page Duplicamos las viñetas y las ordenamos Guarmamos los cambios del proyecto.

 

Así de facil