Des images design

Version imprimable

05/02/2013, 16h36
userparis

Des images design

Bonjour a tous, je débute un peu dans la création de site web et j'ai besoin de quelques conseils.

par exemple, pour faire un beau design il faut utiliser des images.

La question est de savoir comment trouver/fabriquer des images qui sortent du standard ? Par exemple, comment obtenir une image avec des angles arrondis? ou bien obtenir une image avec comme impression qu'elle soit en relief ? ou bien rendre des couleurs a moitié brillantes voir transparente.

J'ai quelques idées mais j'aurais aimé avoir vos conseils.

Ce que je sais c'est que l'on peut travailler les images. Pour cela faut-il obligatoirement utiliser photoshop? y a t-il des logiciels gratuit aussi puissant ? y a t-il des tuto qui permettent d'utiliser ces logiciels ?

Ou bien autre solution, trouver deja des images sur le web et les adapter, dans les deux cas on a besoin d'un logiciel pour image. Pour le moment j'utilise GIMP mais je pense que je n'exploite pas toutes ses fonctionnalités. Est-il aussi puissant que photoshop ?

Merci pour vos réponses.
05/02/2013, 17h08
XxArchangexX

Bonjour,

gimp est très puissant, mais il n'est pas du tout ergonomique contrairement à photoshop qui fait ça force, d'un autre côté gimp est gratuit.

Il existe des tutoriels sur les 2 logiciels en cherchant rapidement sur Google (tutoriel photoshop ou tutoriel gimp). Mais ça demande une "petite" maitrise pour faire des choses sympathiques. Cependant une image n'est pas le plus simple pour rendre l'IHM adaptable sur tous les supports souhaités pour un site.
Sinon en CSS ou CSS3 de nos jours tu peux faire des choses très sympathique. Donc le design n'est pas le plus simple, c'est pour cela que webdesigner est un métier :D.

Quand tu vois ce que certains font sur paint :
http://mytechquest.com/windows/amazi...aint-pictures/

Tout est possible :p.

Citation:

Ou bien une autre solution, trouver déjà des images sur le web et les adapter

- C'est une possibilité maintenant trouver une image qui correspond à tes attentes n'est pas le plus simple, de plus toutes les images du web ne sont pas en "libre service" après c'est un cas de conscience.

- Il existe des forums gérés par des jeunes passionnés qui proposent leurs services pour s'amuser. Sinon il existe aussi des agences de créa et le prix varie du simple ou double donc bien étudier dans ce cas.
05/02/2013, 21h48
userparis

Bonsoir, oui comme tu dis GIMP est gratuit :mrgreen: et si on peut faire avec GIMP un design comme le lien que tu cites, ça suffira amplement, faut juste que j'explore toutes ses capacités.

Je vais voir si je trouve un tuto (de préférence en français) dessus.

pour ce qui est du CSS j'essai de m'y mettre (css 2) par contre le CSS 3 (mais la ça doit être un long débat) pas pour le moment car pas supporté par IE.

Peux tu me dire par exemple comment sur ce site :

http://mytechquest.com/windows/amazi...aint-pictures/

- on produit un menu gris clair d'une aussi belle couleur avec des trait séparant chaque partie. Je n'ai pas encore réussi a faire ce genre de chose avec GIMP.

- on produit des angles arrondi sur toutes les images avec impression que c'est en relief.

merci :)
05/02/2013, 22h35
XxArchangexX

Je dois avouer que je suis très mauvais en webdesign :D. J'ai étudié la chose pour mon site mais pour le moment je cherche une personne compétente qui me propose une idée qui me plait :D.

Mon site est entièrement codé à la main et j'ai eu le droit à "faut tout refaire sous wordpress" ....

Pour le site c'est du css ^_^°.

Le menu est en li

Code:

<div class="menu-main-container"><ul id="menu-main" class="menu"><li id="menu-item-10330"> ...</li>

Je vois aussi des couleurs, faut voir à quoi ça correspond :
background-color: #eeeeee;
background-color: #191919;
background-color: #666666;

