|
Poslao: 15 Jun 2015 23:48
|
offline
- dejnik978
- Zaslužni građanin
- Pridružio: 25 Mar 2015
- Poruke: 548
|
Napisano: 15 Jun 2015 13:15
Poceo sam da ucim codiranje psd-templejta u bootstrap sajt, znam da treba odlicno poznavanje css, html-a i po potrebi scripti. Ali vazno je uciti i poceti. Radicu na sliciranju i codiranju websajta pa cu pritom imati neka pitanja koja ce biti verovatno pocetnicima zanimljiva a pre pitanja pokusacu da nadjem odgovore. Radim u licenciranoj na poklon dobijenoj verziji alata. Hvala i pozdrav
Da li je ovakvo ucenje i pocetak pravilan
1. Otvorim psd nekim alatom.
2. Iskljucim sve elemente da bih dosao do slike u headeru ili jumbotronu, u psd treba da ostane samo jpg slika.
Kad odradim pozadinsku sliku jumbotron ili header da li se kodira u originalnoj velicini kao ovde
1920 x 800
Da li se ova velicina uskladjuje sa klijentom
3. Od svih elemenata koristim samo pozadniske slike, ikonice, logo iconu, sve ostalo moguce je da se odradi css-om.
4. Sve slike se cuvaju u png formatu
5.Primer za ikonicu
Sa strane bara alata iskljucimo sve osim ikonice
Idemo na slice tool i isecemo ikonicu, gledamo da bude secenje ikonice bude sto pribliznije ikoni
Sacuvamo na save as web i odaberemo png u gornjem uglu
Zatim joj damo naziv
i idemo na ok
Zatim idemo na save as web
Sve se radi na isti nacin, iskljuci se sve osim slike pozadine, isecu i cuvaju slicice, ikonice, logo, isl. i ste se kao transparentne cuvaju u png formatu. Moraju biti transparent da bi se prilagodile boji koju zadamo u css-u. To bi bilo to sto se tice seckanja. Sada ide deo kodiranja.
|
|
|
|
|
Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
|
|
|
Poslao: 15 Jun 2015 23:49
|
offline
- dejnik978
- Zaslužni građanin
- Pridružio: 25 Mar 2015
- Poruke: 548
|
Deo Kodiranje:
Da li moze ovako za row .row {
margin-right: 80px;
margin-left: 80px;
}
Radim ga po bootstrapovim pravilima, klasama ali mi se samo uklapa ovaj plavi deo kad odredim margine na 80px. Da li moze drugacije, pozdrav
.row {
margin-right: 80px;
margin-left: 80px;
}
.prvi_deo
{
background-color: #4bcaff;
width:100%;
height:auto;
color:#fff;
padding-top: 0;
}
|
|
|
|
|
|
|
Poslao: 17 Jun 2015 23:49
|
offline
- m4rk0
- Administrator
- Administrator tech foruma
- Marko Vasić
- Gladijator - Maximus Decimus Meridius
- Pridružio: 14 Jan 2005
- Poruke: 15766
- Gde živiš: Majur (Colosseum)
|
Ne smes dirati row klasu na taj nacin. Nesto ne radis pravilno cim ti se ne uklapa ta plava sekcija. Layout je takav da centralni sadrzaj svake sekcije treba da bude u .container klasi a svaka .container klasa unutar .container-fluid klase. Pa bi ta plava sekcija na pr bila
<section id="plava-sekcija" class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Services</h2>
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="images/slicica-1.png" alt="" class="img-responsive">
<h3>Coffe</h3>
<p>Blabla bla naanlsna asjalhsakh asjhashakjha alshashahk</p>
</div>
<div class="col-md-3">
<img src="images/slicica-2.png" alt="" class="img-responsive">
<h3>Instant</h3>
<p>Blabla bla naanlsna asjalhsakh asjhashakjha alshashahk</p>
</div>
<div class="col-md-3">
<h3>Serious</h3>
<img src="images/slicica-3.png" alt="" class="img-responsive">
<p>Blabla bla naanlsna asjalhsakh asjhashakjha alshashahk</p>
</div>
<div class="col-md-3">
<h3>Frame</h3>
<img src="images/slicica-3.png" alt="" class="img-responsive">
<p>Blabla bla naanlsna asjalhsakh asjhashakjha alshashahk</p>
</div>
</div>
</div>
</section>
Pa bi u css podesio id te glavne sekcije i onda svaki njen element posebno (h2, h3, img, p itd)
#plava-sekcija {
background-color: blue; /*bezveze sam stavio blue, ti ces naravno color pickerom u photoshopu videti koja je tacno nijanasa plave boje*/
}
#plava-sekcija h3 {
color: #fff;
text-transform: uppercase;
/*itd itd*/
}
|
|
|
|
|
|
|
|
|
Poslao: 18 Jun 2015 21:50
|
offline
- m4rk0
- Administrator
- Administrator tech foruma
- Marko Vasić
- Gladijator - Maximus Decimus Meridius
- Pridružio: 14 Jan 2005
- Poruke: 15766
- Gde živiš: Majur (Colosseum)
|
Preko photoshopa mozes apsolutno sve da "pokupis" iz psd fajla: font, boju, razmake medju elementima, secenje elemenata itd. Sto se tice fonta potrebno je samo izabrati "type tool", kliknuti na tekst ciji font zelis da vidis i u gornjoj paleti photoshopa ces videti i vrstu fonta ( font-family) i velicinu i boju.
Type tool ti je jasno oznacen na slici: https://www.mycity.rs/must-login.png
|
|
|
|
|
|
|
|
|
Poslao: 19 Jul 2015 21:42
|
offline
- dejnik978
- Zaslužni građanin
- Pridružio: 25 Mar 2015
- Poruke: 548
|
Ovako radi bootstrap smanjio sam ga na malu rezoluciju, ali ne radi na vecu
@media (max-width: 740px) {
#container{
width:480px;
}}
Na bilo koju manju preko media q radi, problem je slika u headeru na vecim rezolucijama ekrana.
|
|
|
|
|
|
|
Poslao: 20 Jul 2015 03:19
|
offline
- dejnik978
- Zaslužni građanin
- Pridružio: 25 Mar 2015
- Poruke: 548
|
Sada radi bootstrap odlicno u svim rezolucijama, reseno, samo da se poprave sitnice, da izgleda kao onaj html.
.container {
max-width:740px;!important;
background-color:#fff;
padding: 0px;
margin:60px auto;
}
<div class="container shadow">
|
|
|
|
|
|
|
Poslao: 28 Jul 2015 10:00
|
offline
- dejnik978
- Zaslužni građanin
- Pridružio: 25 Mar 2015
- Poruke: 548
|
Vezbam ovaj template, ali trenutno ne vidim zasto nece da se ujednaci slika sa tekstom, tj da tekst bude ispod slike. Da li je do slike, kada stavim kao thumbnail radi ovako nece. Ako je neko radio ovaj psd template
<div id="team">
<div class="container">
<div class="row">
<h3>Team</h3>
<div class="col-md-4">
<img src="img/1.png" class="img-responsive">
<p>John Doeounder<br> & CEO</p>
</div>
<div class="col-md-4">
<img src="img/2.png" class="img-responsive">
<p>John Doe<br>Co- Founder</p>
</div>
<div class="col-md-4">
<img src="img/3.png" class="img-responsive">
<p>John Doe<br>Investor</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-default navbar-btn">WORK WITH US</button>
</div>
</div>
</div>
</div>
|
|
|
|
|
|
|
|
