Hay una gran cantidad de plantillas de sitios web en la web, pero tienen un inconveniente: no son únicas. Si el propietario del sitio no desea que el diseño de su sitio se repita en otro lugar, puede solicitar una plantilla a un diseñador profesional o intentar crearla por su cuenta.
Es necesario
Programa de Adobe Photoshop
Instrucciones
Paso 1
Crear su propia plantilla no es una tarea tan difícil como podría parecer a primera vista. Para trabajar, necesita Adobe Photoshop; por supuesto, debe tener al menos un conocimiento básico de cómo trabajar con él. Pero antes de iniciar el programa y comenzar a crear, debe pensar en el diseño futuro con anticipación. La forma más conveniente de hacer esto es familiarizarse primero con al menos un centenar de plantillas listas para usar, evaluar sus ventajas y desventajas. Preste atención a las soluciones exitosas de ciertos elementos de diseño. Esto no significa que los copiará, pero es bastante razonable tomar como base algunas soluciones hermosas y convenientes.
Paso 2
Con base en el análisis de las plantillas de otras personas y su propia creatividad, debe tener una idea de cómo se verá su sitio. Es mejor hacer bocetos aproximados del diseño futuro con lápices de colores en hojas A4 ordinarias. Debe comenzar a trabajar con Photoshop solo después de tener una idea clara de qué es exactamente lo que va a dibujar.
Paso 3
Inicie Photoshop, cree un nuevo proyecto de 1200x1600, establezca un fondo transparente. Encienda la herramienta Regla, si aún no está encendida, para hacer esto presione la combinación de teclas Ctrl + R. Habilitar ajuste: Ver - Ajuste.
Paso 4
Ahora necesitamos dividir la plantilla con guías que mostrarán los bordes de sus elementos: lados, columnas, etc. Por ejemplo, desea dividir la plantilla de modo que haya una columna estrecha a la izquierda, una columna ancha a la derecha a la derecha de la plantilla y haya espacio en la parte superior para un encabezado. Esto significa que necesita tres líneas verticales (el borde izquierdo de la plantilla, el derecho y la línea entre ellas) y una horizontal, que muestre el borde inferior del encabezado. Para establecer una línea vertical, mueva el cursor a la regla izquierda en el lado izquierdo, presione V y, mientras mantiene presionada la tecla, arrastre la línea a la ubicación deseada. Haz lo mismo con las otras dos líneas verticales. Los horizontales se construyen de la misma manera, solo se usa la regla superior.
Paso 5
Busque un fondo para su plantilla, debe ser un patrón pequeño y repetido. Ábrelo en Photoshop, selecciona, copia. Luego, péguela en la plantilla tantas veces como necesite para rellenarla con el fondo. Pegar se hace así: "Editar" - "Pegar", y luego arrastre el área de fondo a la ubicación deseada. Es incluso más rápido insertar una imagen usando el comando Ctrl + V. Agregue un fondo para el encabezado del sitio de la misma manera. Puede utilizar varios rellenos degradados para crear un fondo.
Paso 6
Con la herramienta Lápiz, dibuje los bordes de la plantilla, centrándose en las líneas ya dibujadas (es decir, encima de ellas). Ha recibido la base de la plantilla más simple, ahora debe complementarla con los detalles necesarios: botones de navegación, líneas de menú, varios elementos de decoración, etc. Para obtener más información sobre cómo crear botones y otros elementos, lea los artículos correspondientes sobre cómo trabajar con Adobe Photoshop.
Paso 7
Se crea la plantilla, ahora debe cortarla en pedazos para insertarlos en la página html. Utilice la herramienta Cortar para cortar. Para encontrarlo, haga clic con el botón derecho en la herramienta Marco y elija Recortar en el menú que se abre. Ahora puede anidar la plantilla como desee y luego guardar: "Archivo" - "Guardar para Web". En la ventana que se abre, seleccione el tipo de archivo: HTML e imágenes, especifique el nombre del archivo: index.htm y guárdelo. Tendrá un archivo index.htm y una carpeta de imágenes con imágenes cortadas.
