Ето все пак 2 неща над които работих в последно време (като изключим ученето на JQuery )

Една малка система за управление на картинките в галерията на http://www.kakadubg.com/portfolio
За съжаление няма как да ви покажа работещо демо понеже системата е само за собственика на сайта. Ето един скрииншот все пак:

Другото нещо на което по се кефя естествено е лейаута за сайта, който трябва да довърша скоро:

И така … за сега толкоз ще гледам да повиша активността си доколкото мога

И така…

1. Били ли сте арестувани? не
2. Целували ли сте някой, който не сте харесвали? не
3. Спали ли сте до 5 следобед? да
4. Изключвали ли са ви от училище? не
5. Изпитвали ли сте любов от пръв поглед? да
6. Съсипвали ли сте си колата в катастрофа? не
7. Уволнявали ли са ви от работа? не
8. Уволнявали ли сте някого? не
9. Пели ли сте на караоке? не
10. Насочвали ли сте оръжие към някого? не
11. Целували ли сте се под дъжда? не
12. Имали ли сте близък досег със смъртта (вашата собствена)? да
13. Виждали ли сте някой да умира? не
14. Играли ли сте на бутилка? не
15. Пушили ли сте пура? не
16. Седяли ли сте на покрив? да
17. Прекарвали ли сте някой през граница в друга държава? не
18. Бутали ли са ви в басейн напълно облечен? не
19. Чупили ли сте си кост? не
20. Бягали ли сте от училище? да
21. Яли ли сте насекоми? не
22. Ходили ли сте насън? май да
23. Разхождали ли сте се на плаж под лунна светлина? не
24. Карали ли сте мотоциклет? да
25. Късали ли сте с някого? да
26. Лъгали ли сте, за да избегнете глоба? да – градски транспорт
27. Летели ли сте с хеликоптер? не
28. Бръснали ли сте си главата до голо? не
29. Скачали ли сте от покрив? не
30. Докарвали ли сте приятеля/приятелката си до сълзи? не
31. Яли ли сте змия? не
32. Участвали ли сте в протест/демонстрация? не
33. Пърдяли ли сте на атракцион в увеселителен парк? не
34. Бойкотирали ли сте сериозно и целенасочено нещо/някого? да
35. Участвали ли сте в банда? да (ако 3-4 тиинове металюги е банда )
36. Показвали ли са ви по телевизията? не
37. Стреляли ли сте с огнестрелно оръжие? да
38. Плували ли сте голи? да
39. Правили ли сте шевове на нечия рана? не
40. Карали ли сте сърф? не
41. Обаждали ли сте се на 112 или друг спешен номер? не
42. Пили ли сте направо от бутилка с алкохол? да
43. Били ли сте оперирани? да
44. Тичали ли сте голи на обществено място? не
45. Карали ли са ви с линейка в болница? не
46. Губили ли сте съзнание, без да пиете? да (27 часа пред PC-то)
47. Пикали ли сте в храстите? да
48. Бягали ли сте от полиция? да (крадохме некво грозде )
49. Дарявали ли сте кръв? да
50. Хващали ли сте телена ограда под напрежение? не
51. Яли ли сте крокодилско месо? не
52. Убивали ли сте животно, когато не сте на лов? да
53. Попикавали ли сте се на обществено място? е сигурно
54. Промъквали ли сте се в кино, без да плащате? не
55. Рисували ли сте графити? не
56. Обичате ли още някой, който не е редно да обичате? не
57. Слагали ли са ви белезници? не
58. Вярвате ли в любовта? да
59. Били ли сте се? да
60. Крали ли сте нещо? да
61. Яли ли сте охлюви? да
62. Давали ли сте пари на бездомни/просяци? не
63. Помагали ли сте на някой да изкара изпит? да
64. Удряли ли сте някого с бухалка или пръчка? да
65. Били ли сте толкова уплашени, че да се разплачете? не
66. Нападало ли ви е куче? да
67. Били ли сте съдени? не

Ето и правилата:

• Отговаряте само с да и не! (това правило май не го спазих )
• Разяснявате вашите отговори само, ако ви зададат върпос в коментарите, facebook или пък скайп, но не и в отговорите на върпосите

