es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Cómo hacer deliciosas papas fritas Icon - Tutorial de Photoshop

¡Bienvenido a Hongkiat Baking & Culinary Arts Class! ¡Hoy vamos a enseñarle a hacer un icono de papas fritas visualmente delicioso con solo Photoshop!

Sí, aprenderás a crear un delicioso icono de papas fritas, principalmente con algunas creaciones de formas y estilos de capas, ¡bienvenido el panadero principiante! Este tutorial definitivamente te hará completo.

Empezando

Para seguir este tutorial, necesitarás el siguiente recurso:

  • Font Ballpark Weiner de Mickey Rossi
  • Fuente Recycle-It de Bartek Nowak

Icono de Papas a la francesa

Paso 1: Dibujar la papa

Activar herramienta de pluma. Dibuja la forma básica de la papa y establece su color en # e1cc7a. Tenga en cuenta que no utilizamos la herramienta rectangular, sino que utilizamos la herramienta Pluma para obtener una apariencia natural.

En el panel Capas, haga doble clic en la capa para abrir el cuadro de diálogo Estilo de capa. Agregue la siguiente superposición interna de sombreado y degradado.

Este es el resultado.

Paso 2

Dibuja el lado de la papa.

Agregue los siguientes estilos de capa.

Este es el resultado.

Paso 3

Finalmente, dibuja su parte superior.

Agregue los siguientes estilos de capa.

Tenemos una papas fritas ahora.

Etapa 4

Pon todas las capas en un grupo. Repita estos procesos para extraer más papas.

Paso 5: Cubo

Dibuja una forma de polígono rojo. Encima de él, agregue la ruta elíptica y establezca su modo en Restar.

Paso 6

Dibuja rayas con el color # a60101 y # ff0302.

Paso 7

Coloque rayas en la parte superior del cubo. Conviértalo en Máscara de recorte presionando Ctrl + Alt + G. Realice la transformación (Ctrl + T) y luego presione la tecla Ctrl y arrastre su esquina hasta que las rayas coincidan con la perspectiva del cubo.

Reducir la opacidad al 40%.

Paso 8

Haz una nueva capa encima del cubo. Pintar una mancha negra en la parte inferior del cubo. Convierta la capa en Máscara de recorte (Ctrl + Alt + G).

Paso 9

Repita el proceso anterior en la parte superior del cucharón.

Paso 10

Ctrl-clic en la capa del cubo frontal para hacer una nueva selección en función de su forma. Haz una nueva capa y llénalo de negro. Agregue ruido usando el filtro, Filtro> Ruido> Agregar ruido.

Cambie el modo de mezcla de capas a Pantalla y reduzca su Opacidad al 70%.

Paso 11

Duplique la forma de la capa del cubo frontal y colóquela sobre todas las capas. Reduce su relleno a 0%.

Agrega Inner Shadow con esta configuración.

Este es el resultado.

Paso 12

Dibuje una franja horizontal en el cubo. Duplicar la forma de la capa del cubo frontal. Seleccione ambas rutas y haga clic en Combinar. Ambas rutas se fusionarán en una sola ruta.

Paso 13

Haga clic en el icono Agregar capa de ajuste y seleccione Color sólido para convertir la ruta en una forma de capa. Seleccione # fedd19 para su color. Duplique la ruta y muévala unos pocos píxeles. Establezca su modo en Restar. Ahora, debes tener una franja horizontal amarilla en el cubo.

Agregue Gradient Overlay y Inner Glow.

Aquí está nuestro resultado.

Paso 14

Dibuja un polígono rojo para el lado izquierdo del cubo.

Haz doble clic en la capa y agrega Inner Shadow.

Paso 15

Ctrl-clic en la forma del lado del cubo. Haz una nueva capa y llénala de negro.

Paso 16

Haga clic en Filtro> Ruido> Agregar ruido.

Establezca el modo de fusión en Pantalla y reduzca su Opacidad al 60%.

Paso 17

Dibuja una franja horizontal amarilla en el lado del cubo.

Agregue Gradient Overlay y Inner Glow. La configuración utilizada aquí es la misma que la franja horizontal en la parte frontal de la cuchara (Paso 13).

Este es el resultado.

Paso 18

Use la misma técnica para dibujar más rayas en la parte inferior del cucharón.

Paso 19

