El ejemplo que da es una combinación de buen trabajo de Photoshop y capas, todo junto con una programación inteligente. Notarás cómo esto se une cuando te encuentras con colores / patrones, por ejemplo. Observe cómo los lugares que cambian cuando altera el estilo tienden a intercambiarse primero: un retraso en el algoritmo de intercambio / carga de imágenes:
Aquí hay una mirada aproximada a los posibles pasos a ejecutar:
Tenga en cuenta que puede haber otros métodos de ejecución, todos los cuales son parte del proceso creativo en este caso.
1. Diseñe el diseño del sitio
- ¿Por qué aprenderías desarrollo web con Bloc cuando podrías usar Free Code Camp?
- ¿Qué algoritmo usa Digg.com para enumerar las noticias en la página de inicio de acuerdo con diggs (votos)?
- ¿Cuáles son todos los lenguajes de desarrollo web ordenados de peor a mejor? (incluidos los lenguajes de script como php?
- Cómo mejorar mi lógica en la codificación
- ¿Cuáles son algunos buenos consejos y recomendaciones de alojamiento web para principiantes?
- piense en la idea, cree composiciones del sitio y resuelva la experiencia del usuario de cómo el sistema debe responder a las acciones del usuario.
2. Crear activos centrales
- En este caso, parece que las camisetas fueron creadas por un ilustrador utilizando un software como Adobe Illustrator (o en este caso, parece que se utilizó un software de diseño 3D). Esto es ideal porque le da mucha flexibilidad, particularmente alrededor de las “costuras”, aquí se altera el estilo.
- Divide ese arte en sus diversos componentes cambiables, creando imágenes centrales para todos los estilos variables que pretendes cambiar sobre la marcha (cuellos, puños, bolsillo, hombros, tapeta, botones). Tenga en cuenta que en este punto solo tiene un color de cada uno.
- Asegúrese de que sus gráficos se unan a la perfección. Ajustar en consecuencia. Puede tener sentido seguir adelante y completar la funcionalidad de intercambio del sitio web para que pueda probar esto (sin patrones).
3. Crear patrones
- Cree sus patrones como muestras repetibles con Adobe Photoshop o Adobe Illustrator.
- Uno por uno, aplique las 50 texturas a cada pieza personalizable. Sí, esta parte será agotadora. Simplifique esto creando trazados de recorte y un procedimiento general para aplicar las texturas. Sin lugar a dudas, esto requerirá algunos ajustes individuales. Alternativamente, si usó un software 3D durante el paso 2 anterior, puede simplificar la adición de textura (ya que el software 3D se encargará de la variación en la superficie).
- Una vez hecho esto, debe tener cientos de imágenes listas para usar.
4. Ponlo junto
- En el sitio web, se trata de establecer algunas posiciones e intercambiar imágenes dentro y fuera con un simple trabajo de guión. Si ha realizado el paso 2 con cierta precisión, y el paso 3 se ha realizado cuidadosamente, todo debería comenzar a caer juntos ante sus ojos.
- Pruebe todas las variaciones, observe las imperfecciones y ajuste los recursos de la imagen en consecuencia.
