TutoShop - création de boutons, images pour un style perso du forum phpBB
Je vais vous expliquer la méthode de création des boutons – icônes pour votre thème de forum ou tout simplement pour remplacer es boutons existants par les vôtres. Le but est de préparer un fichier (ou deux) qui permettrait faire la sauvegarde intégrale de ces images et simplifier au maximum ce procédé.
Personnellement je préfère deux fichiers : le premier contenant les images multi langues, le second avec les images spécifiques au dossier lang_* - le fichier intégral étant trop lourd et trop difficile à gérer.
Pour raccourcir au maximum mon tutorial je vais inclure dans mon fichier seulement les fichiers concernant le dossier lang_french.
Mon but étant uniquement l’explication du processus, vous allez pouvoir procéder de façon similaire pour créer les autres images.
Dans le dossier localisé d’images pour le style du forum en version 2.0.* il y a 11 petites icônes de 58*18 px, une de 16*18 et quatre de 82*25px. Ces nombres et les noms sont différents dans les styles pour la future version 2.2.*, mais le procédé reste identique.
Pour commencer on va donc créer un nouveau document 295*145px, transparent, 8 bit en mode RVB et 72dpi. Vous pouvez lui donner le titre qui correspond au nom de votre style (template). Faciliter la perception des éléments vous pouvez remplir ce calque avec la couleur de l’arrière plan de votre style. Dans mon cas #F3F5F8
Suivant le paramétrage de votre espace de travail vous devez afficher les règles avec le raccourci Ctrl+R. Le clic droit sur ces règles fait apparaître le menu contextuel avec le choix de l’unité de mesure. Dans notre cas nous allons choisir les pixels.
Choisissez l’outil "déplacement " – "V ". (A) En passant cet outil sur les règles elle change d’aspect. (B) Cliquez avec le btn gauche et tout en maintenant ce btn tirez vers le bas. Vous voyez apparaître une ligne noire en pointillé (C) qui devient bleue quand on lâche le btn de la souris. (D) Vous venez de placez un repère. Quand vous passez l’outil "déplacement " au dessus d’un repère il change d’aspect et vous pouvez resaisir le repère et le déplacer. (E)
Maintenant on va s’amuser à placer les repères en trois lignes et quatre colonnes pour tracer nos petites images 58*18 plus une colonne de 16 px.
Pour de raisons pratiques de lisibilité et de division je laisse un espace de 2px entre deux repères. (18+2=10 et 58+2=60)
Pour gagner du temps je vais maintenant automatiser la création de tranches. Je choisis l’outil tranche "K " et dans le menu de l’outil j’appuis sur le btn "Tranches d’après les repères ".
Ensuite je continue la création de mes repères pour faire les quatre images 82*25px et tracer les tranches, mais cette fois ci manuellement. De nouveau, avec l’outil "tranche", je trace, une par une les quatre tranches de mes btns dans les repères 58*18.
Accueil du site Forum