Аз ще поканя – Snooby, Жоро и Миро. Всеки друг, които иска да все включи има това право Само пуснете един линк към този пост, за да ме осведоми Може и коментар да оставите.

Кодиране на сайт – Photoshop to HTML / CSS from dobromir ivanov on Vimeo.
Във втория урок ще завършим хедъра и ще започнем основната конструкция.

Кодиране на сайт – Photoshop to HTML / CSS – 2 from dobromir ivanov on Vimeo.

В третата част ще оправим проблема с float-инга и ще продължим нататък

Кодиране на сайт – Photoshop to HTML / CSS – 3 from dobromir ivanov on Vimeo.

В четръвтата част ще довършим колонките са услугите и блога и ще направим лентата за социалните мрежи. Ще направим и линковете към facebook, twitter и rss.

Кодиране на сайт – Photoshop to HTML / CSS – 4 from dobromir ivanov on Vimeo.

Поздрави на всички юзъри

layout за фирмен сайт

Първоначално ще постна урока стъпка по стъпка с картинки и текстово описание, а по-късно ще добавя и видео.

За този урок ще имате нужда от следните материали.
1. листа
2. пикселизиран син правоъгълник

И така нека започнем:
1. Създайте нов документ
Създайте нов документ (Ctrl+N) във Photoshop със размери 1200px на 750px. След това с помощта на Gradient Tool (G) пуснете градент, с цветове #792700 и #000000,  от горе надолу.

основен фон - градиент

2. Добавете цветни сияния към фона
Създайте нов слой (Ctrl+Shift+N), изберете Brush Tool (B), изберете максимално мека четка с диаметър приблизително 300px и добавете няколко цвята по ваш избор. Тук сме използвали червено, оранжево и синьо.

Цветно сияние - Brush Tool

3. Добавете текстура към фона си
Сега ще създадем текстура за нашия фон. Отворете във Фотошип листата, които свалихте в началото на урока и ги добавете към вашия документ с Move Tool (V). Дайте десен бутон на слоя с листата и кликнете на Convert to Smart Object. След това отидете на Filter -> Artistic -> Film Grain и въведете стойностите, които са показани на изображението по-долу. После отидете на Filter -> Pixelate -> Mosaic и отново ползвайте настройките по-долу. Променете режима на смесване на слоя (Blending mode) на Difference, и намалете непрозрачността(opacity) на 30%.

Текстура - филтри - Film Grain & Mosaic

4. Направете тъмен фон за контейнера
С Rounded Rectangle Tool (U) с радиус от 3px изчертайте черен закръглен правоъгълник. После с десен бутон върху този слой изберете Blending Options и въведете стойностите за drop shadow, които са показани на изображението по-долу. Намалете непрозрачността(Opacity) на слоя на 70%.

drop shadow - контейнер - фон

5. Групирайте Вашите слоеве
Препоръчително е когато работите в/у по-големи проекти да групирате слоевете си в папки. Това ще направи вашата работа занапред по лека и значително ще помогне в ситуация в която някой друг се наложи да довършва или корегира вашия проект.
Задръжте Ctrl и селектирайте всички слоеве, които създадохте до сега и ги групирайте (Ctrl+G). Именувайте слоя “background”.

групиране

6. Направете още групи
Направете нова група от Layer – > New – > Group и я именувайте “home”. После направете още една група вътре в групата “home” и я именувайте “logo”.

лого

7. Добавете лого и слоган
Докато се намирате в папката “logo” изберете Type Tool (T) и напишете името на фашата фирма или там каквото намерите за добре с цвят #f4f4f4. Дайте десен бутон на слоя с текста и от Blending Options въведете настройките показани на картинката. След това напишете и слогана с цвят #eeeeee

Лого - настройки

