eisen website background - Softwareontwikkeling

dinsdag 8 januari 2002 12:14

Acties:

Topicstarter

Ik wil een background ontwerpen voor een website..
nu wil ik ook *leren* werken met die lijntjes je ziet wel eens een bg, waar een aantal (niet het hele bg vol) lijntjes erdoor heen lopen..

nou ja..in ieder geval..
hoe maakt de w&G - webdeveloper zijn bg's ??
voor 1024*768 ??
is dit meestal een plaatje van 1024*786 ??

vertel vertel

dinsdag 8 januari 2002 12:18

Acties:

Verwijderd

wat voor lijntjes ? voorbeeldje?

meestal heb je voor een background genoeg aan een gifje van enkele pixels hoog en breed.

dinsdag 8 januari 2002 12:22

Acties:

ronjon

ik denk dat ie een soort van TV-lines effect bedoelt.

In dat geval:
je kan een background pattern maken van bijv 5*5 of 10*10 pixels in photoshop, die je in je webpage laat herhalen in de x en y (standaard optie, geen extra code voor nodig)

dinsdag 8 januari 2002 12:23

Acties:

El Reino

ik heb deze wel eens gebruikt voor een mooie blauwe achtergrond:

Afbeeldingslocatie: http://www.elreino.f2s.com/background.gif

dinsdag 8 januari 2002 12:24

Acties:

whitehouse

Topicstarter

nee..geen tvlines...
heb zo geen voorbeeld..shit..

dinsdag 8 januari 2002 12:27

Acties:

Verwijderd

Background maak je toch gewoon in fireworks, photoshop oid ??

Voor die lijntjes denk ik dat je fill pattern bedoelt (gokje)

dinsdag 8 januari 2002 12:29

Acties:

El Reino

(nou een serieuze reply)

ja, bckgrnd gewoon maken met photosoep oid (paint werkt zelfs ook prima).....

en wat je met die strepen bedoelt?...misschien toch ff proberen een voorbeeldje te zoeken?...

dinsdag 8 januari 2002 12:50

Acties:

whitehouse

Topicstarter

maken jullie vaak een bg, bestaande uit een afbeelding van 1024*768 ??

dinsdag 8 januari 2002 12:54

Acties:

Verwijderd

Op dinsdag 08 januari 2002 12:50 schreef whitehouse het volgende:
maken jullie vaak een bg, bestaande uit een afbeelding van 1024*768 ??

Voor een achtergrond op een website gebruik je altijd zo'n klein mogenlijk plaatje... als jij een plaatje gebruikt van 1024*nogwat dan is de download tijd voor de site bezoeker veels te hoog (vooral als ie en modem heeft). Verder heeft iedereen een andere resoluties waardoor je plaatje 99% van de tijd niet goed in beeld komt.

dinsdag 8 januari 2002 12:54

Acties:

Verwijderd

de afmeting van de bg hangt af van een paar zaken:

wil je een herhaling in de achter grond (scanlines oid) dan is het meestal maar een kleine afbeelding die herhaald wordt.

voor welke gebruikersgroep is de website bedoeld? Dus als je een website wil maken voor mensen met een 800x600 resolutie is de achtergrond anders dan voor een 1600 1200 gebruiker.

Verder is het wel handig als je even een plaatje opzoekt van wat je bedoeld, of een website

dinsdag 8 januari 2002 12:54

Acties:

El Reino

nee nooit....bg is vaak een herhalen patroon...zonde om daar een plaatje van 1024*786 van te maken....waarom zo groot?

--edit--
hmm de spreekwoordelijke mosterd na de maaltijd..

dinsdag 8 januari 2002 13:06

Acties:

whitehouse

Topicstarter

met lijntjes noem ik het volgende :
http://www.phusion.nl/splash/02/

hier zie je (ik bedoel NIET het raster) een dubbele lijn..
zulke ontwerpen zie je steeds vaker, en bevalt me wel..daarom wil ik leren hoe je dat doet (zowel grafisch als je code/opmaak in html)

dinsdag 8 januari 2002 13:11

Acties:

