Как по-умному кодировать дизайн

Форум » Фотошоп » Как по-умному кодировать дизайн » Ответить

Как по-умному кодировать дизайн

Аллати: Создала уже кучу шаблонов, но сидеть в настройках и вставлять ссылки не хочется... тем бо я вообще не разбираюсь в этих Бордовских хтмлах... Мне сказали, что это делают в "Сокранить для Веб..." но как? Объясните начинающему дизайнеру)))

Ответов - 104, стр: 1 2 3 4 5 6 All

Вик: Аллати а ты фон сделала для шаблонов,когда сделаешь и кодируй в настройках(редактировать) и всё

Аллати: Вик кто такой фон?

Аллати: так, что-то вообще у меня финя выходит! в радикале картинка сжимается ина форуме маленькая! как приручтить хтмл? выложите сайт что ли, или схемку - что что значит...

Sin: Ну давай возьмём самый лёгкий шаблон. 1) Для того чтобы картинка не сжиалась, закачивай по размеру через специальные сервисы. ( здесь размер шапки и низа 950 - отмечяю синим ) 2) То что нужно заменить я расскажу далее. 3) Самый первый код - http://s005.radikal.ru/i211/1003/8a/188e7540afa9.jpg ( отмечу красным ) - это задний фон. Его заменяешь своей картинкой. Неважно какой, главное чтобы нравилось тебе. 4) Второй код - http://s52.radikal.ru/i135/1003/ee/1abde59f3d44.jpg ( отмечу его зелёным ). Это шапка. Она играет важную роль в дизайне. Замени её своей картинкой, подходящей по размеру ( размер в этом шаблоне 950 пикселей ). 5) Третий код - http://i055.radikal.ru/1003/9d/fa9f8fa0b616.jpg ( отмечу его розовым ). Это код переднего фона. Его нужно подогнать под шапку, сделать одного цвета, если есть возможность сделать одинаковую рамку. ( но пока для начала сделай однотонную шапку и однотонный передний фон ). 6) Четвёртый код - http://s60.radikal.ru/i167/1003/b7/69e37436346c.jpg ( отмечу его тёмно голубым ). Это низ. Он так же должен сочетаться с шапкой и передним фоном дизайна. Размер так же соответствует шапке ( 950 пикселей ). Ну попробуй сделать что нить и показать нам) ( я объяснила самый лёгкий шаблон, самым лёгким языком и способом... Я ещё не рассказала как уменьшать, увеличивать таблицу... Но пока остановись на первых 6 пунктах и попробуй сделать по ним и показать, потом ещё что нить расскажу ) HTML-верх: <HTML> <HEAD> <TITLE>Ролевая Наруто</TITLE> <STYLE type=text/css> body{background-image:url(http://s005.radikal.ru/i211/1003/8a/188e7540afa9.jpg);} BODY{margin:10px;margin-top:15px;margin-bottom:10px;} td{font-family:Verdana;} BODY { scrollbar-face-color: #000000; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #000000; } .font1{font-size:12px;COLOR:#FFFFFF;} .font2{font-size:11px;font-weight:400;COLOR:#FFFFFF;} .font3{font-size:11px;font-weight:700;COLOR:#FFFFFF;} .font4{font-size:15px;COLOR:#FFFFFF;} .font5{font-size:11px;font-weight:700;COLor:#FFFFFF;} .font6{font-size:11px;font-weight:700;COLOR:#FFFFFF;} a:link{color:#FFFFFF;text-decoration:none;} a:visited{color:#FFFFFF;text-decoration:none;} a:hover{color:#ffffff;text-decoration:underline;} tr.font3 {HEIGHT: 28px;BACKGROUND-IMAGE: url(http://jpe.ru/gif/skin/fon31.gif);} tr.font5 {HEIGHT: 30px;BACKGROUND-IMAGE: url(http://jpe.ru/gif/skin/fon41.gif);FONT-WEIGHT:700;} tr.font6 {HEIGHT: 28px;BACKGROUND-IMAGE: url(http://jpe.ru/gif/skin/fon31.gif);} input,select,textarea{font-size:11px;font-family:Verdana;} textarea{width:100%;height:120;} input.sender{COLOR:#FFFFFF; background-color:#000000;font-weight:700;border:1 outset rgb(0,0,0);border-color:#FFFFFF;} </font> </STYLE> </font> </HEAD> <BODY bgColor=#FFFFFF body text=#FFFFFF> <table width="950" table align="center" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="333" background="http://s52.radikal.ru/i135/1003/ee/1abde59f3d44.jpg"><table width="350" align="right" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <div style="position:relative;left:80px;top:-30px;width:190px;height:80px;overflow:auto;"> Добро пожаловать. Это ролевая по Наруто. </div> </td> </tr> </table></td> </tr> </table> <TABLE align="center" cellSpacing=0 cellPadding=16 width=950 border=0> <TR ><TD valign=top background="http://i055.radikal.ru/1003/9d/fa9f8fa0b616.jpg" > </font> HTML-низ: </TD></TR></TABLE> <p align="center" class="font2">Дизайн кнопок © <a href="http://k-dezign.ru" target="_blank">Веб-студия "К-Дизайн"</a> </p> </TD></TR></TABLE> </BODY></HTML> </TD><td width="40"></td></TR> </TABLE> <center><img src="http://s60.radikal.ru/i167/1003/b7/69e37436346c.jpg"></center> </BODY></HTML> Вот что вышло у меня - http://narik2.forum24.ru/