8. Бутоните за регистрация и логване
Сега ще направим бутони в горния десен ъгъл на лейаута, които могат да служат както за регистрация така и за контактна форма( След това е подходящо да се кодира с падащо Jquery меню, но това е друга тема). Направете нова група и я именувайте “Sign up | Login”. След това с Rounded Rectangle Tool (U) начертайте форма подобна на тази долу. Кликнете два пъти на слоя с формата (Shape) за да отворите Blending Options и въведете настройките от изображението. Сменете Foreground цвета на бяло (#ffffff) и с Type Tool (T) напишете в/у бутона думите “Sign up | Login”. Намалете непрозрачността (opacity) на текста на 75%

бутини - sign up и login

9. Пуснете синя линия висока 1px
Направете нова група и я кръстете “Navigation”. Направете нов слой (Ctrl+Shift+N), изберете Single Row Marquee Tool (който се намира под Rectangular Marquee Tool [квадрата за селектиране] ) и кликнете веднъж в документа за да създадете селекция с височина от 1px. Запълнете селекцията с цвят #406f94(Edit – > Fill) и изтриите областта, която излиза извън черния правоъгълник с помощта на Rectangular Marquee Tool (M). Настройте непрозрачността на този слой на 40% и го кръстете “Line”.

Синя линия

10. Пуснете един градиент, за фон на навигацията
Направете нов слой, изберете Rectangular Marquee Tool (M) и направете селекция като тази на снимката (пуснете си по някой водач за да ви е по лесно). След това запълнете селекцията с градиент с цветове от #35423e към прозрачност от долу – нагоре. Надиснете Ctrl+D за да махнете селекцията. Сега добавете малко шум от Filter – > Noise – > Add Noise с настройките от снимката. Кръстете слоя “gradient” и го мръднете на 1px разстояние от линията, която направихме в предната стъпка.

градиент - навигация

11. Напишете имената на вашите страници
Изберете Type Tool (T) и напишете имената на странитите, които очаквате да има вашия бъдещ сайт. След това отворете Blending Options на всеки от текстовите слоеве и нанесете настройките от картинката по-долу. Шрифта, който е ползван за конкретния случай се казва Greyscale Basic, но Вие може да си ползвате някой по ваш вкус.

навигационни бутони - текст

12. Направете разделител
Сега ще направим разделител да отделните бутони. Направете нов слой, изберете Single Column Marquee Tool и кликнете веднъж в/у новия слой. След това изберете Rectangular Marquee Tool (M), кликнете на бутончето “Intersect with selection”, което се намира в контекстното меню, и направете селекция, като тази на изображението долу. Запълнете селекцията с бяло и натиснете Ctrl+D, за да деселектирате.

Разделител

13. Цветове на разделителя
Кликнете два пъти на слоя с разделителя за да отворите Blending Options, кликнете на Gradient Overlay и въведете настройките. Именувайте слоя “line 1″.

разделител - градиент1

14. Цветове на разделителя 2
Копирайте слоя с разделителя “Line 1″ (Ctrl+J) и го кръстете “Line 2″. Натиснете V, за да изберете Move Tool и натиснете веднъж дясната стрелка на клавиатурата, за да изместите слоя с 1 пиксел надясно. След това отворете Blending Options на този слой (“Line 2″) и въведете настройките.

разделител - градиент 2

15. Направете слоевете “Line 1″ и “Line 2″ умен обект (Smart Object)
Селектирайте с Ctrl и двата слоя “Line 1″ и “Line 2″. Кликнете с десен бутон на някой от тях и изберете Convert to Smart Object, за да ги направите неразрушими (Smart Object). Кръстете умния слой “separator”.

Умен обект - Smart Object

16. Направете синьо сияние
Направете нов слой под слоя “separator”. Изберете Rectangular Marquee Tool (M) и направете селекция като тази долу и я запълнете с цвят #35423e. Цъкнете с десен бутон на слоя и го превърнете в Smart Object. Сега ще приложим умен филтър (умните филтри са филтри, които са приложени в/у умни обекти – тоест те са променливи). Отидете на Filter – > Blur – > Gaussian Blur и въведете настройките от картинката. Пуснете и малко шум от Filter – > Noice – > Add Noise отново с настройки от долу. Намалете непрозрачността на слоя на 60% и го кръстете “highlight”.

Умни филтри - Smart Filters

17. Направете маска на слоя с разделителя “separator”
Кликнете на слоя “separator” за да го селектирате и след това му сложете маска от Layer – > Layer Mask – > Reveal All. Изберете Gradient Tool (G) и пуснете градиент от черно към прозрачно(или бяло) отгоре – до средата на разделителя.

разделител - fade effect

18. Размножете разделителя
Задръжте Ctrl и кликнете на слоевете “separator” и “highlight” за да ги селектирате. Изберете Move Tool (V), и докато задържате Alt и Shift кликнете и провлачете мишката надясно. Така вие копирате селектираните слоеве, като запазвате подравняването им. Повторете стърката, колкото пъти ви е необходимо.

Размножаване на разделителя

19. Групирайте всички разделители
Селектирайте всички слоеве “separator” и “highlight” и натиснете Ctrl+G за да ги групирате. Именувайте групата “separators”.

Групиране на разделителите

20. Направете Hover бутона
Сега ще направим фона, който ще се появява при преминаване на мишката в/у бутона. Вземете Rectangle Tool (U) и начертайте правоъгълник подомен на моя. Преместете този слой под слоя/слоевете с имената на страниците. Кликнете два пъти на слоя с правоъгълника за да отворите Blending Options и въведете настройките на Gradient Overlay. Именувайте го “Active Menu” и намалете opacity-то на 50%.

Rollover Effect

21. Направете полето за търсачката
Сега създайте нова група (Layer – > New – > Group), кръстете я “search” и я сложете над групата “navigation”. Вземете Rounded Rectangle Tool (U), променете радиуса на 3px и начертайте правоъгълник като този долу с цвят #104f59. Кръстете слоя “text field” и намалете opacity-to на 80%

Поле за търсене

22. Направете бутона “Search”
Начертайте още един малък правоъгълник над първия и го сложете от дясната част както е показано долу.  Пуснете градиент на новата форма от Blending Options с настройките от долу. Накрая кликнете с десен бутон на новия правоъгълник и изберете Create Clipping Mask, за да изрежете всичко което е ненужно от горната форма.

search button - clipping mask

23. Напишете “Search” в/у бутона
Вземете Type Tool (T) и напишете думата “search” с бял цвят. Намалете непрозрачността на 75%.

Search

24. Пуснете вертикална линия до “search” бутона
Вземете Line Tool (U) и пуснете вертикална линия с цвят #123036. Кръстете слоя “line”, сложете го под слоя “button”, за да се задейства отново clipping mask-ата, и го наместете м/у полето за въвеждане на текст и бутона “search” с помощта на Move Tool (V)

разделител за търсачката

25. Изчертайте син правоъгълник под навигацията
Направете си нова група и я кръстете “Showcase”. Направете друга група вътре в тази и я именувайте “background”. Вземете Rectangle Tool (U) и изчертайте правоъгълник с цвят #219aad. Правоъгълника от нашия пример е с размери 983px широк и 273px висок (ако искате точно тези размери то може да ги въведете, като кликнете на малката стрелкичка в контекстното меню, изберете Fixed Size и там въведете желаните размери.). Намалете непрозрачността на 55% и кръстете слоя “bg4″.

син правоъгълник

26. Добавете текстура към синия правоъгълник
Отворете във Photoshop пикселизирания син правоъгълник, който свалихте в началото на урока, вмъкнете го в вашия документ и го сложете над синия правоъгълник. Намалете opacity-то на този слой на 55% и го кръстете “bg3″.

пикселизиран правоъгълник

27. Добавете градиент над пикселизирания слой.
Задръжте Ctrl и кликнете в/у векторната маска на “bg4″ за да я селектирате, след това направете нов слой, вземете Gradient Tool (G) и пуснете градиент с цветове #56b8e5 към прозрачност отдолу – нагоре в селекцията. Натиснете Ctrl+D за да махнете селекцията.

селектиране на векторна маска - градиент

28. Направете още един – по-малък правоъгълник
Направете нов слой, изберете Rectangular Marquee Tool (M) и направете селекция като тази долу. Вземете Gradient Tool (G) и пуснете градиент от #0f2b42 към #2a607f отдолу-нагоре в селекцията. После деселектирайте с Ctrl+D. Именувайте слоя “bg1″.

повърхност - градиент

29. Бутона “Sign up”
Направете си нова група (Layer – > New – > Group) и я кръстете “sign up button”. Изберете Rounded Rectangle Tool (U), настройте радиуса на 2px и начертайте закръглен правоъгълник като този долу. Кликнете два пъти на този слой за да отворите Blending Options и въведете настройтите. Накрая изберете Type Tool (T) и напишете думите “sign up” с бял цвят.

Бутана "Sign Up"

30. Бутона “Learn more”
Повторете предната стъпка, за да създадете още един путон, или просто копирайте групата “Sign up button” и просто сменете текста. (не забравяйте, че трансформацията на векторни обекти се извършва с Direct Selection Tool [бялата стрелка]). След това изберете Custom Shape Tool (U) и начертайте стрелка подобна на моята.

Бутона "Learn More"

31. Направете бутон от лявата част на синия правоъгълник.
Направете си нова група (Layer – > New – > Group) и я кръстете “left arrow”. Изберете Ellipse Tool (U) и изчертайте кръг с цвят #406f94. Цъкнете два пъти слоя за да отворите Blending Options и нанесете настройките.

Кръгъл бутон

32. Направете стрелка вътре в синия кръг
Използвайте Custom Shape Tool (U) за да направите бяла стрелка подобна на тази. Кликнете два пъти на слоя за да отворите Blending Options и нанесете настройките. Намалете opacity-то на слоя на 50%

Стрелка - Custom Shape Tool

33. Направете още една стрелка в дясната част на синия правоъгълник
Повторете последните 2 стъпки за да направите стрелка в дясно или копирайте цялата група и направете само малки корекции. Второто е препоръчително

Стрелка от дясно

34. Сложете снимка на промотиран продукт на фирмата
Направете си нова група (Layer – > New – > Group) и я кръстете “image”. Сложете малка рактинка на ваш продукт и кръстете слоя “image”. Кликнете два пъти на слоя за да отворите Blending Options и нанесете настройките

Промотиран продукт

35. Добавете сянка към картинката
Направете нов слой (Ctrl+Shift+N). Сложе го под слоя с картинката. След това отидете на Layer – > Layer Mask – > Reveal All, за да добавите маска и след това изберете Gradient Tool (G) и пуснете градиент от черно към прозрачност отдолу до средата на вашата малка снимка. Кръстете слоя “shadow”.

сянка

36. Добавете малко текст
Направете си нова група. Изберете Type Tool и добавете малко текст. Кръстете групата “text”.

Добавете текст

37. Начертайте бял правоъгълник под синия
Направете нова група и я кръстете “content”. Вътре направете още една група и я кръстете “shadows”. Вземете Rectangle Tool (U) и начертайте бял правоъгълник като този долу. Кръстете слоя “white shape” и намалете opacity-то на 90%

Бяло поле

38. Пуснете горната сянка
Задръжте Ctrl и кликнете на векторната маска на “white shape” слоя за да направите селекция. След това направете нов слой, вземете Gradient Tool (G) и пуснете градиент #8f8f8f към прозрачност. Намалете непрозрачността на слоя на 50% и го именувайте “top shadow”. След това вземете Move Tool (V) и натиснете 2 пъти долната стрелка на клавиатурата, за да симулираме сияние.

горна сянка

39. Направете още 2 вертикални сенки
Направете нов слой и с Rectangular Marquee Tool (M) направете селекция като тази долу. После пуснете градиент #8f8f8f към прозрачност. Сложете маска на този слой и използвайки голяма мека четка закриите централната част на сянката. Намалете opacity-то на 30% и кръстете слоя “vertical shadow 1″. Копирайте слоя (Ctrl+J), кръстете слоя “vertical shadow 2″ и я преместете надясно.

вертикални сенки

40. Начертайте хоризонтална линия
С помощта на Line Tool (U) пуснете линия с дебелина 1px и цвят #aebcc7. Именувайте слоя “line”. Това може да го направите и с Single Row Marquee Tool, понеже вектирните форми попълват съседни пиксели, заради свойството Anti-aliasing, което често дава нежелани резултати.

хоризонтална линия

41. Добавете малко текст по ваш избор
Вземете Type Tool (T) и нанесете малко текст в комбинация с изображения. Ползвайте цветове от layout-а за заглавията и текста.

текст

42. Пуснете градиент за фуутера
Направете си нова група и я кръстете “footer”. Направете нов слой вътре в групата, изберете Rectangular Marquee Tool (M) и направете селекция подобна на долната. След това сменете foreground цвета на #555555, вземете голяма мека четка и цъкнете с нея няколко пъти над горната част от селекцията. Намалете opacity-то на този слой на 50% и го кръстете “gradient”.

footer gradient - градиент за фуутера

43. Добавете линия с дебелина 1px под градиента
Направете нов слой (Ctrl+Shift+N), вземете Single Row Marquee Tool и кликнете малко под градиента. Запълнете селекцията (Edit – > Fill) с бяло и натиснете Ctrl+D за да деселектирате. После сложете маска на слоя (Layer – > Layer Mask – > Reveal All), вземете голяма мека четка и закриите (изтриите) част от слоя както е показано на примера долу. Намалете непрозрачността на слоя на 15% и го кръстете “line”.

линия под градиента

44. Добавете малко текст към фуутъра си
Вземете Type Tool (T) и добавете текст към фуутъра.

фуутър - текст

Финален Резултат !

Финален резултат

…….
Пффф голямо писане му ударих
Тия дни ще добавия и видео към урока.
Поздрави и успех на всички !
…….

Източник: tutorial9.net

Най вероятно вие желаете, когато потребителя кликне в полето, текста да изчезва. Най елементарният начин да направим това е като добавим малко javascript.

До тук добре, но потребителят е възможно да достигне до полето и по друг начин, папример с таб, затова е по разумно да използваме onFocus вместо onClick:

До тук всичко изглежда ОК, но имаме един не малък проблем. Когато потребителя попълни полето, разгледа малко сайта с в един момент реши да се върне пак на същото поле, въведената стойност ще се изтрие отново ! За да сме сигурни, че това няма да се случи нека добавим малка проверка:

Ето:

Въстановяване на стойността по подразбиране, ако нищо не е въведено

За сега всичко работи добре, но когато потребителят кликне в полето и реши да не попълва нищо … полето остава празно. Ние не искаме това да е така, затова ще направим така, че стойността по подразбиране да се възстановява ако не е въведено нищо в полето:

Понякога обаче това не е най-доброто решение за нас. Ако желаем при кликване или фокусиране на полето текстът ни да се селектира ще използваме следния код:

Като допълнително ефектче може да добавим и променлив цвят на текста или фона:

Това е за сега … надявам се да ви е полезно и да ви даде поле за експерименти . Имайте впредвид факта, че многото код може да доведе до бъгове под някой браузъри. Но всичко се оправя.

Преведено от тук

Автоматизация с Actions в Photoshop. from dobromir ivanov on Vimeo.

Надявам се урока да ви бъде полезен.

Това е третият (последен) урок от поредицата за създаване на цялостен лейаут във photoshop. Урока включва създаването на логото и на останалите допълнителни графики които ще поставим във вече готовите рамки.
Въпреки, че в уроците обяснявам нормално, за да се справите със задачката е нужно да имате елементарни базови познания по photoshop.
Моля пишете в коментарите след уроците, ако имате въпроси, понеже към момента не съм инсталирал форум.

Скоро ще направя няколко урока за кодирането на сайта, което всъщност е по-сложната част.
И не забравяйте – за да разберете нещата е важно да се упражните поне веднъж.
Успех !

В случай, че ви мързи да си го направите сами – може да свалите целия .psd файл от тук:

Ето файла, които може да ползвате за основа в/у която да чертаете свойте графики в случай, че желаете да се упражните.
download

Това е вторият урок от поредицата за създаване на цялостен лейаут във photoshop. Урока включва създаването на рамките, които в последствие ще съдържат реалното съдържание на сайта.
Въпреки, че в уроците обястявам нормално, за да се справите със задачката е нужно да имате елементарни базови познания по photoshop.
Моля пишете в коментарите след уроците, ако имате въпроси, понеже към момента не съм инсталирал форум.

В този първи реален урок ще направим банера на сайта – (header-a), Урока включва създаването на фона за хедъра, сиянието и текста.
Въпреки, че в уроците обястявам нормално, за да се справите със задачката е нужно да имате елементарни базови познания по photoshop.
Моля пишете в коментарите след уроците, ако имате въпроси, понеже към момента не съм инсталирал форум.