Trazos Web

79 tutoriales para crear diseños web en Photoshop

Diego — Tue, 03 Nov 2009 05:08:02 +0000

Ya sea que no sepas como crear un buen diseño en Photoshop y quieras aprender o que quieras algo de inspiración, acá te dejo 79 tutoriales (en inglés) para poder crear tu propio diseño en Photoshop que después puedes convertirlos de PSD a XHTML y CSS. Hay diseños para blogs, portafolios, sitios de negocios etc. y además algunos de estos tutoriales traen las descargas de los archivos fuente del tutorial.

Si tienes WordPress y lo que quieres es ahorrarte tiempo aquí hay 70 temas gratuitos de alta calidad para WordPress.

1. Business Layout #4

2. Web Design Layout #8

3. Portafolio Layout #9

4. Design Studio Layout #2

5. Design Studio Layout

6. Web Design Layout #6

7. Portafolio Layout #5

8. Web Design Layout #5

9. Web Design Layout #3

10. Clean Web 2.0 Style

11. Sleek and Textured Web Layout

12. Grungy Web Design

13. Design a creative WordPress Theme

14. Design Web 2.0 WordPress Theme

15. How to Design a WordPress Theme

16. Design a WordPress Premium Theme

17. Create a clean PSD layout with a 3D look

18. Graphic Design Studio Web Layout

19. WordPress Layout #5

20. Clean Blog Design

21.Premium WordPress Layout

22. Business Layout #3

23. Clean & Colorful Web Layout

24. Modern Web 2.0 Web Layout

25. Gaming Layout #3

26. Clean Modern Website Design

27. Green & Sleek Web Layout

28. Webdesign Company Layout

29. Tech Blog Layout

30. Modern Blog Layout

31. Design Studio Layout

32. “Worn Paper” Web Layout

33. Fresh Blog Theme

34. Watercolored Design Studio Blog Layout

35. MyBlues WordPress Style Layout

36. GreenPress WordPress Theme

37. Website Gallery Layout

38. Tutorial Site Blog Design

39. Chocolate Pro WordPress Style Layout

40. Two Column Blog Layout

41. Sleek & Modern Hosting Layout

42. Grunge WordPress Theme

43. Nature Inspired WordPress Layout

44. Clean & Colorful Portfolio

45. Create WordPress Themes

46. Amazing Layout

47. SoftBlue Template

48. Corporate Website

49. Awesome Portfolio Layout

50. Blog / Portfolio Template

51. Professional Portfolio Design

52. Clean Grunge Blog Design

53. Tutzor Web 2.0 Style Design

54. Communication Layout

55. Web / Blog Layout

56. Clear Website Layout

57. Blue Blog Theme Layout

58. Business Layout #6

59. Transparent Website Layout

60. Web Layout with 3D Elements

61. Unique Colorful Site Layout

62. Unique WordPress Theme

63. Light & Sleek Web Layout

64. Grunge Personal Portfolio Layout

65. Software Layout #5

66. WordPress Interface

67. Clean & Fresh Company Website

68. Clean Portfolio Site

69. Impressive Blog Layout

70. Magazine Style WordPress Layout

71. WordPress Layout #6

72. Web Design Professional Layout

73. Very Simple Portfolio Web Layout

74. Creative Blog Layout

75. Web Design Layout #11

76. Clean Business Web Template

77. Blue Corporate Website

78. Colorful WordPress Theme

79. Minimal & Modern Portfolio

Artículos Relacionados:

© 2007-2009 Trazos Web - Un blog de ayuda a Bloggers y Webmasters:
Esta completamente prohibido copiar el contenido de este feed. Si ves que algún sitio infringe nuestro copyright, envía un mensaje a djdiego88@trazos-web.com informando la situación.

Escribe para las minorías

Diego — Tue, 03 Nov 2009 05:01:03 +0000

Este es un artículo como invitado de Mario, Consultor SAP de Recursos Humanos de profesión y blogger de afición, de Madrid. Lleva una red de blogs sobre temática variada (Formación y Cursos, Curso-SAP, entre otros).