Bosmonster

*zucht*

tabelletje met achtergrond... dat is in zon geval dan niet meer dan een herhalend gifje dat de lijnen creeert...

dinsdag 8 januari 2002 13:12

Acties:

Verwijderd

Je moet gewoon ff snuffelen in de code van die pagina.
Dan kom je er vanzelf wel achter.

dinsdag 8 januari 2002 13:12

Acties:

Verwijderd

volges mij zijn die 2 lijntjes in dit geval gewoon onderdeel van die "SplashInfo.jpg".
check de bron.

dinsdag 8 januari 2002 13:13

Acties:

Verwijderd

Op dinsdag 08 januari 2002 13:06 schreef whitehouse het volgende:
met lijntjes noem ik het volgende :
http://www.phusion.nl/splash/02/

hier zie je (ik bedoel NIET het raster) een dubbele lijn..
zulke ontwerpen zie je steeds vaker, en bevalt me wel..daarom wil ik leren hoe je dat doet (zowel grafisch als je code/opmaak in html)

maak in fotoshop (thats my favorite) het plaatje, dus de lijnen: pak de pencil, een brush van 1 pixel hoog, en trek dan met shift een lijn, en vervolgens nog 1 eronder (ja echt!). Zorg overigens dat de afbeelding iets van 1024 breed is en 3 hoog (dus dan kan je bovenaan een lijn doen, tussenruimte en onderaan een lijn). Maak de ruimte tussen de lijnen transparant. Sla hem op als gif, en noem hem lijnen.gif

Maak nu een html pagina, met daarin de volgende code:

code:

<html>
<head>

<style>
body 
  {
  background-image: url(lijnen.gif);
  background-repeat: no-repeat;
  background-position: 0px 300px;
  }
</style>
</head>

<body>
</body>

</html>

Met de driehonderd bepaal je de positie verticaal, en met de 0px de positie horizontaal. Ik wens u veel succes ermee.

/me vindt z'n eigen weer bijzonder aardig vandaag

dinsdag 8 januari 2002 13:17

Acties:

Verwijderd

waarom niet die lijnen.gif kleiner maken dan die 1024 pix breed en dan

code:

1	background-repeat: repeat-x

of zeg ik dan iets heel doms?

dinsdag 8 januari 2002 13:22

Acties:

Verwijderd

Als je die lijntjes nou in een plaatje wil hebben, kun je in PhotoShop de filter 'patchwork' gebruiken.

dinsdag 8 januari 2002 13:24

Acties:

Verwijderd

Op dinsdag 08 januari 2002 13:17 schreef JayAnzee het volgende:
waarom niet die lijnen.gif kleiner maken dan die 1024 pix breed en dan
code:
1
background-repeat: repeat-x
of zeg ik dan iets heel doms?

nee is inderdaad goed mogelijk en ondervangt dan ook nog eens het probleem van mensen die een res. hebben van 1024+.

Als het voor de bestandsgrootte is: die is al zeeer laag met een gifje van 1024 x 3 met 1 kleur.. Dus daar hoeft ie het niet voor te doen

dinsdag 8 januari 2002 14:09

Acties:

Dark Blue

Compositionista!

Alpenmeisje

Ik heb hier een site:
http://www.vdvoort.nl/segall/indexned.html

ik dacht dat je zoiets bedoelde...
zoiets kan je gewoon met een gifje van 1 px breed (voor de bewerkbaarheid ff 5px maken) en 100 px hoog voor elkaar krijgen. ik vind deze op zich niet zo mooi, te houterig.

heidiulrich.nl | adventura.nl : rugzakavonturen | pathwise.nl : prepping geeks to get jobs

dinsdag 8 januari 2002 14:15

Acties:

xychix

FreeBSD Rules !

Afbeeldingslocatie: http://news.digipoint.org/tmp/files/biertje.jpg

bedoel je zo'n effect over het plaatje, dat doorzichtige lamellen effect ??

Every failure offers you a new opportunity! | Lokatie database|GoT - Notepad

dinsdag 8 januari 2002 15:18

Acties:

Evos

