Publicaciones sobre: Diseño
Iconos del iPad
Iconos y dibujos del nuevo iPad de Apple:
» Descargar iconos del iPad (gratis)
Versión Imprimible
Etiquetas: apple, icon, ipad
Noticias Posiblemente Relacionadas [Lista automática]:
Menús CSS
Desarrollo, Diseño | Comentar »
A continuación tenéis un listado de menús CSS gratuitos así como galerías con diversos diseños:
»»» Free CSS Menu (recomendado y enlaces para descargas)
» 30 Free CSS Based Navigation Menus
» 120 Excellent Examples of CSS Horizontal Menu (diseños)
»» CSS-Based Navigation Menus: Modern Solutions (diseños, muy bueno)
» Free CSS Drop Down Menu Generator (generador online de menus css)
» CSS Menu Generator (generador de menus css)
» Advanced CSS Menu (precioso menu CSS gratuito)
» CSS navigation menu (sencillo)
Versión Imprimible
Etiquetas: css, css menu, desarrollo web, free, gratis, javascript, menu, web
Noticias Posiblemente Relacionadas [Lista automática]:
Cómo hacer tu Avatar con Photoshop
¿Te gustaría convertir una foto tuya en un Navi, uno de los avatares de la película de James Cameron? Aquí tienes un sencillo tutorial en Photoshop de cómo hacerlo.
Este tutorial requiere conocimientos MEDIOS de Photoshop, el dominio del filtro LIQUIFY, de las herramientas SMUDGE y PATCH, control sobre la iluminación LEVELS, la SATURACIÓN y de las capas de Photoshop 
- PREPARACIÓN:
- Encontrar la imagen tu fotografía más apropiada para el montaje. Conviene que sea una en la que aparezcas de frente, con un fondo blanco o negro y sin muchos reflejos o sombras.
- Descargarte un Poster de Avatar en el tamaño más grande que puedas
- PIEL:
- Cambiar la saturación a azul. Coge el color de la cara de un Navi del poster de la película Avatar. También puedes probar con este color: #315996
- Suaviza tu piel con la herramienta “Smudge”
- Juega con los niveles de iluminación (LEVELS) para dar con el tono correcto de piel
- Añade algunas sombras a tu cara con el pincel. Coge el azul oscuro del poster de la peli.
- Copia y pega un trozo de piel de un Navi de la peli y colápsala en tu piel(CTRL+E)
- Usa la herramienta PATCH para copiar piezas de la nueva piel del Navi con tu propia piel
- Copia y pega un ojo real de un navi y adáptalo al hueco de tu ojo (CTRL+T)
- Usa el pincel con el color blanco y tamaño pequeño para añadir puntos de diferentes tamaños sobre la piel (las pecas luminosas de los navi). Añádeles el siguiente estilo de capa:
Outer Glow effect
- Blend Mode: Screen
- Color: #3a7987
- Technique: Softer
- Spread: 5%
- Size: 10px - NARIZ:
- Adapta tu nariz con el filtro LIQUIFY. Tiene que quedarte achatada y con aspecto felino.
- Achata la nariz seleccionando y moviendo la imagen: seleccionas y mueves con las flechas. Luego suaviza los bordes con SMUDGE.
- CEJAS Y OJOS:
- Reduce las cejas con la herramienta de borrar y la de SMUDGE. ¡Tienen que ser muy finitas!
- Agranda hasta que parezcan los ojos con el filtro LIQUIFY.
Hay algunas palabras técnicas de photoshop en inglés ya que estoy acostumbrado a usar Photoshop en Inglés 
En este tutorial no se explica cómo crear las orejas, pero básicamente sería un copiar-pegar, adaptar color y suavizar.
» El mismo tutorial en Inglés: Avatar Movie Photoshop Tutorial
» RESULTADO del tutorial: Me as a Navi
Versión Imprimible
Etiquetas: avatar, James Cameron, navi, photoshop, tutorial
Noticias Posiblemente Relacionadas [Lista automática]:
Cómo hacer un fondo de pantalla útil para tu trabajo
Diseño, Fondos | 1 Comentario »
¿Te gustaría tener ordenados los iconos del escritorio del ordenador de tu trabajo? ¿Estás harto de que tu escritorio sea una bolsa de m&ms?
Aquí tienes un pequeño tutorial para crearte un fondo útil para tu trabajo.
Lo primero de todo es prepararnos para lo que vamos a hacer:
1. Asegúrate de cuál es tu resolución de pantalla
2. Obtén un fondo de pantalla para tu resolución. En este enlace tienes algunos muy chulos:
» Fantastic Wallpapers That Will Blow Your Desktop Away
3. Arranca Photoshop, y sigue este tutorial
PASO 1: Prepara todo para el montaje
PASO 2: Crea las cajitas donde organizarás tus iconos
PASO 3: Borra la captura de pantalla de tu escritorio y añade los textos para las cajas
Aquí tienes el tutorial para conseguir el efecto de texto reflejado:
» Tutorial reflejo 2.0 (by Janmi)
Ejemplo de alguna de las cosas que podéis hacer con un poco de creatividad:
» The Icon Tray Wallpaper
Versión Imprimible
Etiquetas: 2.0, Fondos, logo, photoshop, reflejo, trabajo
Noticias Posiblemente Relacionadas [Lista automática]:
Avatar Movie Photoshop Tutorial
Me as Navi, originalmente cargada por Janmi_.
- Find the proper picture you want to manipulate
- Change saturation to blue. Pick the color from an Avatar-Movie poster
- Soft your skin with Smudge tool
- Play with LEVELS in order to get the proper light (darkness please)
- Add some shadows with brush. Take the dark blue from an Avatar-Movie poster
- Adapt your nose with LIQUIFY filter.
- Make a shorter nose by selecting and dragging your face
- Make thinner eyebrows and also soft them with brush + opacity
- Use LIQUIFY again to make your eyes look much feline
- Copy and paste a piece of Avatar-Movie skin and collapse (CTRL+E) with your skin
- Use PATCH tool in order to copy the pieces of your new skin to the rest of the skin
- Copy and Paste an eye of a real avatar and adapt it to your eyes (CTRL+T)
- Use BRUSH with white color and place some spots of different sizes. Then add them the Following Layer Styke:
Outer Glow effect
- Blend Mode: Screen
- Color: #3a7987
- Technique: Softer
- Spread: 5%
- Size: 10px
Lo he puesto en inglés para que lo pueda hacer más gente y… porque mi Photoshop está en Inglés XD
Versión Imprimible
Etiquetas: avatar, avatar movie, avatar photoshop, James Cameron, navi, navi photoshop, photoshop, tutorial, tutorial photoshop
Noticias Posiblemente Relacionadas [Lista automática]:
Web optimizada para resolución mínima de 1024×768px
El ancho mínimo contando la barra de scroll vertical es de 995px.
Si tuvieramos por certeza que no habrá scroll vertical, nos bastan 1005px de ancho.
El ancho visible en Firefox a 1024×768px es de 560px.
Versión Imprimible
Etiquetas: 1024x768, resolucion
Noticias Posiblemente Relacionadas [Lista automática]:
Iconos Navideños Gratuitos
Christmas icons
Aquí tenéis un nuevo set de iconos navideños en diferentes formatos gratis gracias a SmashingMagazine:
- large preview
- download the icons (.ico, .incs, .png, .tif) (.zip, 7.6 Mb)
- download the vector sources (.eps, .ai) (.zip, 16.3 Mb)
Versión Imprimible
Etiquetas: iconos, navidad, xmas
Noticias Posiblemente Relacionadas [Lista automática]:
40 Patrones y Texturas bonitos para tu Web
40+ Beautiful Patterns and Textures for Ornate Backgrounds
Versión Imprimible
Etiquetas: background, patrones, pattern, web
Noticias Posiblemente Relacionadas [Lista automática]:
Campos de Formulario para Photoshop (gratis)
Útil para diseñar páginas o prototipar y versiones para GUI de varios SO!!
»Free Photoshop form element templates
Versión Imprimible
Etiquetas: formulario, formularios, gratis, gui, photoshop, prototipar, prototipo
Noticias Posiblemente Relacionadas [Lista automática]:
Repositorios gratuitos de imágenes
Desarrollo, Diseño | Comentar »
Smashing Magazine publicó un estupendo artículo recopilatorio de portales en los que hay imágenes gratuitos para nuestros desarrollos y Webs y también de pago:
» Free and Commercial Stock Photography Sites
Versión Imprimible
Etiquetas: gratis, Imágenes, repositorio, stock
Noticias Posiblemente Relacionadas [Lista automática]:
Nuevo Logo de Firefox
La próxima versión de Firefox (3.5) tendrá un nuevo logo. Este es el trabajo en curso [vía genbeta]
¡El zorro está pasando por los distintos niveles de super-guerrero! XD
Versión Imprimible
Etiquetas: firefox, logo, software, super guerrero
Noticias Posiblemente Relacionadas [Lista automática]:
Análisis de la nueva Web de CUATRO
Desarrollo, Diseño | Comentar »
La semana pasada la cadena de televisión española CUATRO lanzó su nuevo portal Web orientado completamente al espectador
Procedo a hacer mi pequeña crítica técnica (a fecha de 18/04/09) y revisión del nuevo Web de CUATRO. Cabe destacar que realmente este Web es un portal ya que cualquier interactuacción necesita que estés registrado (introducir comentarios, votar encuestas, valoraciones, etc…). Es una forma de crear una “comunidad”.
1. Publicidad. Lo primero que nos encontramos al visitar el Web es este horrendo banner publicitario. ¿Realmente lo necesitan? ¿Les ofrece tantos ingregos económicos como para tenerlo ahí?
2. Galería de Vídeos. Sin duda esta es la estrella del nuevo Portal Web. Se trata de una pequeña galería en Flash desde que podremos acceder a los contenidos más destacados del Web. Los botones del reproductor de vídeos me parecen un poco feos y el área de comentarios y valoración (html) creo que está un poco alejada del navegador y no se ve la relación.
3. Banners (2) publicitarios de contenidos propios.
4. Banners con imagen y texto (4) de contenidos propios.
5.Banners (3) de acceso a minisites propios
6. Extraño pupurrí un tanto desordenado visualmente de 2 baners en formato imagen y 4 con miniaturas y texto. No me gusta.
7. Noticias. Es el único sitio del Portal (a parte del super banner publicitario de arriba del todo) donde no se habla de programas de Cuatro. En este caso se listan noticias del Mundo/España. ¡Sólo se listan 2! Por muy paginado que esté me parece poco. Por cierto ¿Qué hace el ese botón “Entrar” ahí suelto y desangelado?
8. Encuestas. Vota preguntas relacionadas con el noticiario. Podría haberse hecho más pequeño y así haber listado más noticias.
9. Vídeos y Comentarios de Blogs. Al parecer ahora le han dado mucha relevancia a los Blogs. Aquí tenéis los vídeos más vistos de Cuatro así como los blogs más comentados.
10. Pie de Página. Pensado para ser SEO Compatible, con acceso a las principales áreas de la programación, RSS, y lo típico de un pie de página.
Puntos fuertes de la nueva Web de Cuatro:
- Diseño gráfico: atractiva visualmente y banners diseñados correctamente siguiendo las tipografías de cuatro de la programación a resaltar.
- Compatibilidad. La he probado en varios navegadores y funciona mayormente bien.
- Web 2.0. Se han intentado seguir varios conceptos de la Web 2.0 como: sensación de comunidad, ajax, votaciones, comentarios, vídeos, interacción, etc…
- Blogs. Me parece muy buena idea que ciertos programas / personas de la cadena tengan su propio blog dentro de la red de blogs de Cuatro.
- Publicidad. En los spots de publicidad o durante varios programas de la cadena se ha anunciado la nueva Web de CUATRO. Me gusta que se tomen en serio la relevancia de su propia Web. ¡Sobre todo en los tiempos en los que vivimos!
- Minisites. Me encantan los minisites por programa/serie que tiene. Lo mejor es que pese a que los contenidos son diferentes, todos siguen prácticamente la misma estructura, lo que facilita mucho la usabilidad a los usuarios.
- de.cuatro. Me encanta el “coverflow” estilo iPod que han puesto La tienda virtual de la Cadena.
- Versión móvil: http://movil.cuatro.com/ (mejorable, sobre todo en temas de usabilidad, pero al menos tienen)
- Ventanas Modales. El uso de librerías javascript muy atractivas gráficamente para login, registro, avisos, etc…
Puntos a mejorar en la nueva Web de Cuatro:
- Banner publicitario superior. Como ya he dicho antes ¿es realmente necesario? Horrendo.
- Portal. La mayoría de las interactividades con el Web como comentar o votar requieren haber hecho login y tener una cuenta de usuario. ¿No sería bueno avisar al usuario para animarle a que se registre y sus ventajas?
- Vídeos. No me gusta mucho el flash-player para mostrar los vídeos. Creo que le faltan opciones como “descargar el vídeo en algún formato como AVI, MP4, etc…”. Así mismo estaría bien poderlo enviar por e-mail a un amigo o a alguna red social como meneame, facebook, etc…
- Programación. A mi juicio le falta resaltar en la home la programación de la cadena del día en curso. ¡Y resaltarlo mucho! Que el usuario no tenga que hacer scroll o navegar para encontrar la programación, que se vea claramente visible como por ejemplo en el Web de Sci Fi España.
- Sección “Todos los Programas“. Agghhhhh. ¡Qué cosa más horrible! Esta especie de Mapa del Sitio de la Programación es bastante incómodo para encontrar programas (podrían haber resaltado más el buscador textual) y además contiene unas estadísticas completamente inútiles y ¿erróneas? para el usuario. “Fama a Bailar” tiene 5.497.484 ¿accesos o visitas? ¿Cómo puede ser? Comparativamente a los otros programas me parece muy distante.
- Versión Móvil. Por televisión anuncian que existe una versión móvil, sin embargo dicha versión no es accesible desde la versión Normal y al acceder a cuatro.com desde un iPhone o Móvil no me redirecciona a http://movil.cuatro.com/
Así pues, creo que la Web está bastante bien. Aquí tenéis el resumen de mi crítica de la nueva Web de Cuatro:
| Diseño | 7 |
| Contenidos | 7 |
| Usabilidad | 7 |
| Web 2.0 | 8 |
| Media | 7,25 |
Aquí tenéis mi antigua crítica a Webs de cadenas de televisión donde la Web de cuatro tenía una media de 7,5 
La antigua Web de Cuatro me parecía más clara, ordenada y compacta…
Y ahora sólo queda visitar el Web: www.cuatro.com
Versión Imprimible
Etiquetas: 2.0, crítica, cuatro, el hormiguero, portal, television, tv, web 2.0
Noticias Posiblemente Relacionadas [Lista automática]:
Mis Categorías.
¡Mira!
- lorena said: a mi papi,en su primer año del dia del padre lo vo...
- daniela said: stephenie meyer es lo maximo desde que lei eclip...
- daniela said: amanecer creo que es toda la aventura y todo lo qu...
- Gabriel said: excelente, me funciono a la perfeccion. Muchas gra...
- Hector Araya said: el Disco esta bueno, no hiper-excelente en compara...
- Augusto said: Este es el orden: 5º lugar: Imperio Británico: A...
- The Host La Huésped (Stephenie Meyer)
- Crítica de Stratovarius - Polaris (2009)
- El tabaco sube de precio - deja de fumar
- Cómo hacer tu Avatar con Photoshop
- ¿Qué mago es mejor: Dumbledore o Gandalf?
Sobre Janmi.com …
My photos. Now you know me.
Me gustaría tener…
Citas
Enlaces
- Ariasmarques.com Cifras y letras para tipos retro
- Begedi.net Begedi my friend
- Cédula Mallorca Obtener Cédula Habitabilidad en Malloca. Web hecha por Janmi.
- Club Esportiu Es Pedal
- Cuadros Cuadros, decoración, cuadros abstractos, modernos, flores
- Elcaseto.es Curiosidades
- Fotos en Lienzo Fotos en Lienzo, el mejor regalo
- Janmi en Flickr Mis fotos en Flickr
- joselite.com Web de mi amigo Jose
- Pasajes del Alma Publicación gratuita de relatos cortos y poesías en Internet
- Pensamientos Costillares
- Portafolio de Janmi Portafolio de Webs y Fotografía hechas por Janmi
- Promotelia Porque hay vida más allá de Google Adwords…
- Salvinha.com
