Diseño de un sitio web para fans paso a paso

Esta publicación ha estado gestándose y preparándose desde hace mucho tiempo. Inicialmente, debía salir como continuación de una serie de artículos "Creación de un fan-site" (uno y dos). ¿Qué hace entonces este artículo en el blog de Fable 3? La respuesta es sencilla: en el caso del diseño, sin un ejemplo específico, es difícil explicar algo. No existe un diseño esférico en el vacío. Por lo tanto, cuando hace un tiempo decidimos reiniciar uno de nuestros fan-sitios dedicados a la serie de juegos Fable, pensé que este sería el ejemplo con el que podría "compartir mis conocimientos".

En realidad, no pretendo revelar el gran misterio del universo ni enseñar a crear un diseño único para su fan-site con un solo artículo. El tema del diseño es vasto y multifacético, como para que un diseñador pueda abarcarlo completamente con solo una obra... También quiero aclarar desde el principio, que esto no es una clase de Photoshop. Hay muchas disponibles sin mí, Google te ayudará. Como autor, asumo que ya estás familiarizado con los fundamentos de Photoshop, así que no esperes instrucciones paso a paso como "haz clic aquí" o "ve allá". No es una lección de Photoshop, es un taller sobre creación de diseño. Te contaré cómo trabajo, compartiré algunos trucos y secretos que en realidad no son secretos, pero que a menudo se olvidan. ¡Comencemos :)

Preparando el caballete y el lienzo

En nuestro caso, el caballete será, como ya has podido adivinar, Photoshop CS4, y el lienzo nuestro archivo nuevo, aún vacío. Además de "fotomontajes", hay otros programas, como Gimp. Algunos logran trabajar en Corel Draw. Pero de todas formas, la humanidad aún no ha inventado un programa mejor que Photoshop para diseño web. Esta es la herramienta principal del diseñador web. Corel Draw o Adobe Illustrator pueden usarse para crear elementos separados de tu diseño, pero "montar" el diseño en Photoshop es lo más conveniente.

Una vez que aclaramos el "caballete", es hora del lienzo. Aquí es importante recordar las resoluciones de pantalla. Hace cinco años, la resolución de 1024x768 reinaba en todas partes, y 1280x960 apenas comenzaba a ganar terreno. Un par de años atrás, 1680x1050 y 1600x1200 se consideraban grandes resoluciones. Hoy en día, los monitores con resolución Full HD predeterminada se están convirtiendo en la norma, es decir, deberíamos orientarnos hacia una resolución máxima de 1920x1080. Sin embargo, 1024x768 todavía no se apresura a retirarse, así que esa es nuestra línea base. De hecho, el ancho es lo realmente importante porque, en términos de altura, nuestro sitio será muy largo, como el 90% de todos los sitios en la red.

Antes era moda crear sitios "expandibles". Es decir, los elementos de diseño consistían en elementos repetidos, lo que permitía que el sitio se expandiera en ancho según la resolución del usuario. Pero con la llegada del Full HD, este método de ajuste de sitio a la resolución del usuario se volvió poco estético. El ojo humano está diseñado de tal manera que la información a una distancia de un brazo se percibe bien con un ancho aproximadamente igual al de una hoja A4. Todo lo que esté más allá de eso ya no está en foco. Por lo tanto, en los últimos tiempos, se ha vuelto común hacer la parte de contenido estrecha y llenar el espacio restante a la izquierda y a la derecha con algún tipo de decoración de fondo. Así, tanto las ovejas están satisfechas como los lobos están a salvo :) Entonces, la parte de contenido será de 1000 píxeles (no olvides que en el navegador hay una barra de desplazamiento a la derecha que "se come" esos 24 píxeles de 1024). Por lo tanto, nuestra área para los "márgenes" con decoraciones de fondo será (1920-1000)/2=460 píxeles a la izquierda y a la derecha. Para no salir accidentalmente de esta área, utilizo guías. En el modo de reglas activadas, simplemente arrastro el cursor y "coloco" las guías en los lugares deseados. También puedo marcar el centro de nuestro lienzo. Además, ya marqué aproximadamente en altura el lugar que reservaré para el encabezado del sitio, que se moverá en el futuro, pero me hice la "marcación". Todo, el trabajo preliminar está terminado. Pasamos a la preparación :)