Als je goed hebt gelezen bedoelt hij dat niet! maar das ook nie zo belangrijk!

Maar probeer gewoon eerst kleine backgrounds met photoshop te maken, voor bijv. alleen een tabel!
Gewoon leeg en makkelijk beginnen met niet al te veel "poes pas"!!!

veel suc6!!!!!

dinsdag 8 januari 2002 17:43

Acties:

Verwijderd

ik denk dat je zoiets bedoeldt?
dit zijn in totaal 412 pics..!..check het maar na!
En de load tijd is minder als 2 sec....
En toch kan je een grootte mooie back krijgen
[deze is btw van hebus!]
Afbeeldingslocatie: http://dogbits.com/pics/uploads/bkg.gif

Afbeeldingslocatie: http://dogbits.com/pics/uploads/bkg.gif

dinsdag 8 januari 2002 18:53

Acties:

Jorick

Op dinsdag 08 januari 2002 17:43 schreef Rmon het volgende:
ik denk dat je zoiets bedoeldt?
dit zijn in totaal 412 pics..!..check het maar na!
En de load tijd is minder als 2 sec....
En toch kan je een grootte mooie back krijgen
[deze is btw van hebus!]
[afbeelding]

Die afbeelding kan ook 5*5 pixels, en dan duurt het een fractie van een seconde om de achtergrond te laden

dinsdag 8 januari 2002 19:01

Acties:

Verwijderd

Op dinsdag 08 januari 2002 17:43 schreef Rmon het volgende:
ik denk dat je zoiets bedoeldt?
dit zijn in totaal 412 pics..!..check het maar na!

dude! lees dan even!

met lijntjes noem ik het volgende :
http://www.phusion.nl/splash/02/
hier zie je (ik bedoel NIET het raster) een dubbele lijn..

bedoelt is met een 't' btw.

dinsdag 8 januari 2002 19:43

Acties:

Shagura

Het is zelfs mogelijk ZONDER plaatje

(ik zeg niet dat het makkelijker is)

code:

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
    <td width="100%" height="1" bgcolor="#000000">
    [img]"doorzichtig.gif"[/img]
    </td>
</tr>
<tr>
    <td width="100%" height="1" bgcolor="#FFFFFF">
    [img]"doorzichtig.gif"[/img]
    </td>
</tr>
<tr>
    <td width="100%" height="1" bgcolor="#000000">
    [img]"doorzichtig.gif"[/img]
    </td>
</tr>
</table>

okok, een doorzichtig plaatje dan, maar je hebt wel je lijntjes met het kleinste plaatje mogelijk

Deze code kun je bijvoorbeeld bovenaan je table zetten met een colspan ofzo. (als de tabel meer dan 1 column is)

dinsdag 8 januari 2002 19:59

Acties:

Verwijderd

Op dinsdag 08 januari 2002 19:01 schreef JayAnzee het volgende:

[..]

dude! lees dan even!
[..]

bedoelt is met een 't' btw.

Sorry..
je bedoelt dat met dat BIERTJE alleen dan zijn de lijnen kleiner!
Dan maak je een picje met:

code:

1
2
3

====
eerste streep licht X
Tweede streep donker X

X = de kleur dus bijv. blauw
dan die tilen..

dinsdag 8 januari 2002 20:40

Acties:

Verwijderd

Sjeeses, kan niemand lezen ofzo..? (No offense)

Whitehouse, duik eens in CSS en kijk naar de verschillende borderattributen (?), met name groove is wel interessant denk ik, krijg je zo'n leuk driedeejerig lijntje van.

Verder is hij in de splash van phusion idd gewoon getekend in de .jpg.

Backgrounds maakte ik vroeger zelf idd wel het hele scherm, en dan wat met teebultjes proberen binnen het ontwerp van die bkg te blijven :D:D

Maar zo 'moet' het dus niet, probeer je design in je content te leggen, niet in je bkg.
Voor een achtergrondje gebruik ik meestal gewoon een kleur, danwel een klein plaatje met de juiste kleur van ong 20px diameter.

dinsdag 8 januari 2002 22:07