sinon je vois aussi de l'import de jquery et colorbox.

Le bandeau gris , c'est une image et du png, c'est un signe de photoshop ou gimp. Tu dois pouvoir le faire avec des fonctions de nuances.
06/02/2013, 04h44
Muchos

Citation:

Envoyé par userparis

Ce que je sais c'est que l'on peut travailler les images. Pour cela faut-il obligatoirement utiliser photoshop?

Non.

Citation:

Envoyé par userparis

Pour faire un beau design il faut utiliser des images.

Non !

Citation:

Envoyé par userparis

par contre le CSS 3 (mais la ça doit être un long débat) pas pour le moment car pas supporté par IE.

NON !!! ò_ó
06/02/2013, 11h11
userparis

Ok, je vais explorer les couleurs pour voir à quoi ça correspond.

mais j'aimerais bien savoir comment ils ont fait la petite barre vertical pour séparer chaque menu :P

Pour le jQuery je laisse tomber pour le moment.

Sinon j'ai pas encore trouver comment faire les nuances >> Tuto GIMP...

Merci
06/02/2013, 11h12
userparis

Citation:

Envoyé par Muchos

NON !!! ò_ó

Bonjour, j'ai pas compris ta remarque "NON" :(

Tu parles de CSS3, il me semble que la majeur partie des fonctionnalités de CSS3 ne sont pas supporté par IE. Je me trompe ?

Merci
06/02/2013, 15h45
bob633

La majeur partie ne veut pas dire que IE n'en supporte aucune :)

Au boulot j'ai IE9, et généralement j'ai pas de soucis niveau compatibilité avec du CSS3. Une liste exhaustive doit être trouvable sur le net de toute façon. A moins d'utiliser LA propriété que tu sors de je sais pas où, pas trop de soucis.

Après sur IE8 et moins ... c'est une autre histoire.
06/02/2013, 16h57
userparis

Citation:

Envoyé par bob633

Une liste exhaustive doit être trouvable sur le net de toute façon.

oui, je suis tombé dessus et de mémoire ça m'a vite refroidi :mrgreen:

J'essai de retrouver le lien et je l'ajoute ici.

Edit: c'est pas celui que j'avais trouver mais ça donne un aperçu de ce qui est pris en charge par IE :

http://www.quirksmode.org/css/contents.html

Citation:

Envoyé par bob633

Après sur IE8 et moins ... c'est une autre histoire.

Oui et je souhaite couvrir le plus de navigateur possible. IE8 voir 7 doit encore être assez utilisé.
08/02/2013, 10h38
userparis

Bonjour, je relance ce topic ça pourra servir à d'autres :ccool:

Je viens de tomber sur un site et je me demande bien comment le design a été mis en place, ça m'étonnerai que ce soit juste du CSS, cependant, si c'est le cas, j'aimerai bien savoir comment c'est fait et la structure html de ce genre de réalisation :

http://www.restaurantduweb.com/exemp...n-site-web.php

Voici mes questions :

- est que l'ensemble "rond" (chef cuisinier), encadré "Restaurant du web" et le rectangle (contenant le menu a gauche texte et photo) est une seule image mise par exemple en background d'un div global ?

- ou plutot un ensemble d'image venant se superposer les unes aux autres ? Si c'est le cas j'aimerai bien savoir comment faire

- comment l'encadré "restaurant du web" donne une impression que l'image est en relief plutot qu'une image "plate". J'aimerai conaitre la technique pour avoir une image avec ce rendu.

voili voilou merci beaucoup aux web designer qui voudront bien m'aiguiller :ccool:
08/02/2013, 10h51
XxArchangexX

Citation:

est que l'ensemble "rond" (chef cuisinier), encadré "Restaurant du web" et le rectangle (contenant le menu a gauche texte et photo) est une seule image mise par exemple en background d'un div global ?

Le fond du site avec le bandeau en haut ("gourmand carte") est une image sur un div globale , le rond avec restaurant web c'est un flash, d'où cette impression ^_^°.

Il se sert du css pour le placement, alignement de tout l'ensemble. Et le site à une structure en div.

