NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
Digital portfolio 2 navigation, html, blog, logo
1. Participatory news
“Then we [you, the reader, and I, the author] come together to make
this book, to feel this experience.”
“Writing and reading are not that distinct for the writer..”
-Conversations with Toni Morrison
For news curation, one of many ways to success is to personalize the
news and include reactions that would entail more reactions.
2. • We will finish MUSE exercise today.
By next Tuesday, create tumblr account.
• Send the links to me via email.
• Tutorial video.
<Create tumblr and embed into Muse>
https://www.youtube.com/watch?v=gXV5Zapn8cE
3. Examples of draft layout in drawing.
• http://www.radiatedigital.com/the-web-design-process-from-first-
concept-to-final-draft/
• http://www.yourinspirationweb.com/en/how-to-present-the-draft-
to-the-client-tips-and-examples/
• http://www.wikihow.com/Create-Your-First-Website
4. Continue with Muse: Working with Text
• Import and place text. Your bio, for example.
1. Let’s give it a title. New color, size.
2. Change track and leading of the body.
3. Select font.
Standard font
Select from Type kits: New set, Cubano sharp and so on.
Select from Edge font
Explore Self hosted font.
5. Set a style so that you don’t have to do the
work over and again.
• Use paragraph style
Set up a heading style
Set up a body style.
6. Adding Navigation
• Go to widget library. Names are synchronized
• Get subpage by clicking All page. Adjust other options
• Change text, color of menu boxes.
(Select a box. Make sure edit together is checked.
Go to Fill at the top and select a color)
• Try menu with texts only.
(Go to Fill at the top and select no color)
• Change the states. Window>states, make sure you have edit together checked.
-Normal
-Rollover
-Mouse down
*Study other websites and learn them.
7. Add navigation (menu) in three formats.
1. Navigation with texts only.
Select a box. Make sure edit together is checked.
Go to Fill at the top and select no color.
Adjust the font and color of your page names.
2. Navigation with boxes.
Select a box. Make sure edit together is checked.
Go to Fill at the top and select a color.
Adjust the font and color of your page names.
3. Navigation with other shapes.
Create a shape first. And then add navigation with no color.
9. Inserting shapes
A.Setting and deleting guides.
B.Adding background image.
•-browser fill
•-add image
•-Scale to fill
•-Position
•-Scroll checked
10. Other changes
Rectangle: Drag. Round up. Other shapes should be created outside.
•*Corner radius
Color
•-Fill: Solid/Gradient, Opacity, Color, Add image
•Gradient: Two colors, Focal point, direction, Size
•-Stroke: weight, center, outside, inside
Stacking objects
•-select and right click, arrange, send backward/bring to front
•-In panel use layers.
Aligning objects.
Add effects.
11. Format contact page.
• Use widget library
• Drag simple forms and place
• For additional change on the page, watch tutorial.
• https://helpx.adobe.com/muse/how-to/muse-create-simple-
form.html
12. Slideshow using widgets
• Open widget library> slideshow
• Click, drag and drop thumbnail.
• Click blue arrow
• Add image
• Adjust the size of thumbnail
• Unclick counter, previous and next.
• Adjust captions
• Select text and type in text
• Test in preview mode.
13. Link to your document (resume)
• Use Hyperlink to the online material or other pages.
-Select the texts.
-On the upper right corner select hyperlink.
-type in URL.
• Or embed the PDF document itself to the webpage.
-You can use online PDF embedder.
-Scribd.com
-Get the embed code.
-Drag and place it on the webpage.
14. You can also upload files directly to MUSE
• 1. Add this PDF file to assets folder of Muse from File > Add file for Upload.
• 2. Muse will take you to the windows explorer or finder and you need to
find the PDF file and select it.
• 3. Once the file is selected you will be able to see it in Assets panel. You can
enable assets panel from Windows > Assets
• 4. Now create a rectangle or text box on which you want the visitor to click.
• 5. Select that rectangle or text box and open hyperlink tab and select the
file below the file section of the dropdown.
• 6. Upload the entire website to your host.
• 7. Test it.
15. Different types of resume page.
• 1. Typing and linking
• http://www.lamivo.com/resume.html
• 2. Screen capture and download
• http://www.megangtalley.com/resume.html
• 3. Make it into subpages
• http://mattwyatt.org/cv/professional-experience/
• 4. Designed interactive page
• http://maceykateherges.wix.com/maceykateherges#!resume/c16wr
16. Get other things you want in the front page
or all the pages.
• Twitter feed.
• Social media buttons
-try using widgets.
-try using Photoshop. You can draw them yourself.
Or, You can use free websites for icons.
https://colorlib.com/wp/free-flat-social-media-icons-sets/
Or
http://www.dreamstale.com/free-download-72-vector-social-media-
icons/
17. Logo with photoshop
• Basic logo with texts.
“Simple logo”
http://www.genesisclub.training/1682/how-to-make-a-text-logo-in-
photoshop/
18. Other simple versions with photoshop
http://webriti.com/how-to-make-simple-logos-using-adobe-
photoshop-cs3/
http://www.makeuseof.com/tag/how-to-create-a-simple-blog-logo-in-
photoshop/
20. 30 examples of logo tutorials
• http://designscrazed.org/photoshop-logo-design-tutorials/
• Step by step.
Step 1
• Open a new Photoshop file that is 8 by 10 wide with high image resolution settings (300 dpi or higher).
Although you will rarely use a logo this size, quality is retained when shrinking. You can not enlarge small
files without losing quality.
Step 2
• Select the Text Tool from the left palette designated with a "T" in the box. Center the cursor and type in the
company name. Adjust the fonts through the font palette that appears in the upper right corner with the
Text Tool to play with font types, sizes and colors until you are happy with the way the company name looks.
Step 3
• Create a new layer by selecting "New Layer" from the drop-down menu along the top of the program. You
will want to create a new layer for each step; this gives you the ability to move or change certain elements
while keeping others. Keep track of layers in the box on the lower right side of the screen--the bold item is
the layer you are working on with any item that has an "eye" icon next to it is seen on the screen.
21. Step 4
• Type a title for your logo in the new layer using the Text Tool once
again. Use the font palette to change the font, length and height--for
example, stretching the title.
Step 5
• Import any graphic designs or pictures you have royalty free rights to
and want to use in the logo. You can find images from stock footage
libraries or clip art files. If you have no artwork yet, you can "draw" it
into a new layer using any of the following tools: Pencil, Shape or
Paintbrush.
22. Step 6
• Move elements from each layer around on the logo by clicking on the layer
menu on the lower right and selecting the layer you want to work on. You
can link layers by clicking on the box under the chain link icon or only view
the layer you are working on by clicking on the eye icon to remove it from
view.
Step 7
• Add effects, such as bevels, shadows, or color gradients. Use the Effects tab
on the drop-down menu at the top of the screen to choose the effects you
want to try. A preview will be given before the change is made
permanently.
Step 8
• Save your file as a *.psd and a*.jpg . The *.psd is your original Photoshop
file with all layers; keep this so you can make changes at a later point if you
want to. The *.jpg is a combined file with all element layers combined into
one making it a smaller file easier to email to print shops.