Preparación preliminar completada

Buscando inspiración

Esta etapa es la más simple y la más complicada al mismo tiempo. Tendrás que recopilar material del cual vamos a moldear nuestro diseño. Si eres un artista profesional, por supuesto que puedes dibujar todos los arte y elementos de interfaz necesarios por tu cuenta o encargárselo a tu equipo... Por otro lado, en ese caso, ¿qué haces tú, Artemiy Tatyana Andreevich, en este artículo? :) Este es un artículo para principiantes. Necesitaremos arte temático y elementos para nuestra interfaz o, al menos, de los que podamos hacer estos elementos. Probablemente, la primera vez no reunirás todo lo necesario para tu trabajo, así que tendrás que volver a buscar arte e inspiración más de una vez. Normalmente empiezo buscando en el sitio oficial, luego me muevo a los grandes fan-sitios, si los hay. Después de eso, cambio a la búsqueda de imágenes de Google y Yandex. Y precisamente con ambos motores de búsqueda, ya que los resultados son muy diferentes. Donde uno falla, el otro puede encontrar toneladas de material. Es bueno si hay mucho arte, si hay grandes capturas de pantalla de la interfaz del juego, si el desarrollador lanza muchos fondos... pero en la mayoría de los casos, te faltará algo, aunque sea un poco.

Como resultado de mis búsquedas, encontré bastante arte sobre Fable y no solo, de diferentes partes del juego. Pero en lo que respecta a la tercera parte, hay muy pocos arte bonitos. Pero recolecta todo: fondos, conceptos, capturas de pantalla... Nunca sabes qué te podrá servir. No te abrumaré con la colección completa de material encontrado. En el spoiler, encontrarás los elementos que en última instancia sirvieron como base para el diseño.

Este marco fue finalmente desglosado en un montón de elementos de interfaz separados


El primer arte decente encontrado de la tercera parte

Y este es el segundo arte. Eso es todo, no encontré más nada en el estilo necesario

Este arte fue inmediatamente utilizado como fondo. No es perfecto, pero no encontré algo mejor.

El arte de la segunda parte fue útil ya al final del trabajo

¿Cómo podría faltar el logo?

Comenzando a trabajar

Ahora sí, es momento de comenzar a trabajar. Te sugiero un pequeño truco: guardo regularmente los resultados del trabajo bajo un nuevo nombre siguiendo el historial de versiones. Por defecto, el primer resultado es la versión 0_1, luego vienen 0_2, 0_3, etc. La versión 1_0 se alcanza cuando crees que has hecho todo lo que querías y puedes comenzar a mostrar el trabajo a reseñadores/amigos/clientes. Lo más probable es que el diseño requiera ajustes. Entonces aparecerán las versiones 1_1, 1_2, etc. Esto es útil para rastrear tu propio progreso, y también para que, en caso de necesidad, puedas volver a ideas de versiones anteriores o tomar de allí cualquier elemento que hayas eliminado o cambiado hasta el punto de no reconocerse.

Y otro consejo, en Photoshop, todos tus elementos se almacenan en capas separadas. No te molestes en darles nombres significativos de inmediato, y agrupa las capas de un elemento determinado usando ctrl+b. Cuando tu archivo acumula más de 100 capas, se vuelve extremadamente difícil de navegar sin anotaciones y agrupamientos.

Pero basta de charla, es hora de ver el primer resultado. Aunque esto ni siquiera es el primero, es casi nulo:

En esta etapa, se ha delimitado la zona de contenido, y los arte han quedado colocados aproximadamente en los lugares donde podrían estar. Por todas partes ya se pueden ver elementos visibles y no visibles que más adelante deberán integrarse en el diseño. O no integrarse. Sigamos adelante. En esta etapa, de hecho, se realizaron dos trabajos técnicos importantes. Se recortó con mucho cuidado al personaje de fondo, y el marco se descompuso en partes pequeñas.