Psi: Аллати пишет: в радикале картинка сжимается ина форуме маленькая! Там есть такая функция "Уменьшить до 640 пикселей" . Надо что бы там не было галочки)))

Агат: Надо попробовать) Фенькс) И вопрос : А как делать на шапке и низе закруглённые края?

Sin: Агат - ну если в Пеинте, то просто воспользуйся скругленным пряоугольником. Зате сотри ненужные линии и закрась "кусочки" которые останутся за полями, под цвет заднего фона. ( вот что вышло у меня в Пеинте - http://dizis43.forum24.ru/ )

Агат: Sin Эх, у меня Пейнт вирус удалил. Вместе с играми и Експлором..

Sin: Агат - а чем тогда пользуешься? Может Ф.Ш?

Агат: Sin В каком смысле? Если про интернет, то Мозилой.

Sin: Агат - у тебя фотошоп вообще есть? Был? Если нет... Может графический редактор?

Агат: Sin Нет, у меня есть фотошоп. Но сейчас он пока не отвечает.

Sin: Агат - вот есть онлайн фотошоп - http://rexmen.ru/paint.html а гдет здесь - http://soft.softodrom.ru/ap/Paint-NET-p6096 ( можно скачать Paint-NET ) ну или здесь - http://paint.gvindor.com/

Аллати: Sin спасибушки, буду тренироваться)

Аллати: хехрмх.... а как изменить фоновую штуку, ну которая под таблицаами, на ней логотип борды ёщё... Она у тебя чёрная...

Аллати: И как уменьшить размер этой штуки...?

Persi: http://erikas.forum24.ru/ ,хех что у мя получилось=)

Persi: мну не получилось=(

Дина: http://hikh.forum24.ru вот что получилось у меня..

Persi: Дина а как ты расстянула картинки=)? А так супер!

Вик: А я потом дам ссыль=)

Дина: Persi пишет: а как ты расстянула картинки=)? В коком смысле?

Дина: Вик пишет: А я потом дам ссыль=) Ждем

Вик: Дина

Вик: кто знает как делать новости?

Psi: Вик Я знаю)) Вот код: <table width="950" table align="center" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="370" background="http://s60.radikal.ru/i168/0905/ef/d8db62f935c5.jpg "><table width="350" align="right" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <div style="position:relative;left:-30px;top:0px;width:200px;height:150px;overflow:auto;"> <font color=#ECFEB5> News News News News News News News News News News News News News News News News News News News News News News News News News News News News News News </font> </div> </td> </tr> </table></td> </tr> </table> То что зелёным надо заменить на своё))) Поэксперементируй - разберёшься, всё просто)))

Аллати: Psi так что с той штукой?

Вик: Psi спс)))))))

Psi: Аллати Можешь объяснить по-конкретней?))) Честно говорся, я нифига не поняла из того что ты написала... З.Ы. Может у тебя скайп есть? Или аська? Просто удобнее будет... В общем, пиши в личку)

Psi: Вик Не за что)))

Вик: Psi а как на шапке рисовать новости?

Psi: Вик Просто берёшь кисточку в зубки и рисуешь))) Ну, можно рамочку какую-нить вставить... У каждого свои вкусы, нравы и идеи по этому поводу, я не смею влиять на них...

Вик: Psi спс

Psi: Вик Подожди, я ещё не до конца вынесла тебе мозг... *парит кучу всякой фигни, про то как грамотно закрыть фотошоп*

