divagame

el diseño es algo más que hacer que las cosas parezcan bonitas (web 2.0)

Efecto de reflejo en texto con Photoshop CS2 Diciembre 4, 2006

Guardado en: diseño, photoshop, tutorial, web, web2.0 — divagame @ 10:12 am

Vamos a ver cómo podemos crear una capa de texto en algo más, cómo lo diría yo… en algo más “2.0″. ( reseñar que este pequeño tutorial está basado en la versión CS2 de Photoshop).

1. Creamos dos capas: En total tendríamos tres. Una la que nos sale por defecto y otras dos transparentes. Algo tal que así:

Paso numero 1

2. En la Capa 1 creamos un objeto texto y a continuación con la herramienta Marco rectangular, seleccionamos parte de esa capa.

Paso numero 2

Paso numero 3

3. Ya tenemos el texto y la selección (en una capa). Ahora, sin deseleccionar el marco de puntos, nos ponemos en la Capa 2 y creamos un difuminado (blanco - transparente).

Finalmente quedaría como vemos a continuación:

Paso numero 4

Un difuminado de este tipo:

 

Paso numero 5

Con la Capa 2 seleccionada:

Paso numero 6

4. Ahora vamos a deformar la Capa 2 para hacer un efecto de onda en el difuminado. Sin desconfigurar lo que hemos hecho ( tenemos la Capa 2 seleccionada ), apretamos CTRL + T, para la transformación libre. Observaremos que los puntos intermitentes se han convertido en líneas con cuadrados en ocho puntos. En la barra de arriba apretamos este botón.

Paso numero 7

Hemos cambiado de modo transformación libre a deformación.

5. Veremos que nos ha salido una barra desplegable en esta opción. Elegimos Bandera.

 

Paso numero 8

6. Recordemos que todo lo que hemos modificado ha sido en la Capa 2. Nos preguntará si queremos aplicar la deformación, le damos a Aceptar.

7. A continuación empezaremos a trabajar con la Capa 1, donde tenemos nuestro texto. Para aplicar el difuminado a éste, haremos lo siguiente:

- Encima del cuadro de la Capa 2, apretamos CTRL, y sin soltar la tecla la arrastramos a la Capa 1.

 

Paso numero 10

- Para saber si lo hemos hecho bien, nos tiene que quedar así:

Paso numero 9

8. Muy bien. Tenemos seleccionado el texto de la Capa 1. Ahora vamos a modificar esa selección que nos ha quedado:

- Selección -> Modificar -> Contraer -> X pixels ( X = el número varía según el tamaño del texto y el grosor de las letras elegidas )

Paso numero 11

- Ahora: Selección -> Invertir. Y suprimimos. (Tecla SUPR).

9. Hemos borrado el borde de las letras.

Paso numero 12

10. Qué bonito, ¿no?. Está bien.. pero le falta algo. Vamos a ponerle un reflejo por abajo. Lo haremos de esta manera:

- En el cuadro de las Capas, seleccionamos la Capa 1 (la de nuestro texto), apretamos el botón derecho y la duplicamos.

- Seleccionamos la Capa duplicada y apretamos CTRL + T, para poder trabajar con él libremente. Pinchamos en el cuadrado de arriba y lo movemos hacia abajo. Quedaría así:

Paso numero 14

11. Nos queda poco. Para darle degradado, seleccionamos con la herramienta Marco rectangular la zona en la que queremos trabajar. Por ejemplo:

 

Paso numero 15

 

¡ Voilâ ! Con esto y un bizcocho, hasta mañana a las ocho.

 

Final

 

 

Enlaces interesantes del mes, CSS y XHTML válido Noviembre 12, 2006

Guardado en: css, diseño, enlaces, links, tutorial, web, web2.0 — divagame @ 12:42 pm

POSICIONAMIENTO CON CSS ( position )

http://www.barelyfitz.com/screencast/html-training/css/positioning/ (inglés)
http://simplelogica.net/caoticoneutral/?p=38 (español)

