Entradas

Mostrando las entradas etiquetadas como manuales

Colores pastel con Photoshop, cómo hacerlos

Imagen
Los colores pastel se ven bastante bien; le dan vida al sitio sin saturarlo tanto como un color "puro" o fosforecente. Sin embargo, a algunas personas les da mucho juego encontrarlos o elegir el código. Esta mini-entrada es para explicar como lograr un efecto pastel en Photoshop (u otros editores) en... digamos... ¿1 paso? tal vez 2 o 3. Trabajaremos con esta imagen, gentileza de http://letraschile.tk (con licencia CC): 1.- La abrimos con Photoshop y creamos una capa blanca sobre el fondo , de modo que quede toda tapada: 2.- A continuación, cambiamos la opacidad de la capa blanca a 50% . Puedes probar con otros valores y buscar uno de tu agrado: No me atrevería a llamar a este método "tutorial" o "truco", pero ciertamente es una forma fácil y rápida de obtener un efecto sobrio, pero que se ve bien .

CSS:atributos más comunes Border, anchos y altos - Parte 1 de ayuda y consejos para nuevos webmaster

Siguiendo con atributos comunes en CSS, hoy con bordes, anchos y altos. Bordes Estos son los atributos que podemos aplicar a los bordes, con sus respectivos valores: {border-style:[none/dotted/dashed/solid/double/groove/ridge/inset/outset];} Donde none entrega un elemento sin borde ; dotted , un borde formado por puntos ; dashed , un borde formado por guiones ; solid , un borde formado por una línea continua ; double , borde de dos líneas contínuas ; groove , ridge , inset y outset son distintos tipos de borde 3D . {border-width: [ nºpx/thin/medium/thick ];} Donde podemos definir el ancho del borde en pixeles , o usando uno de los tres valores predefinidos. thin es el más delgado , thick es el más grueso y medium está entre los dos . Para que este atributo funcione, es necesario haber definido border-style también. {border-color: [color];] Especificamos el color del borde, de la forma en que vimos en el tomo anterior. Podemos especificar valores distintos para c...

CSS: atributos más comunes Texto y fondos- Parte 1 de ayuda y consejos para nuevos webmaster

Siguiendo con el mini-curso , pasamos a revisar los atributos más comunes en CSS . i.e, manipulación de texto y fondos . Texto : Al texto podemos aplicar los siguientes atributos, con sus respectivos valores: {font-family: [fuente];} ej: p {font-family: "Times New Roman", Times, serif;} Aquí están las combinaciones seguras {font-size: [px / em / %] ;  ej: p {font-size: 16px;} {font-style: [ normal/italic/bold/oblique ];}   Donde normal es por defecto, italic es cursiva , bold es negrita y oblique es similar a italic, pero con menos soporte. {font-variant: [ normal/small-caps/inherit ];}   Donde   normal   es por defecto,   small-caps   es versalitas (mayúsculas pequeñas) e inherit   especifica que herede atributos del elemento padre. {font-weight: [normal/bold/bolder/lighter/100/200/300/400500/600/700/800/900];} Donde bold es negrita , bolder es más grueso que antes, lighter es más delgado que antes, 400 equivale a norm...

CSS: Introducción - Parte 1 de ayuda y consejos para nuevos webmaster

Imagen
Primera entrega de consejos para nuevos Webmasters . En esta ocasión, c onsejos para nuevos programadores . Uso de CSS. Todos empezamos desde cero y, algunos, empezamos por hobbie, por lo que no tenemos mucha ayuda. Esto es un pequeño empujón . Haremos diferencia sólo entre HTML y CSS, pero entiéndase por HTML al lenguaje de escritura de código , y no a la extensión del archivo. CSS ( Cascading Style Sheets , Hojas de Estilos en Cascada) se usan para cambiar la forma en que se muestra nuestra página en una pantalla. Son un método mucho más ordenado , puesto que permiten especificar una sola hoja de estilos que puede ser llamada desde un número infinito de páginas en HTML . Una hoja de estilos tiene una forma como esta: body {     background: #0F0;     color: #FFF;     font-size:16px; } .cabeceras {     color: #F00;     font-size: 40px; } En este ejemplo, "body" se llama selector , y lo que está {entre llaves} son los es...

Importar marcadores de Chrome a Firefox 4 en 4 pasos.

Imagen
Este es un remake de una entreda, más explicativa que la anterior y en 4 pasos. ¿Quieres probar Firefox 4 , pero todas tus cosas están en Chrome ? En esta nueva versión de Firefox,  podemos importar marcadores desde un archivo HTML ... ¡bendita solución! porque  Chrome nos deja exportar en HTML . 1.-  En Chrome , haz click en  Herramientas ---> Marcadores ---> Administrador de marcadores . 2.- En la parte de arriba, te vas a Organizar ---> Exportar marcadores. Elige donde guardarlo 3.-  En Firefox , vas al  botón de Firefox ----> Marcadores ----> Mostrar todos los marcadores. 4.- Arriba, presiona el botón Importar y respaldar ---> Importar HTML.  Ahora sólo busca lo que exportaste con Chrome. Y listo, ya tienes tus marcadores, organizados tal como los tenías en Chrome , pero la barra de marcadores de Firefox no muestra los de la barra de Chrome, sino una carpeta llamada "Barra de marcadores" Descargar Firefox 4: http://www.mozil...

Efecto HDR con Photoshop - Cómo hacerlo

Imagen
Hae un tiempo les mostramos imágenes con efecto HDR incluído. Ahora, un pequeño tutorial para lograr una simulación de este efecto con Photoshop (en este caso, CS5). Esta es la imagen que elegimos:   Los pasos que seguiremos son: 1.-En photoshop, duplicar la capa (Click derecho sobre capa --> duplicar) :   2.- A esa nueva capa, la ponemos en modo "Superponer" : 3.- Ahora duplicamos la capa resultante que hemos puesto en modo superponer. 4.- A la última capa obtenida, le aplicamos "Desaturar" (Imagen --> Ajustes --> Desaturar; o CTRL+SHIFT+U) 5.- A esa misma capa que desaturamos, le aplicamos "Invertir" (Imagen --> Ajustes --> Invertir; o CTRL+I) 6.- Ya tenemos una imagen retocada. Ahora podemos modificar la opacidad de las capas o cambiar las curvas, pero eso ya es gusto personal. Comparación inicio/final:   Aclaro y repito que esto es una simulación de HDR, y además uno de los tutoriales más básicos para lograrlo. Más adela...