martes, 10 de noviembre de 2009

Cómo recuperar datos después de formatear usando Ubuntu

Hoy hice lo más estúpido que pude haber hecho en mi vida, literalmente. Quería probar como me funcionaba el nuevo Ubuntu 9.10 nativo en mi computadora, ya lo había instalado virtual en mi Windows 7, pero quería ver qué tal me funcionaba la cuestión al revés... Así que vine de bien mandada y formatié la máquina y le instalé Ubuntu, pero al llegar al momento de seleccionar la partición donde lo quería instalar no coloqué la opción manual sino la automática y borré las tres particiones que tengo mi disco duro (incluyendo las particiones de datos), para mi sorpresa cuando fui a buscar mis archivos las particiones de datos brillaron por su ausencia y en ese momento quería tirarme a llorar.

Hacía poco había hecho un backup de mis datos, pero "backup" fue sólo como le llamé el DVD, porque en realidad sólamente había sacado de mi disco duro los archivos que no utilizaba más y los archivos realmente importantes quedaron en mi disco duro.

Tomé la situación con bastante calma, decidí almorzar primero y luego ver qué era lo que pasaba, al fin y al cabo: "Barriga llena. Cerebro contento.", me puse a buscar en mi buen amigo Google como recuperar particiones borradas una vez después de formatear y me encontré con un programa llamado Testdisk y que Dios bendiga a su creador Christophe Grenier que me ha salvado el día y este fue el procedimiento que seguí:

  1. Descargué el paquete de archivos de TestDisk en la página oficial,

  2. Instalé el programa con Synaptic que se encuentra en el menú de administración ADMINISTRATION > SYNAPTIC PACKAGE MANAGER. Para instalar el paquete deberán primero agregar el paquete al programa FILE > ADD DOWNLOADED PACKAGES y luego hacer una búsqueda con el nombre del paquete en el QUICK SEARCH y luego instalar.

  3. Luego abrí un terminal APPLICATIONS > ACCESSORIES > TERMINAL y en el terminal escribí lo siguiente: sudo testdisk introduje mi contraseña y luego presioné enter.

  4. El terminal ahora va a cambiar a una pantalla color negra así:

  5. Ahora, tendremos que manejarnos meramente con el teclado: arriba, abajo, derecha, izquierda y enter.

  6. Seleccionamos CREATE.

  7. Luego seleccionamos el disco duro donde estaba la partición que borramos.

  8. En mi caso, seleccionamos INTEL, pues es una partición de PC.

  9. ANALYSE.

  10. Nos aparecerán las particiones que tenemos actualmente, así que seleccionamos QUICK SEARCH.

  11. Nos preguntará si la partición que está buscando fue creada en Vista, presionamos Y o N para decir Y = si o N = no. En mi caso le puse Y. Aunque lo había hecho anteriormente con N y me dió el mismo resultado.

  12. Y ahora aparecerán nuevamente las particiones que tenemos en la pc. En mi caso tengo dos. Debemos seleccionar la partición donde deseamos buscar los datos desaparecidos. Yo empezaré por la más grande. Si seleccionamos la partición, en la parte de abajo nos dirá cuánto espacio tienen.


  13. Presiono ENTER sobre la partición y luego DEEPER SEARCH.

  14. Poco a poco van a ir apareciendo las particiones que tenemos, incluso la que borramos al formatear, en mi caso, mi partición tiene un nombre DATOS, así que la verdad espero que ustedes hayan nombrado todas sus particiones, así será más fácil ubicarla cuando la encuentre, de todos modos si la partición es NTFS lo dirá al principio, así que será una buena pista para saber que la partición es windows, que es la que estoy buscando ahorita.

  15. Les recomiendo que estén pendientes de cuando aparezca la partición que buscan, pues la primera vez que hice el scan de las particiones, vi la partición y me levanté un momento de la computadora y al rato ya no la ví, pues me había mandando un mensaje de error. ¿Por qué? No me pregunten porque no sé la respuesta (aunque si alguien la sabe, lo invito a comentar).

  16. Una vez que vean la partición que están buscando escojen STOP.

  17. Escojen la partición y le dan P, para listar los archivos.

  18. Vayan revisando cuáles son los archivos que necesitan recuperar, y una vez que lo vean lo seleccionan y le dan C, para copiar.

  19. Seleccionan un folder de su partición actual y le dan enter a la opción PEGAR.

  20. Verán un mensaje en rojo que dice PLEASE WAIT. COPYING FILES...

  21. Esperan y ¡listo! Han recuperado sus archivos.
Quiero dejar claro que yo no pude recuperar todos mis archivos, recuperé mis páginas web (al menos en las que estoy trabajando actualmente), mis archivos de flash, illustrator y photoshop, pero perdí toda mi música. Afortunadamente mi música sólo era copia de mis discos y bueno una que otra que bajé, que puedo volver a conseguir.

