Générateur de boutons design

Votre dernière création manque de petits boutons bien sympa pour améliorer l’ergonomie de votre application ou tout simplement augmenter le confort de vos utilisateurs ?
Vous n’avez plus le temps, heureusement le site performable.com nous offre un générateur automatique et gratuit de bouton.

Rien de plus simple suffit de cliquer sur ce lien pour commencer à générer votre bouton ! simplissime et rapide, que demander de plus :)

Croogo, un CMS open source

q

Je voulais vous présenter un petit CMS bien sympa et très prometteur : Croogo.
Basé sur le framework CakePHP, le CMS propose pour le moment seulement deux thèmes, mais je suis sûr que cela risque d’augmenter rapidement :d

 

 

Mais possède déjà une petite panoplie d’extensions très sexy.

Un logiciel à suivre de près !q

La fin de ReZium

Un soir de septembre 2008, je crée avec mon ami Foz, Rezium.net, avec l’objectif de fournir un service de communication entièrement libre et gratuit, regroupant un service IRC ainsi qu’un serveur d’email.
Hébergé sur un serveur bruyant dans une chambre parisienne grâce au système Gentoo Linux, le service a fonctionné à merveille jusqu’à maintenant avec l’aide de venez.fr et des gentils admins bénévoles qui ont bien voulus prendre soin de ce petit serveur avec amour.

Aujourd’hui, après 4 ans de bons et loyaux services, d’autres applications et technologies sont actuellement disponibles plus perfectionnées et répondant exactement à ce que pouvait fournir ReZium mais en mieux, il est donc temps de passer la main et de se souvenir de toutes les personnes qui ont rendu cette aventure possible, de toutes les nuits passées à configurer aux petits oignons ce serveur et surtout de se souvenir qu’il était possible de rendre un service complétement gratuit et libre sur Internet.

Merci à tous ceux qui ont rendu possible cette aventure !

Si vous vous souvenez de nous, n’hésitez pas à nous laisser un petit commentaire :)

Fermeture des forums TitaXium

Presque 10 années, que les forums TitaXium accompagnent la communauté pour lui venir en aide, pour échanger et partager.
Pendant tout ce temps, les 7089 membres ont fait vivrent ces forums avec plus de 114000 messages.

Aujourd’hui le résultat est impressionnant:

  • Des centaines de réalisations pour plusieurs dizaines d’associations, de particuliers qui ont confiés leurs projets à cette communauté de bénévoles.
  • Des milliers de lignes de codes debugguées, optimisées, chouchoutées.
  • Des dizaines de sites analysés pour en améliorer le référencement, l’ergonomie ou tout simplement la beauté.
  • Des centaines de questions qui ont trouvé une réponse (ou pas)
  • Des dizaines de jeunes qui ont trouvé une passion au travers de ces forums et qui aujourd’hui ont fait du web, leur métier.
  • Des milliers d’heures de conversation partagées entre chacun des membres.

L’internet à beaucoup changé en 10 ans, et ces forums ne sont plus en adéquation avec lui, les besoins sont maintenant différents, et nous devons y répondre aussi différemment.

Je remercie de tout mon cœur toutes les personnes qui un jour ont participé, même un peu, à mon rêve.

Je suis reconnaissant à tous ceux qui ont fait vivre ces forums, tard le soir, tôt le matin, qui ont aidé, qui ont échangé, qui se sont pris la tête, qui ont crié de rage, de haine, de bonheur, qui nous ont fait rire … qui m’ont accompagné toutes ces nuits.

L’internet peut rester un monde de partage et d’échange de savoir, de connaissance et d’émotion, cela ne tient finalement qu’à nous :-)

Merci.

ps : J’ai toujours rêvé d’avoir un « livre d’or« , n’hésitez pas à laisser un commentaire (ou même plusieurs) !

Les bases de l’utilisation de la plume sous Photoshop

L’outil plume sous Photoshop est certainement l’outil le plus important pour tout webdesigner qui se respect.
Il permet de réaliser des formes personnalisées très utilisées dans la réalisation de template de site web.
Mais cet outil n’est pas facile à prendre en main, cette documentation vise essentiellement les débutants qui veulent se parfaire dans la maitrise de la plume pour augmenter la valeur de leur création.

Nous allons donc voir pas à pas les bases de l’utilisation de la plume.

La première chose à faire est de remplir votre calque de la couleur désirée pour le fond.
Puis de recréer un autre calque par dessus le précédent.
Activer la plume, vérifier bien d’avoir les mêmes paramêtres comme montré sur l’image ci-dessous.

t 

Vous activez votre Calque 2 en cliquant dessus, puis faites un point avec la plume, puis un second et avec celui-ci vous pouvez bouger votre souris afin de lui donner la courbe voulue, vous pouvez mettre autant de courbe à la plume que vous souhaitez.