Аллати: Psi ну вот эта чёрная хрень вокруг(чорт диз какойто гламурный выходитXD) http://probnik0.forum24.ru/?33

Psi: Аллати Гы)) Ты опять с размерами картинок намудрила...

Аллати: Psi оррр... Так надо!!!отговорка, отговорка... Так чем ударить эту чёрную хрень?

Psi: Это что-то с цветами...

Аллати: Psi а я то думала, это яблоко не с той стороны от клавиатуры лежит! Можно вразумительней?)

Psi: Ну... Вот эти: Цвет шапки таблиц: Светлый цвет в таблицах: Темный цвет в таблицах: Третий цвет в таблицах: Цвет формы для сообщений: Цвет разделительных линий в таблицах: Цвет текста оффтопик: Цвет рамки вокруг таблиц: Цвет линии-разделителя HR:

Аллати: Psi я там всё, о хосподи,РОЗОВЫМ И ЧОКОЛАДНЫМ сделала, и фиг чё вышло..

Psi: Аллати Значит я опять не в теме...

Аллати: Psi мож Смин в теме...

Persi: http://xxxxxxxx1.forum24.ru/ у мя что-то получилось!

Sin: Persi - нужно размер 950 пикселей. Качай через радикал. Там ещё написано 640, а ты поставь 950. Аллати - логотип борды нужно удалить HTML логотипа: ( там надпись, полностью удали её ).

Persi: Sin а плохой это дизайн

Sin: Persi - ну неплохо, только вот цвета глаза режут X_x Ещу я бы оставила просто фон и не делала цвета. Или вообще просто чёрный передний фон. ( ну чтоб тут пусто было: Цвет шапки таблиц: Светлый цвет в таблицах: Темный цвет в таблицах: Третий цвет в таблицах: Цвет формы для сообщений: Цвет разделительных линий в таблицах: Цвет текста оффтопик: ну тут надо что нить написать ) Цвет рамки вокруг таблиц: Цвет линии-разделителя HR: )

Persi: Sin а тебе зелёный не нрвиться? воть...мой шедеврик- http://xxxxxxxx1.forum24.ru/

Sin: Persi - ну вообще конечно нужно подбирать правильные тона. Для твоего дизайна я бы взяла чёрную шапку, чёрный передний фон и что-то тёмное на заднем фоне. Так бы получилось более прикольно. Все эти линии по мне лишне и вышедшие из "моды" дизайнов.

Дина: Sin А какие у меня ошибки?

Sin: Дина - ну я бы убрала логотип борды и цвета ( ну тоже что у Перси ) Шапка слишком расплывчатая, низ не очень понятен, особенно ненужная надпись. У тебя с шапкой получается большой пропуск. Может зелень и сочетается, но всё же тебе надо определиться с тематикой дизайна.

Дина: Sin Спс,исправлю покажу)

Sin: Дина - оки) Жду) Ребят, если вам сложно по такому шаблону, могу другой дать) ( или напротив дать шаблон посложнее )

Дина: http://hikh.forum24.ru воть У меня вопросик как зделать что бы строка,ну которая обьявление что бы та страка не вылазила с рамки? И как обычно исправляйте меня)

Chiro: Дина По моему, новости невозможны в овальной обводке. Надо как - то хитрить и загибать строку. А еще картинка в шапке плоская.

Sin: Дина - ну я смотрю ты решила шаблон посложнее взять. Ну первое - там где правила и т.д, нужно поменять цветовую гамму и расширить. Так же нужно либо сделать однородный фон ( как задний, так и передний, иначе не сочетается с шапкой ).

Аллати: Sin глупый вопрос - как произвольные фигуры поворачивать?

Sin: Аллати - где именно? ( если в Ф.Ш то я непомню... если в Пеинте, то нажимаешь на картинку там будет отразить/повернуть ).

Аллати: Sin ну у перси лапки нарисованы - это пр. фигуры! как их разворачивать? Кста вот я переделала. Тольтка теперь надо сузить табло под ширину картинки(шапки) Как? http://probnik0.forum24.ru/

Sin: Аллати - ну смотря чего ты хочешь... Если ты хочешь широкий дизайн... ( лучше взять другой шаблон ). Я невижу у тебя передний фон, на котором будут располагаться разделы. ( шапка мне нравится и задний фон подкстать, низ тоже ничего, но всё же пердний фон нужно изменить, тогда будет просто супер )

