https://pereverstal.by/tags/blagotvoritelnost/ E2 (v3254; Aegea) 111 https://pereverstal.by/all/pomozhem-lize/ https://pereverstal.by/all/pomozhem-lize/ <p>Постоянный читатель прислал мне вот этот макет с просьбой переверстать</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/ishodnik_1100_2.jpg" width="566" height="800" alt="" /> </div> <p>Надо сказать, что этот дизайн не так уж и плох.<br /> Несмотря на вырвиглазные цвета, ужасную типографику, растянутые логотипы,<br /> полное отсутствие разумной структуры, стилистика макета хорошо узнаваема<br /> и считываема — именно так оформляется большинство объявлений о пропаже человека<br /> или призыве помочь. Можно за секунду понять тематику плаката,<br /> и несмотря на весь ужас в оформлении, разобраться куда перечислять деньги.</p> <p>Но я все-таки попробую что-нибудь с ним сделать.</p> <p>Задача усложняется тем, что практически ничего<br /> нельзя выкинуть из макета, чтобы получить больше свободы для верстки —<br /> каждый источник получения пожертвований важен.<br /> Поэтому надо готовиться к тому, что верстать придется плотнячком.</p> <h2>Начнем. Наберу текст, найду фотку в гугле.</h2> <p>Адрес PayPal сделаю QR-кодом — такой набор символов<br /> никто набирать не станет.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Charity_process_vert_21.jpg" width="637" height="900" alt="" /> </div> <h2>Попробую собрать внятную конструкцию</h2> <div class="e2-text-picture"> <div class="fotorama" data-width="637" data-ratio="0.70777777777778"> <img src="https://pereverstal.by/pictures/Charity_process_vert_232.jpg" width="637" height="900" alt="" /> <img src="https://pereverstal.by/pictures/Charity_process_vert_222.jpg" width="637" height="900" alt="" /> </div> </div> <p>После первых попыток пришел к выводу, что удобнее будет макет перевернуть<br /> (листаем галерею).</p> <div class="e2-text-picture"> <div class="fotorama" data-width="2339" data-ratio="1.4141475211608"> <img src="https://pereverstal.by/pictures/Charity_process_.jpg" width="2339" height="1654" alt="" /> <img src="https://pereverstal.by/pictures/Charity_process_3.jpg" width="2339" height="1654" alt="" /> <img src="https://pereverstal.by/pictures/Charity_process_4.jpg" width="2339" height="1654" alt="" /> <img src="https://pereverstal.by/pictures/Charity_process_5.jpg" width="2339" height="1654" alt="" /> </div> </div> <p>Не нравится, что заголовок мелкий, надо его сделать хорошо заметным —<br /> обычно такие плакаты вешают на афишных тумбах.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Charity_process_7_2.jpg" width="2339" height="1654" alt="" /> </div> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Charity_process_8.jpg" width="2339" height="1654" alt="" /> </div> <p>Покрасим заголовок</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Charity_base_done_1.jpg" width="2339" height="1654" alt="" /> </div> <p>Примерим</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/in-situ+hor_zag_orange.jpg" width="1678" height="1258" alt="" /> </div> <p>Заголовок, несмотря на свою крупноту, плохо виден.</p> <h2>Надо попробовать немного по-другому</h2> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Charity_1.jpg" width="2339" height="1654" alt="" /> </div> <p>Заодно парочку других цветов</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Charity_3_2.jpg" width="2339" height="1654" alt="" /> </div> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Charity_4.jpg" width="2339" height="1654" alt="" /> </div> <p>Примерим еще раз</p> <div class="e2-text-picture"> <div class="fotorama" data-width="1678" data-ratio="1.3338632750397"> <img src="https://pereverstal.by/pictures/in-situ+hor_orange.jpg" width="1678" height="1258" alt="" /> <img src="https://pereverstal.by/pictures/in-situ_blue_hor.jpg" width="1678" height="1258" alt="" /> <img src="https://pereverstal.by/pictures/in-situ+hor_green.jpg" width="1678" height="1258" alt="" /> </div> </div> <p>Ок. Надо сказать, что вертикальный формат дружил бы лучше с соседними<br /> макетами. Конечно, выделяться нужно по-максимуму, но если наш<br /> горизонтальный формат закроет своими краями соседей это будет не честно.</p> <h2>Сделаю вертикальный формат.</h2> <p>Скопирую компоновку из горизонтального формата</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Charity_process_vert_11.jpg" width="637" height="900" alt="" /> </div> <p>Не нравится, надо попробовать по-другому</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Charity_base_done21.jpg" width="637" height="900" alt="" /> </div> <p>Хорошо, но заголовок с плашкой будет виден лучше.</p> <div class="e2-text-picture"> <img src="https://pereverstal.by/pictures/Charity_121.jpg" width="637" height="900" alt="" /> </div> <p>И парочку других цветов (листаем галерею)</p> <div class="e2-text-picture"> <div class="fotorama" data-width="637" data-ratio="0.70777777777778"> <img src="https://pereverstal.by/pictures/Charity_321.jpg" width="637" height="900" alt="" /> <img src="https://pereverstal.by/pictures/Charity_421.jpg" width="637" height="900" alt="" /> </div> </div> <p>Примерим</p> <div class="e2-text-picture"> <div class="fotorama" data-width="1678" data-ratio="1.3338632750397"> <img src="https://pereverstal.by/pictures/in-situ+vert_orange.jpg" width="1678" height="1258" alt="" /> <img src="https://pereverstal.by/pictures/in-situ+vert_blue.jpg" width="1678" height="1258" alt="" /> <img src="https://pereverstal.by/pictures/in-situ+vert_green.jpg" width="1678" height="1258" alt="" /> </div> </div> Sat, 23 May 2020 20:27:20 +0300