Cómo diseñar un logo o icono profesional para tu sitio web usando Adobe Photoshop

  • Autor Autor stealthpartner
  • Fecha de inicio Fecha de inicio
S

stealthpartner

Beta
Diseñador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Holaa!
En este tutorial os voy a enseñar cómo crear un logo/icono para vuestra web de forma sencilla paso a paso(igual para los que nunca o casi nunca han usado Photoshop se les puede hacer un poco laborioso), por ejemplo para el favicon (icono de pestaña) de vuestra web. Para ello necesitaremos usar Adobe Photoshop (supongo que cualquier versión), yo uso Photoshop CC.

final.webp

Vamos al lío :

Paso 1:
Lo primero de todo será abrir un nuevo proyecto y establecéis los siguientes ajustes (para ir más rápido también podéis seleccionar en predefinir “Papel EE.UU” y en Contenido de Fondo seleccionar “Transparente”) :

paso1.webp

Paso 2:
Giraremos la imagen 90º a la derecha o izquierda para tener un rectángulo horizontal (landscape) :

paso2.webp

Paso 3:
Crearemos un círculo con la herramienta de creación de figuras, y seleccionaremos “Herramienta Elipse” y crearemos un círulo del tamaño que queráis. Yo por ejemplo usaré el color #d3f819 :

paso3.webp

paso3a.webp

Paso 4:
Ahora vamos a darle un poco de profundidad. Creamos una nueva capa que llamaremos “Gradiente” y seleccionamos la figura exacta de nuestro círculo manteniendo “Ctrl + click en la figura del círculo” en la paleta de capas.

paso4.webp

Veremos cómo se selecciona nuestro círculo con una línea de puntos. Una vez seleccionado iremos a “Selección->Modificar->Contraer”, y le metermos 10 pixeles.

paso4a.webp

Paso 5:
Una vez hecha la contracción en la selección, seleccionamos la capa que creamos, y cogemos la herramienta de degradado.

paso5.webp

Seleccionamos el degradado que vaya de blanco a transparente.

paso5a.webp

Una vez seleccionado y configurado el degradado pinchamos desde un poco más arriba de la imagen y arrastramos hasta el centro del circulo pasándonos un poco.

paso5b.webp

paso5c.webp

Paso 6:
Duplicamos la capa que creamos recientemente (click derecho sobre la capa-> Duplicar capa) y la llamaremos “Luz”. En nuestra nueva capa, iremos a Editar->Transformar->Voltear verticalmente (manteniendo nuestra selección del círculo). Nos quedará algo así:

paso6.webp

Nada más haber volteado, le damos a Editar->Rellenar, y ponemos el color #a5e902 :

paso6b.webp

Paso 7:
Bajaremos la opacidad de la capa “Gradiente” al 70% :

paso7.webp

Ahora en la capa “Luz” iremos a Editar->Transformar->Distorsionar y ajustaremos los márgenes de la siguiente manera:

paso7a.webp

Sobre la misma capa iremos a Filtro->Desenfoque->Desenfoque Gaussiano, y cambiamos el radio a 70 pixeles.

Paso 8:
Añadiremos el texto que queramos dentro de la esfera, yo voy a usar una ‘w’ :

paso8.webp

Paso 9:
Agregaremos una nueva figura esférica colocando su capa por debajo de la primera esfera con el color el color que queramos (para ajustar mas fácil el tamaño de las figuras hay una opción en la barra de arriba que se llama “Mostrar contr. transf.” ), y rasterizamos la capa de la nueva figura en Capa->Rasterizar->Contenido de relleno. Ahora duplicaremos esta capa y la pondremos como oculta (pinchamos en el ojo que hay a la izquierda de las capas) :

paso9.webp

Paso 10:
A la capa de la figura que tenemos visible le vamos a aplicar un gradiente, con los ajustes de la imagen ( colo gris #595959 ), con esto conesguiremos darle un toque metálico :

paso10.webp

paso10a.webp

Paso 11:
Ahora haremos visible la capa que teníamos oculta, y la traeremos al frente, para ello podemos arrastrarla capa hasta la primera o ir a Capa->Organizar->Traer al frente :

paso11.webp

Paso 12:
Ahora iremos a la herramienta de la izquierda de figuras, pincharemos en “Herramienta de forma personalizada” y en la parte de arriba a la derecha seleccionaremos “Forma” y usaremos el logo de media luna. Si no tenemos esa forma en la paleta, le daremos a opciones y seleccionamos “Formas” y le damos a añadir.

paso12.webp

Una vez añadida la media luna ajustaremos el tamaño para que se adapte perfectamente a la mitad de la esfera, una vez conseguimos que se ajuste la tendremos que invertir, para ello iremos a Edición->Transformar->Rotar. Nos quedará algo así :

paso12a.webp

Paso 13:
Ahora seleccionaremos la capa con la esfera blanca que pusimos delante y la eliminaremos. Con la capa de la media luna seleccionada iremos a Capa->Rasterizar->Contenido de relleno, y le aplicaremos el mismo gradiente de efecto metálico:

paso13.webp

Ahora le daremos un contorno, para ello iremos a Capa->Estilo de capa->Trazo, y le daremos un tamaño de 12 px con el color #404040 :

paso13a.webp

paso13b.webp

Paso 14:
Este paso es para darle ya un toque a tu gusto, yo por ejemplo voy a rotar la letra un poco y le daré un destello de luz en Filtro-> Interpretar-> Efectos de iluminación. La intensidad de luz y el ancho de haz lo modificáis cada uno al gusto. Y quedará algo como esto :

paso147.webp

Y esto es todo!! Espero que os sirva un saludo!! :welcoming::welcoming:
 
Muy bueno, muchas gracias.
 
que vacano campeon esos mismos efectos los podria hacer por el corel draw?
 
Excelente, un buen tuto más que va para mi carpeta de tutoriales Photoshop :encouragement:
 
Atrás
Arriba