Аллати: Sin какой передний фон?

Аллати: и я хочу изменить ширину таблици, чтоб она уже была...

Sin: Аллати - передний фон это тот фон, который должен сливаться с шапкой дизайна. Иначе получаются только линии. ( блин... как бы это объяснить то... )

Аллати: Sin а, поняла. Я сама незнаю. До этого он был, но с чёрной рамкой, теперь его нет, и тоже бред. вот.

Sin: Аллати - ну ты подгониразмер под шапку и низ,тогда всё подойдёт.

Аллати: Sin в том и дело, что я\ не знаю КАК это сделать!

Sin: Аллати - так-с... в радикале там где 640 меняй на свой размер. ( в моём шаблоне указано 950, незнаю как в твоём, скинь мне свой код, я укажу что и как, так же скинь картинку переднего фона ).

Аллати: <HTML> <HEAD> <TITLE>Дух свободы...</TITLE> <STYLE type=text/css> body{background-image:url(http://s001.radikal.ru/i195/1003/b4/18e312fdce9b.jpg);} BODY{margin:10px;margin-top:15px;margin-bottom:10px;} td{font-family:Verdana;} BODY { scrollbar-face-color: #632c30; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #000000; } .font1{font-size:12px;COLOR:#FFFFFF;} .font2{font-size:11px;font-weight:400;COLOR:#FFFFFF;} .font3{font-size:11px;font-weight:700;COLOR:#FFFFFF;} .font4{font-size:15px;COLOR:#FFFFFF;} .font5{font-size:11px;font-weight:700;COLor:#FFFFFF;} .font6{font-size:11px;font-weight:700;COLOR:#FFFFFF;} a:link{color:#FFFFFF;text-decoration:none;} a:visited{color:#FFFFFF;text-decoration:none;} a:hover{color:#ffffff;text-decoration:underline;} tr.font3 {HEIGHT: 28px;BACKGROUND-IMAGE: url(http://jpe.ru/gif/skin/fon31.gif);} tr.font5 {HEIGHT: 30px;BACKGROUND-IMAGE: url(http://jpe.ru/gif/skin/fon41.gif);FONT-WEIGHT:700;} tr.font6 {HEIGHT: 28px;BACKGROUND-IMAGE: url(http://jpe.ru/gif/skin/fon31.gif);} input,select,textarea{font-size:11px;font-family:Verdana;} textarea{width:100%;height:120;} input.sender{COLOR:#FFFFFF; background-color:#000000;font-weight:700;border:1 outset rgb(0,0,0);border-color:#FFFFFF;} </font> </STYLE> </font> </HEAD> <BODY bgColor=#FFFFFF body text=#FFFFFF> <table width="800" table align="center" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="500" background="http://i077.radikal.ru/1003/d6/71aa4d03fcee.jpg"><table width="350" align="right" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <div style="position:relative;left:80px;top:-120px;width:200px;height:80px;overflow:auto;"> Ррррррррр </div> </td> </tr> </table></td> </tr> </table>

Sin: Аллати - скинь картинку переднего фона.

Аллати: Sin чё? шапку чёли? или фоновые штуковины?

Sin: Аллати - давай и шапку и фон... ( я думаю ты размеры неправильно расчитала... )

Sin: Аллати - вот чего у тебя в коде нет - <TABLE align="center" cellSpacing=0 cellPadding=40 width=900 border=0> <TR ><TD valign=top background="http://i050.radikal.ru/1003/af/0cb1c0e44a0d.jpg" > </font> ( это код переднего фона )

Sin: Аллати - и ещё... если делать по моему шаблону, то не получается из-за того, что он слишком широкий и неочень длинный. Попробуй скопировать одну из шапок моего дизайна ( там дизайны с Наруто или чёрный дизайн ). Потом подгони свою шапку под размер одной из моих и скинь мне.

Дина: Вот смотри однотоно http://hikh.forum24.ru

Аллати: Sin о http://soundthefree.forum24.ru/

Sin: Дина - делаешь успехи) Вот только картинки в шапке и внизу всё же поменяй, так как они либо растягиваются ( при этом становясь мутными ) либо сплющиваются. И нужно картинку тогда не полностью ставить, а где-то урезать, подправлять. Попробуй тогда вот с такими ( они просто не должны мутнеть при сильном растяжении ) http://s41.radikal.ru/i092/1003/59/84a88a4836d2.jpg http://s53.radikal.ru/i139/1003/c2/8996ce2ddbcb.jpg http://s58.radikal.ru/i161/1003/e5/c125d83b797c.jpg Ну или свои картинки. Попробуй ещё урезать, обрезать. Главно чтобы картинки сильно не растягивались. Особенно сильно растягивается нижняя, она не должна быть огромной, иначе всё впечатление о дизайне портится. А шапку не стягивай, но сверяйся с размерами. Попробуй сделать плавный переход от шапки к переднему фону.

Sin: Аллати - тоже делаешь успехи. Молодчина))) Вот только посмотри на низ шапки, там сбоку проводится белая полоса, она всё портит. ( ну и как Дина убри все эти цвета, оставь только цвет оффтопа и всё, остальные пусть пустуют ). Если сможешь, то постарайся, чтобы передний фон, шапка и низ были однотонными и сливались как бы воедино, чтобы не было видно разрезов и резких переходов. Тогда всё будет супер)

