- Joined
- Nov 15, 2009
- Messages
- 2,234
- Reaction score
- 819
1. New Document, Create Background Нов документ, Създаване на фон
Alright, let's start by creating a new document in Photoshop , in which we can design our website template. Добре, нека да започнем със създаване на нов документ в Photoshop, в които можем да проектираме нашия шаблон на сайт. I've used a document sized 960 x 1100 pixels, since most people browsing a clan website won't really be using the 800 x 600 resolution. Ползвал съм един документ с размери 960 x 1100 пиксела, тъй като повечето хора търсят клан сайт не наистина ще се използват 800 х 600 резолюция. After creating your document, fill the background with a nice mid-grey color, (in this case I used #6c6c6c ). След създаването на вашия документ, запълване на фон с хубав средата на сив цвят, (в този случай аз използвам # 6c6c6c).
After filling your background with a solid color, you can give it a bit of texture by applying a pattern of some sort, or simply applying Filter > Noise > Add Noise with an amount of about 2.0 . След като попълните фон с плътен цвят, можете да му се даде малко текстура чрез прилагане на модела на някакъв вид, или просто прилагане на Filter> Noise> Add Noise със сума от около 2.0.
View a small article I wrote about pattern resources here . Вижте по-малка статия писах за модела ресурси тук .
2. 2. Design the Header/Banner Дизайн на горен / банер
Alright, now we need to make a header. Добре, сега ние трябва да се направи заглавието. Start by finding a screenshot or some renders from the game your clan plays, or if you're just designing this for the sake of … designing, then how about you just use this wallpaper of Command and Conquer 3 Tiberium Wars . Започнете с намирането на екрана или някой прави от играта си клан играе, или ако сте просто проектирането това в името на ... проектиране, след това какво ще кажеш просто използвайте този тапет на управление и Conquer 3 Tiberium Wars . Copy the wallpaper onto your canvas and crop it to a suitable banner size. Копирайте тапет на вашия платно и култура да се избере подходящ размер банер. I also made the corners for my banner rounded. Аз също направи ъгли за моя банер заоблени.
In the above image you may notice that it looks like I've touched the image up a little bit, well, I did. В изображението по-горе можете да забележите, че тя изглежда, че съм се допря до изображението се малко, добре, аз го направих. You can too by using the Burn Tool to darken up a few areas, then the Blur Tool to blur some of the background action. Можете също с помощта на Burn Tool да потъмнее до няколко области, а след това на Blur инструмента за размазване на фона на някои действия.
I finished up the banner by adding in some grunge brushing to give nice detail. Завърших се на банера, като добавите в някои гръндж четка да даде хубав детайл. You can download the grunge brushes that I used from Misprinted Type . Можете да изтеглите гръндж четки, че аз бях от печатна грешка Тип . When adding in your grunge brushing, use very dark brown colors that you can sample from the wallpaper you've used for the banner. При добавяне в гръндж четка, използвайте много тъмно кафяви цветове, които можете да опитате от тапета, които сте използвали за знаме.
(click for larger) (Кликнете за по-големи)
Let's finish up with the header by adding in your clan name/description/slogan/whatever. Нека да завърша с горния, като добавите в своя клан име / описание / слоган / нещо такова. Start by getting out the Horizontal Type Tool (the regular text tool, of course) then writing out your clan name in a size about 30 pt , then write out what your clan is, or your description underneath. Започнете с излизане на Horizontal Type Tool (редовните инструмент текст, разбира се), след това оформяне на своя клан име в размер на около 30 пункта, след това да напишете какви са вашите клан е или описанието отдолу. This is what I managed to get using the font Myriad Pro : Това е, което аз успях да се използва шрифта Myriad Pro:
Need free fonts? Нуждаете се от безплатни шрифтове? Try UrbanFonts.com . Опитайте UrbanFonts.com . Looking good so far, but the text isn't very easily readable. Да изглеждате добре досега, но текстът не е много лесно за четене. You can fix this problem by doing a little bit of soft brushing on a layer underneath the text layer. Можете да решите този проблем, като направите малка мека четка върху слой под слоя с текста. I used a couple of dark browns, with varying opacities. Използвах няколко тъмно кафяви, с различна помътняване.
Alright, we're pretty much done for the header, what do you think? Добре, ние сме доста много работа за горния, какво мислите? Feel free to add in some extras if you can think of any! Чувствайте се свободни да добавите в някои екстри, ако можеш да се сетиш за всички!
3. 3. Navigation Bar & Buttons Навигационната лента и бутони
Start by making a new layer. Започнете като направите нов слой. Now find and get out the Rounded Rectangle Tool , it's with the Custom Shape Tool somewhere. Сега намери и да излезе на Rounded Rectangle Tool, това е с Custom Shape Tool някъде.
Set up the settings for this tool as shown below: Създаване на настройките за този инструмент, както е показано по-долу:
Now, in your new layer, draw a rounded rectangle onto your canvas, this will be the main navigation bar. Сега, в новия си слой, начертайте правоъгълник със заоблени краища на вашия платно, това ще бъде основната лента за навигация. If you need to you can use the Rounded Rectangle Tool to clean up the bar a little bit, such as if you need to make it wider or thinner. Ако трябва да можете да използвате Rounded Rectangle Tool за почистване на лентата малко, като, ако трябва да правят по-широк и по-малък.
Now, you need to lock the transparent pixels for your navigation bar – you can do this in the layer's palette, don't worry, there's a screenshot below Сега, вие трябва да заключите прозрачни пиксели за навигация бар - можете да го направите в слоя палитра на, не се притеснявай, има снимката по-долу
After locking the transparent pixels, get out the gradient tool and set it to a very dark gradient (colors used: #131212 & #3c3c42 ), after getting your gradient ready, you can drag the gradient inside of your navigation bar and it will only fill the pixels. След заключване на прозрачни пиксели, излез на Gradient Tool и го нагласете на много тъмен градиент (цвят: # 131212 & # 3c3c42), след получаване на вашия наклон готови, можете да плъзнете наклон вътрешната страна на лентата за навигация и това ще е само запълване на пиксела. You can unlock your layer now. Можете да отключите слоя сега.
After all of this, it's time to apply some layer styles to the navigation bar. След всичко това, че е време да се прилагат някои слой стилове на лентата за навигация. I used the following: Аз бях на следното:
Your navigation bar should now look pretty much like this: Вашата лента за навигация трябва да изглежда почти като този:
Looking good, but could do with a few nice touchups. Да изглеждате добре, но може да направи с няколко приятни touchups. Start by creating a new layer, then selecting your navigation bar pixels (hold ctrl and click the layer's thumbnail) after selecting the navigation bar, contract the selection by one pixel. Започнете със създаване на нов слой, след това изберете лентата с пиксела навигация (Задръжте Ctrl и кликнете на слоя на картинка), след като изберете лентата за навигация, договор за подбор с по един пиксел. After doing this, draw a white to transparent gradient inside of the selection. След като направите това, начертайте бял към прозрачен градиент вътрешността на избор.
Change the layer mode for this layer to either Overlay or Soft Light , and you might need to lower the opacity, depending on how strong your gradient was. Промяна на слой режим на този слой на Overlay или Soft Light или, и може да се наложи да намали коефициента на непрозрачност, в зависимост от вашето силно Градиентът бе.
Again, select your main navigation bar, but this time you don't need to contract the selection. Отново изберете основния си лента за навигация, но този път не е нужно да се свърже с избора. In a new layer, draw white to transparent gradient from the top to the bottom of your selection. В нов слой, да бяло към прозрачно градиент от върха до дъното на своя избор. Now, cut your gradient in half (my navigation bar was 46 pixels in height, so I cut the bottom 23 pixels off) Сега, намалете наклон на половина (моята навигация бар е 46 пиксела на височина, така че намаляване на долната 23 пиксела разстояние)
Again with the layer modes/opacities! Отново със слой режими / помътняване! I changed the layer mode for this layer to Soft Light and lowered the opacity to 20-40% . Промених слой режим на този слой на Soft Light и намали непрозрачността на 20-40%. Alright, the navigation bar is complete, now it's time for some buttons. Добре, лентата за навигация е пълна, сега е време за някои бутони.
Get the Rounded Rectangle Tool out again and make a smaller, button-sized shape (be sure you're on a new layer!) Вземете Rounded Rectangle Tool отново и да направи по-малки, големи бутони форма (уверете се, че на нов слой!)
Looking pretty good so far, time for some layer styles…again! Търсите доста добър досега, време за някои слой стилове ... отново! Apply the following layer styles to your new button layer: Приложете следните стилове слой на вашия нов бутон слой:
And now your button should look pretty much like this one: И сега си бутон трябва да изглежда почти като този:
Pretty nice, eh? Доста добре, нали? You can finish this step off by simply adding text to the button, duplicating both layers and moving them overlay, etc. Можете да завършите тази стъпка, на разстояние само чрез добавяне на текст към бутона, размножителни двата слоя и се движат им слой и т.н.
The font I've used in the above image is a free font called “PF Ronda Seven”, and you can download it for free from DaFont . Шрифтът Ползвал съм в изображението по-горе е безплатен шрифт, наречен "PF Ронда Седем", и можете да го изтеглите безплатно от DaFont . I also applied this Outer Glow to each of the text layers. Аз също прилага този Outer Glow на всеки от текста слоеве.
View the complete design so far . Преглед на цялостния дизайн до момента .
4. 4. Categories/Sidebar Section Категории / лента раздел
Before we do the categories/sidebar section, add in 'Home > Recent News' underneath the navigation bar, using a font such as Tahoma or Arial , and a really small size ( 11 pt ), this is what I came up with: Преди да направите категории / лента раздел, добавете в "Начало Новини> Последни" под лентата за навигация, като се използва шрифт като Tahoma или Arial, а много малки размери (11 PT), това е, което ми хрумна:
Alright, now it's time to make the categories section. Добре, сега е време да се направят категории раздел. For this you can either just remake the navigation bar, but this time make it shorter in width (200 pixels) or you can duplicate the original navigation bar layers and just cut them down. За това можете или просто римейк на лента за навигация, но този път го скъсяват с ширина (200 пиксела) или да дублира първоначалния слоеве навигационна лента и просто да ги изсече. It would probably be best if you just created another bar using the Rounded Rectangle Tool , then copied all of the layer styles and effects over. Това вероятно ще бъде най-добре, ако току-що създадената друг бар помощта на Rounded Rectangle Tool, след това се копират всички слой стилове и ефекти върху.
You want to come up with something like this: Искаш ли да измисли нещо като това:
After making the bar, you want to make a container kind of area for the links and stuff, so duplicate your main bar layer, move it underneath the layer then fill it with black. След като на лента, която искате да направите контейнер на площи за връзките и неща, така че два екземпляра вашия основен слой бар, тя се премести под слоя след това я запълнете с черно. Move your duplicate layer down about 160 pixels or so, then stretch it upwards, as shown in the below image. Преместване на дубликат слой надолу около 160 пиксела, или така, след това опъвам нагоре, както е показано на следващата снимка.
Hopefully the above image explained to you what you need to do to make our categories container area. Надяваме се на по-горе снимка да ви обясни какво трябва да направя, за да направим нашите категории област контейнер. If not, I'm sorry I couldn't explain it any better, but if you have any questions please feel free to leave a comment! Ако не, съжалявам, не мога да го обясня по-добре, но ако имате някакви въпроси, моля не се колебайте да оставите коментар!
After making your container area, lower the opacity for the layer to about 20% . След като направите контейнер площ, по-ниски непрозрачността на слоя на около 20%.
Now it's time to populate your categories container with … well, categories. Сега е време да попълните своите категории контейнер с ... добре, категории. I simply copied/pasted the categories from my website here, but you might want to do something else with this sidebar section. Аз просто копиран / поставили категории от моя сайт тук, но може да искате да направите нещо друго с тази лента раздел.
What you'll want to do now is duplicate all of these layers, move them down and simply change the text layers. Това, което вие ще искате да направите сега е дубликат на всички тези слоеве, да ги придвижи надолу и просто да промените текста слоеве. Some good examples are: Sponsors; Recent Matches; Member List. Някои добри примери за това са: Спонсори; последните мачове, като държавите-списък.
View the complete design so far . Преглед на цялостния дизайн до момента .
5. 5. Content/News Updates Area Съдържание / Новини актуализации пространство
For the news/content area, you could simply copy the navigation bar or sidebar section over and change a few things around (stretch to fit), which you can do if you want, but I think the updates area needs a little bit more distinction from the rest of the template. За новини / съдържание на площ, може просто да копирате лентата за навигация или раздел лента отново и да промените някои неща наоколо (участък да се поберат), което можете да направите, ако искате, но аз мисля, че актуализации област трябва малко повече разграничение от останалата част на шаблона.
I did end up duplicating the sidebar section and moving it over, I then stretched it to the correct size and changed a few layer styles to make it look a little bit different. Направих в крайна сметка да дублира лента точка и се движат повече, аз след това го удължи до правилния размер и да се промени няколко стилове слой, за да изглежда малко по-различно.
You want to come up with something like this: Искаш ли да измисли нещо като това:
(click for fullsize) (Кликнете за пълен размер)
The font I've used in the above image is Arial , size 18 pt . Шрифтът Ползвал съм в изображението по-горе е Arial, размер 18 т. You might want to use something a bit bigger than this, maybe even a different font (try Georgia) Може би искате да използвате нещо малко по-големи от това, може би дори и с различен шрифт (опитайте Грузия)
Fill out your updates area with some dummy text. Попълнете вашите актуализации област с някои сляпо текст. Go to www.lipsum.com for the official 'lorem ipsum' dummy text. Към www.lipsum.com за сляпо текст "Lorem Ipsum" на длъжностно лице.
I just thought of this actually, you could also add a little bit of grunge to each of your heading bars, it would be a nice touch. Аз просто мислех, че на този действително, можете да добавите и малко гръндж на всяка Ваша позиция барове, че би било хубаво докосване.
6. 6. Finishing the Design Покритие на проект
Well, to finish up this design, I think you'll need to make a footer area, and just generally touch up the rest of the template, add in some extra features if you can think of anything, but you've pretty much done with the general/basic design. Е, до края на този дизайн, аз мисля, че ще трябва да се направи област долен, и просто обикновено докосване до останалата част на шаблон, се добавят в някои допълнителни функции, ако можеш да мислиш за нещо, но вие сте доста много работа с общ / основни дизайн.
Maybe add some Google Ads into your design? Може би някои добавите реклами от Google в своя дизайн?
Probably not the best practise for a clan website template. Може би не най-добрата практика за шаблон клан уебсайт.
Извинявам се за лошия превод.
Alright, let's start by creating a new document in Photoshop , in which we can design our website template. Добре, нека да започнем със създаване на нов документ в Photoshop, в които можем да проектираме нашия шаблон на сайт. I've used a document sized 960 x 1100 pixels, since most people browsing a clan website won't really be using the 800 x 600 resolution. Ползвал съм един документ с размери 960 x 1100 пиксела, тъй като повечето хора търсят клан сайт не наистина ще се използват 800 х 600 резолюция. After creating your document, fill the background with a nice mid-grey color, (in this case I used #6c6c6c ). След създаването на вашия документ, запълване на фон с хубав средата на сив цвят, (в този случай аз използвам # 6c6c6c).
After filling your background with a solid color, you can give it a bit of texture by applying a pattern of some sort, or simply applying Filter > Noise > Add Noise with an amount of about 2.0 . След като попълните фон с плътен цвят, можете да му се даде малко текстура чрез прилагане на модела на някакъв вид, или просто прилагане на Filter> Noise> Add Noise със сума от около 2.0.
View a small article I wrote about pattern resources here . Вижте по-малка статия писах за модела ресурси тук .
2. 2. Design the Header/Banner Дизайн на горен / банер
Alright, now we need to make a header. Добре, сега ние трябва да се направи заглавието. Start by finding a screenshot or some renders from the game your clan plays, or if you're just designing this for the sake of … designing, then how about you just use this wallpaper of Command and Conquer 3 Tiberium Wars . Започнете с намирането на екрана или някой прави от играта си клан играе, или ако сте просто проектирането това в името на ... проектиране, след това какво ще кажеш просто използвайте този тапет на управление и Conquer 3 Tiberium Wars . Copy the wallpaper onto your canvas and crop it to a suitable banner size. Копирайте тапет на вашия платно и култура да се избере подходящ размер банер. I also made the corners for my banner rounded. Аз също направи ъгли за моя банер заоблени.
In the above image you may notice that it looks like I've touched the image up a little bit, well, I did. В изображението по-горе можете да забележите, че тя изглежда, че съм се допря до изображението се малко, добре, аз го направих. You can too by using the Burn Tool to darken up a few areas, then the Blur Tool to blur some of the background action. Можете също с помощта на Burn Tool да потъмнее до няколко области, а след това на Blur инструмента за размазване на фона на някои действия.
I finished up the banner by adding in some grunge brushing to give nice detail. Завърших се на банера, като добавите в някои гръндж четка да даде хубав детайл. You can download the grunge brushes that I used from Misprinted Type . Можете да изтеглите гръндж четки, че аз бях от печатна грешка Тип . When adding in your grunge brushing, use very dark brown colors that you can sample from the wallpaper you've used for the banner. При добавяне в гръндж четка, използвайте много тъмно кафяви цветове, които можете да опитате от тапета, които сте използвали за знаме.
(click for larger) (Кликнете за по-големи)
Let's finish up with the header by adding in your clan name/description/slogan/whatever. Нека да завърша с горния, като добавите в своя клан име / описание / слоган / нещо такова. Start by getting out the Horizontal Type Tool (the regular text tool, of course) then writing out your clan name in a size about 30 pt , then write out what your clan is, or your description underneath. Започнете с излизане на Horizontal Type Tool (редовните инструмент текст, разбира се), след това оформяне на своя клан име в размер на около 30 пункта, след това да напишете какви са вашите клан е или описанието отдолу. This is what I managed to get using the font Myriad Pro : Това е, което аз успях да се използва шрифта Myriad Pro:
Need free fonts? Нуждаете се от безплатни шрифтове? Try UrbanFonts.com . Опитайте UrbanFonts.com . Looking good so far, but the text isn't very easily readable. Да изглеждате добре досега, но текстът не е много лесно за четене. You can fix this problem by doing a little bit of soft brushing on a layer underneath the text layer. Можете да решите този проблем, като направите малка мека четка върху слой под слоя с текста. I used a couple of dark browns, with varying opacities. Използвах няколко тъмно кафяви, с различна помътняване.
Alright, we're pretty much done for the header, what do you think? Добре, ние сме доста много работа за горния, какво мислите? Feel free to add in some extras if you can think of any! Чувствайте се свободни да добавите в някои екстри, ако можеш да се сетиш за всички!
3. 3. Navigation Bar & Buttons Навигационната лента и бутони
Start by making a new layer. Започнете като направите нов слой. Now find and get out the Rounded Rectangle Tool , it's with the Custom Shape Tool somewhere. Сега намери и да излезе на Rounded Rectangle Tool, това е с Custom Shape Tool някъде.
Set up the settings for this tool as shown below: Създаване на настройките за този инструмент, както е показано по-долу:
Now, in your new layer, draw a rounded rectangle onto your canvas, this will be the main navigation bar. Сега, в новия си слой, начертайте правоъгълник със заоблени краища на вашия платно, това ще бъде основната лента за навигация. If you need to you can use the Rounded Rectangle Tool to clean up the bar a little bit, such as if you need to make it wider or thinner. Ако трябва да можете да използвате Rounded Rectangle Tool за почистване на лентата малко, като, ако трябва да правят по-широк и по-малък.
Now, you need to lock the transparent pixels for your navigation bar – you can do this in the layer's palette, don't worry, there's a screenshot below Сега, вие трябва да заключите прозрачни пиксели за навигация бар - можете да го направите в слоя палитра на, не се притеснявай, има снимката по-долу
After locking the transparent pixels, get out the gradient tool and set it to a very dark gradient (colors used: #131212 & #3c3c42 ), after getting your gradient ready, you can drag the gradient inside of your navigation bar and it will only fill the pixels. След заключване на прозрачни пиксели, излез на Gradient Tool и го нагласете на много тъмен градиент (цвят: # 131212 & # 3c3c42), след получаване на вашия наклон готови, можете да плъзнете наклон вътрешната страна на лентата за навигация и това ще е само запълване на пиксела. You can unlock your layer now. Можете да отключите слоя сега. 
After all of this, it's time to apply some layer styles to the navigation bar. След всичко това, че е време да се прилагат някои слой стилове на лентата за навигация. I used the following: Аз бях на следното:
- Inner Shadow Inner Shadow
- Bevel and Emboss Bevel и Emboss
- Bevel and Emboss — Contour Bevel и Emboss В € "Contour
- Pattern Overlay ( download X pattern ) Наслагване на шарки ( изтегляне X модел )
Your navigation bar should now look pretty much like this: Вашата лента за навигация трябва да изглежда почти като този:
Looking good, but could do with a few nice touchups. Да изглеждате добре, но може да направи с няколко приятни touchups. Start by creating a new layer, then selecting your navigation bar pixels (hold ctrl and click the layer's thumbnail) after selecting the navigation bar, contract the selection by one pixel. Започнете със създаване на нов слой, след това изберете лентата с пиксела навигация (Задръжте Ctrl и кликнете на слоя на картинка), след като изберете лентата за навигация, договор за подбор с по един пиксел. After doing this, draw a white to transparent gradient inside of the selection. След като направите това, начертайте бял към прозрачен градиент вътрешността на избор.
Change the layer mode for this layer to either Overlay or Soft Light , and you might need to lower the opacity, depending on how strong your gradient was. Промяна на слой режим на този слой на Overlay или Soft Light или, и може да се наложи да намали коефициента на непрозрачност, в зависимост от вашето силно Градиентът бе.
Again, select your main navigation bar, but this time you don't need to contract the selection. Отново изберете основния си лента за навигация, но този път не е нужно да се свърже с избора. In a new layer, draw white to transparent gradient from the top to the bottom of your selection. В нов слой, да бяло към прозрачно градиент от върха до дъното на своя избор. Now, cut your gradient in half (my navigation bar was 46 pixels in height, so I cut the bottom 23 pixels off) Сега, намалете наклон на половина (моята навигация бар е 46 пиксела на височина, така че намаляване на долната 23 пиксела разстояние)
Again with the layer modes/opacities! Отново със слой режими / помътняване! I changed the layer mode for this layer to Soft Light and lowered the opacity to 20-40% . Промених слой режим на този слой на Soft Light и намали непрозрачността на 20-40%. Alright, the navigation bar is complete, now it's time for some buttons. Добре, лентата за навигация е пълна, сега е време за някои бутони.
Get the Rounded Rectangle Tool out again and make a smaller, button-sized shape (be sure you're on a new layer!) Вземете Rounded Rectangle Tool отново и да направи по-малки, големи бутони форма (уверете се, че на нов слой!)
Looking pretty good so far, time for some layer styles…again! Търсите доста добър досега, време за някои слой стилове ... отново! Apply the following layer styles to your new button layer: Приложете следните стилове слой на вашия нов бутон слой:
- Inner Shadow Inner Shadow
- Outer Glow Outer Glow
- Inner Glow Inner Glow
- Bevel and Emboss Bevel и Emboss
- Gradient Overlay Gradient Overlay
- Pattern Overlay ( download warning tape pattern ) Наслагване на шарки ( изтегляне предупреждение модел лента )
And now your button should look pretty much like this one: И сега си бутон трябва да изглежда почти като този:
Pretty nice, eh? Доста добре, нали?
You can finish this step off by simply adding text to the button, duplicating both layers and moving them overlay, etc. Можете да завършите тази стъпка, на разстояние само чрез добавяне на текст към бутона, размножителни двата слоя и се движат им слой и т.н. 
The font I've used in the above image is a free font called “PF Ronda Seven”, and you can download it for free from DaFont . Шрифтът Ползвал съм в изображението по-горе е безплатен шрифт, наречен "PF Ронда Седем", и можете да го изтеглите безплатно от DaFont . I also applied this Outer Glow to each of the text layers. Аз също прилага този Outer Glow на всеки от текста слоеве.
View the complete design so far . Преглед на цялостния дизайн до момента .
4. 4. Categories/Sidebar Section Категории / лента раздел
Before we do the categories/sidebar section, add in 'Home > Recent News' underneath the navigation bar, using a font such as Tahoma or Arial , and a really small size ( 11 pt ), this is what I came up with: Преди да направите категории / лента раздел, добавете в "Начало Новини> Последни" под лентата за навигация, като се използва шрифт като Tahoma или Arial, а много малки размери (11 PT), това е, което ми хрумна:
Alright, now it's time to make the categories section. Добре, сега е време да се направят категории раздел. For this you can either just remake the navigation bar, but this time make it shorter in width (200 pixels) or you can duplicate the original navigation bar layers and just cut them down. За това можете или просто римейк на лента за навигация, но този път го скъсяват с ширина (200 пиксела) или да дублира първоначалния слоеве навигационна лента и просто да ги изсече. It would probably be best if you just created another bar using the Rounded Rectangle Tool , then copied all of the layer styles and effects over. Това вероятно ще бъде най-добре, ако току-що създадената друг бар помощта на Rounded Rectangle Tool, след това се копират всички слой стилове и ефекти върху.
You want to come up with something like this: Искаш ли да измисли нещо като това:
After making the bar, you want to make a container kind of area for the links and stuff, so duplicate your main bar layer, move it underneath the layer then fill it with black. След като на лента, която искате да направите контейнер на площи за връзките и неща, така че два екземпляра вашия основен слой бар, тя се премести под слоя след това я запълнете с черно. Move your duplicate layer down about 160 pixels or so, then stretch it upwards, as shown in the below image. Преместване на дубликат слой надолу около 160 пиксела, или така, след това опъвам нагоре, както е показано на следващата снимка.
Hopefully the above image explained to you what you need to do to make our categories container area. Надяваме се на по-горе снимка да ви обясни какво трябва да направя, за да направим нашите категории област контейнер. If not, I'm sorry I couldn't explain it any better, but if you have any questions please feel free to leave a comment! Ако не, съжалявам, не мога да го обясня по-добре, но ако имате някакви въпроси, моля не се колебайте да оставите коментар!
After making your container area, lower the opacity for the layer to about 20% . След като направите контейнер площ, по-ниски непрозрачността на слоя на около 20%.
Now it's time to populate your categories container with … well, categories. Сега е време да попълните своите категории контейнер с ... добре, категории. I simply copied/pasted the categories from my website here, but you might want to do something else with this sidebar section. Аз просто копиран / поставили категории от моя сайт тук, но може да искате да направите нещо друго с тази лента раздел.
What you'll want to do now is duplicate all of these layers, move them down and simply change the text layers. Това, което вие ще искате да направите сега е дубликат на всички тези слоеве, да ги придвижи надолу и просто да промените текста слоеве. Some good examples are: Sponsors; Recent Matches; Member List. Някои добри примери за това са: Спонсори; последните мачове, като държавите-списък.
View the complete design so far . Преглед на цялостния дизайн до момента .
5. 5. Content/News Updates Area Съдържание / Новини актуализации пространство
For the news/content area, you could simply copy the navigation bar or sidebar section over and change a few things around (stretch to fit), which you can do if you want, but I think the updates area needs a little bit more distinction from the rest of the template. За новини / съдържание на площ, може просто да копирате лентата за навигация или раздел лента отново и да промените някои неща наоколо (участък да се поберат), което можете да направите, ако искате, но аз мисля, че актуализации област трябва малко повече разграничение от останалата част на шаблона.
I did end up duplicating the sidebar section and moving it over, I then stretched it to the correct size and changed a few layer styles to make it look a little bit different. Направих в крайна сметка да дублира лента точка и се движат повече, аз след това го удължи до правилния размер и да се промени няколко стилове слой, за да изглежда малко по-различно.
- Bevel and Emboss size: from 8 to 11 . Bevel и Emboss размер от 8 до 11.
- Pattern Overlay opacity: from 10 to 20 . Наслагване на шарки непрозрачност: от 10 до 20.
You want to come up with something like this: Искаш ли да измисли нещо като това:
(click for fullsize) (Кликнете за пълен размер)
The font I've used in the above image is Arial , size 18 pt . Шрифтът Ползвал съм в изображението по-горе е Arial, размер 18 т. You might want to use something a bit bigger than this, maybe even a different font (try Georgia) Може би искате да използвате нещо малко по-големи от това, може би дори и с различен шрифт (опитайте Грузия)
Fill out your updates area with some dummy text. Попълнете вашите актуализации област с някои сляпо текст. Go to www.lipsum.com for the official 'lorem ipsum' dummy text. Към www.lipsum.com за сляпо текст "Lorem Ipsum" на длъжностно лице.
I just thought of this actually, you could also add a little bit of grunge to each of your heading bars, it would be a nice touch. Аз просто мислех, че на този действително, можете да добавите и малко гръндж на всяка Ваша позиция барове, че би било хубаво докосване.
6. 6. Finishing the Design Покритие на проект
Well, to finish up this design, I think you'll need to make a footer area, and just generally touch up the rest of the template, add in some extra features if you can think of anything, but you've pretty much done with the general/basic design. Е, до края на този дизайн, аз мисля, че ще трябва да се направи област долен, и просто обикновено докосване до останалата част на шаблон, се добавят в някои допълнителни функции, ако можеш да мислиш за нещо, но вие сте доста много работа с общ / основни дизайн.
Maybe add some Google Ads into your design? Може би някои добавите реклами от Google в своя дизайн?
Probably not the best practise for a clan website template. Може би не най-добрата практика за шаблон клан уебсайт. 
Извинявам се за лошия превод.
Last edited:
