Material design / Alzado en photoshop

Soy nuevo en el diseño de materiales y quiero comenzar un nuevo diseño en este estilo. Mi problema es que no sé cómo reproducir Elevación (eje z). En la imagen de abajo veo 12 niveles de elevación , pero ¿cómo crear estos niveles en Photoshop ?

Por cierto: sé que tengo que usar Drop Shadow en Photoshop , pero ¿qué valores configuro para cada nivel de Elevación ?

( Enlace al sitio web )ingrese la descripción de la imagen aquí

Tienes razón en que necesitas usar sombras paralelas. ¿Qué parte te cuesta hacer? Haría una captura de pantalla del nivel y haría una comparación lado a lado y simplemente jugaría con los valores. También puede encontrar los prefabricados en Internet buscando Creación de sombras de Material Design en Photoshop

Respuestas (1)

No puedo encontrar nada con respecto a las sombras de Android en los documentos de diseño de Google ahora, pero aparentemente hubo una vez una lista de los valores para Adobe Illustrator, pero parece que la han eliminado.

Hay muchos recursos que enumeran 5 niveles de sombra diferentes. Los documentos de diseño de Google enlazan con los documentos de Polymer que dicen:

Nota: La especificación de diseño de material describe las alturas z como especificadas en píxeles independientes de visualización (DIP). La implementación actual de <paper-shadow>no corresponde a la especificación en este sentido. Los valores z son valores arbitrarios que van de 0 (sin elevación) a 5 (elevación máxima) y no corresponden a los DIP.

ingrese la descripción de la imagen aquí

Sin embargo, esto es para el desarrollo web, por lo que no se aplica a las aplicaciones de Android.

Por lo que puedo ver, en Android, las sombras se crean automáticamente a partir de la elevación que estableces en un elemento.

Entonces, las únicas opciones que se me ocurren sin encontrar nada más específico son:

  1. Utilice z-profundidad 1 y z-profundidad 5 como valores para las elevaciones superior e inferior y extrapole los valores intermedios.

  2. Si está desarrollando la aplicación, o puede hacer que su desarrollador lo haga por usted. Cree rápidamente una pantalla en Android con tantos objetos como necesite configurados en las distintas elevaciones, tome una captura de pantalla y reproduzca la sombra en Photoshop con prueba y error y anote los valores para cada elevación.

Nota: No soy un desarrollador de Android, y nunca antes había usado o leído mucho sobre Material Design, esto es justo lo que pude encontrar leyendo los diversos documentos y buscando en Google.

Supuse que está trabajando en Android, ya que la página a la que se vinculó habla sobre la elevación en Android. Si está trabajando para la web, solo use los valores en la imagen que publiqué.
Estoy trabajando para el diseño web. ¿Dónde debo mirar?
En ese caso, buscar en Google 'Material Design Shadows Photoshop' trae muchas soluciones. El resultado superior incluso tiene un PSD: blog.omgmog.net/post/…