Sin: Так ещё дам совет. Обязательно учитывайте цвета. Многие использованые цвета режут глаза. ( вот почему я люблю серые тона, бленые. Ещё поощряю белый и иногда чёрный, но это уже кто как, у многих людей из-за чёрных тонов тоже глаза режет, но не так как например ядовито-зелёный ). Всегда учитывайте это.

Аллати: Sin хохохо, вот вам всем назло ядовито-зелёный от пьяного наргла! http://probnik001.forum24.ru/

Sin: Аллати - это скорее болотный цвет) ( зато задний фон и шапка ничего так, нижняя картинка не подходит по размеру ). Кстати очень даже ничего) ( вот только болотный цвет я не люблю X_x )

Аллати: Sin она подходит, это злая основа не подходит... просто низ шириной с шапку, видимо надо его шире делать..

Sin: Аллати - сделай тогда шире. Но у тебя всё равно плавный переход отсутствует. ( но скоро всё наладится, ты научишься )

Дина: http://hikh.forum24.ru вот с твоими картинками..

Sin: Дина - ну неплохо. Но ты просто подгоняешь картинки под размер, а нужно их урезать. Вот например смотри... Просто картинка - http://s49.radikal.ru/i123/1003/59/01da406afc0e.jpg Картинка-шапка - http://s39.radikal.ru/i083/1003/b0/e572862070bc.jpg ( не обращай внимание на серую линию, это рамка дизайна )

Вик: Persi а чё классный диз=) терпеть не могу чёрный,а ожет вы Син гот?

Дина: Sin пишет: урезать. Как ето делаеться?

Аллати: http://pumkasdizs.forum24.ru/?33 прошу вниманию диз для собственного диз-форума)

Дина: Аллати Красивенький дизик!!

Аллати: Дина пасибмс)

Дина: Аллати Только к твоим дизам не мишало бы кнопочки сделать..что бы они были полные..

Аллати: Дина да\, но это дооолго...

Psi: Аллати Не правда, кнопки горааааааааааздо быстрее диза делаются)

Sin: Вик - я бывшая готка XD ( но готка совсем необычная, гот светлый XD ) Аллати - дизайн красивый) ( но блин... цвет глаза режет... хотя кому как ). Урок по кнопкам делала Elly, так что если пригодится поищи его в этом кажись разделе.

Дина: Sin Так как нужно урезать?

Аллати: Sin а как открыть узоры в фш 10(русском)? и ещё, почему у меня разные виды только английских шрифтов, а русский обычный?

Sin: Дина - смотря где ты работаешь. В Ф.Ш или Пеинте. Аллати - ты их скачиваешь или они у тебя уже есть? ( просто у меня 9 Ф.Ш и то глюкнутый X_x )

Дина: Sin Ф.Ш 3 и 2

Аллати: может не в том месте выложила, но вот, посмотрите, первая анимация...(реклама) http://s59.radikal.ru/i164/1003/ba/7d8ef6e6ecdd.gif

Дина: Аллати Ты не правильно сделала анимацию,т.к она у тебя идёт 1 раз и больше нету анимации..

Аллати: правда, а как это исправить?

Дина: Вы уже исправили у тебя на форуме.

Дина: Та как нужно урезать шапку?

Sin: Дина - я во втором и третьем вообще незнаю как и что... у меня был 9 Ф.Ш а остальных и вовсе не было...

Дина: Sin Ну а примерно? там всё почти одинаково..

полная версия страницы