Здравствуйте!
Скиньте пожалуйста ссылки, где пошагово описан процесс верстки страницы с PSD. Можно на английском.
www.corephp.com/...sd-to-htmlcss-conversion — это то, что я нашел, но может есть где то более современные и качественные ссылки.
Очень буду благодарен.
Кто помнит adobe Fireworks? Я резал макет на слайсы и эскпортировал в html — генерились вложенные таблицы с кортинками, прости меня Господи...
Тримай.
www.youtube.com/..._8q8p3XDhKp8c4yJzgbRl7jFN Верстає чувак з бутстрапом + свої різні речі використовує, але посилання на скачування його збірки різних фіч є. Включаючи Sass.
www.youtube.com/watch?v=nLYQ2MUG9aQ Тут верстка псд макету бутстрапом, без бутстрапа є сенс давати посилання? Єдиний мінус, у нього немає списків відтворення, тож розбитий приклад на частини доводиться в відео вишукувати.
Натягування звестаного макету на Wordpress www.youtube.com/...Dtl3eAmlB6Rks4OPLxgAoqz4i Попрошу утриматись холіварів адептів інших систем контенут.... Drupal vs Joomla vs Wordpress, чи vs PHP фреймворки.
Я не понимаю, зачем задавать подобные вопросы.
Мне кажется, такие темы четко характеризуют топикстартера как (потенциального) «специалиста».
Учитесь учиться и искать необходимую информацию. Тем более, что гугл даст вам гораздо более оперативную и полную информацию, чем на любом форуме.
Думаю, що коли людина задає питання на форумі, вона має певний кредит довіри до досвіду форумчан, котрий більший ніж до гугла. Адже гугл хоч і видає тонни інформації, але зазвичай сміттєвої. Адже кожен доморощений «спеціаліст» вчить як потрібно робити. Особисто я стикався з ситуацією, де в кількох десятках статей різних сайтів код був з помилками, автори один в одного передирали приклади один в одного, навіть не приділивши увагу своєї величності до перевірки того що вони ваяють на своєму мегакрутому порталі.
при чем тут кредиь доверия?
не понимаю зачем засорять форумы вопросами, ответы на которые уже не раз поднимались в интеретах и которые элементарно гуглятся?
Дуже просто, ви тільки вчитесь. Нагуглюєте статю на тему що вас цікавить, уважно повторюєте все за автором і бац! воно ніфіга не працює. Бо цей імбіцил сам не писав, а здер десь з інтернету в іншого ібіцила, котрий поступив так само. Все для сайту «контент заради контенту і банерів». Це абсолютно часта хвороба україського і російського простору інтернету.
А я не понимаю, зачем писать такие комментарии. Из всех ответчиков только вы кинули тут ложку дегтя... но это наверное связано с Вашим амплуа. Не хотел бы я, чтоб мне в начале карьеры попался такой ментор на фирме
БЫСТРЫЙ СТАРТ
(Если Ты продвинутый новичок):
1. Если есть возможность, то используй для работы MAC вместо PC. Он быстрее и надежнее. (Посмотри это видео: goo.gl/oGoN7M
Сам пользуюсь Macbook Pro Retina 15″ и очень доволен. На PC с Windows вряд ли перейду обратно;
2. Используй программку Alfred (для MAC: www.alfredapp.com ) и Launchy (для Windows: www.launchy.net/ для быстрого вызова других программ. Это уже реальная необходимость в постоянной работе за компьютером;
3. Начни с прочного фундамента.
Пройди эти уроки по азам HTML и CSS:
htmlacademy.ru/courses/4 ;
Далее пройди эти очень важные уроки:
— по HTML (блочная модель документа): htmlacademy.ru/courses/44
— по CSS (наследование и каскадирование): htmlacademy.ru/courses/66
Достаточно разобраться с азами HTML и CSS, затем понять блочную модель и разобраться с каскадированием и наследованием в CSS. С этим багажом уже можно смело двигаться дальше!
Пройди
(Промо-код на скидку 10%: 5481e4bdf)
4. Используй продвинутые редакторы кода. Сейчас это Sublime Text, Brackets и Atom
Скачать их можно здесь:
Sublime Text — www.sublimetext.com/3
Brackets — brackets.io
Atom — atom.io
5. Для ускорения написания HTML и CSS используй плагин для этих редакторов — Emmet (emmet.io) + еще с десяток плагинов (для Sublime Text):
— Package Control: goo.gl/rava0k
— SideBarEnhancements: goo.gl/feP6Zr
— AdvancedNewFile: goo.gl/bhgmcw
— Emmet: goo.gl/QTSldQ
— Bootstrap 3 snippets: goo.gl/kfnx5g
— AutoFileName: goo.gl/V2ZfpM
— Tag: goo.gl/NtoZcp
— ColorPicker: goo.gl/Z7Bz4H
— FakeImg.pl: goo.gl/T6l6Sb
— WebFont: goo.gl/WhLT8V
И еще посмотри мои видео:
— «Как устанавливать плагины для Sublime Text»: www.youtube.com/watch?v=cCJG-J50TTE ;
— «10 плагинов для Sublime Text 3»: www.youtube.com/watch?v=FWGKve1c0FY
6. Научись эффективно использовать графические редакторы, для вырезания графики из psd-макетов. Конечно, в основном это Photoshop. Для MAC есть отличная альтернатива в виде программы Pixelmator (намного дешевле в итоге, чем Photoshop).
Смелее применяй плагины и сервисы, чтобы сделать работу приятней.
Например:
— WebZap, для мгновенного прототипирования основных элементов web страницы: goo.gl/apt1YO
— Pixel Dropr, отличный плагин для кастомизации созданного прототипа :goo.gl/KVvrFB
— Doco, очень мощно повышает скорость работы при манипуляциях со слоями разных макетов. Теперь не нужно переключаться между окнами: goo.gl/FaUZe3
— Renamy, маленький, но суперудобный плагин, который переименует десятки слоев в один клик. Поставит префиксы, постфикс, нумерацию слоев и даже поддерживает регулярные выражения: goo.gl/8WCW5I
— Pixel2Vector, преобразует растровый слой в вектор: goo.gl/nt6kwx
— Zeick, преобразует вектор в svg: goo.gl/YBZZ8V
— SpecKing, покажет точное расстояние в пикселях от одного элемента до другого и размеры самого элемента. Идеальный инструмент для пользователей Photoshop до версии CC: goo.gl/QwNvXc
В фотошопе CC 2014 (15.x) эта функция есть по умолчанию;
— Griddify, часто нужный инструмент для автоматической генерации направляющих в один клик: goo.gl/xDZlFG
— CSS Hat, позволяет максимально точно получать css код из любых слоев. Работает реально точнее, чем встроенная такая же функция в самом Photoshop: goo.gl/1cgwyD
— Lorem Ipsum Generator, создает любое количество псевдолатинского текст без определенного значения, для заполнения текстовых блоков: goo.gl/3ulqPv
— Layrs Control, для легкого редактирования слоев PSD: goo.gl/4IBnml
— SpriteOwl, призван облег
інфа не моя, знайшла на сайті, мені це дуже помогло
ем... половина інфи шкідлива, половина просто не корисна, а про допомогу «маку» для веб деву — взагалі чистий бред, так само як запускалки(якщо автор з часів ХП віндовсом не користувався — при натиснені кнопки він ти так само можеш почати тайпати що хочеш запустити, і це вже
Я знаю звідки дівчинка взяла цей набір. Напевне з цього відео. www.youtube.com/...uZfZW99A&index=18&list=WL
Плагіни справді допомагають. Про МАС, згідний. Справа в звичці. OS нідочого.
Кратко:
1. Купи Mac
2. PROFIT!!!1
:)
Я о предыдущем совете :)
1. Если есть возможность, то используй для работы MAC вместо PC. Он быстрее и надежнее. (
В том и дело, что не будет :)
по крайней мере верстать пофиг на чем
Все вірно. Якщо ти достатньо заробляєш, що можеш купити собі мак, то до біса той фронтенд.
Тоесть фотошоп в цену мака мы не учитываем?
У фотошопа 30 дней триала, чего достаточно для того, что бы научиться верстать с макета.
Фотошоп многие пиратят. А последний лицензионный идёт по подписке, которая не очень дорогая, если человек зарабатывает фотошопом на жизнь.
CSS Hat
Полезная тулза, но
максимально точно получать css код из любых слоев
нет
на ютубе видео полным полно.
Vadym Shcherbyna
Василь Фарамець
Stefan Dobrovolsky
Василь Фарамець
Stefan Dobrovolsky
Denis Guchok
Yury Gavrilenko
idOne Арбузный
Iryna Kruchok
Iryna Kruchok
hs
Volodymyr Rudyi
Oleh
Oleksandr Maiboroda
Gennady Dogaev
Андрій Плотніков
24 коментарі
Додати коментар Підписатись на коментаріВідписатись від коментарів