Espero que esto les ayude =)

Saludines!


lunes, 9 de noviembre de 2009

Aparentemente, hicimos un cambio: ¿Por qué no hacer páginas Web con PÁGINAS AMARILLAS? - parte 2

Buenas tardes, mis lectores. Hoy es 9 de noviembre de 2009 y son las 18.17 horas en Panamá, hoy recibí un comentario de un señor llamado Luis Rosles, aparentemente relacionado con Páginas Amarillas, no me especificó de dónde exactamente me escribió, pero si copiaré textualmente lo que me dejó dicho:

Luis Rosles dijo...

Para acabar con este tipo de comentarios inescrupulosos y malintencionados, me permito darles el proceso de cómo funciona esto:

Cuando el cliente compra con Publicar, S.A. un servicio de página web:
Si el cliente tiene previamente su dominio, solo se hace un direccionamiento del dominio a nuestros dns para que el nuevo sitio se visualice a través de su dominio.
Si NO tiene dominio, Publicar compra el dominio bajo su registro para un mejor control y administración del producto que se le ofrece al cliente.
Si el cliente ya no desea más el servicio que le ofrece Publicar y quiere el dominio, se le transfiere a través de un documento que demora 7 días hábiles, donde se le indica el usuario y clave para la administración del dominio. Después de esto Publicar no tiene ningún tipo de control sobre el dominio transferido y no es responsabilidad de Publicar el uso que el cliente le de a esta información, es totalmente responsabilidad del cliente.


Publicar no se queda con los dominio de los clientes, he invito que den como ejemplo alguna empresa que le haya ocurrido lo que publican aquí.



Quiero dejar claro que los comentarios en mi blog son moderados, quiere decir que ningún comentario es publicado sin mi autorización previa, cuando vi el comentario dije: "Esto tengo que publicarlo", ¿por qué? porque yo tengo derecho a emitir mi opinión y a defenderla, por eso mi respuesta...

Yen Howell dijo...

Hola Luis.

Primero que todo mis comentarios no son inescrupulosos ni malintencionados. Con mucho gusto te doy el nombre de la empresa que por primera vez le sucedió esto, hace unos meses y por eso es que me des decidí a escribir esto. Esta es su página web: www.imbclass.net Anteriormente su página web era www.imbclass.com

La otra empresa no tiene actualmente página web, pues según me comentó el propio dueño de la empresa, aún está en pleito con por el dominio, pero son Big Solutions. Con esta última empresa no puedo decirte que me consta que no le devolvieron el dominio, pues perdí contacto con este señor hace ya un tiempo, pero con la gente de International Martime Bureau, te puedo decir con certeza que no les devolvieron el dominio, pues entre un amigo y yo le hicimos su nueva página web.
Y solo como un comentario Luis, bajo NINGUNA circunstancia NADIE, debe tener el dominio de NADIE bajo su propiedad, el dominio debe ser algo personal para que no haya problemas el día que la empresa o persona decida hacer sus páginas web con otros proveedores.

Esto no es un cuento que yo me inventé, ni tengo nada en contra de páginas amarillas, así que no tildes mis opiniones de lo que no son, pues mi intención como lo digo en un principio del artículo no es difamar a nadie, sólo estoy contando la historia de la cual fui testigo.

Saludos.

martes, 3 de noviembre de 2009

Silla minimalista o moderna - Vectores gratuitos - Recursos gratis


Bueno quiero empezar por decir: "Feliz cumpleaños Panamá!" Hoy es 3 de noviembre, día de la separación de Panamá de Colombia, estamos cumpliendo 106 años de república y hasta Taringa! nos hizo homenaje poniendo nuestra bella bandera en un arreglo con su logotipo durante todo el día :)





Y bueno, ya entrando más en el tema de los recursos gratuitos, por la línea de los vectores gratuitos... acá les dejo con esta silla minimalista. Les advierto que voy a seguir publicando más vectores gratis, ya que acutalmente me encuentro haciendo un proyecto personal que requiere bastante ilustración, ya pronto les mostraré. ;-)



jueves, 1 de octubre de 2009

Campaña contra el cancer de seno




Hoy empezó el mes de Octubre, mes de la lucha contra el cáncer de seno y yo deseo unirme a la causa por eso durante todo el mes mi página web - http://www.yenhowell.com tendrá su pin de la cinta rosada y desde mañana empiezo a utilizar la cinta en mi ropa.

Me parece espeluznante que entre un 8% y 9% de las mujeres suframos cáncer de mama en algún momento de nuestra vida. En números reales 400mil personas aproximadamente mueren al año debido a esta enfermedad, así que apoyaré cualquier movimiento en contra de ella.


