Windows Aero Layout

[NickyHendriks]

Hallo,

Ik ben bezig met een layout voor een nieuwe website die ik wilde maken, waar ik alle tutorials en readme's kan plaatsen. Maar daarvoor ben ik hier niet, ik heb een layoutje in Vista Style gemaakt.

De Vista achtergrond gaat eruit en komt in een CSS te staan dat ie altijd mee scrollt, dus daarom is niet de achtergrond volledig.

Ratez Plz

[.Senne]

Ik vind het op zich erg mooi, alleen is het hier en daar niet echt Vista style, zoals de pijltjes en de balk bovenaan. Kan je niet beter echte screens van Vista gebruiken? Behalve die pijltjes en de balk heb ik er overigens niets op aan te merken, het is een mooi design en ook goed duidelijk. Ook de doorzichtigheid is perfect gedaan.

[NickyHendriks]

Ik vind het op zich erg mooi, alleen is het hier en daar niet echt Vista style, zoals de pijltjes en de balk bovenaan. Kan je niet beter echte screens van Vista gebruiken? Behalve die pijltjes en de balk heb ik er overigens niets op aan te merken, het is een mooi design en ook goed duidelijk. Ook de doorzichtigheid is perfect gedaan.

De balk klopt, hier probeer ik nog aan te werken, maar het nadeel is dat ik zit met de transparantie, dus die kleur weer varieert per locatie... En de pijltjes, die probeerde ik ook al uit, maar ik kan ze niet vinden

[.Senne]

Die transparantie is idd wel moeilijk, zeker als je met afbeeldingen werkt.. Maar je kan een balk zoeken die een zwarte achtergrond heeft, en dan die niet transparant maken en gewoon als afbeelding gebruiken?

Hier is trouwens al de pijltjes:

http://windowsteamblog.com/cfs-filesystemf...F00_profile.jpg

Edit: en misschien ben je hier wat mee:

http://vistastyles.org/wp-content/uploads/..._blingboy31.jpg

Bewerkt: 11 september 2009 door senneken

[NickyHendriks]

Die transparantie is idd wel moeilijk, zeker als je met afbeeldingen werkt.. Maar je kan een balk zoeken die een zwarte achtergrond heeft, en dan die niet transparant maken en gewoon als afbeelding gebruiken?

Hier is trouwens al de pijltjes:

http://windowsteamblog.com/cfs-filesystemf...F00_profile.jpg

Edit: en misschien ben je hier wat mee:

http://vistastyles.org/wp-content/uploads/..._blingboy31.jpg

Ik gebruik nu die onderste en probeer dan ook zo veel mogelijk daaruit na te maken. Ik zal ook eens proberen om daarin alle links neer te zetten

Zo is het nu:

Volgende versie word met alle links etc.

Bewerkt: 11 september 2009 door Zamg0d1

[-Matthijs-]

Optimaliseer je lay-out eerst voordat je aan de vormgeving begint. Kleine dingetjes als ongelijke buttons en ongecentreerde tekst staan erg slordig en ogen wat nalatig. Ik heb daarnaast de indruk dat de lay-out iets té compact is, waardoor je er dus niet al te veel op kwijt kunt. Realiseer je dat wel, want straks blijk je niet voldoende ruimte te hebben...

[NickyHendriks]

Optimaliseer je lay-out eerst voordat je aan de vormgeving begint. Kleine dingetjes als ongelijke buttons en ongecentreerde tekst staan erg slordig en ogen wat nalatig. Ik heb daarnaast de indruk dat de lay-out iets té compact is, waardoor je er dus niet al te veel op kwijt kunt. Realiseer je dat wel, want straks blijk je niet voldoende ruimte te hebben...

Hoe bedoel je met optimaliseren? Eerst goed vormgeven en dan uiteindelijk pas de details erin zetten? Dat was ook mijn bedoeling, maar ik had alvast een beetje voor het oog die kleine dingetjes erin gezet, dan kon ik zien waar wat voor was etc. , en uiteindelijk zal ik ook nog al te veel ruimte nodig hebben, ik wil een readme-site'je opzetten, dus daar zullen ook niet heel veel ruimte voor nodig zijn, maar ik zal wel proberen alle ruimte die ik kan maken om die te gebruiken Ik zal eens een nieuwe versie maken, nouja, deze verder uitwerken

[-Matthijs-]

Hoe bedoel je met optimaliseren? Eerst goed vormgeven en dan uiteindelijk pas de details erin zetten?

Nee, dat bedoel ik eigenlijk niet. Ik doel meer op o.a. de buttons en de vakken, die zijn ongelijk aan elkaar. De button van Forum is bijvoorbeeld kleiner dan de rest. Zorg dat je eerst orde op zaken stelt voor je de lay-out gaat 'aankleden' met leuke effecten. Zet alles op de pixel nauwkeurig op dezelfde lijn, en zorg dat de vakken ook allemaal hetzelfde aantal pixels van elkaar af staan.

Als het echt je doel is om een goed functioneerde site te bouwen (en dat hoeft niet per se uitgebreid te zijn), begin dan op een kladpapier met uittekenen en begin op basis van dat ontwerp in Photoshop. Waar komt het menu? Hoe groot worden mijn buttons? Wat wordt de afmeting van mijn site? Waar wil ik mijn informatie plaatsen? Op dat soort vragen moet je eigenlijk al antwoord hebben voor je begint. Het is slechts een werkwijze natuurlijk, maar ik kan je verzekeren dat het vééél lastiger is om een lay-out te maken zonder dat je van tevoren eigenlijk weet wat je wil.

Ik heb geprobeerd aan te geven wat ik met mijn verhaal bedoel. Zet de tekstvakken op één lijn en zorg dat de tussenliggende ruimtes gelijk zijn. Dat zorgt voor een betere structuur in je hele website.

[NickyHendriks]

Ik zal het eens proberen Maar hoe kan ik dan de pixel precies zien? Ik wil van me tweede layout wel een goeie maken, nouja, ik wil er eentje maken voor een readme-site

[NickyHendriks]

Maar hoe kan ik dan de pixel precies zien?

Bewerkt: 13 september 2009 door Zamg0d1

[-Matthijs-]

Maar hoe kan ik dan de pixel precies zien?

Een mogelijkheid is dat je met de Rectangular Marquee Tool een ruimte selecteert, en vervolgens in de Info Palette (F8 of Windows > Info) afleest hoeveel pixels je horizontaal of verticaal geselecteerd hebt.

Ik gebruik liever een eigen manier, want teveel open schermpjes storen me alleen maar. Met de Rectangular Marquee Tool selecteer ik een (lege) ruimte. Vervolgens druk op CTRL + C (kopiëren) en direct op CTRL + N (nieuw bestand). De width en de height vormen dan de grootte die jij geselecteerd hebt, en op die manier kun je zien hoeveel pixels ruimte je horizontaal of verticaal hebt.

[Crypteq]

Ziet er goed uit

Als je afbeeldingen uit Vista nodig hebt, kan ik ze wel geven.

Ik bedoel dan niet de plaatjes uit de screenshots maar die echt in windows gebruikt worden.