Citation:

ou plutot un ensemble d'image venant se superposer les unes aux autres ?

Oui c'est possible en css3 ( de mémoire z-index). Mais pour l'adaptabilité ce n'est pas le plus simple.

Citation:

comment l'encadré "restaurant du web" donne une impression que l'image est en relief plutot qu'une image "plate". J'aimerai conaitre la technique pour avoir une image avec ce rendu.

Comme au dessus, c'est un flash. Pas très standard car désactivable et surtout non visible sur les plateformes comme les I phone. Mais ça fait des choses jolies.
08/02/2013, 12h50
userparis

OK c'est donc avec Flash qu'on obtient ce genre de rendu.

Impossible "d'imiter" ces rendus avec du CSS2, GIMP et/ou Photoshop ?

Merci
08/02/2013, 12h55
XxArchangexX

Impossible n'est pas Français voyons ;).

En revanche ça demande des compétences avancées en graphisme que ce soit en CSS2, GIMP et/ou Photoshop pour des rendus sympathiques et design.
08/02/2013, 16h07
userparis

oui je vais creuser a mon avis ça doit être faisable avec GIMP/Photoshop, c'est juste que j'ai pas trouvé la fonctionnalités.

Peu-être les effets d'ombre pour avoir cet impression de relief sur une image, j'ai vu que ça existait avec GIMP mais j'ai pas encore explorer ...a voir !
10/02/2013, 16h09
userparis

Salut, bon je galere vraiment avec GIMP et je trouve que les explications sur le net pour réaliser avec ce logiciel des choses sympas ne sont pas très clairs.

Ex: je n'arrive pas a suivre les instructions de ce topic pour avoir une barre de navigation :
http://www.crystalxp.net/forum/fr/En...sujet_26_1.htm

si quelqu'un pourrait m'expliquer clairement... j'ai juste réussi faire la première étape qui consiste a créer une barre arrrondi et la remplir de la couleur que l'on souhaite...

comment reproduire l'étape suivante :

Citation:

Garde la selection, crée un nouveau calque et réduit la selection de quelques pixels (via Selection -> réduire) puis fait un dégradé gris->blanc à l'intérieur du-dit calque
11/02/2013, 14h54
userparis

Autre question :oops:, sur ce site :

http://www.startyourdev.com/html/tag...se-doctype.php

On peut voir le menu situé à gauche en dessous du champs de recherche.

Comment fait-on pour obtenir à gauche et à droite de ce menu l'effet d'ombre ? c'est juste avec un dégradé de couleur sous Gimp ? ou c'est vraiment la fonctionnalité d'ombre ?

Merci à tous pour vos tuyaux design :ccool:
11/02/2013, 15h17
Bovino

Il te suffit de regarder par toi-même !
11/02/2013, 15h21
bob633

Citation:

Envoyé par userparis

Autre question :oops:, sur ce site :

http://www.startyourdev.com/html/tag...se-doctype.php

On peut voir le menu situé à gauche en dessous du champs de recherche.

Comment fait-on pour obtenir à gauche et à droite de ce menu l'effet d'ombre ? c'est juste avec un dégradé de couleur sous Gimp ? ou c'est vraiment la fonctionnalité d'ombre ?

Merci à tous pour vos tuyaux design :ccool:

Tu sais, tu regardes le code source, et tu remontes jusqu'à la bonne info ...

Voici l'image du site utilisée pour l'ombre :
http://www.startyourdev.com/images/sprite-global.png
12/02/2013, 13h59
userparis

Bonjour, et merci pour vos réponse.

Désolé Bovino mais je suis novice dans le developpement web et design des sites et tout ne me paraît pas évident.

Merci bob je regarderai les code sources d'orénanvant.

Par contre je sais pas comment obtenir ce rendu dans GIMP, je pensais que je pouvais poser la question ici. je vais chercher si je trouve des exemples tuto de GIMP qui ressemble à ça, mais j'avoue avoir du mal a utiliser cet outil et explorer toutes ses fonctionnalités.

merci