Si deseas descargar mi pin de la cinta rosada, déjame un comentario o contácteme por email ;-)


Vectores Gratis: vectores variados






Ayer me decía el programador con quien estoy trabajando actualmente.

Mario: Buenas tardes
Yen: Buenas tardes, Mario!
Mario: Cómo estás? Que no te ví conectada ayer
Yen: Bien bien. He tenido unos días ocupados, eso es todo.
Mario: Ah ya. Es que me dijiste que estabas con gripe, pensé que te habías puesto enferman.
Yen: eso no me detiene... jejejejeje

Y como estar enferma no me detiene para trabajar ni para quedarme quieta aquí va unos nuevos vectores que hice, algunos fueron para la página de Acceso Total - http://www.accesototal29.com a quien les estoy haciendo la página web, está en construcción aún pero bueno, acá les dejo los screenshots delos vectores y descarguen el que más les guste.

Y como siempre, para descargar los archivos deberán visitar mi página web. Me despido por hoy y pronto publicaré más cositas para descargar...




sábado, 26 de septiembre de 2009

Vectores Gratis: Hada escritora








Una vez más les dejo unos vectores para que descarguen, este dibujo lo hice hoy y es parte del diseño de un logotipo que estoy haciendo, luego publicaré el logotipo completo y el proyecto ;)

Bueno acá les va el enlace de mi página web para descargar este vector. Espero lo disfruten y no olviden que me encanta recibir comentarios =)




Saludines!

Una canción: "Straight through my heart - Backstreet Boys"

lunes, 21 de septiembre de 2009

Vectores Gratis: post it y cuaderno




Yellow!!! Acá los dejo con unos papeles que hice para un diseño en Publibusiness.com y he decidido regalar algunos de los vectores que utilicé, si me aprueba en volante luego les mostraré el volante para que lo vean ;-) Modestia aparte me quedó genial jejejeje...

Pueden descargar las fuentes desde mi página Web siguiendo el enlace de abajo.


Y recuerda que los comentarios siempre me son agradables ;-)
Saludines!

Una recomendación musical: "Senza Luce (a whiter shade of pale)" - Paul Potts





jueves, 17 de septiembre de 2009

Remodelación YenHowell.com


Con una nueva imagen me complazco en reinaugurar mi página web YenHowell.com - www.yenhowell.com

Este sitio es más rápido para cargar y mucho más fácil para mí de actualizar. Pueden descargar todos los archivos fuentes del sitio desde YA! Sólo sigan el enlace.






lunes, 27 de julio de 2009

Diseño de páginas web en Panama: Consejos para el cliente.


A raíz de lo que noté con las páginas web que vende Páginas Amarillas en Panamá, he decidido escribir esta entrada con el fin de educar un poco al usuario común, aquél que no sabe nada de páginas Web, específicamente quien compra la página Web.

