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/

 

Efecto de reflejo en badge 2.0 con Photoshop CS2 Octubre 5, 2006

Guardado en: diseño, photoshop, tutorial, web — divagame @ 11:20 am

Este tutorial, se basa en la versión CS2 de Photoshop.

  1. Creamos dos capas: Una, para el Fondo y otra, para el objeto. Nos quedaría tal que así:

    Creamos las capas necesarias

  2. Ahora, dibujaremos el objeto polígono, con éstas características: (Opciones de polígono: Estrella, Sangría lateral 15% y Lados 16)
  3. Escogemos el objeto poligono

     

    Caracteristicas del poligono

  4. Bien, ahora ya configurado, lo incrustamos en la Capa 1.
  5. Objeto poligono creado

  6. Para darle efecto de relieve iremos a: Capa -> Estilo de Capa -> Opciones de fusión. Y escogeremos las opciones de Sombra paralela y Bisel y relieve.
  7. Estilo de capa

  8. Podemos jugar con alguna propiedad más, eso queda a gusto de consumidor. A mí me ha quedado de esta manera:
  9. Poligono con relieve y estilo

  10. A continuación, escogemos la herramienta Varita mágica y seleccionamos el objeto, apretando dentro del relleno.
  11. El siguiente paso es darle borde a la figura. ¿Cómo?. Tienes que ir a: Selección -> Modificar -> Contraer. Y ahí le damos aproximadamente 5 pixels.
  12. Borde de poligono

  13. Ahora tendremos que cambiar las propiedades de la herramienta Degradado, como muestra la figura. Color: De blanco a transparente y la segunda opción, de las cinco que tenemos.
  14. Herramienta degradado

  15. Este paso también es a gusto del consumidor, arrastramos el degradado por encima, como queramos.
  16. Poligono con relieve y estilo

  17. Por último, el texto. Ya sabéis, herramienta texto, Os aconsejaría que le diérais estilo a esta capa también. Con un degradado y un relieve poco pronunciado, valdría.
  18. Voilâ ! Tenemos nuestro badge, calentito, calentito.
  19. Badge 2.0 con Photoshop

con ayuda de photoshoptv.com

 

Posiciona y Optimiza tu página para los buscadores Octubre 3, 2006

Guardado en: buscadores, google, tutorial, web — divagame @ 3:13 pm
El buscador Google fué el más utilizado en nuestro país con más de 11,1 millones de usuarios y una penetración del 88% y su tráfico creció un 49% con respecto al mismo período de 2004, la segunda posición la ocupa MSN Search, con 4,3 millones de internautas en el trimestre octubre-diciembre de 2005, un 58,4% más interanual. La tercera posición es para Yahoo Search! con un total de 2,3 millones de usuarios, un 65% más, le siguen Wanadoo Search, Hispavista, Altavista y Terra.

v í a serviweb.net

La optimización web es un arte, y no es nada fácil. Actualmente, los motores de búsqueda, tienen este criterio a la hora de enlazarte a ellos.

Tienen especial importancia encontrar las palabras clave en:

  1. Los propios nombres de archivo
  2. Los contenidos titulares, tags H1…
  3. Enlaces de texto
  4. Tags ALT de las imágenes
  5. Comentarios de código
  6. Nombre de los frames
  7. Nombre de los archivos de imágenes
  8. Campos ocultos de los Forms
  9. Texto en negrita
  10. Tag NOFRAMES
  11. Metatags

v í a maestrosdelweb.com

Procura eliminar tags superfluos en el <head></head>, tipo Generator, Author y alguno más. Intenta colocar el tag de tittle antes de los tag <description></description> y <keyword></keyword>. La descripción tiene que ser atractivo para ellos, debes de pensarlo bien a la hora de “tagear” tu web. Mucha atención con el atributo ALT de las imágenes que tengamos en nuestras páginas, les dan muchos puntos.

Si tienes una página en Flash y quieres que te indexen, hazle caso a ingeniuz.com. Aunque realmente se debería de evitar este lenguaje. Personalmente, no me agradan, y a los motores “buscadores“, tampoco.

Otro consejo sería el de no complicar mucho el HTML. Cuanto más limpia sea y menos pese ( menos de 100 kb ), mejor. Siempre respetando la accesibilidad y la usabilidad, ¡eh!.

Ahora, voy a dejaros unos enlaces interesantes sobre este tema.

Buscadores de Inscripción gratuíta

Buscadores de pago por clic

 

Descarga de vídeos en youtube y cambio de formato .flv Septiembre 30, 2006

Guardado en: tutorial, web, youtube — divagame @ 3:09 pm

He explicado a tanta gente cómo descargar vídeos de youtube, y tanta gente me ha vuelto a preguntar, tantas veces explicando lo mismo.. Creo que es inevitable que haga un pequeño manual. Hay varias maneras de hacerlo. Yo os voy a exponer la mía. Es un proceso muy sencillo.

Empezaríamos así.

  1. Entra en la página web de Youtube.
  2. Encuentra el vídeo ( evidentemente ) y copia la URL del mismo.

    Primer paso

  3. Entra en la página web de VideoDL.
  4. Pega la URL del vídeo de youtube en el único cuadro de texto que tiene ( no tiene pérdida ).
  5. Pulsa en el botón “Get it!” y posteriormente en “download link”.

    Siguiente paso

  6. Guarda el archivo en tu ordenador. Algunos vídeos no tienen extensión, si es tu caso, cámbiale el nombre poniéndole .flv al final.
  7. Bien. Ya tenemos el archivo en nuestro ordenador. Ahora lo que tenemos que hacer es convertirlo a otro formato para poder visualizarlo desde cualquier sitio. Tendremos que descargarnos un programilla para hacerlo. Personalmente, el que más me gusta, bueno, no es que me guste más, si no que es gratis y no te mete publicidad, es el CinemaForge. Descárgatelo aquí.
  8. Después de haberlo instalado, sólo habrá que decirle dónde está nuestro archivo y a qué formato deseamos pasarlo.

Conversor de formato de video

Y Voilâ! Ya tenemos el vídeo en nuestro ordenador. Así es amigos, bueno bonito y barato.