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

 

 

Orb Networks se anticipa a YouTube Noviembre 29, 2006

Guardado en: musica, news, orb networks, telefonia, tv, web, web2.0, youtube — divagame @ 4:39 pm

Orb Networks

Una pequeña empresa norteamericana se anticipó a YouTube y se prepara para lanzar un software que permite ver en el móvil los videos de aquel portal. Orb Networks, una pequeña empresa de Sillicon Valley con sólo 35 trabajadores ya ofrece un software que permite ver en el móvil ficheros de audio y video almacenados en el ordenador.

v í a telefonos-moviles.com

Entrando más en el tema:

Es un software que se instala en un ordenador personal conectado a Internet. Éste permite acceder remotamente al contenido disponible en él, incluyendo la televisión que se esté recibiendo a través de una tarjeta sintonizadora. Para ello se establece una conexión segura a través de Internet con los servidores de la empresa y desde allí a cualquier terminal que disponga de un terminal web: un ordenador personal, un teléfono móvil o una PDA. El sistema comprime la información a un formato adecuado para que sea posible ver fotografías, oír música, ver películas grabadas o ver la televisión que se está difundiendo.

más info en sociedaddelainformacion.telefonica.es

Qué bien suena, ¿no?. Lo mejor de todo es que es gratis :d

Descárgatelo desde aquí.

 

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

 

Un juego : Web 1.0 versus Web 2.0 Octubre 25, 2006

Guardado en: AJAX, Juegos, google, news, web, web2.0, youtube — divagame @ 9:15 am

Lo que se decía en la web 1.0 y lo que se dice en la web 2.0.

  • Web 1.0 Los usuarios crean el contenido ( Slashdot ).
  • Web 2.0 Los usuarios crean el contenido ( Flickr ).
  • Web 1.0 Writing“.
  • Web 2.0 Rating“.
  • Web 1.0 Marcadores.
  • Web 2.0 Compartir marcadores.
  • Web 1.0 Gifs animados.
  • Web 2.0 Badges“.
  • Web 1.0 Mail con 2 megas de espacio.
  • Web 2.0 Mail con 2 gigas de espacio.
  • Web 1.0 Sitio en construcción.
  • Web 2.0 Beta.
  • Web 1.0 Green.
  • Web 2.0 #CDA.

v í a zeldman.com.

¿ Me queda algo ?