A finales de los años setenta un ex-vendedor de seguros buscó apoyo en las minorías de San Francisco. Ello le permitió ganar las elecciones y convertirse en Supervisor de Castro y San Francisco. Su nombre es Harvey Milk.

Voy a hacer una analogía de esto con un tema muy cercano a muchos de los lectores de Trazos-Web: los blogs.

En la esfera Blog, ocurre algo parecido. También hay candidatos a elecciones: son los bloggers, con sus blogs, compitiendo por quitarse el uno al otro visitas (votantes), y hay un continuo proceso de votos que nunca acaba (visitas, posicionamiento, visitas, resultados, visitas, Google, visitas, PageRank,…).
Te levantas un domingo por la mañana, te preparas un café y te sientas en frente de tu ordenador, con el editor-blog abierto. ¿Y ahora qué? ¿Sobre qué escribimos, hoy? Pues bien, amigo, aquí tienes básicamente dos posibilidades: Escribir para las mayorías o escribir para las minorías.

Escribir para las mayorías significa escribir sobre un tema muy buscado, revolucionario, viral, en boca de todos, muy popular. Un tema con una tremenda demanda por parte de los lectores. Todo eso está bien, salvo un pequeño inconveniente: miras a tu alrededor y hay miles y miles de bloggers como tú, ahí los ves, corriendo cerca de ti, alcanzándote a veces, y otras veces alcanzándoles tú a ellos. Todos babeando y con la lengua fuera de la boca, corriendo como perros sedientos y hambrientos. Todos corriendo tras el mismo lector, en una lucha feroz y despiadada por conseguir las primeras posiciones en Google.

Si los blogs existieran en los años setenta y si Harvey Milk fuera blogger, seguramente lo haría de una manera distinta: escribiría para los ancianos y jubilados, para los discapacitados, para los gays (en ese momento era tabú), y por qué no también para los obesos, para los negros, para los niños, para los desempleados.
Ésa sería la otra posibilidad amigos: escribir para las minorías. Y es que, aunque parezca increíble, todos los días se realizan millones de búsquedas en Google que finalmente se quedan sin resultado satisfactorio. ¿Nunca te ha pasado que buscas algo en Google (u otro buscador, da igual) y no encuentras nada interesante sobre el tema? Estoy seguro de que sí. Además, esto nunca pasa cuando buscamos un hotel, un vuelo, un viaje, un famoso, ni nada de eso, pero sí cuando buscamos cosas más precisas y poco demandadas, por ejemplo: cómo conseguir trabajo en los países del norte de África en otoño; cuántos cajeros automáticos de la red de cajeros X hay en la ciudad Y, etc.

La idea consiste fundamentalmente en que, mientras la mayoría de los bloggers acuden a la lucha por los temas más buscados (lo reflejan en sus posts, dedican un enorme esfuerzo de promoción y posicionamiento de enlaces, etc., todo con el fin de desbancar a los bloggers competencia), mientras todo eso sucede, hay un sinfín de temas que se quedan desatendidos. Nadie les presta atención porque son temas poco buscados, o cuya publicidad paga muy poco. Y aunque sea verdad y sean temas muy poco buscados, en realidad sí que hay un volumen de búsquedas muy grande, lo que pasa es que a lo mejor son 10.000 búsquedas diarias en todo el mundo (mientras que los temas populares a lo mejor pueden tener unos 10.000.000 de búsquedas diarias en todo el mundo).
También podría ser cierto que fueran temas con retorno en publicidad muy bajo, no obstante al ser un tema desatendido digamos que tienes todo el terreno para ti. No te molesta prácticamente ninguna competencia. Al final todo eso se refleja en un nivel de ingresos muy elevado.

¿Quieres dejar que las minorías te lleven a la cima? Hay muchas minorías que lo están deseando. ¿Cómo?: Escribiendo todos los días en el cuadro de búsqueda Google cosas sobre las que aún nadie ha escrito.