Es difícil, al menos aquí en Panamá, encontrar un buen webmaster: que trabaje bien y cumpla, así que por eso hago algunas recomendaciones, por ahora son 7 consejos para escoger un buen webmaster o empresa publicitaria para crear su página web.

  1. Asegúrese de tener pleno control de su dominio y servicio de hosting. Yo entiendo que muchas veces los clientes quieren un servicio integral pero el dominio debe ser algo personal, si no es usted quien compra su dominio pida sus accesos y asegúrese que usted sea el dueño. Aunque usted no sepa cómo manejar una página Web es indispensable que cuente con sus datos de acceso, pues el día de mañana si desea cambiar de diseñador web / webmaster / compañía publicitaria, solamente deberá proporcionarle a su nuevo webmaster los datos de acceso de su página.

  2. Exija calidad. Recuerde que "El que paga, manda." Antes de hacer su página Web saque un tiempo para buscar en Internet otras páginas relativas a la suya y mire los diseños, cómo están estructuradas, estúdielas un poco y si es posible haga una lista de las cosas que más le gustan de cada una y páselas a quien le vaya a confeccionar su sitio. Recuerde que usted está pagando por un servicio y por muy barato que sea usted tiene derecho a exijir. Si su webmaster vende las páginas web en $10.00, no es problema suyo que el/ella las ofrezca tan barato. EXIJA. Por eso está pagando ya sea uno o mil dólares. Usted no fue quien valoró el trabajo, usted solo paga por un trabajo completo.

  3. Pida referencias. Si su webmaster es una persona con experiencia, debe tener referencias de clientes anteriores, de antiguos jefes o de compañeros de trabajo. Pida refencias sobre su desempeño en trabajos en grupo - estas aptitudes dejan mucho que decir de una persona para bien o para mal - pregunte qué tan responsable es esta persona y qué tan honesto.

  4. Pida una reunión siempre. Cuando se reuna con su webmaster haga preguntas simples primero como: "¿Cuántos años tienes? o ¿Tienes mascostas? o ¿Por qué trabajas como webmaster?" Analice la forma en que esta/s persona/s le responde. Fíjese si le mira a los ojos directamente, esto es buen indicio. El contacto visual nos dice que la persona nos está siendo sincera y que no teme ser questionado. No confíe la imagen corporativa de su negocio a una persona que no ni siquiera le mira a la cara o que no le dió un buen apretón de manos para saludarle. Créanme, más allá del riesgo de contagio de fiebre porcina, un buen apretón de manos da una buena impresión.

  5. La puntualidad es importante. Si su webmaster es rápido en responder a sus inquietudes, ya sea por email o por teléfono, lo más probable es que sea rápido para resolver los problemas cuando sean realmente serios o cuando requiera hacer actualizaciones con cierto nivel de urgencia.

  6. Ante todo el profesionalismo. Yo soy de la fiel creencia que uno no nace sabiendo, ni nadie lo sabe todo, pero hay cosas que caen de su peso, sobre todo si una persona es profesional en una rama. Si su prospecto a webmaster o compañía publicitaria no es capaz de responderle preguntas básicas como: "¿Qué servicio de hosting me conviene?", personalmente yo escogería otro. Es correcto que un webmaster le responda "Primero debo analizar las necesidades del proyecto." siempre que esta frase no sea una constante respuesta a cada pregunta que usted le hace. Estemos claros, que hay respuestas que los webmasters no podemos dar sin antes ver un poco más a fondo un proyecto, pero tampoco hay que abusar, eh!

  7. En caso de... Yo pienso que debemos darle una oportunidad a las nuevas mentes, pero qué pasa cuando llega un webmaster que no tiene experiencia, más sin embargo tiene, según su resumé, muchos conocimientos, en ese caso, pida una prueba. No es justo para los jóvenes no tener oportunidades, créanme lo sé, pues al graduarme a los 20 años, es difícil conseguir un trabajo serio, pero ser joven no es sinónimo de irresponsabilidad o falta de experiencia, sobre todo en este mundo web, que por lo general empezamos muy jóvenes a trabajar aunque sea en proyectos personales. Así que ya sabe, una prueba y fíjese en detalles como los tiempos y que tan bueno es el trabajo.

domingo, 19 de julio de 2009

¿Por qué no hacer páginas Web con PÁGINAS AMARILLAS?

Aún cuando yo me dedico a ofrecer mis servicios profesionales como Webmaster y también vendo páginas Web no es mi intención difamar a nadie; mi intención es decir la verdad: PÁGINAS AMARILLAS - PUBLICAR S.A. en Panamá se quedan los dominios que los clientes les "compran". Hice esta pequeña investigación para probar lo que digo. La verdad no puedo asegurar si ellos incluyen este término en el contrato o no, pero de cualquier manera es una acción "truculenta". Lo explico de la siguiente manera: Ustedes compran un dominio en páginas amarillas: www.dominio.com , la gente de Publicar les hace su página Web (que la mayoría que he visto están mal hechas de paso), ustedes tienen su página Web lista y todo chévere, pero ¿qué pasa el día que ya no quieren esa página, que quieren cambiar el diseño de su página Web y mandarla a hacer con otra persona/empresa? Su domino no es de ustedes. Está generalmente a nombre del siguiente contacto: Admin Contact dnsadmin@publicar.com Publicar de Colombia Av 68 75a-50 Bogota, NONE 000001 CO 57-1-6465555 Y no devuelven los dominios... ¿Cómo lo sé? Porque ya he tenido dos clientes que les ha pasado: uno tuvo que cambiar de dominio y el otro aún está en pleito. Pero yo no puedo pedirle a los que me leen que crean porque yo lo digo, por eso adjunto este documento que habla por si sólo y fácilmente pueden comprobarlo en casi cualquier sitio donde vendan dominios. Sino, busquen en google la función WHOIS y podrán comprobar estos datos.

