Categoría: CSS

  • Comprueba tus conocimientos de WordPress, CSS, Photoshop, Social Media y mucho más

    Comprueba tus conocimientos de WordPress, CSS, Photoshop, Social Media y mucho más

    Si quieres poner a prueba tus conocimientos como diseñador y/o desarrollador te aconsejo que pases por Smarterer.

    Llegué a él para probar los míos sobre WordPress y pensé que sería el típico test de 20 preguntas básicas. Para mi sorpresa había de todo tipo, preguntas avanzadas y básicas, con tiempo límite para responder y tuve que dejar de responder preguntas porque no se acababan nunca. Además las preguntas nunca aparecerán en el mismo orden por lo que es muy difícil hacer trampas.

    Una vez finalizado el de WordPress el propio sitio te recomienda algunos tests similares a tu perfil: HTML5, PHP, Twitter, Facebook, MySQL, etc.

    Recommended for You   Smarterer

    Hay cientos de tests, desde diseño de logos a Excel, inglés, Marketing, nutrición o primeros auxilios. Y además puedes aportar tus preguntas a los tests o crear los tuyos.

    Enlaces: Smarterer / Test de WordPress

  • 25 plugins gratuitos para Photoshop (Parte I)

    25 plugins gratuitos para Photoshop (Parte I)

    Si quieres ampliar las de por sí ya cuasi infinitas posibilidades de Photoshop prueba estos 19 21 25 plugins, acciones, scripts y extensiones gratuitos.

    Relacionado:

    Algunos son útiles para retoque fotográfico, otros para diseño web, otros para aumentar tu productividad, uno tipográfico y el último para hacerte el diseño de los perfiles de tus redes sociales.

    1. Perfect Effects 8 Free Edition

    Perfect Effects es un todo en uno, funciona con Photoshop, Photoshop Elements, Lightroom, Apple Aperture y también como aplicación de escritorio.

    128 efectos (la versión premium 471) en un solo click y 9 ajustables, con la posibilidad de combinarlos.

    free-effects

    2. Composer

    Una herramienta para aumentar la productividad. Te permite actualizar la posición, visibilidad y estilos de capas y/o composiciones de capas.

    image

    [publi]

    3. CSS3Ps

    Para diseñadores y desarrolladores web que necesitan extraer las CSS de un PSD. Recientemente han añadido la exportación a SVG.

    CSS3Ps free cloud based photoshop plugin that converts layers to CSS3 styles.

     

    Otras opción gratuita es la aplicación web Project Parfait de Adobe.

    Relacionado: CSS3 Photoshop Plugin

    4. Photoshop Tones Action

    Una acción para Photoshop para crear una paleta de colores a partir de un solo color.

    accion-color-photoshop

    5. Long Shadow Generator for Photoshop

    Este necesita poca explicación ;)

    Long Shadow Generator for Photoshop A PS extension to create long shadow with one click

    6. Mr. Stacks. On the fly layercomp storyboarding.

    Convierte composiciones de capa en un storyboard en un nuevo PSD o en PDF

    Mr. Stacks. On the fly layercomp storyboarding.

    7. NKS5 Natural Media Toolkit for Photoshop CS5 – CS6

    Una extensión que añade un panel con una buena colección de texturas y pinceles y también ayuda para la creación de guías.

    nik-plugin-photoshop

    8. Sinedots II

    Bastante antiguo pero curioso, para crear arte abstracto vectorial aleatorio como este

    Sinedots2

    9. Cut&Slice me

    Un sustituto a los obsoletos sectores. Aprendes unas sencillas reglas para nombrar tus capas y consigues ahorrarte unos pasos para exportar pngs con transparencia a través de “Guardar para web”

    cut-slice

    Relacionado Cut&Slice me plugin para Photoshop

    10. GuideGuide

    Para crear rejillas

    GuideGuide

    Relacionado Plantillas PSD y PNG de grids o rejillas CSS para diseño web

    11. Web Font Plugin

    Te permite crear mockups con las tipografías alojadas en Google Web Fonts sin necesidades de instalarlas en tu equipo.

    webfont

    Relacionado Añade Google Web Fonts a Photoshop

    12. Flaticon Photoshop plugin

    Casi 50.000 iconos que añadir en Photoshop

    Download free our new Photoshop plugin

    Relacionado: Iconos gratuitos dentro de Photoshop

    13. BlendMe.in Photoshop and Illustrator Extension

    El mismo propósito que Flaticon, un buscador de iconos dentro de Photoshop

    belndmein-iconos-photoshop

    Relacionado: Iconos gratuitos dentro de Photoshop

    14. Tych Panel – The ultimate diptych, triptych & ntych automation tool for Photoshop

    Para crear composiciones

    wedding-photographer-goteborg-alex-and-alex

    Relacionado Composiciones sencillas en Photoshop con Tych Panel

    15. Save Panel

    Facilita las opciones para guardar un JPEG e incluso para compartirlo rápidamente con Dropbox

    save-panel-options

    16. Breeezy Photoshop Extension

    Para exportar varias capas

    Breeezy Photoshop Extension

    17. Render.ly – hassle-free photoshop exporting

    Un plugin muy interesante para guardar versiones y exportar mockups web. Es gratuito pero necesitas pedir invitación.

    Render.ly hassle free photoshop exporting

    18. Layrs – free PS extension

    Distintos scripts para gestionar con mayor eficacia las capas

    Layrs free PS extension

    19. Social Kit – Free Photoshop plugin with social templates

    Todas las plantillas para los perfiles de tus redes sociales: Facebook, Twitter, G+, YouTube y también los botones para tu web.

    Social Kit Free Photoshop plugin with social templates

    20. Adobe Emailer (actualizado)

    Adobe Emailer Panel es una extensión gratuita con la que podemos enviar por email las imágenes PSD con las que estamos trabajando

    adobe-emailer

    Relacionado Adobe Emailer, envía tus PSD por email

    21. Kaku • Traduce tus capas de texto

    KaKu es un plugin, una extensión gratuita para Photoshop que traduce a otros idiomas las capas de texto de tu PSD.

    Kaku-Translates-your-Photoshop-text-layers.png

    Relacionado:Plugin gratuito para Photoshop que traduce las capas de texto – ceslava

    22. Griddify

    Griddify es una extensión gratuita de código abierto que facilita la creación de una retícula, un grid o rejilla, de guías para tu diseño en Photoshop.

    reticula-photoshop.png

    Relacionado: Griddify y GuideGuide: extensiones gratuitas para crear retículas en Photoshop – ceslava

    22. Halftone Automator Photoshop actions

    Un paquete de 12 acciones para emular los semitonos o las obras de Lichtenstein o Warhol y darles un aspecto retro. Puedes usar puntos, líneas horizontales o líneas verticales.

    Page2.jpg

    23. Engrave Filter

    El archivo de descarga contiene la acción y un PSD, colocas la imagen en el PSD y ejecutas la acción.

    engrave-filter-photoshop.jpg

    24. Swatchy, plugin gratuito para crear carpetas de muestras en Photoshop

    Por fin podrás organizar en carpetas y gestionar mejor tus muestras en Photoshop con este plugin gratuito: Swatchy.

    Swatchy.png

    25. Script gratuito para crear cotas de medidas en Photoshop

    Size-Marks-PS es un script gratuito para Photoshop que crea cotas de medidas. Con líneas de cota, flechas y sus cifras de medida. Ideal para bocetos.

    size-marks-show.gif


    Puedes aportar tus plugins preferidos y odiados en El mejor y el peor plugin para Photoshop

  • Nace Avocode, el asesino de Photoshop

    Nace Avocode, el asesino de Photoshop

    Se acaba de anunciar el lanzamiento de Avocode, presentado como la solución a todos los problemas que tenemos los diseñadores y desarrolladores web que trabajamos con Photoshop.

    El anuncio se ha hecho hoy tras la campaña teaser “El asesino de Photoshop”.

    El puente entre diseñadores gráficos y desarrolladores web.

    Avocode – Preview and inspect PSDs

    https://www.youtube.com/watch?v=-PNVusl6J7Y

    Sus competidores más cercanos son Sketch y el reciente Project Parfait del mismo Adobe.

    Sus bazas frente a ellos son que Avocode:

    • es una aplicación web pero también de escritorio (Mac, Windows, Linux) que podrán ser sincronizadas
    • soportará otros formatos además del PSD
    • incluye más opciones como preprocesadores, fuentes de iconos o sprites de imágenes.

    Se ha lanzado como beta privada por invitación y este verano harán la pública, que será gratuita hasta que salgan de la beta y los usuarios que lo deseen pagarán un precio mensual por utilizarla.

    Enlace: http://avocode.com/

  • Project Parfait, nueva herramienta gratuita de Adobe para diseño web con Photoshop

    Project Parfait, nueva herramienta gratuita de Adobe para diseño web con Photoshop

    Project Parfait es una útil aplicación web gratuita de Adobe para diseñadores y desarrolladores web que trabajen con Photoshop. Y es que los diseñadores web encontramos muchas carencias para diseñar interfaces en el popular software.

    La alternativa antes era Fireworks pero Adobe decidió no continuar con su desarrollo, luego surgió Sketch, en breve se lanzará el asesino de Photoshop (actualización: Nace Avocado) pero Adobe parece no querer dejar colgado a este nicho de mercado y ha lanzado Parfait para solucionar algunas de estas carencias.

    Project Parfait  Beta    PSD CSS Extraction  Measurements and Image Optimization Service for the Web

    Es gratuito y está aún en Beta. Sólo necesitas entrar con tu ID de Adobe y subir tu PSD.

    • Puedes copiar las CSS de un elemento
    • Exportar imágenes por capa para web
    • Colores en CSS
    • CSS de la tipografía
    • Medir elementos y la distancia entre ellos
    • Editar el PSD, da igual la versión de Photoshop con la que haya sido creado.

    Una herramienta más de Adobe para diseñadores web como las de Adobe Edge, el editor Brackets, Typekit y su reciente Typekit Practice para aprender tipografía. Esperamos que en próximas versiones de Photoshop se dejen de tanto 3D e incluyan más funciones para el diseño web.

    Enlace: http://projectparfait.adobe.com/

  • El asesino de Photoshop

    El asesino de Photoshop

    PhotoshopKiller (El asesino de Photoshop) muestra 13 problemas de Photoshop que odiamos los diseñadores web.

    Photoshop me mata cuando:

    1. Accidentalmente hago click en “Buscar en Bridge”
    2. Intento ganarle la batalla a los perfiles de color
    3. Tengo que confirmar varias ventanas de diálogo antes de abrir un PSD
    4. No existe aún una mejor forma de hacer mediciones que con la herramienta de selección “Marco rectangular”
    5. Intento guardar una imagen con modos de fusión
    6. Tengo que romperme los dedos para guardar una imagen para web
    7. Intento ser exacto con los pixeles
    8. Salen nuevas funciones para diseñadores de interfaces… como el 3D
    9. Copio las CSS de poca calidad
    10. Mi única contraseña y mis datos personales se filtran y aparecen en torrents
    11. No puedo exportar una capa como una imagen
    12. Intento averiguar quien es el responsable de los ajustes preestablecidos… como los estilos de capa
    13. Tengo que comprar Illustrator para exportar a SVG

    En cada problema los usuarios eligen si les vuelve loco o pueden lidiar con él.

    Una captura de mi favorito, los degradados LSD (LOL)

    PhotoshopKiller — A list of most hated Photoshop features and bugs.

    Este minisite no es más que  una campaña teaser de los creadores CSS Hat & PNG Hat. Están trabajando en un software que sustituya a Photoshop como herramienta de diseño web y que resuelva todos estos problemas.

    Actualización 1/05/14

    Ya se ha lanzado Avocado, el asesino de Photoshop

    No pretenden acabar con Photoshop pero sí llenar el hueco que ha dejado Adobe al discontinuar Fireworks para el diseño y prototipado de interfaces, apps y web.

    Según la cuenta atrás lo anunciarán en 38 horas. Actualizaremos este post cuando se haga oficial el lanzamiento del Asesino de Photoshop ;)

  • El hombre responsive ¿en Flash?

    El hombre responsive ¿en Flash?

    Responsive Man es un curioso experimento relacionado con el RWD (Responsive Web Design) y que algunos traducen como adaptativo.

    Como habrás adivinado se trata de un hombre que cambia según la resolución de la pantalla pero lo que más curioso me resulta es que está hecho con Flash.

    image

    image

    image

    image

  • 10 kuriosidades sobre ViraliZzer

    10 kuriosidades sobre ViraliZzer

    Le hemos preguntado a Pepo Jiménez, más conocido como @kurioso, 10 kuriosidades sobre su original proyecto ViraliZzer.

    Antes de la entrevista a Pepo haremos una breve introducción sobre ViraliZzer.

    ¿Qué es ViraliZzer?

    ViraliZzer es un agregador automático de contenidos de Twitter, Facebook, Menéame, Bitácoras, Reddit, Google Plus y un canal de RSS. El filtro que hace esta aplicación web de todas estas fuentes es sacar las que están siendo más compartidas. Este original bot averigua qué va a ser viral, es capaz por ejemplo de pronosticar que será portada en Menéame.

    Este contenido viral indexado se refresca continuamente en una línea de tiempo. (vídeotutorial)

    Pero Pepo sigue mejorando ViraliZzer, esta semana nos presentó novedades, entre ellas un layout tipo revista, con un diseño que personalmente me ha parecido un gran salto cualitativo.

    ViraliZzer

    10 kuriosidades sobre ViraliZzer

    1. ¿Cómo te presentas? ¿CEO, desarrollador, autor, ideólogo y/o creador de ViraliZzer?

    Llámame amigo.

    fotoentrevista1

    2. Tu faceta de programador es para muchos desconocida, al menos hasta que lanzaste ViraliZzer ¿Habías programado algo antes de ViraliZzer?

    Hace 30 años ayudé a mi primo a hacer un juego de bolos en Basic para el Sinclair Zx­81…¡Qué recuerdos! En realidad yo hacía los dibujos en 16 píxeles y él programaba. Ese es todo mi currículo. La autoformación y aprendizaje ha sido una constante en mi vida. Alguna vez he tenido que hacer una web por compromiso para un cliente asociada a algún trabajo mayor. Luego empiezas enredando en el WordPress, Flash y acabas depurando las ‘queries’ de Mysql para bajar unas milésimas las consultas.Lo de siempre.

    Algunos me van a matar pero yo siempre he dicho que programar es tremendamente sencillo. Hay que dominar cuatro conceptos básicos inherentes a todo lenguaje. Lo que es realmente complicado, apasionante y al alcance sólo de profesionales es que tu código haga las cosas de manera eficiente, rápida y consumiendo poco recursos… y si no eres un profesional o no has recibido formación adecuada ­como me pasa a mi­ siempre puedes invertir en fuerza bruta para procesar código mediocre. Luego ya depuras. Cada vez la fuerza bruta es más barata y tiene mucho menos valor que gastar 100 horas de tu tiempo en mejorar una clase PHP que simplemente ya funciona. Solo hay que encontrar un equilibrio coherente.

    3. ¿Qué porcentaje de éxito le aplicas a ViraliZzer por tenerte detrás a ti? Alguien con una masa social importante y buena reputación

    Das por hecho que tengo buena reputación lo cual dudo y aunque eso fuera cierto la reputación no es exportable. Que se lo digan a Michael Jordan y su periplo por el béisbol. La red juzga por el valor, no por el maquillaje. En internet se filtran los éxitos y fracasos con soberana rapidez. Incluso aquellos proyectos mediocres que sobreviven amamantados por la pasta de las grandes marcas tecnológicas desaparecen en cuanto se cierra el grifo. Por eso cuanto más humilde seas en tu nacimiento, cuanto menos inviertas en imponderables, menos explicaciones tendrás que dar cuando rueden los setos por tu Google Analytics…. ¡Y que te quiten lo aprendido!

    La ‘masa social’ no sirve si tus contenidos son una mierda.. porque tu masa social no es tonta. Te conoce, sabe la calidad media de tus contenidos y te exige siempre un poco más. La masa puede ayudarte a hacer los coros, pero si la canción es mala…

    4. ¿Compartirías el código de ViraliZzer? ¿Por qué?

    Lo haré cuando no me de tanta vergüenza enseñarlo. Mi mérito es el esfuerzo dedicado en llegar a completar una idea que tenía en la cabeza partiendo de cero, no crear un código perfectamente estructurado y eficiente.

    5. El diseño ha mejorado notablemente, la has hecho responsive también. ¿Tienes en mente hacer alguna app?

    La idea era esa. Invertir en el aprendizaje para desarrollar una app móvil que funcione en IOS y Android era menos rentable que aprender a encajar las ‘media queries’ de css. ViraliZzer ahora es ‘responsive’ para todos los dispositivos estándar y al ser concebido como un agregador web tiene menos sentido desarrollar una app para luego implementar otro navegador dentro de ella. Para el usuario ‘infoalcoholic’ es más cómodo tener integradas sus fuentes como marcadores en su navegador habitual que ir rotando de aplicación en aplicación. Yo la uso más en móvil que en ordenador.

    6. El SPAM. Entre las novedades que acabas de presentar está la posibilidad de que los usuarios añadan sus propios enlaces. ¿Habrá penalización como en Meneame para los que publiquen sus propias noticias aunque se hagan virales?

    No me preocupa porque ViraliZzer funciona de manera distinta que otros agregadores. El criterio de selección de las noticias no corresponde a un grupo limitado de usuarios sino a la respuesta viral en siete redes sociales. El usuario puede compartir libremente de su blog, del de su cuñado o del perro. Si el contenido no es lo suficientemente viral o interesante no saldrá al timeline principal. El único problema de esto es el Spam comercial, el phising, el porno o los enlaces trampa de twitter que todo el mundo propaga inconscientemente. Hay 200 dominios baneados y siguen creciendo.

    7. Dinos un poco las ventajas y desventajas de ser un poco Juan Palomo. ¿Por qué decides hacer tú solo ViraliZzer y no contar con un equipo? ¿Qué tiempo estimas aproximadamente llevas invertido en tu proyecto?

    Me hubiera encantado disponer de dos programadores más, un gestor de marca, tres diseñadores y un mayordomo pero la vida es dura y pedir nunca fue mi fuerte. Si la idea funciona rodará sola y no hará falta. Si no, a otra cosa y no habré dejado a amigos colgados por el camino. ViraliZzer nació como un hobby y se convirtió pronto en una obsesión. Las obsesiones mejor vivirlas en soledad. La primera línea de código es de diciembre de 2012. Tela.

    8. Aspectos legales. Tienes un aviso de Le Ley de Cookies ¿qué opinas de ella? ¿bloqueas todas las cookies como la ley dice o simplemente adviertes? ¿Cómo afrontas los derechos de autor de las imágenes que se publican en ViraliZzer o de las noticias que vienen de los medios de comunicación? ¿Has tenido alguna queja?

    Para crear el aviso de cookies hay que crear obligatoriamente una cookie. Es todo un poco absurdo y demencial. Todas las cookies en ViraliZzer son a nivel de usuario registrado excepto las de Adsense, que no puedes controlar. Las imágenes que captura ViraliZzer son siempre extractos recortados. De tal forma que te obligue a pinchar en ella para verla completa y dar la visita a la fuente original. De todas formas, con la nueva LPI en ciernes este será el menor de mis problemas…

    9. Hablemos de pasta pero con educación. Al margen del dinero que TVE te ofreció un 28 de diciembre creo que los ingresos vienen por donativos y publicidad de Adsense. ¿Te está resultando rentable? ¿Somos tus usuarios generosos?

    La broma del 28 de diciembre tuve que pararla cuando mi madre se disponía a encargar una mariscada. Me sorprendió que se la creyera tanta gente porque significa que es proyecto valorado, por lo menos en el esfuerzo. Los primeros anuncios los regalé a medios en los que he ido colaborando y no cobré un duro. Solo llevo con Adsense ­mal configurado­ una semana. El proyecto es sostenible porque ‘solo’ me cuesta 70€ al mes en servidores y cuentas de apoyo. Las donaciones son de amigos que me aprecian mucho…

    10. ¿Cuál es la siguiente fase de ViraliZzer? ¿ViraliZzer tiene precio? ¿El fin último de ViraliZzer es que un pez gordo se interese por él y te haga alguna oferta?

    ViraliZzer nació para darme un servicio a mi. Si me gusta y me es útil, servirá a otras personas con inquietudes similares. Si esto pasa y va creciendo servirá también a las marcas que buscan a esas personas con inquietudes parecidas.

    La siguiente fase es encontrar a estas marcas que apuesten por los ranking semanales y mensuales. Una forma de premiar a los mejores usuarios con patrocinio de empresas que estimulen la generación de contenidos con el Miniblog o la sección ViraliZza

    Un saludo y gracias


    Gracias a ti amigo, me has vuelto a enseñar varias cosas ;)

  • Sorteamos licencia de WebSite X5 Professional, hosting incluido

    Sorteamos licencia de WebSite X5 Professional, hosting incluido

    Dado el éxito de los anteriores concursos volvemos a sortear 1 licencia de WebSite X5 Professional para que puedas hacerte una web o tienda online sin necesidad de saber programación. El software está valorado en 199€ y la licencia es válida para dos equipos.

    Resultado del concurso (Actualización 23/04/2013 10:49)

    Como siempre muchas gracias a todos por participar y a Incomedia por regalaros su producto.

    Habéis participado un total de 51

    En random.org ha salido el nº 13 que corresponde a este tweet de @Adrian_Freijo. Gracias de nuevo a todos y muy pronto nuevos concursos.

    Caja_WebSite_X5_Professional_10.png

    ¿Cómo participar?

    Como siempre 3 formas de participar, puedes participar en las 3 para tener más oportunidades.

    1. Twitter
      1. Sigue a @ceslava
      2. Tuitea un enlace a este post con el Hashtag #ceslavaWebsiteX5
    1. Facebook
      1. Hazte fan de ceslavacom
      2. Dale a me gusta y deja un comentario en este post de Facebook
      3. Participa en Facebook
    1. Deja un comentario en esta entrada.

    Puedes participar hasta el próximo 23 de abril a las 10:30 (GMT+1) cuando realizaremos el sorteo en random.org que publicaremos en las redes. ¡Mucha suerte!

    Más info sobre el premio en la web oficial y aquí