Recuerda que si quieres puedes escribir un artículo para Trazos Web y de paso promocionar tu sitio. Ve las condiciones aquí: Participa en Trazos Web.

Artículos Relacionados:

Cómo escribir un artículo cuando tienes bloqueo creativo

Diego — Mon, 26 Oct 2009 05:01:19 +0000

Este es un artículo como invitado de Víctor López, blogger de Economía Personal, blog que trata temas de finanzas y economía personal.

Hay dos obstáculos con los que te topas frecuentemente cuando escribes artículos para un blog: Falta de inspiración y sobra de inspiración. Algunas veces no sabes ni qué escribir y otras escribes tanto que al final no dijiste nada.

En este artículo compartiré contigo un método muy sencillo para sortear estos obstáculos.

Preparación

Este método se basa en una plantilla que debes llenar paso a paso. La mayoría de procesadores de texto tiene alguna función para esto. Si escribes tus artículos directamente en tu aplicación del blog (Wordpress, Blogger, etc.) puedes mantener un borrador que te sirva como plantilla.

Una vez que tengas tu plantilla en blanco lista, estas son las secciones que debe llevar:

Objetivo

El primer paso es escribir en una sola oración cuál es el objetivo de tu artículo. Imagínate lo que quisieras que una persona responda a la pregunta ¿de qué se trató el artículo?

Mientras escribo este artículo estoy usando este método. Mi “objetivo” es: “explicar una metodología para vencer el writers block y también la writers diarrhea”

Referencias

En la siguiente sección coloca tus referencias. Si piensas enlazar a algún sitio desde tu artículo aquí deberías colocar todos tus URLs. También escribe en esta sección las lecturas, situaciones o ideas que te inspiraron a escribir sobre el tema. Esto te servirá para mantener presente tu inspiración y ¡no olvidar enlazar a tus fuentes!

En ocasiones escribo esta sección citas de personas famosas que se relacionan con el artículo para poder usarlas de introducción o al final del artículo.

Exploración del Tema

Lo anterior es sólo el calentamiento. Ahora viene lo divertido.

El siguiente paso es hacer una lluvia de ideas. O tormenta, dependiendo de tu entusiasmo. La regla más importante de una tormenta de ideas es que es más importante la cantidad que la calidad. No decidas en este momento si una idea te sirve o no para tu artículo, lo importante es que la escribas y escribas cualquier otra cosa relacionada que se te ocurra.

Si estás lidiando con un problema de falta de inspiración esta es la sección más importante. Enfócate en hacerla crecer. Utiliza tus referencias para asociar ideas y colocarte de nuevo en el estado mental en el que estabas cuando decidiste escribir sobre el tema. Analiza tus pensamientos y opiniones, y escribe lo que se te venga a la mente.

Si tienes predilección por las formas visuales, puedes apoyarte con dibujos o diagramas sobre el tema. Que luego, pueden incluso convertirse en ilustraciones para tu artículo.

Organización el Tema

Cuando ya tengas una buena cantidad de ideas es hora de depurarlas y organizarlas. Busca conexiones y agrupa ideas similares. Es probable que haya un ir y venir entre este y el paso anterior. Hay ideas que se te ocurren hasta que comienzas a formar conexiones.

Si tu artículo fuera una escultura, en este paso comienzas a tallar la masa amorfa que creaste en el paso anterior. Por ejemplo, comenzarás a tener idea de la forma y secuencia en que presentarás las ideas a tus lectores. Aquí es donde decides si harás una lista, un artículo de opinión, un tutorial, etc.

Si estás lidiando con un problema de sobra de inspiración esta es la sección más importante. Contrario al paso anterior donde buscabas cantidad sobre calidad, ahora es el momento de tomar sólo las mejores ideas. Manténte enfocado en tu objetivo y úsalo para decidir si algo se queda o se va. Si no ayuda a responder la pregunta central de tu artículo, debe irse.

Escribe el artículo

Finalmente toma tu organización del tema y comienza a desarrollar cada idea. Creas párrafos, incluyes historias, ejemplos, etc. Hasta este paso es cuando comenzarás a ponerle atención a la redacción y ortografía. Enlazas a donde tengas que enlazar, etc.

