Por lo visto, a más de alguno le ha gustado Unsleepable, el theme para WordPress que traduje al español —se los agradezco. Para ustedes, un tutorial para crear el título del theme, tal como lo pueden ver en la página del autor original o en este mismo sitio, es decir, con la posibilidad de cambiar el color del fondo al pasar por encima y con los bordes de las letras suavizados.
Para esto, utilizaremos Photoshop, pero creo que, con ligeras variaciones, se puede conseguir lo mismo con GIMP.
Manos a la obra
En Photoshop, crearemos una nueva imagen. Pero antes, nos aseguraremos de seleccionar el color de fondo correcto, que en nuestro caso será #333333- Luego, crearemos la nueva imagen: File > New (o Ctrl + N). Fijaremos las siguientes opciones: Width [Ancho]: 250 pixels; Height [Alto]: 50 pixels y en Contents: seleccionar "Background Color" [Color de fondo], con lo que crearemos una imagen con el fondo de color que habíamos seleccionado anteriormente
- Luego, habrá que crear el texto. La fuente, el tamaño y el color que quieran, por supuesto. Lo único importante es mantener el color de fondo —por otra parte, les recomiendo no utilizar drop shadows (sombras) en el texto, ya que eso complicaría la posibilidad de que al pasar el puntero sobre la imagen el fondo cambie de color correctamente.
- Una vez que ya tenemos listo nuestro título, debemos dirigirnos a File > Save For Web [Guardar para el Web] (o Alt+Shift+Ctrl+S). Una vez allí, elegimos GIF como formato de salida, para de esta manera sobreescribir luego la imagen de título antigua y no tener que editar luego la hoja de estilos. Luego, debemos seguir los siguientes pasos:
Con el Eyedropper Tool, seleccionar el colo de fondo de nuestra imagen. Teniéndolo seleccionado, marcamos la opción Maps selected colors to Transparent [mapear los colores seleccionados como transparentes], con lo que se hará transparente, quedando la imagen como se ve en el cuadrado superior derecho de la imagen, con el texto y los cuadros grises y blancos que indican la transparencia- Luego, en la sección de Settings [opciones], seleccionar Matte > Eyedropper color, con lo que le indicaremos al programa que los pixeles que queden con medias transparencias deben asumir que el fondo donde pondremos la imagen es del color que habíamos seleccionado previamente… o sea, preparamos la imagen para ser puesta contra un fondo color #333333
- Bajo Transparency [transparencia], seleccionamos “No transparency dither”
- Luego, seleccionen las opciones de calidad de acuerdo a lo que les otorgue los mejores resultados y listo (Done): a sobreescribir el archivo anterior, lo encuentran en la carpeta Images bajo el nombre title.gif
¡Suerte!
10 Comentarios
excelente tutorial muy util… batalle bastatante por hacer el titulo hasta que lo lei en la pagina del autor. gracias por la traduccion.
gran trabajo, lo probaré esta semana a ver si me termina de convencer, porque estoy teniendo problemas con la velocidad de carga.
Saludos cordiales.
Excelente trabajo, mi duda es: hay alguna forma rápida de cambiar el color moradito que tienen los links. Dime porfavor que solo es un hex en el css, pero solo uno… no quiero andar cambiando miles de valores…
La verdad es que he tratado de no mirar tanto el código del theme (CSS ni PHP) —más que para la traducción, claro—, por lo que en verdad no sabría decirte.
Eso sí, como dato te puedo decir que “el moradito” de los links aparece en el CSS como #da1071… ojalá eso pueda darte un punto de partida para buscar y reemplazarlo.
Sólo le falta que use los widget sidebar.
Sigo usándolo todavía, aunque no me convence 100%.
Buen trabajo.
A decir verdad, a mí tampoco :/
Me encanta, gracias a esto podré poner lo que quería, pero no sabía como poner en mi blog (mi inexperiencia con css y demás me lo impide).
Por cierto, alguien sería tan amable de decirme como poner los menués igual que la web http://www.openswitch.org, gracias de antemano
Gracias por todo. Tengo un pequeño problema, el nombre de las páginas, entadas, y los extras de la derecha me salen en minúscula, sin embargo en el panel de administración los tengo escritos en mayúscula y si pruebo con otro theme si que funciona, que debo hacer?
Gracias
No lo he revisado, pero es probable que eso suceda porque está controlado por la hoja de estilos (CSS).
Para modificarlo, podrías abrir el archivo y buscar "lowercase", que debe ir junto a la propiedad
text-transform, y cambiarlo auppercase, capitalize, noneo simplemente borrarlo.Puedes encontrar más info en Text-transform - Cascading Style Sheets Properties
hola!!a todos
2 Trackbacks
[...] Via: yukei.net [...]
[...] Предлагаю заинтересованному читателю самостоятельно повторить процесс консолидации английского текста с испанскими скриншотами. Ссылка тут и тут. [...]