r 

Une fois la courbe réalisée avec la plume, il vous faudra activez votre pinceau, couleur d’avant plan désirée.
Dans cet exercice nous avons choisi le blanc.
Vérifiez bien la barre des paramêtres du pinceau dans le haut.
Pour la forme nous avons choisi 4 étant donné que nous ne voulions pas trop mince, Opacité 100% et Flux 100%. Une fois les paramêtres bien réglés nous sommes prêt à rendre notre courbe visible, on se dirige dans l’onglet Tracés, puis en bas de cette palette vous allez cliquer sur le deuxième rond à partir de la gauche qui nous donnera Contour du tracé avec la forme.

h 

Voilà notre courbe est visible mais on voit toujours les traits de la plume.
Donc prenez le et faite le glisser jusqu’à la poubelle dans le bas à droite de l’onglet Tracés.

a 

Une fois ce trait retiré, on ne voit plus que la courbe que nous avions réaliser.

 

Petite astuce: Quelques fois on peut remarquer sur certaines créations une ligne ou courbe pixellisée et qui rend le travail moins esthétique et beaucoup moins soigné.
Nous avons une petite astuce pour remédier à ce petit problème.g

Activez l’outil Doigt, puis dans la barre de paramêtres tout en haut ajustez la Forme a environ 9 tout dépend de la largeur de la ligne pixellisée et pour finir ajustez l’intensité à environ 6.
Voilà une fois les paramêtres bien établis nous pouvons passer à l’action … passez le doigt sur la ligne ou courbe pixellisée, parfois un seul coup suffit et d’autre fois il faut passer 2 ou 3 fois, mais il est impératif de bien suivre la ligne ou courbe et surtout ne pas aller trop vite.

Voilà en espérant que cette astuce vous aidera à peaufiner vos créations.

Créer un bouton Glossy sous Photoshop

Nos créations sont souvent sublimées par un petit rien, une petite touche, un joli effet.
L’utilisation d’un effet brillant (souvent nommé glossy) sur un bouton donne cette petite touche qui fait que votre interface sera belle et remarquable !
Je l’utilise souvent sur TitaXium pour les boutons ou pour les menus, cet effet est devenu très à la mode avec les designs web2.0.

Nous allons voir comment réaliser en quelques minutes cet effet glossy, cette documentation s’adresse à toutes les personnes désireuses de réaliser de belles interfaces web par exemple, du débutant à l’expert.

Création du fond du bouton

ommençons donc par créer une nouvelle image (CTRL+N) de la taille que vous désirez et remplissez-le avec la couleur blanche.

f 

Nous allons créer un rectangle aux bords arrondis grâce à l’outil « Rectangle Arrondi » avec un rayon de 5px de la couleur que vous souhaitez.

j 

Agrémentons le fond de notre bouton avec une petite ombre portée avec les options ci-dessous (vous pouvez adapter en fonction de vos besoins/gouts) :

u 

Création de l’effet glossy

Nous allons créer un nouveau calque et le nommer glossy puis sélectionner un rectangle autour de notre fond comme ci-dessous :

y

Puis le remplir avec un dégradé un peu plus clair que votre couleur de fond afin de réaliser l’effet de brillance.

i

Reprenons ensuite la sélection de notre fond en cliquant dans votre liste de calques sur votre forme en appuyant simultanément sur CTRL.

p

Une fois notre sélection récupérée, il faudra la contracter de 2 px (sélection > modifier > contracter) puis l’intervertir (Maj+CTRL+I).
Ensuite nous allons supprimer sur le calque « glossy » tout se qui appartient à cette sélection :

m

Continuons maintenant en modifiant un peu la forme de notre effet brillant pour le rendre plus rond sur le bas.
Nous allons donc transformer le calque « glossy » (CTRL+T) puis le déformer (édition > transformation > déformation) pour le rendre rond sur le bas.
N’hésitez pas à zoomer pour être encore plus précis.

m m

Enfin pour peaufiner notre bouton nous allons ajouter un petit trait blanc sur le contour haut du fond du bouton pour donner une certaine profondeur.
Nous ajoutons donc un contour dans options de fusion du calque « glossy » avec les options ci-dessous ( à adapter en fonction de vos besoins bien sûr)

f 

Et voilà notre bouton est terminé, il nous vous reste plus qu’à ajouter votre texte.

hh

Vous pouvez télécharger le fichier source de notre exemple au format .PSD

i 

Bien sûr vous l’aurez remarqué il y a plusieurs façons de réaliser cet effet et chaque option est modifiable afin de coller au mieux à l’effet final désiré.
Bon courage à tous :)