1. <!DOCTYPE html> 2. <!--[if lt IE 9 ]><html class="oldie no-js" lang="cs"><![endif]--> 3. <!--[if gt IE 8]><!--><html class="no-js" lang="cs"><!--<![endif]--> 4. <head> 5. <meta charset="utf-8"> 6. <title>sidonia Fay Drawing</title> 7. <meta name="description" content="webové stránky věnované kresbě, které vznikly za účelem vytvoření praktické části bakalářské práce."> 8. <meta name="author" content="sidonia Fay"> 9. <link rel="shortcut icon" href="./img/favicon.ico"> 10. <!--[if IE]><meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" /><! [endif]--> 11. 12. <!--Mobile meta--> 13. <meta name="viewport" content="width=device-width, initial-scale=1, maximumscale=1" /> 14. <meta name="handheldfriendly" content="true" /> 15. <meta name="mobileoptimized" content="320" /> 16. 17. <!--css--> 18. <link rel="stylesheet" href="styles.css" /> 19. <!--[if lt IE 8]><!--> 20. <link rel="stylesheet" href="./ie7/ie7.css" /> 21. <!--<![endif]--> 22. 23. <!-- Scripts --> 24. <script type="text/javascript" src="js/modernizr.custom.sf.js"></script> 25. 26. </head> 27. 28. <body id="home" class="no-touch"> 29. <div class="wrapper" role="main"> 30. <div id="scroll"> 31. <div id="wrapper-to-top"><div id="to-top"><a href="#home">nahoru</a></div></div> 32. <!-- ==== ZAČÁTEK ZÁHLAVÍ ==== --> 33. <header> 34. <div class="inside"> 35. <h1 id="logo" title="sidonia Fay">Sidonia Fay</h1> 36. <a href="#nav" title="menu" class="to_nav"> 37. <span class="icon"> 38. <i aria-hidden="true" class="icon-menu"></i> 39. </span> 40. <span>menu</span> 41. </a> 42. </div> 43. </header> 44. <!-- konec záhlaví --> 45. 46. <!-- ==== HLAVNÍ OBRÁZEK ==== --> 47. <div id="main-img"> 48. <span id="pencils" role="img" aria-label="main picture with logo and color pencils."> 49. <span class="in"></span> 50. </span> 51. </div> 52. <!-- konec hlavní obrázek --> 53. 54. <!-- ==== ZAČÁTEK PRVNÍHO ČLÁNKU ==== --> 55. <article id="clanek1"><div class="inside"> 56. 57. <h2 id="sidonia-fay">sidonia Fay</h2> 58. <h3>co nebo kdo je to Sidonia Fay?</h3> 59. <div id="wrapper-img-sidonia"> <img id="img-sidonia" src="./img/nothing4.jpg" alt="kresba-autoportrét" /></div> 60. <p>studuji obor aplikovaná informatika na Vysoké škole ekonomické v Praze. Ve volném čase se věnuji kresbě. Nejraději kreslím portréty. Ke kreslení používám téměř výlučně grafitové tužky, ačkoliv ovládám i jiné kreslící techniky. V dřívějších dobách jsem se věnovala i malbě, k té se chci co nejdříve vrátit, protože podle mého názoru dává větší svobodu projevu. I přesto nejspíš zůstanou
tužky, případně pastelky, mými nejbližšími přáteli.</p> 61. <p>nikdy v životě jsem nenavštěvovala žádné kurzy kreslení a rozhodně se nepovažuji za odborníka nebo snad umělce. Jsem pouhý amatér, který kreslení miluje a nedokáže si život bez této závislosti na tužkách a papíru představit.</p> 62. <p>na těchto stránkách si můžete prohlédnout ukázky z mé práce, najít několik užitečných rad a zásad, které byste při kreslení měli dodržovat, a pokud se vám moje práce bude líbit, můžete mě <a href="#kontakt" title="kontakty" class="odkazclanek1">kontaktovat a objednat si kresbu.</a></p> 63. <p>neuvádím zde žádný ceník, protože své služby poskytuju zásadně zdarma. Za kreslení jsem si nikdy žádné peníze nevzala, ani nechci. Ovšem ne každému mohu z časových důvodů vyhovět, a tak si vždy vybírám jen projekty, které mě nějakým způsobem zaujmou. Proto doporučuji napsat i důvod nebo nějaký krátký příběh, proč máte o kresbu zájem. Mojí odměnou je radost, kterou moje kresba člověku udělá.</p> 64. <h3>proč vznikly tyto webové stránky?</h3> 65. <p>tyto webové stránky vznikly v rámci praktické části bakalářské práce s názvem Flexibilní design webových stránek pro různá zobrazovací zařízení.</p> 66. <p>webové stránky jsou vytvořené hlavně pomocí technologií HTML5 a CSS3.</p> 67. 68. </div></article> 69. <!-- konec prvního článku --> 70. 71. <!-- ==== ZAČÁTEK DRUHÉHO ČLÁNKU ==== --> 72. <article id="clanek2"><div class="inside"> 73. 74. <h2 id="kresby">kresby</h2> 75. 76. <!-- ==== ZAČÁTEK GALERIE ==== --> 77. <div id="wrapper-gallery"> 78. <div class="box"> 79. <div class="inside-box"> 80. <img src="./img/sansa-color.jpg" alt="kresba Sansy Stark z Game of thrones - colorovaná" /> 81. <div class="title">sansa Stark z Game of Thrones</div> 82. </div> 83. </div> 84. <div class="box"> 85. <div class="inside-box"> 86. <img src="./img/katniss1.jpg" alt="kresba Katniss z Hunger Games" /> 87. <div class="title">katniss z Hunger Games</div> 88. </div> 89. </div> 90. <div class="box"> 91. <div class="inside-box"> 92. <img src="./img/jonsi.jpg" alt="kresba Jónsiho ze Sigur Rós" /> 93. <div class="title">jónsi ze Sigur Rós</div> 94. </div> 95. </div> 96. <div class="box"> 97. <div class="inside-box"> 98. <img src="./img/bjork.jpg" alt="kresba islandské zpěvačky Björk" /> 99. <div class="title">björk</div> 100. </div> 101. </div> 102. <div class="box"> 103. <div class="inside-box"> 104. <img src="./img/jared-leto.jpg" alt="kresba Jareda Leto" /> 105. <div class="title">jared Leto</div> 106. </div> 107. </div> 108. <div class="box"> 109. <div class="inside-box"> 110. <img src="./img/arwen.jpg" alt="kresba Arwen z Pána prstenů" /> 111. <div class="title">arwen z Pána prstenů</div> 112. </div> 113. </div> 114. <div class="box"> 115. <div class="inside-box"> 116. <img src="./img/jared-leto2.jpg" alt="kresba Jareda Leto" /> 117. <div class="title">jared Leto</div>
118. </div> 119. </div> 120. <div class="box"> 121. <div class="inside-box"> 122. <img src="./img/drogo-and-daenerys.jpg" alt="kresba Droga a Daenerys z Game of Thrones" /> 123. <div class="title">drogo a Daenerys z GOT</div> 124. </div> 125. </div> 126. <div class="box"> 127. <div class="inside-box"> 128. <img src="./img/emma-watson.jpg" alt="kresba Emmy Watson" /> 129. <div class="title">emma Watson</div> 130. </div> 131. </div> 132. <div class="box"> 133. <div class="inside-box"> 134. <img src="./img/sansa.jpg" alt="kresba Sansy Stark z Game of Thrones" /> 135. <div class="title">sansa Stark z Game of Thrones</div> 136. </div> 137. </div> 138. <div class="box"> 139. <div class="inside-box"> 140. <img src="./img/zandz.jpg" alt="kresba dvou kamarádek..." /> 141. <div class="title">kresba dvou kamarádek...</div> 142. </div> 143. </div> 144. <div class="box"> 145. <div class="inside-box"> 146. <img src="./img/katniss.jpg" alt="kresba Katniss z Hunger Games" /> 147. <div class="title">katniss z Hunger Games</div> 148. </div> 149. </div> 150. </div> 151. <!-- konec wrapper gallery --> 152. 153. <p>více kreseb najdete na mém účtu <a href="http://sidonnia.deviantart.com/" title="odkaz na účet DeviantART">DeviantART</a>.</p> 154. </div></article> 155. 156. <!-- konec druhého článku --> 157. 158. <!-- ==== ZAČÁTEK TŘETÍHO ČLÁNKU ==== --> 159. <article id="clanek3"><div class="inside"> 160. 161. <h2 id="tipy">tipy</h2> 162. <div id="wrapper-tips"> 163. 164. <div class="tips"> 165. <span class="wrapper-tips"><span class="tips-in">1</span></span> 166. <h4>kvalitní kreslící potřeby</h4> 167. <p>zaprvé budete potřebovat kvalitní kreslící potřeby. Za sebe mohu doporučit grafitové tužky značky Faber-Castell, které uspokojí každého milovníka tužek. Pokud však nejste zkušení a chcete si kresbu portrétu jen vyzkoušet, doporučuji začít s jinými tužkami. Tužky Faber-Castell jsou totiž poměrně drahé, ale skutečně kvalitní. Grafitové tužky jsou vyráběny v různých tvrdostech, přičemž měkčí zanechávají temnější stopu. Měkčí tužky (většinou označení B až 8B) jsou určené k umělecké kresbě, zatímco tvrdší tužky (většinou označení H až 8H) slouží spíše ke kreslení technických kreseb a výkresů. Kvalitním tužkám se tuhy nelámou a není třeba je tak často ořezávat. Místo ořezávátka můžete k vybroušení tuhy do špičky využít kousek smirkového papíru.</p> 168. <div id="wrapper-img-potreby"> <img id="img-potreby" src="./img/tools.jpg" alt="kreslící potřeby" /></div> 169. <p>na obrázku výše můžete vidět jeden ze setů pro kresbu značiky Faber- Castell. Obsahuje grafitové tužky, grafity, brusku, plastickou gumu, těrku, křídu ve dřevě a ořezávátko. Pro začátek ideální sada.</p> 170. </div> 171. <div class="tips"> 172. <span class="wrapper-tips"><span class="tips-in">2</span></span> 173. <h4>kvalitní papír</h4> 174. <p>výběr papíru byste rozhodně neměli podcenit. Na obyčejné čtvrtce či
kancelářském papíru vaše kresba nevynikne. Osobně dávám přednost tzv. bristolskému papíru, jehož vzorek je velmi jemný a umožňuje tak nakreslit vše do nejmenších detailů. </p> 175. </div> 176. <div class="tips"> 177. <span class="wrapper-tips"><span class="tips-in">3</span></span> 178. <h4>výběr Předlohy</h4> 179. <p>když už máte tužky a papír, můžete se pustit do díla. Pokud chcete nakreslit něčí portrét, budete potřebovat buď kvalitní fotografii jako předlohu nebo člověka, který vám bude ochotný pózovat. Podle rozmazané nebo příliš malé fotografie se vám bude špatně kreslit. Samozřejmě můžete použít svoji fantazii a nakreslit si portrét smyšlený, nebo do něj zakomponovat symbolické prvky. </p> 180. <div id="wrapper-img-predloha"> <img id="img-predloha" src="./img/predlohaoriginal.jpg" alt="obrázek předloha X kresba" /></div> 181. <p>vlevo je fotografie, která mi posloužila jako předloha pro kresbu vpravo. Jde o naprosto realistickou kresbu.</p> 182. </div> 183. <div class="tips"> 184. <span class="wrapper-tips"><span class="tips-in">4</span></span> 185. <h4>drobné přikrášlení portrétu</h4> 186. <p>pokud chcete, aby si byl člověk, kterého kreslíte, podobný a jen ho trošku vylepšit, můžete například trochu změnit velikost očí a tak podobně, ale nikdy neměnit tvary rysů obličeje. Velmi důležité je trefit podobu obočí. Pokud člověku nakreslíte obočí odlišné od reality, opravdu to výraz obličeje hodně změní. </p> 187. </div> 188. <div class="tips"> 189. <span class="wrapper-tips"><span class="tips-in">5</span></span> 190. <h4>rozvržení prostoru</h4> 191. <p>je nutné rozvrhnout si dobře prostor na papíře. Nejprve si můžete nakreslit pomocné linky, které však musíte nakreslit jen velmi jemně, aby se daly později vygumovat. Po nakreslení základních obrysů, se můžete pustit do kreslení detailů.</p> 192. <div id="wrapper-img-linky"><img id="img-linky" src="./img/pomocne-linky.jpg" alt="obrázek znázorňující pomocné linky" /></div> 193. <p> 194. Modré linky jsou linky kolem obrysů obličeje. 195. Zelené linky jsou linky kolem očí. Můžete si všimnout, že oči jsou od sebe vzdálené přibližně na délku jednoho oka. 196. Červené linky jsou linky kolem úst. Ústa bývají široká jako protor mezi středem očí. 197. </p> 198. </div> 199. <div class="tips"> 200. <span class="wrapper-tips"><span class="tips-in">6</span></span> 201. <h4>pracovní prostor</h4> 202. <p>při kreslení nezapomeňte udržovat váš pracovní prostor a ruce v čistotě. Není nic ošklivějšího, než upatlaná kresba od jídla nebo skvrn od kreslících potřeb. Je dobré jít si během práce občas umýt ruce. Kreslit byste měli na nějakém pevném rovném povrhu bez prasklin. </p> 203. </div> 204. <div class="tips"> 205. <span class="wrapper-tips"><span class="tips-in">7</span></span> 206. <h4>kresba pozadí portrétu</h4> 207. <p>pokud chcete nakreslit i pozadí, nenechávejte si ho až nakonec. Pozadí je lepší kreslit ještě před nakreslením vlasů. Zvláště pokud jde o vlasy světlé. Jednotlivé světlé vlasy se do tmavého pozadí dají zakomponovat i pomocí gumy. Buď stačí šikovně vytvarovaná plastická guma nebo třeba guma v tužce, se kterou můtete vytvořit úzký pruh.</p> 208. </div> 209. <div class="tips"> 210. <span class="wrapper-tips"><span class="tips-in">8</span></span> 211. <h4>nejdřív mysli, potom kresli...</h4> 212. <p>je důležité myslet pár tahů dopředu a mazání nepovedených tahů co nejvíce eliminovat. Když už gumovat musíte, použijte kvalitní gumu. Může si navíc pořídit také tzv. plastickou gumu, se kterou můžete vytvářet detaily, jako jsou vlající jednotlivé vlasy nebo třeba ostřejší světelné efekty v očích. </p> 213. </div> 214. <div class="tips"> 215. <span class="wrapper-tips"><span class="tips-in">9</span></span> 216. <h4>svoboda v postupu kreslení</h4>
217. <p>nemusíte nutně začínat kreslením obrysů tváře. Já například vždy začínám nakreslením očí a to do detailů. Doporučuji však krestli vždy zleva do prava, pokud jste praváci. Nerozmažete si tak části obrázku, který jste již nakreslili. I tak se potřebujte často vrátit zpět k již nakreslné části obrázku. Aby nedocházelo k rozmazání kresby, dopouručuji používat čistý papír jako podložku pod ruku, kterou kreslíte.</p> 218. <div id="wrapper-img-svoboda"> <img id="img-svoboda" src="./img/ocibjork.jpg" alt="obrázek očí Björk" /></div> 219. </div> 220. <div class="tips"> 221. <span class="wrapper-tips"><span class="tips-in">10</span></span> 222. <h4>netlačte na tužku</h4> 223. <p>na tužku nikdy netlačte. Pokud potřebujete nakreslit tmavší stopu, použijte měkčí tužku. </p> 224. </div> 225. <div class="tips"> 226. <span class="wrapper-tips"><span class="tips-in">11</span></span> 227. <h4>pozor na obrysy tváře</h4> 228. <p>obrysy tváře příliš nezvýrazňujte, ve skutečnosti také nemáme kolem tváře černé linky. Je lepší nakreslit obrysy velmi jemně, po nakreslení obličeje a jeho okolí pak zcela zaniknou. </p> 229. <div id="wrapper-img-obrysy"><img id="img-obrysy" src="./img/obrysytvare.jpg" alt="rozkreslený obrázek, který ukazuje, jak správně kreslit obrysy obličeje" /></div> 230. <p>na obrázku výše si můžete povšimnout, že místo kreslení temných linek kolem tváře nejdřív stínuju okolí obličeje. Díky tomu kresba působí reálněji.</p> 231. </div> 232. <div class="tips"> 233. <span class="wrapper-tips"><span class="tips-in">12</span></span> 234. <h4>stínování</h4> 235. <p>stínovat obrázek můžete buď vytvářením vzorku pomocí tahů tužky křížem krážem, nebo i rozmazáváním tužky. Já osobně dávám přednost první variantě. Rozmazáváním nemám moc ráda. Když už jste zastáncem této techniky, doporučuji nedělat to pomocí prstů. Používejte třeba papírové kapesníčky, odličovací tampony, tyčinky do uší nebo těřky. Po rozmazání prsty působí kresba ušmudlaně. </p> 236. </div> 237. <div class="tips"> 238. <span class="wrapper-tips"><span class="tips-in">13</span></span> 239. <h4>hra světel a stínů ve vlasech</h4> 240. <p>nezapomeňte na odlesky ve vlasech, kresba potom působí mnohem živěji. Vlasy doporučuji kreslit tužkami do tvrdosti 3B. A dobré je používat i mikrotužku s měkkou tuhou.</p> 241. <div id="wrapper-img-sansa"><img id="img-sansa" src="./img/sansa-postup.jpg" alt="kresba Sansy Stark ze hry o trůny ve dvou fázích procesu tvorby" /></div> 242. <p>obrázek je spojen ze dvou fotografií stejné kresby v různých fázích procesu tvorby. Zde můžete vidět, že nejprve kreslím do detailů oči, nos a ústa, teprve poté začínám se stínováním tváře, vlasy a případně pozadím portrétu. Všimněte si, že si nejprve lehce tužkou nakreslím směr růstu vlasů a jejich tvar. Poté začínám kreslit těmnější oblasti vlasů. Jednotlivé vlasy kreslím vždy dvěma směry. Dělám jednotlivé tahy ve směru růstu vlasů a to zespoda a shora proti sobě a v místě, kde chci vytvořit světelný odlesk ve vlasech, přestávám na tužku tlačit a jednotlivé prameny vlasů jemně spojím.</p> 243. </div> 244. <div class="tips"> 245. <span class="wrapper-tips"><span class="tips-in">14</span></span> 246. <h4>oči</h4> 247. <p>nejprve si oči jemně načrtněte. Nezačínejte hned stínovat zorničky a tak podobně, dokud nemáte načrtnuté obě oči, aby pak vyobrazený člověk nešilhal. Nezapomínejte na stíny a světla, oči pak působí živěji. Než začnete kreslit řasy, vystínujte oblast očí.</p> 248. <div id="wrapper-img-oci"><img id="img-oci" src="./img/oci.jpg" alt="kresba očí" /></div> 249. </div> 250. </div> 251. 252. </div></article> 253. <!-- konec třetího článku --> 254. 255. <!-- ==== ZAČÁTEK ČTVRTÉHO ČLÁNKU ==== --> 256. <article id="clanek4"><div class="inside">
257. 258. <h2 id="sluzby">služby</h2> 259. 260. <p>chtěli byste dát někomu z vašich blízkých originální dárek, který v žádném obchodě nekoupíte? Potom jste na správném místě. Nic mi nedělá větší radost, než kresba nové neznámé tváře. Nebo se snad chcete pokusit o vytvoření vlastního portrétu? V sekci <a href="#tipy" title="odkaz na sekci tipy"> tipy </a> můžete najít pár užitečných rad, jak na to. 261. Pokud se vám moje práce líbí a měli byste zájem o nakreslení portrétu. Můžete mě kontaktovat prostřednictvím e-mailu, napsat mi zprávu na facebook nebo DeviantART. Potřebovat budu pouze fotografii, podle které budu moci obrázek nakreslit.</p> 262. <h3>požadavky na fotografii:</h3> 263. <ul> 264. <li>fotografie musí být kvalitní s co největším možným rozměrem</li> 265. <li>obličej na fotografii musí mít jasně vykreslené rysy</li> 266. <li>fotografie nemusí být barevná</li> 267. <li>nemusí jít pouze o portrét, ale i celou postavu</li> 268. </ul> 269. 270. </div></article> 271. <!-- konec čtvrtého článku --> 272. 273. <!-- ==== ZAČÁTEK PÁTÉHO ČLÁNKU ==== --> 274. <article id="clanek5"><div class="inside"> 275. 276. <h2 id="kontakt">kontakt</h2> 277. 278. <div id="wrapper-kontakt"> 279. <p> 280. <a href="mailto:elsinnor@gmail.com" title="e-mail"> 281. <span class="icon"> 282. <i aria-hidden="true" class="icon-mail"></i> 283. </span> 284. <span>e-mail</span> 285. </a> 286. </p> 287. 288. <p> 289. <a href="https://www.facebook.com/zdenka.hatniankova" title="facebook"> 290. <span class="icon"> 291. <i aria-hidden="true" class="icon-fb"></i> 292. </span> 293. <span>facebook</span> 294. </a> 295. </p> 296. 297. <p> 298. <a href="http://sidonnia.deviantart.com/" title="deviantart"> 299. <span class="icon"> 300. <i aria-hidden="true" class="icon-da"></i> 301. </span> 302. <span>deviantart</span> 303. </a> 304. </p> 305. </div> 306. 307. </div></article> 308. <!-- konec pátého článku --> 309. 310. <!-- ==== ZAČÁTEK NAVIGACE ==== --> 311. <div id="inside-nav"> 312. <nav id="nav" role="navigation"> 313. <ul> 314. <li> 315. <a href="#sidonia-fay"> 316. <span class="icon"> 317. <i ariahidden="true" class="icon-home"></i> 318. </span> 319. <span>sidonia
Fay</span> 320. </a> 321. </li> 322. <li> 323. <a href="#kresby"> 324. <span class="icon"> 325. <i ariahidden="true" class="icon-portfolio"></i> 326. </span> 327. <span>kresby</span> 328. </a> 329. </li> 330. <li> 331. <a href="#tipy"> 332. <span class="icon"> 333. <i ariahidden="true" class="icon-tips"></i> 334. </span> 335. <span>tipy</span> 336. </a> 337. </li> 338. <li> 339. <a href="#sluzby"> 340. <span class="icon"> 341. <i ariahidden="true" class="icon-services"></i> 342. </span> 343. <span>služby</span> 344. </a> 345. </li> 346. <li> 347. <a href="#kontakt"> 348. <span class="icon"> 349. <i ariahidden="true" class="icon-contact"></i> 350. </span> 351. <span>kontakt</span> 352. </a> 353. </li> 354. <li class="top"> 355. <a href="#home"> 356. <span class="icon"> 357. <i aria-hidden="true" class="icon-top"></i> 358. </span> 359. <span>nahoru</span> 360. </a> 361. </li> 362. </ul> 363. </nav> 364. </div> 365. <!-- konec navigace --> 366. 367. <!-- ==== ZAČÁTEK ZÁPATÍ ==== --> 368. <footer role="contentinfo"> 369. 370. <p> 2014 Sidonia Fay</p> 371. 372. </footer> 373. <!-- konec zápatí --> 374. 375. </div> 376. <!-- konec scroll --> 377. </div> 378. <!--end wrapper--> 379. 380. <!-- scripts --> 381. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 382. <script type="text/javascript"> 383. $(function(){
384. if ('ontouchstart' in window) // Detekce dotekového zařízení 385. { 386. $('body').removeclass('no-touch').addclass('touch'); // Nastavení třídy touch pro dotyková zařízení 387. // Vybere nejbližšího předka obrázku v galerii a přidá mu třídu tapped 388. $('div.inside-box img').click(function(){ 389. $(this).closest('.inside-box').toggleclass('tapped'); 390. }); 391. } 392. }); 393. </script> 394. <!--[if lte IE 8]> 395. <script src="./js/respond.js"></script> 396. <![endif]--> 397. </body> 398. </html>