Vamos a dibujar lo más destacado en el cubo. Dibuje un rectángulo blanco en la parte inferior del cucharón y reduzca su Opacidad al 43%. En el panel Capas, haga clic en el icono Agregar máscara de capa y pinte ambos extremos con negro.

Paso 20

Repita esto al paso para dibujar otro resaltado.

Paso 21

Dibuja el espesor del cubo. Use rojo para su color.

Agregar Gradient Overlay.

Paso 22

Luego, retira el lado del cubo. Simplemente podemos duplicar el frente del cubo y moverlo debajo de todas las capas. Esta vez, establezca su modo ruta en Agregar a forma.

Agregue los siguientes estilos de capa.

Este es el resultado.

Paso 23

Dibuja otro lado del cubo.

Agregue los siguientes estilos de capa.

Paso 24: Agregue las papas

Alt-arrastre las patatas de muestra que hemos creado anteriormente. Póngalos dentro del cubo. Arreglelos en una posición natural.

Paso 25

Haz una sombra negra entre las papas y el balde. Pinte negro para agregar sombra en las papas. Reduce su Opacidad al 12%.

Paso 26

Haz una nueva capa y dibuja sombras individualmente en cada patata. Esta sutil sombra agregará profundidad a la posición de las patatas.

A continuación, puede ver la animación gif que muestra antes y después de agregar una sombra sutil en cada patata.

Paso 27: agregue más puntos destacados en el cubo

Agreguemos algunos aspectos destacados en el cubo. Dibuje un rectángulo blanco en el lado de la portada y reduzca su Opacidad al 30%. Haga clic en el icono Agregar máscara de capa y pinte ambos bordes con negro.

Paso 28

Pinte más resaltado en sus otros lados.

Paso 29: Logotipo

Dibuja una elipse en la parte frontal del cubo con color: # fcbe15.

Haz doble clic en la capa y agrega Drop Shadow.

A continuación se muestra el resultado de una sutil Sombra paralela en la elipse.

Paso 30

Agregue el texto "Hk's" en la parte superior de la elipse con la fuente, Ballpark Weiner. Presiona Ctrl + T para realizar la transformación. Mantenga presionada la tecla Ctrl y arrastre su lado para sesgar el texto.

Paso 31

Agregue los siguientes estilos de capa en el logotipo de texto.

A continuación está el resultado.

Paso 32

Puedes algunas cosas más en el cubo. También puede agregar el ícono de reciclaje utilizando el carácter de la fuente gratuita Reciclarlo.

Paso 33: antecedentes

Activar herramienta de gradiente Dibuja un degradado radial de # f3f3f2 a # f4f5c9.

Paso 34: Sombra

Use un cepillo suave y pequeño para dibujar una sombra debajo del cubo.

Paso 35

Duplique la capa de sombra presionando Ctrl + J. Haga clic en Filtro> Desenfocar> Desenfoque gaussiano para suavizarlo. Es posible que desee reducir su Opacidad si la sombra se vuelve demasiado oscura.

Resultado final + Descargar

Finalmente, este es nuestro icono de papas fritas. Espero que disfruten de este tutorial. Y recuerda no comer demasiadas patatas fritas, ¡simplemente no es saludable! :)

Haga clic aquí para descargar el PSD final.

(Este tutorial se realizó en colaboración con Syarip Yunus).

Anime.js - Una biblioteca ligera de animación en JavaScript

Anime.js - Una biblioteca ligera de animación en JavaScript

La animación web ha recorrido un largo camino. Los desarrolladores no solo pueden hacer animaciones con un combo de CSS / SVG / JS, sino que también hay docenas de bibliotecas gratuitas para ahorrar tiempo en el proceso.Uno de mis favoritos es Anime.js, una biblioteca de animación de JavaScript de código abierto completamente gratuita.Est

(Consejos de tecnología y diseño)

Cómo habilitar el tamaño de la caja en Internet Explorer 7 [Quicktip]

Cómo habilitar el tamaño de la caja en Internet Explorer 7 [Quicktip]

Hemos cubierto el tamaño del cuadro CSS3 en un artículo anterior. Tamaño de caja, con el valor de border-box, nos permite retener el ancho y la altura del elemento, independientemente del relleno y borde adicional que tenga.Esto hace que medir y definir el tamaño del elemento sea más fácil . Sin embargo, CSS3 Box Sizing no funcionaría en Internet Explorer 7 (IE7) y versiones anteriores, como puede ver a continuación.Las dos

(Consejos de tecnología y diseño)