Para el recorte, generalmente utilizo no la goma, sino máscaras de capa. Pintar en negro oculta áreas que necesitan ser recortadas, y en blanco se dejan las partes visibles. Tonos de gris representan áreas de semitransparencia. Gracias a esto, si borro algo innecesario, se puede volver a colocar fácilmente. Guardé al personaje recortado en máxima resolución por separado para que no se perdiera.

El marco se descompuso en partes cortando pequeños pedazos y convirtiéndolos en texturas. Las esquinas son reflejos de la esquina superior izquierda tres veces. Así logré simetría.

Inicialmente, el diseño estaba planeado para ser algo sombrío, similar a nuestros dos primeros artes principales. Con suaves brochas y varios modos de fusión logré convertir la imagen de fondo bastante colorida en un lienzo bastante oscuro. Intenté representar la parte de contenido como un pergamino plegado en tres, que debía estar enmarcado por el conocido marco dorado. La corona, como uno de los elementos clave, continuó presente en el diseño. Empecé a buscar lentamente una fuente para el menú.

Con las fuentes cirílicas bonitas hay una pequeña tensión. Porque, como regla general, simplemente no existen. Es decir, existen letras en inglés, pero no en ruso. O por la versión rusa piden precios elevados, o la versión rusa hecha por artesanos no está bien hecha y es horrible. O está bien, pero la fuente es ilegible :) La fuente en la imagen se llama bonzai. Si alguien lo necesita, avísenme. Compartiré. Sigamos adelante.

Después de algunos sufrimientos, comencé a delinear un algo razonable. Se hizo la primera versión del menú principal (luego cambiará, pero la plantilla nos será útil más de una vez). Los observadores pueden notar que la parte izquierda y derecha de este menú son nuestra corona combinada con una espiral del marco. No temas combinar diferentes elementos de interfaz. Ellos a menudo dan un resultado inesperado pero agradable. Además, se cambió el concepto de la parte principal de contenido. Intenté representar algo como una capa real, pero no me gustó para nada el resultado. Así que tomé la decisión de cambiar el concepto.

Esto aún no es una nueva iteración, es, esencialmente, solo una prueba de lo que se vería en una variante clara y sin "capa". - Definitivamente se ve mejor, pero hay que seguir pensando. Por cierto, los elementos en la parte superior izquierda son "letras" de la fuente fleur. Una excelente cosa para crear elementos de interfaz. Un montón de espirales y flores en un solo frasco.

Y aquí algo nuevo. Estuve experimentando con la ubicación de nuestro héroe en el encabezado del sitio, pero lo principal no es eso. Rechacé el menú horizontal y traté de hacer uno vertical. ¿Por qué no? Se ve totalmente bien. Y el menú central se trasladó al pie de página.

Otra iteración intermedia en la que comparaba el menú horizontal y vertical, pensando en hacer que los bloques laterales se expandieran al hacer clic.

Este es el famoso caso en el que necesitarás las versiones anteriores guardadas. El diseño se fue por un camino completamente diferente. El pergamino a todo lo ancho del contenido con el marco en el medio y los marcos reducidos para los bloques laterales se ve horrible. Rechacé esta opción, volví un paso atrás y tomé un camino diferente.

¡Y aquí está el momento de la verdad! Regresando un paso atrás, trabajé con nuestros elementos, y al final obtuve un diseño que está bastante cerca de lo final. Todos los elementos principales están reunidos y en su lugar: el menú principal, los bloques laterales, el contenido, el encabezado y el pie de página. Si miras de cerca, notarás que algo de la iteración anterior fallida me fue útil después de todo. La maquetación del texto fue tomada al azar de un sitio de Dragon Age, solo para estimar la distribución del texto. La fuente principal utilizada fue Palatino Linotype. Es una bonita fuente estándar, lo cual es muy importante. En este caso, tu sitio se mostrará sin problemas a todos los usuarios de Windows, con certeza. Hay formas, claro, de usar fuentes personalizadas que se carguen en la caché del usuario, pero eso consume tráfico adicional y problemas de visualización de fuentes en diferentes navegadores. No recomiendo obsesionarse con eso. En internet hay una excelente tabla de fuentes estándares de Windows. Yo la uso, y te la recomiendo. Y en el encabezado, se pueden y se deben usar fuentes decorativas. Para el nombre del sitio, ya en esta etapa encontré una impresionante fuente llamada Algerius Caps. ¡Siente la diferencia con lo que había!