Descarga el archivo aquí
Y por último, ¿por qué es malo perder el dominio? Aquí les doy tres razones de peso.
  1. Record: Los dominios van creando un registro, una historia, que nos hace ganar ranking en los buscadores, los dominios más antiguos tienen prioridad ante los más nuevos. Además perderíamos el historial de visitas.
  2. Papelería y material promocional: la mayoría de las empresas imprimen tarjetas de presentación, camisetas, plumas, tazas y cualquier cantidad de artículos con su imagen corporativa, y ¿qué dicen estos artículos? NUESTRA DIRECCIÓN WEB. Esto quiere decir que tendremos que volver a mandar a imprimir todos los artículos que tenían nuestra dirección Web.
  3. Publicidad: ¿Qué pasó con todos los anuncios que hayamos publicado en medios impresos? Como períodicos, revistas, vallas, etc. NO PODREMOS CAMBIAR NUESTA DIRECCIÓN WEB. ¿Por qué? Por que muchos ya han sido repartidos a usuarios finales (posibles clientes) y no podremos recojer de puerta en puerta los volantes o periódicos que tengan nuestros clientes potenciales. En muchas ocasiones tendremos que esperar hasta la siguiente edición de X medio impreso para cambiar nuestro arte publicado y además si no tenemos un departamento de diseño gráfico en nuestras empresas, tendremos que PAGAR MÁS por mandar a cambiar algo tan simple como la dirección web dentro de el/los artes. Aunque sólo sea un dólar lo que hay que invertir, es un dólar que NO TENÍAMOS POR QUÉ INVERTIR.
Y ahora, algunos consejos para cuando vayan a hacer sus páginas Web:
  1. Pidan referencias de otros clientes.
  2. Asegúrense de tener CONTROL TOTAL de su dominio y servicio de hosting. Deben entregarles una dirección dónde ustedes puedan iniciar sesión y puedan ver y editar los datos de contacto de su dominio, son cuatro contactos más o menos: organización/dueño, administración, factura y técnico.
  3. Cuando vean texto en sus páginas Web, si no pueden seleccionar este texto, lo más probable es que esa página Web no sirva, porque recuerden los buscadores LEEN TEXTO, NO IMÁGENES. GOOGLE LEE TEXTO. YAHOO LEE TEXTO. MSN LEE TEXTO. ASK! LEE TEXTO. SCOUR LEE TEXTO. Asegúrense que cuando les entreguen sus páginas Web les den TEXTO. La única excepción para no recibir texto es cuando les venden una página Web hecha en Flash (con animación), de menos no acepten nada que no sea TEXTO.
  4. Cuando les entreguen sus páginas Web, fíjense en el título, en la barra de título (donde están los botones de cerrar, maximizar y minimizar). Por lo general el título de sus página debe ser el siguiente: NOMBRE DE LA EMPRESA - TÍTULO DE LA SECCIÓN ej.: EMPRESA LA NOVEDOSA - CONTÁCTENOS. No permitan que les entreguen páginas Web con nombres como: HOME.HTM , MAIN.HTM , PLANTILLA, TEMPLATE, O CUALQUIER OTRO TEXTO QUE NO TENGA SENTIDO CON EL CONTENIDO DE SUS PÁGINAS.
Espero que les vaya muy bien con sus páginas Web y por favor NO SE DEJEN ENGAÑAR, porque una empresa sea grande y tengan una marca conocida, no quiere decir que sean buenos. Por favor, si conocen a alguien que haya comprado su dominio con PÁGINAS AMARILLAS envíenle este mensaje para que pueda corroborar si su dominio es realmente suyo. Y una vez más, mi inteción no es difamar; es decir la verdad. Sólo me queda hacer una última pregunta... ¿Usted sabía esto cuando compró su dominio?

Yen.

Este post tiene una continuación en:

Aparentemente, hicimos un cambio: ¿Por qué no hacer páginas Web con PÁGINAS AMARILLAS? - parte 2

jueves, 18 de junio de 2009

Volante digital

Ayer hice este volante para promover mi sitio Web y la creación de páginas sencillas informativas a través del envío de correos masivos, una gran técnica de mercadeo debo decir y me gustaría compartir los archivos fuentes con quien desee descargarlos. Espero les sea muy útil este recurso y no olviden visitar mi sitio Web http://www.yenhowell.com

martes, 16 de junio de 2009

Nuestras páginas Web en Google



Se que este es un tema que nos interesa a mucho y bueno, cuando me llegó esta mañana el blog de los últimos videos de Google sobre sus "SEO Secrets" me dije "¡Yo tengo que ver eso es ya!". Lastimosamente no pude hacer así que tuve que esperar hasta ahorita que tuve un chance y la verdad he quedado muy satisfecha con las respuestas tan sencillas a preguntas tan importantes y simples.

DIV vs TABLAS

Personalmente me he "fajado" mucho aprendiendo a utilizar los DIVs porque son más fáciles de editar, porque son más flexibles, porque puedo acomodar mi contenido como yo quiera y también muchas veces pensando porque me daban mejor posicionamiento en Google, pues aquí está la respuesta...



LINKS, LINKS Y MÁS LINKS

Desde que me puse a estudiar sobre técnicas de SEO siempre estuve clara en que una de las mejores maneras de posicionar nuestros sitios Web - además de tener mayor tráfico de usuarios - es teniendo links de texto en nuestros sitios Web, lo que no sabía es cuanto pueden influir el tipo de enlaces que coloquemos y aquí Google nos da la respuesta...