Acties:

The System

bedoelt ie niet gewoon Afbeeldingslocatie: http://www.phusion.nl/splash/02/Images/SplashInfo.jpg

de lijntjes op deze plaatje ??

sorry voor het verneuken van layout btw

dinsdag 8 januari 2002 22:15

Acties:

prototype

Cheer Bear

Gegege, mailen mag ook hoor, krijg je sneller antwoord

en meteen het juiste antwoord

.
Welke lijntjes bedoel je nou psies? De golvende lijntjes? of die dubbele lijntjes in de texture?

dinsdag 8 januari 2002 22:21

Acties:

Dark Blue

Compositionista!

Alpenmeisje

Hij bedoelt idd die golfjes denk ik ook ja. als je per sé een raster erachter wilt, moet je eerst het raster maken, dan een grote screenshot van het raster en dat precies op maat snijden.

met photoshop kun je béziers maken en met psp ook. dat betekent meestal dat je eerst een rechte lijn trekt en dan dmv. een soort ankertjes nog twee zwiepers aan de lijn mag geven zodat het een leuke golf wordt.

als je dit in photoshop doet:
neem bijv. een donkerblauwe achtergrond met raster
maak een nieuwe layer, en zet hier een aantal béziers op
in lichter blauw of liever nog wit. het maakt niet uit of ze een beetje fel zijn. als je een beetje gloed wilt, dupliceer je de laag, en gaussian blur je de nieuwe bovenste laag iets van 1 of 0,5.
zet daarna de layer mode op 'dodge' en stel de opacity wat lager in. ala, je hebt gloeiende golflijnen.

als het je om die fades gaat, doe dan dit:
neem bijv. donkerblauwe achtergrond, wel met raster
stel een grid in op formaat van het raster of houd het raster aan
maak een nieuwe layer
sleep een rechthoekje, evenhoog als de image, aan de rechterkant, en ongeveer de helft van de image breed.
dit kleur je in met wit of lichtblauw. ook hier weer: het maakt niet uit of het te fel is.
het is idd beter om een grid te hebben, want dat moet er nu overheen te zien zijn.
kies willekeurig een rij van 1 rasterhokje hoog en een aantal rasterhokjes lang. maak deze in dezelfde layer als het lichte vlak, in het vlak.
ga een paar rijen naar beneden en selecteer dmv. de shift toets nog een paar van die rijtjes.
pak nu quick mask, stel hem in op een horizontale gradient, en trek een horizontaal lijntje door bijv. het middelste geselecteerde rijtje heen. de hele zooi wordt nu een fade rood/achtergrond. exit quickmask en druk op delete. je ziet nu dat je felle kleur op die plekken naar de achtergrond (raster) fade't.
kies zo nog een paar rijtjes uit, telkens korte of een setje langere, en doe hetzelfde.
vervolgens stel je de layer weer in op 'dodge' , verminder de opacity en tralala, wees blij met je fades aan de rechterkant.

::edit:: voor deze tweede uitleg moet ik er bij zeggen dat bij nader inzien het niet helemaal zo zal uitpakken, je kunt ook een grote fade maken (naar 2 kanten) met een groot vlak en daaroverheen een quickmask&dubbele gradient. doe daarna een motion blur over deze laag heen, stel hem vrij hoog in en horizontaal. de horizontale lijntjes erdoorheen kun je dan weer met uitleg 1 doen, maar dan met rechte lijnen...

let er wel op dat een website niet altijd even breed is; het tweede type met die fades zul je in een tabel met vaste breedte kunnen gebruiken, niet over de hele website (tenzij die ook bijv. 760 breed is) omdat kleinere reso's die fades aan de rechterkant dan nooit zullen zien.

succes

heidiulrich.nl | adventura.nl : rugzakavonturen | pathwise.nl : prepping geeks to get jobs

dinsdag 8 januari 2002 23:31

Acties:

miss_bleu

knutsel zelf toch gewoon wat in elkaar...

http://www.xs4all.nl/~claange/desktop3.jpg

doe k ook altijd met me desktops gewoon photoshop en paint shop pro