Una etapa bastante interesante, que demuestra claramente que incluso en un diseño casi terminado siempre se puede mejorar algo. En primer lugar, finalmente rechacé el menú inferior y lo convertí en pie de página. ¿Recuerdas, dije que el menú horizontal aún sería útil? - Resultó ser útil. El diseño fue limpio de elementos innecesarios para que no entorpecieran el diseño. Pero lo más importante es que se encontró un lugar final para la corona en el diseño. ¡Fuera la espada de la vaina! Tomamos uno de nuestros artes y recortamos la mano con la espada y la corona. La labor de ocualización del logo que colgaba sobre el guante fue simplemente magistral. Este es el caso en que un aumento de más de 1000% no es nada malo. También comencé a trabajar con la corrección de color de nuestro fondo. Era demasiado amarillo-verde. Lo atenué. Para esto normalmente uso una capa adicional, llenándola con el color necesario y configurando su modo a soft light (luz suave), pero según sea necesario, se pueden probar otros modos de fusión. En este caso, la gamma se corrigió con una capa azul.

Seguí afinando el diseño. Ajusté la ubicación del arte en el fondo, nuevamente ajusté su gama de color. Elimino casi toda la basura restante de la limpieza previa, solo una espiral se me escapó. Pero también noté que el nombre del sitio se veía apagado contra el fondo del cielo. Por lo tanto, arreglé el estilo y lo hice contrastante con el fondo, pero aun así utilizando los colores principales del sitio.

tramo final

¡Paarrram! Aquí está la versión 1_0. En realidad no es la final, pero en esta etapa decidí mostrar el diseño a mis amigos y escuchar sus críticas. Aquí ya no hay basura, una vez más se trabajó el color del fondo. Pero lo que es aún más importante, se agregó un menú con búsqueda y botones de redes sociales. Inicialmente, solo funcionará RSS, pero pronto se abrirán Twitter, canal de YouTube y página en Facebook.

La primera observación importante es que a nuestro héroe le falta compañía en el encabezado del sitio. Necesita compañía. Desafortunadamente, no se encontraron bellos artes femeninos para la tercera parte, pero el arte de una gitana de la segunda parte vino al rescate. Y va bien. El sitio, después de todo, no es solo sobre la tercera parte. A cambio de la chica, nuestro héroe tuvo que dejar su pistola, que se volvió claramente innecesaria.

Pero eso no es todo, llegó otra ronda de comentarios. El sitio resultó ser demasiado dorado, y el marco dorado del bloque central de contenido ocupaba demasiado espacio. Bueno, atenué el tono usando efectos de capa y reduje el marco. Las cadenas, que pesaban el diseño y complicaban el maquetado, también fueron eliminadas. Ha llegado el momento de la verdad. Versión final:

www.Fable-game.ru

Epílogo

En realidad, todavía nos esperaba el maquetado, que también introdujo sus pequeños ajustes. Por ejemplo, la ubicación del fondo y de los héroes en relación a él. También hubo ajustes de estilos, búsqueda de errores y fallos. Pero eso ya es una cuestión técnica. Lo más complicado ya ha pasado. Cuando llegues a esta etapa, puedes relajarte, elogiarte y agregar tu nuevo trabajo a tu portafolio. Y luego ponerte a llenar y seguir llenando el sitio con materiales, pensando en la estructura óptima... pero esa es otra historia completamente :)

Sinceramente espero que mi "relato con imágenes y sobre imágenes" te haya gustado y, lo más importante, que te ayude a crear tus propios diseños bellos, únicos y sorprendentes para tus sitios. Espero tus preguntas, sugerencias o comentarios en los comentarios.

*El autor del diseño y el texto soy yo, Ksandr\_Warfire

Material preparado especialmente para GAMER.ru