Hoy damos paso a nuestra sección de tutoriales sobre todo referente al diseño con Photoshop y otras herramientas indispensables para este campo.
Este primer tutorial esta basado en uno que publique hace más de 2 años cuando este efecto era muy solicitado, pero quiero hacer diferencia que otros tutoriales que podéis encontrar sobre este tipo de efecto.
Hay que decir que se usa mucho Photoshop para este efecto, sin embargo en este tutorial usare Fireworks con el que obtendremos un resultado muy logrado. Con lo que queremos demostrar que no solo de Photoshop vive el diseñador hay que saber utilizar alternativas y Fireworks nos permite realizar muchos trabajos fácilmente.
En este caso usare el mismo efecto para 2 esferas con resultados distintos.
1. Crearemos un documento nuevo de 300px – 404px en este caso lo haré con fondo blanco pero también podéis crear el documento con fondo transparente.
Una vez en el documento utilizaremos el objeto Elipse de nuestro panel, usaremos un color gris para el fondo de nuestros círculos.

Al crearlos nos quedara algo así.
2. Bien ahora usaremos la herramienta de degradado y configuraremos los siguientes colores: #FFFFFF, #9B9B9B, #4D4D4D, #666666, #CCCCCC, #CCCCCC como se muestra en la imagen y como tipo de degrada escogemos elipse.

3. A partir de aquí diferenciaremos el estilo para cada uno de nuestras esferas, empezáremos por el siguiente al que llamaremos esfera 1 (muy original de mi parte) para diferenciarlos y al siguiente esfera 2.
Bien para “esfera 1” una vez tengamos el degradado nos creara un Angulo de 90º, lo que haremos a continuación es doblar el tamaño tanto horizontal como vertical de los vértices en otras palabras estirarlo hasta notar el efecto que apreciamos en imagen, notar también que el ángulo esta ligeramente posicionado hacia arriba y en el centro donde por defecto aparece.

Aquí el resultado para esfera 1
Para el efecto “esfera 2”, en realidad solo consisten en cambiar la posición del alguno del degradado también estiramos los vértices tanto horizontal como verticalmente y obtenemos este resultado.

4. Seleccionamos una de nuestras esferas y nos vamos a Filtros / Sombrear e iluminar / Sobra interior desde el panel propiedades y especificamos los siguientes valores:

Realizamos los mismos pasos para la segunda esfera.
5. Una vez llegado a este punto tendremos un resultado como este.

6. Solo nos falta especificar el color para nuestras esferas, para esto nos vamos a menú: Filtros / Ajustes de color / Matiz de saturación, ahora tendremos 3 valores por definir para nuestras esferas usare colores diferentes por lo que de estos 3 valores, 2 de ellos serán iguales para ambas esferas (Saturación y Luminosidad), de esta manera.
Luminosidad: -2
Saturación: 40
Para la primera esfera
Matiz: -61

Segunda esfera
Matiz: -157

Nota: para cambiar de color solo es necesario cambiar Matiz según el color que os venga mejor.
7. Listo ya hemos terminado
, este es el resultado final

Fotografía por José Ramón Lothlórien
Popularity: 4% [?]


Comparador de Frameworks
Generador de CSS3
Internet más seguro para los más pequeños
Reproductor de mp3 online
Comentarios recientes