Ya sabes, escribir el artículo.

Ideas Extra

Finalmente, en la última sección agrega cualquier idea de tu exploración del tema que no haya quedado representada en tu artículo final. Estas ideas pueden servirte para extenderte en el mismo tema en futuros artículos.

Conclusión

Es muy probable que ya hagas algo muy similar a esto. Sin embargo, la clave de este método está en la clara separación del momento en el que explotas tu imaginación y buscas expandir tus ideas y el momento en el que pones atención a los detalles.

En mi caso, antes de comenzar a usar este método hacía en un sólo paso la exploración del tema, la organización y la escritura del artículo. Al final, terminaba dedicando mucho tiempo a perfeccionar un párrafo para luego dejarlo fuera del artículo porque no se relacionaba bien con el resto.

En ocasiones es fácil saltar directo a escribir un artículo por que estamos familiarizados con el tema o tenemos muy clara la imagen de lo que queremos lograr. Pero cuando no es así, este método puede eliminar la frustración.

Recuerda que si quieres puedes escribir un artículo para Trazos Web y de paso promocionar tu sitio. Ve las condiciones aquí: Participa en Trazos Web.

Artículos Relacionados:

WebSet Icons: Colección de iconos gratuitos

Diego — Mon, 28 Sep 2009 14:05:18 +0000

Desde Graphic River y debido a el rediseño de su sitio como de los otros de Envato, nos traen esta colección de iconos gratis. Estos iconos han sido diseñados por TurboMilk. Son 75 iconos en formato .PNG y en tamaños de 48×48px, 32×32px y16×16px.

Descarga | WebSet Icons

Artículos Relacionados:

Optimizando las etiquetas ‘meta’

Diego — Mon, 28 Sep 2009 05:06:13 +0000

Este es un artículo como invitado de Marc, miembro de KiroWeb, un sitio que es de diseño web, alojamiento y otros servicios.

Una página web ha de tener las etiquetas para orientar al navegador sobre el contenido de la página y así considerar si es interesante el sitio o no para ser enlazado en su directorio.
En ese artículo les voy a intentar mostrar las 6 etiquetas más comunes que se usan en los sitios web.

Meta Keywords (palabras clave):

Se escribe de la siguiente forma: . Donde dice palabra, clave, lo tienes que reemplazar por las palabras clave de tu página web, separadas por una coma. También se pueden poner 2‐3 palabras juntas para potenciar la búsqueda de las mismas. Por ejemplo posicionamiento en buscadores. Es importante no repetir 2 palabras clave dentro de la misma etiqueta, aparte que no sirve para nada.

Meta Description (descripción)

Se escribe de la siguiente forma . Donde dice descripción de la página se tiene que reemplazar para la descripción que se le quiera dar a dicha página. Se recomienda poner en la descripción el mayor numero posible de palabras clave que hemos escrito anteriormente. Se recomienda que la descripción no supere los 150 carácteres.

Meta Language (idioma)

Se escribe de la siguiente forma . Esa etiqueta indica la buscador en que idioma está escrita la página web. Eso ayuda a posicionar por ejemplo en las búsquedas que hace la gente en español.

Meta Author (autor)

Se escribe de la siguiente forma . Esta sentencia es para decir quien es el creador de la página y dejarlo escrito en el documento HTML

Meta Robots

Se escribe de la siguiente forma . Sirve para decir al buscador a que páginas de nuestro sitio web le permitimos su acceso. Es útil por ejemplo si queremos restringir una parte de nuestra página que sea enlazada en los buscadores, como puede ser una sección de administración.

Meta Revisit

Se escribe de la siguiente forma . Sirve para indicar cada cuanto se actualiza la página. Si lo que tenemos es un blog que se actualiza a diario en la página de inicio es muy recomendable poner que se revise el contenido cada día. Si por contra es una página estática con poner que se revise cada semana es suficiente. Esto se limita porque cada vez que el robot entra en
nuestra página consume recursos de nuestro servidor.

Hasta aquí llegan las etiquetas más comunes que se utilizan en las páginas web.
¿Utiliza otras etiquetas en su página web?

Recuerda que si quieres puedes escribir un artículo para Trazos Web y de paso promocionar tu sitio. Ve las condiciones aquí: Participa en Trazos Web.

Artículos Relacionados:

WooFunction: Colección de 178 iconos para Diseño Web

Diego — Mon, 28 Sep 2009 05:02:37 +0000

Desde WooThemes nos traen esta maravillosa colección de iconos para el diseño web. Estos iconos han sido diseñados con la colaboración de Function. Son 178 iconos disponibles en tamaño de 32×32px en formato .PNG.

Descarga | WooFunction Icons | Previsualización

Artículos Relacionados:

Nuevo Set de Iconos RSS

Diego — Thu, 24 Sep 2009 02:37:16 +0000

Desde Creative Nerds nos traen esta magnífica nueva colección de iconos para promocionar tu Feed RSS. Son 8 iconos de diferentes colores en formato .PNG y en tamaño de 200 x 200px.

Descarga | Free Fresh Slick RSS Icon Set

Artículos Relacionados:

Gran Colección de Iconos de Redes Sociales

Diego — Tue, 22 Sep 2009 05:01:32 +0000

Si lo que buscas es algún icono de alguna red social en específico y con algún bonito diseño, cheth studios ha hecho una maravillosa recopilación de iconos de redes sociales que te recomiendo enormemente. De seguro ahí encontrarás el icono que estabas buscando.

Enlace | Social Network Icons Reloaded

Artículos Relacionados:

Como pasar de Photoshop a WordPress

Diego — Fri, 18 Sep 2009 15:16:16 +0000

Este es un artículo como invitado de Enric Enrich, blogger de OnBeta, blog que trata temas de Windows, Linux, Mac OS X, Aplicaciones Web, Web 2.0, Redes Sociales y más…

Los creadores de blogs con WordPress.org (la versión de WordPress que se puede descargar, no la versión WordPress.com), a veces se encuentran con el problema de no tener mucha experiencia en programas de diseño como es el Photoshop. También nos podemos encontrar en el caso, de un experto en el Photoshop, que no tenga ni la más mínima idea de conocimientos necesarios sobre como convertir su diseño en un theme de WordPress.

Para estos últimos la solución está en la web del proyecto Divine, donde ofrecen una herramienta disponible en descarga directa, que a modo de plugin de Photoshop, te ayudara a convertir tus archivos PSD en un theme sin tener que calentarte mucho la cabeza.

El proceso es tan sencillo como introducir tu nombre y tu correo electrónico en un formulario en su sección de descargas y obtendrás el enlace correspondiente. Pero atención, además de estar completamente en inglés, nos encontramos con la desventaja de que solo funciona bajo Windows. De todas formas, aclaran en el F.A.Q., que están trabajando en una versión para Mac OS.

Para colmo, aunque no este traducido a nuestro idioma, tendréis disponibles en su web una completa documentación que resolverá cualquier duda. Así que los animo a que tanto programadores como los que no, prueben esta herramienta. Por si alguien aun es reticente a probarla, los dejo con este videotutorial, para aclarar dudas de funcionamiento.

Recuerda que si quieres puedes escribir un artículo para Trazos Web y de paso promocionar tu sitio. Ve las condiciones aquí: Participa en Trazos Web.

Artículos Relacionados:

Como convertir un PSD a XHTML y CSS

Diego — Wed, 16 Sep 2009 20:07:42 +0000

Desde Cristalab nos traen estos dos tres cinco seis siete maravillosos videos totalmente en español y muy bien explicados que nos enseñan a maquetar nuestros diseños en XHTML y CSS desde un archivo PSD (Photoshop).

Muy útil para los diseñadores que se quedan estancados a la hora de maquetar sus diseños.

Estos maravillosos videos han sido realizados por @raymicha. Cualquier duda sobre los videos puedes comunicarte con ella mediante su perfil en Twitter.