MI SITE TIENE MUCHAS PÁGINAS

La verdad esta pregunta jamás se había pasado por mi cabeza, siempre pensé que Google indexa todas las páginas relevantes de nuestro sitio, pero me pareció muy bien escuchar esto de las propias palabras de alguien de Google, confirmando mis sospechas...



Por el momento los dejo con esos tres videos, aún no los he visto todos pero tengan por seguro que lo haré y más aún estaré pendiente de los próximos videos que suban al Webmaster Central, sin más que decir por el momento, me despido y espero que disfruten de mis contenidos y aprendan mucho. Hoy una amiga me dijo una frase que dice así: "Los libros no muerden y el Internet no pasa corriente."... Gracias Conchi!!! Así que estemos siempre dispuestos a aprender más y más...

En esta semana sale: "¿Cómo crear una página Web desde 0 - Parte 3."

Un abrazo.
Yen.

lunes, 15 de junio de 2009

Nuevos wallpapers

 

Hace dos semanas fue el final de temporada de otra de mis series favoritas "Gossip Girl" y para recordarla hasta la próxima temporada diseñé este wallpaper que espero les guste. La inspiración para este diseño fueron canciones de Lilly Allen. The Big Bang Theory. La idea la tuve por el último capítulo de esta temporada (la segunda), donde vemos a un Sheldon mucho más humano y cuando vi la foto quise darle un poco de alegría a todo el elenco, en especial a Sheldon "Bazinga". Espero disfruten mi diseño y adorne sus escritorios.
Descárgalos aquí.
Más wallpapers vendrán... esperálos pronto!

viernes, 5 de junio de 2009

¿CÓMO DISEÑAR UN SITIO WEB “FROM SCRATCH”? - Parte 2

Y después de varios diseños llegué a un diseño final...

Computers 4 Geeks index

Y bien, ahora que ya tenemos el diseño en photoshop hecho utilizaremos la herramienta SECTORES para extraer las imágenes que necesitaremos para armar todo nuestro diseño en html.

Herramienta sector

Para este diseño en particular necesitaremos la barra de arriba (donde está la búsqueda), apagamos todos los textos que tiene encima y creamos un sector que contenga la barra completa. También apagamos el logo, pues este lo copiaremos de otra forma, igualmente los íconos de esa barra los copiaremos de una manera diferente.

Para crear el sector luego de hacer clic en esta herramienta arrastramos el mouse y seleccionamos toda el área que necesitamos (en este caso la barra de arriba).

Fondo de la barra de búsqueda

Como podrán ver apareció un número en la esquina superior del área que seleccionamos, este es el número de sector sobre el cual estamos trabajando. Hagamos doble clic sobre esa área y nos aparecerá una ventana. En el campo NOMBRE cambiamos el valor que aparecere allí y ponemos cualquier nombre que podamos recordar, en mi caso yo decidí llamar a ese sector top-bar-bg. Ese es el nombre que tendrá la imagen cuando la guardemos y la vayamos a trabajar en HTML, recuerden que es preferible utilizar guiones medios ( - ) para nombrar las imágenes, es una técnica sencilla de SEO.

Propiedades de un sector

Ya tenemos nuestro primer sector hecho, ahora hagamos un sector de cada item del menú. Una buena idea es hacer zoom para poder abarcar el área exacta que necesitamos.

Sectores del menú

Hacemos doble clic sobre cada uno de los item del menú para nombrarlos con nombres lógicos. Para editar diferentes sectores debemos escojer la otra opción de la herramienta sectores: HERRAMIENTA SELECCIONAR SECTOR.

Herramienta Seleccionar Sector

Con esta herramienta ya podemos ir haciendo doble clic sobre los diferentes sectores que tenemos hechos. En mi casa decidí llamarme a cada item con el nombre de la categoría que representarán: inicio, equipo, servicios, catalogo, pedidos y blog.

Pueden notar que también pueden ponerle los URL y los TEXTOS ALT directamente en Photoshop CS3, pero la verdad yo prefiero hacerlo en Dreamweaver, así que dejaré en blanco los demás campos y sólo me enfocaré en los nombres.

Como pueden ver el diseño tiene dos rayas horizontales debajo del menú, si estas rayas no tuvieran un sombreado podríamos hacerlas con un color sólido en el CSS en vez de con imágenes, pero como les puse sombra utilizaremos las imágenes.

Sombra en las rayas

Crearemos un sector que abarque toda el área horizontal de las rayas gris y negra, incluyendo las sombras. Yo escojí llamarle rayas.

Sector rayas