DISEÑO CSS XHTML

http://designmeltdown.com/ (inglés)
http://csszengarden.com/ (inglés)
http://cssmania.com/ (inglés) de aqui hasta abajo -> galería de webs con css válido
http://cssbloom.com/
http://csslove.net/index.php

TABLAS ACCESIBLES

http://www.usability.com.au/resources/tables.cfm (inglés)

FORMULARIOS BIEN HECHOS

http://paularmstrongdesigns.com/awesome/form/ (inglés)

RECOMENDACIONES

http://www.blogmundi.com/2006/10/05/evita-las-lineas-largas-cuando-escribas-codigo-usando-css/ (español)
http://www.designdetector.com/link/to/ten-common-css-mistakes/ (inglés)
http://www.positioniseverything.net/easyclearing.html (inglés)
http://www.tutorialtastic.co.uk/page/create_a_tableless_layout (inglés) explica la diferencia de tablas/divs
http://www.cleancss.com/ (inglés) recurso para limpiar nuestro css

TUTORIALES Y RECURSOS

http://home.tampabay.rr.com/bmerkey/cheatsheet.htm (inglés) CSS
http://cdburnerxp.se/htmlcheatsheet.pdf PDF (inglés) XHTML
http://www.glish.com/css/ (inglés) recursos y técnicas con css
http://www.pmob.co.uk/ (inglés) ejemplos en css
http://es.wikipedia.org/wiki/CSS2 (español) tutorial de css con enlaces abajo
http://www.csselite.com/category/resources/ (inglés) recursos css javascript html

VALIDA TU HTML SIN TABLAS (tablas sólo para datos, no para maquetar)

http://w3tableless.com/

 

challenger, una aplicación web basada en AJAX Octubre 31, 2006

Guardado en: AJAX, JavaScript, diseño, web, web2.0 — divagame @ 11:39 am

Para la gente que esté empezando y no comprendan lo que es AJAX, vean esta página:

http://www.challenger.se/

Ventanas con movimiento, una sección de Blog con posits, en tres idiomas, etc. Me encanta el tema de poder cambiar el background de la página de “inicio”. Muy currao. Así da gusto

 

mooShow, otra forma de presentar una galería de imágenes Octubre 18, 2006

Guardado en: JavaScript, diseño, moofx, mooshow, prototype, web — divagame @ 9:41 pm

Navegando y divagando por la web, me he topado con esta aplicación JavaScript, inspirada en los efectos que nos ofrecen los chicos moofx, usando prototype. Sofisticada, sencilla, y para qué engañarnos, queda muy bien :D

Podemos incrustar un carrusel de imágenes en nuestra página, con los iconos (en la parte de abajo) para movernos hacia alante y hacia atrás, como con lightBox ( creo que no tenemos opción de usar el teclado en este caso ), y otro icono ( en la parte izquierda de arriba ), para mostrarnos información de la propia imágen. URL, peso, dimensiones, título, autor, copyleft y hasta una breve descripción. También se ajusta al tamaño de cada fotografía.

Bueno, no me enrollo más ( si es que parece que me dan pilas ) y os dejo la dirección para echarle un vistazo más a fondo.

http://www.mooshow.eatpixels.com/

Si quieres también puedes descargarte la última versión desde aquí ( 1.04 beta ).

 

Audi R8, para el año 2007 Octubre 16, 2006

Guardado en: audi r8, coche, diseño, motor, news, youtube — divagame @ 10:19 am

Se acercan las navidades. Ya están ahí. Y como sé que Papá Noel lee a diario este blog, quiero dedicarle este post. Pápa, me he encaprichado con este coche, este año he sido buena. Me he portado bien y esas cosas. Sé generoso por un año, anda. Aquí te dejo una pista de lo que me podrías regalar.

Estoy segura de que te he hecho un favor enorme al darte una pista tan evidente. Por mí no tienes que preocuparte. Es “pim pam“.

Para que tengas más info sobre este regalo automovilístico, te dejo un enlace aquí.

¡ De nada !