一文帶你掌握網站建設、APP設計以及Logo和圖標生成

• 網站建設
• • 服務器
  • • USBwebserver簡介
    • USBwebserver使用方法
  • 程序
  • • WordPress簡介
  • 域名
• APP設計
• • APP開發
  • APP原型設計
  • 了解MockPlus
  • 使用Mockplus進行APP原型設計
• LOGO和圖標
• • ｐｈｏｔｏｓｈｏｐ使用
  • • 純文字的LOGO設計
    • 純圖形的ＬＯＧＯ設計
    • 將文字和形狀混合

前言：本文所需所有軟件均已打包上傳至我的資源，也可以去官網下載。

網站建設

網站 = 服務器 + 程序 +域名

服務器

有條件可以到阿里云官網租賃服務器，本次實驗我選擇在本地搭建服務器。一來方便網站編輯調試，二來不需要花費太多錢。那么開始吧！

本地搭建服務器所需軟件：

• phpstudy
• USBwebserver

這兩個工具的作用都是建站軟件，可以快速搭建本地PHP環境。我選擇使用USBwebserver來搭建本地環境。

USBwebserver簡介

USBWebserver 是一款非常簡單實用的 本地PHP環境搭建工具，無需安裝，只需雙擊運行，5秒鐘，一個包含 Apache,MySQL, Php 和 PhpMyAdmin的本地PHP環境就誕生啦！更為神奇的是，你還可以將它放在你的U盤或CD中，照樣可以正常使用，因為 USBWebserver是不需要安裝的綠色軟件哦！

USBwebserver使用方法

解壓USBwebserver壓縮包

打開解壓后的文件夾，找到exe結尾的可執行程序雙擊打開

注意：必須要是綠色的對勾計算機才能變成本地網站服務器

修改文件名（為了不與后面Wordpress里面的文件名起沖突）

將WordPress壓縮包里的文件導入到服務器根目錄（WordPress后面有介紹，這里按步驟進行即可）

點擊localhost啟動網站界面

進入界面（第一次進入需要進行配置，后面就不需要）：







到此，網站啟動完成

在儀表盤中新建一個分類目錄


可以再新建幾個目錄，寫文章的時候可以分門別類的進行保存。

將上傳文件大小的限制改動
打開配置文件所在位置：


點擊文件進行配置：


記得保存！！！ 重啟服務器配置才能生效。

頁面設置
WordPress除了提供博客的文件管理，還可以新建頁面：


編寫好了以后點擊右側更新即可保存。要想看到本次編寫的頁面，還需要進行下一步。

菜單設置
點擊菜單欄：



點擊查看站點：

網站主題自定義

安裝插件實現其他功能
現在的網站太過單調，只能發布文章或新建頁面，我們需要更多的功能可以安裝插件：

但是這些插件都需要“梯子”才能安裝，因此你可以在國內下載插件壓縮包上傳至網站，這樣也可以使用。

進入后臺中心的網址：http://localhost:8080/wp-admin

程序

使用到的工具：WordPress

WordPress簡介

WordPress是一個以PHP和MySQL為平臺的自由開源的博客軟件和內容管理系統，具有插件架構和模板系統。

域名

服務器的名字用于代替難記的IP地址。由于本次網站搭建是在本地進行，所以用不到域名，可跳過這一環節。

APP設計

APP開發

要想實現APP開發你需要過硬的專業知識，但是今天我們不是去實現APP開發，所以這一小節了解就行。

蘋果APP開發：

需要集成開發環境：Xcode 掌握編程語言：Swift

安卓APP開發：

集成開發環境：Android Studio 掌握編程語言：Java

APP原型設計

原型設計就是快速做個APP的樣式，可以點擊、滑動頁面不過沒有什么實質性的功能。

原型設計軟件有：

Adobe XD Mockplus(國產之光)，本次學習的就是這個軟件

了解MockPlus

進入MockPlus官網，點擊設計資源——項目例子：


可以看到有許多APP的例子，隨便點擊一個進行預覽：

點擊在線預覽：

可以進行仿真操作：

官網上有很多教程：

使用Mockplus進行APP原型設計

點擊產品——下載經典版——安裝：

注冊完成后，點擊新建項目：


點擊創建

一般APP頁面開始都是一個歡迎頁面，那我們就開始設置歡迎頁面：
重命名：

添加圖片：

新建頁面做登錄頁面：

至此，登錄頁面設置完成

資訊頁面：

預覽：

點擊：

在進行完善資訊頁面之前，先完成商品頁面的第一步
完成商品頁面第一步后，切換回資訊頁面繼續操作：

至此，資訊頁面完成了！！！

商品頁面：

克隆頁面：

文字也可以這樣進行處理。

OK，到目前為止，頁面已經完成渲染，現在需要一個功能：即頁面與頁面之間有關聯：

進入啟動頁面2s后自動跳轉到登錄頁面：

點擊登陸頁面的逛逛進入到資訊頁面：

資訊頁面與商店頁面的交互：

點擊頁面流程圖進行觀看：

到此，APP設計就完成啦?🧡?，當然這個APP還有一些模塊沒有實現，大家可以依據官網案例進行補充ヾ(≧▽≦*)o

補充：
完善頁面：

完成的功能是點擊頂部資訊文字后會自動跳轉到頂部

LOGO和圖標

LOGO主要有三類：
文字類：

圖形類：

組合類：

設計軟件：

Adobe Photoshop:本次設計ＬＯＧＯ使用的軟件 Adobe llustrator CoreIDRAW

ｐｈｏｔｏｓｈｏｐ使用

純文字的LOGO設計

步驟如下：

保存LOGO：

純圖形的ＬＯＧＯ設計

當然，我們可以看到Photoshop里面自定義形狀很少而且很老，我們可以去網上下載一些別人設計喊得形狀來滿足我們的需求。我們可以去：ps筆刷吧官網來找一些我們滿意的形狀。

點擊下載到本地即可。

如圖操作即可使用。

將文字和形狀混合

將文字和圖像混合的LOGO千變萬化，掌握上面的方法后你可以根據自己喜歡設計LOGO。

本文結尾：OK，看到這里就意味著已經到了本文的末尾，希望本文能給你帶來幫助！！！

總結

以上是生活随笔為你收集整理的手把手教你掌握网站建设、APP设计以及Logo和图标生成的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。