Ahora apagamos todo el texto e imágenes que está como contenido y creamos un sector del mismo largo que el anterior que abarque un pedazo del área blanca, este será ahora el fondo de nuestro contenido. Debemos asegurarnos que el área que seleccionamos quede exactamente igual de larga que la de la área anterior. Yo le llamé a este sector content-bg

Borde izquierdo   Borde derecho

Background del contenido

También necesitaremos la imagen del final del contenido con las esquinas redondeadas, así que crearemos un sector de ese pedazo. Como necesitamos que tenga el mismo ancho el sector anterior, lo que podemos hacer es crear un sector sin nombre que abarque casi toda el área blanca del contenido para poder cuadrar el sector que crearemos abajo.

Sector en blanco

Y ahora con este sector "guía" podemos crear el sector que contiene la imagen de las esquinas redondeadas de abajo.

Sectores cuadrados

Como pueden ver ambos secotres están alineados, debemos quedar que no quede ni siquiera un pixel de más o de menos entre ambos sectores recuerden: "Un píxel hace la diferencia".

Y ahora el último sector, para crear ese footer sólo necesitaremos un pedazo del fondo azul degradado, la raya verde podemos hacerla con CSS, pero prefiero incluirla en el sector y hacer el footer nada más con esa imágen. A este último sector le llamaré footer-bg.

Background del footer

Y de esta forma hemos terminado todos los sectores que necesitamos.

Ahora guardaremos todos esos sectores como imágenes independientes. Lo primero que haremos es apagar la capa fondo, pues todas las imágenes que necesitamos serán png transparentes. Luego vamos a ARCHIVO > GUARDAR PARA WEB Y DISPOSITIVOS

Guardar para Web y dispositivos

Nos aparecerá una nueva ventana y con la herramienta SELECCIONAR SECTOR que nos aparece allí, vamos haciendo clic sobre cada uno de los sectores que creamos.

Seleccionar sector

Cada vez que hagamos clic en un sector, escojemos en los AJUSTES PREESTABLECIDOS la opción PNG y así veremos cómo cada sector se va tomando un fondo transparente.

Seleccionamos PNG

Para alcanzar los sectores de abajo podemos movernos con la herramienta DESPLAZAR, que es la que tiene forma de manito. En la imagen también vemos como los sectores se volvieron de fondo transparente.

Una vez hacemos clic en GUARDAR, buscamos un lugar donde alojar nuestras imágenes, no es necesario que creemos una carpeta nueva, Photoshop CS3 lo hará por nosotros. Para los que tienen Phostoshop en inglés la carpeta se llamara images, para los que tiene el Photoshop en español (como yo) la carpeta se llamará imágenes, por lo cual deberán cambiarle el nombre más adelante, pues no es recomendable tener caracteres latinos (como tildes o ñ) como nombres de los directorios y/o archivos de nuestros sitios Web.

Opciones de guadar para Web

Ahora, si revisan la caperta donde guardaron las imágenes verán todos los pedacitos que ha creado photoshop para nosotros trabajar.

Carpeta imágenes

Borremos todas las imágenes que no hayamos nombrado, esas imágenes no nos servirán de nada para lo que necesitamos, así que en conclusión nos quedaremos con las siguientes imágenes:

blog.png
catalogo.png

content-bg.png
content-bottom.png
equipo.png
footer-bg.png
inicio.png
pedidos.png
rayas.png
servicios.png
top-bar-bg.png

Las imágenes del logo y los íconos son parte de los sectores, las debemos tener guardadas totalmente aparte.

¡Y listo! Por ahora los dejo con eso... muy pronto viene la parte 3 de este tema: "div-ing", que debo decir es la más interesante y al final la más importante, pues daremos forma a nuestra página Web.

Para descargar el *.psd y las imágenes haz clic en el botón de abajo.

Descargar los archivos

Una recomendación musical: "Lieber gott" - Marlon
Una cita: "Un píxel hace la diferencia." - Yen
Un libro: "Wiccan" - Scott Cunningham

jueves, 4 de junio de 2009

¿Cómo crear un efecto oro en Photoshop? Para cualquier tipo de texto

Después de tanto tiempo al fin publico algo nuevo, la verdad he estado bastante ocupada pero haré todo lo posible por bloggear más seguido. Esta vez voy a mostrarles cómo podemos crear el efecto oro con Photoshop CS3 y cómo editarlo para aplicarlo a cualquier forma o texto.

La idea surgió porque ayer estaba trabajando en el encabezado de una página Web y me pidieron que transformara el logo que muestro abajo al oro.

RB Abogados

Recuerdo que yo había recreado el efecto oro magistralmente hacía un tiempo, pero cortesía de mi difunto disco duro ya no tengo el *.psd fuente, así que lo primero que hice fue poner en Google “Efecto oro en photoshop”. Me encontré con un par de tutoriales muy buenos debo decir pero, me di cuenta que el logo que tenía que transformar es demasiado delgado – tanto las formas como el texto – y los tutoriales que encontré en su mayoría utilizaban letras bastante gruesas, el único que utilizaba una forma delgada… digamos que el efecto no me convenció, así que me dije a mi misma manos a la obra, vamos a crear un efecto que me sirva de base para cualquier forma y que sólo necesite ajustar pequeños parámetros para que se vea bien a lo que se lo aplique. Mi meta era eliminar el problema que cuando aplicaba un efecto que me encontraba por ahí mi logo se veía arrugado o muy oscuro… o ni se veía pero bueno, ahora mostraré cómo pasé de se logo plano en blanco y negro a esto:

RB Abogados

Empecemos por el principio. Efecto para textos delgados y pequeños, el que llamo efecto básico:

Creemos un *.psd nuevo, en este caso yo utilizaré un lienzo de 750x300 pixeles.

Empecemos primero por el texto delgado. Escribamos algo con un tipo de letra Arial Narrow o cualquier tipografía delgada que nos guste.

Efecto oro en Photoshop CS3

Le damos un poco de sombra:

Opacidad 37% > Ángulo 120 > Distancia 4px > Extensión 1% > Tamaño 0px > Ruido 0%

    Efecto oro en Photoshop CS3

Bisel y relieve: Estilo - Relieve > Técnica - Redondeado > Tamaño - 4px > Profundidad - 1000% > Dirección - Arriba > Suavizar - 0 > Ángulo - 120° > Altitud - 30° > Contorno de resplandor - Cono invertido > Modo resaltado - Superexponer color. Color #FFFFFF. Opacidad 60% >Modo de sombra - Multiplicar. Color #625205. Opacidad 75%

    Efecto oro en Photoshop CS3

Contorno: Contorno - Desniveles redondeados > Rango - 100%

    Efecto oro en Photoshop CS3

Superposición de colores: Modo defusión - Normal > Color - #fef5c9 > Opacidad - 100%

    Efecto oro en Photoshop CS3

Trazo: Tamaño - 1px > Posición - Exterior > Modo de fusión - Normal > Opacidad - 100% > Tipo de relleno - Color > Color - #352d00

    Efecto oro en Photoshop CS3

Y voilá! Tenemos un texto delgado y pequeño con efecto de oro.

Efecto oro en Photoshop

 

AHORA EDITEMOS ESTE EFECTO PARA LETRAS DELGADAS Y GRANDES...

Lo primero, escribimos ahora un texto más grande con el mismo tipo de letra o algún otro que nos guste. Lo importante es que sea una tipografía delgada. Le aplicamos el estilo anterior.


Efecto Oro

Lo único que tenemos que hacer ahora es cambiar en el Bisel y Relieve el estilo a INGLETE INTERIOR y cambiar el tamaño a 5px. Podemos jugar también con el color superpuesto si deseamos, pero me parece que ese color está bien.

Efecto Oro

Y el resultado...

Efecto Oro

Sobre un fondo negro se ve muy bien...

Efecto Oro

 

Y AHORA LETRAS GRUESAS Y PEQUEÑAS

Utilicemos un tipo de letra gordito (en este caso estoy utilizando una letra llamada BROAD) en tamaño pequeño y escribamos otra vez nuestro texto y le aplicamos el efecto básico (el de las letras finas y pequeñas).

Efecto Oro

En el BISEL Y RELIEVEcambiemos el color del MODO DE SOMBRA por #514b2e y volvemos a cambiar el tamaño a 5px.

Efecto Oro

Y una vez más tenemos un resultado muy bueno...

Efecto oro

Y en fondo negro se ve genial...

Efecto oro

 

POR ÚLTIMO VEAMOS LAS LETRAS GRUESAS Y GRANDES

Utilicemos la misma tipografía (en mi caso BROAD) en un tamaño más grande y le aplicamos el efecto básico.

Efecto Oro

En el BISEL Y RELIEVE cambiamos el color del MODO DE SOMBRA a #a8a079 y el TAMAÑO a 16px.

Efecto Oro

Y para darle un poco más de delicadeza al asunto ajustemos un poco las sombras.

Distancia - 7px

Extensión - 19%

Tamaño - 10px

Efecto oro

Y el resultado es...

Efecto Oro

Y en negro...

Efecto oro

Y por cualquier duda... puedes descargar el *.psd

Descargar el archivo aquí

Bueno, espero que este tutorial les sirva de mucho como me ha servido a mi y espero sus comentarios.

 

Una recomendación musical: “Fast cars and freedom” – Rascal Flatts.
Un libro: Araica - Yen Howell
Una cita: "La vida es cambiar. La mía es cambiar la de los demás." - Yen Howell